v1.0 Dark mode for Doc360 editor
Document360 Editor Dark Mode by jmhm
Details
Authorjmhm
LicenseNo License
Categoryhttps://portal.document360.io
Created
Updated
Size12 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name portal.document360.io/a298db04-a0fe-47e0-bfe3-c52d6f9d7c8c/document/v1/view/c39a8388-40f8-43ae-97f4-a7971e65d764/en/4
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document url-prefix("https://portal.document360.io/a298db04-a0fe-47e0-bfe3-c52d6f9d7c8c") {
:root {
--bs-body-bg: #18181b;
--bs-body-color: #e4e4e7;
--bs-link-color: #65c7ff;
--bs-link-hover-color: #20c997;
--bs-border-color: #51525c;
--bs-table-bg: #26272b;
--bs-table-color: #fff;
--bs-table-border-color: #51525c;
--bs-table-striped-bg: #3f3f46;
--bs-table-hover-bg: #51525c;
--bs-form-control-bg: #26272b;
--bs-form-control-color: #e4e4e7;
--bs-form-control-border-color: #51525c;
--bs-form-control-focus-bg: #3f3f46;
--bs-form-control-focus-border-color: #20c997;
}
body {
background-color: var(--bs-body-bg) !important;
color: var(--bs-body-color);
}
a {
color: var(--bs-link-color);
}
a:hover {
color: var(--bs-link-hover-color);
}
.table {
background-color: var(--bs-table-bg);
color: var(--bs-table-color);
border-color: var(--bs-table-border-color);
}
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: var(--bs-table-striped-bg);
}
.table-hover > tbody > tr:hover {
background-color: var(--bs-table-hover-bg);
}
.form-control {
background-color: var(--bs-form-control-bg);
color: var(--bs-form-control-color);
border-color: var(--bs-form-control-border-color);
}
.form-control:focus {
background-color: var(--bs-form-control-focus-bg);
border-color: var(--bs-form-control-focus-border-color);
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
color: #ddd;
/* Light text color for dark background */
background: #333;
/* Dark background */
}
.line-numbers .line-numbers-rows span:before {
color: #bbb;
/* Light line numbers */
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
background: #333;
color: #ddd;
}
pre[class*="language-"].line-numbers {
border-right: 1px solid #666;
}
.line-numbers .line-numbers-rows > span:before {
color: #666;
}
.tui-editor-defaultUI .te-editor-section {
background: #000;
}
.tui-editor-contents {
border-left: 4px solid #555;
color: #e0e0e0;
}
.tui-editor-contents blockquote {
border-left: 4px solid #555;
color: #ccc;
}
.tui-editor-contents pre {
background-color: #2e2e2e;
color: #ccc;
}
.tui-editor-contents code {
color: #ffcc99;
}
.tui-editor-contents table th {
background-color: #555;
color: #fff;
}
.tui-editor-contents table td {
border: 1px solid #444;
}
.tui-editor-contents a {
color: #66ccff;
}
.tui-editor-contents a:hover {
color: #0099ff;
}
.tui-editor-defaultUI-toolbar button {
background-color: #444;
color: #ddd;
}
.tui-editor-defaultUI-toolbar button:hover {
background-color: #555;
}
.tui-editor-defaultUI-toolbar button.active {
border: 1px solid #888;
}
.tui-editor-defaultUI-toolbar .tui-scrollsync.active {
color: #bbb;
}
.tui-editor-defaultUI .tui-editor-defaultUI-toolbar button:disabled {
opacity: 0.5;
}
.tui-editor-defaultUI .tui-editor-defaultUI-toolbar button:hover {
background-color: #555;
}
.tui-editor-defaultUI .tui-editor-defaultUI-toolbar button:disabled {
pointer-events: none;
opacity: 0.5;
}
.tui-editor-defaultUI .tui-editor-defaultUI-toolbar .tui-scrollsync.active {
color: #bbb;
}
.tui-editor-defaultUI .tui-editor-defaultUI-toolbar .tui-scrollsync:hover {
background: transparent;
}
.tui-editor-defaultUI .tui-editor-defaultUI-toolbar .tui-scrollsync.active {
color: #bbb;
}
.tui-editor-defaultUI .tui-editor-defaultUI-toolbar .tui-scrollsync:hover {
background: transparent;
}
.CodeMirror {
color: #e0e0e0 !important;
background: #1e1e1e;
}
.CodeMirror-gutters {
background-color: #2e2e2e;
border-right: 1px solid #444;
}
.CodeMirror-linenumber {
color: #888;
}
.CodeMirror-cursor {
border-left: 1px solid #e0e0e0;
}
.cm-fat-cursor .CodeMirror-cursor {
background: #7e7;
}
.cm-s-default .cm-header {
color: #9cdcfe;
}
.cm-s-default .cm-quote {
color: #d4d4d4;
}
.cm-negative {
color: #f44747;
}
.cm-positive {
color: #4ec9b0;
}
.cm-header,
.cm-strong {
font-weight: 700;
}
.cm-em {
font-style: italic;
}
.cm-link {
text-decoration: underline;
color: #569cd6;
}
.cm-strikethrough {
text-decoration: line-through;
}
.cm-s-default .cm-keyword {
color: #c586c0;
}
.cm-s-default .cm-atom {
color: #dcdcaa;
}
.cm-s-default .cm-number {
color: #b5cea8;
}
.cm-s-default .cm-def {
color: #9cdcfe;
}
.cm-s-default .cm-variable-2 {
color: #4ec9b0;
}
.cm-s-default .cm-variable-3,
.cm-s-default .cm-type {
color: #4ec9b0;
}
.cm-s-default .cm-comment {
color: #6a9955;
}
.cm-s-default .cm-string {
color: #ce9178;
}
.cm-s-default .cm-string-2 {
color: #d16969;
}
.cm-s-default .cm-meta,
.cm-s-default .cm-qualifier {
color: #d4d4d4;
}
.cm-s-default .cm-builtin {
color: #569cd6;
}
.cm-s-default .cm-bracket {
color: #d4d4d4;
}
.cm-s-default .cm-tag {
color: #569cd6;
}
.cm-s-default .cm-attribute {
color: #9cdcfe;
}
.cm-s-default .cm-hr {
color: #d4d4d4;
}
.cm-s-default .cm-link {
color: #569cd6;
}
.cm-s-default .cm-error,
.cm-invalidchar {
color: #f44747;
}
div.CodeMirror span.CodeMirror-matchingbracket {
color: #b5cea8;
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
color: #f44747;
}
.CodeMirror-activeline-background {
background: #2e2e2e;
}
.CodeMirror-selected {
background: #264f78;
}
.CodeMirror-focused .CodeMirror-selected {
background: #264f78;
}
.cm-searching {
background-color: rgba(255, 255, 0, 0.4);
}
/* Dark Mode Overrides */
.category-type-select .btn-primary {
border: #333 solid 1px;
color: #ccc;
}
.category-manager .category-name:hover,
.category-manager .sub-category-name:hover,
.category-manager .article-name:hover {
background-color: #569cd6;
color: #333 !important;
}
.document-lists .document-page-sidebar .categories-list-section a.ca-text:hover,
.api-doc-lists .document-page-sidebar .categories-list-section a.ca-text:hover,
.sub-category-name:hover a.ca-text{
color: #333 !important;
}
.document-lists .document-page-sidebar .categories-list-section a.ca-text,
.api-doc-lists .document-page-sidebar .categories-list-section a.ca-text {
color: #ccc;
}
.category-type-select .btn-primary .fo-text {
color: #ccc;
}
.category-type-select .btn-primary:not([disabled]):not(.disabled).active,
.category-type-select .btn-primary:not([disabled]):not(.disabled):active {
background-color: #444 !important;
}
.category-type-select .btn-primary:not([disabled]):not(.disabled).active .fo-text,
.category-type-select .btn-primary:not([disabled]):not(.disabled):active .fo-text {
color: #fff;
}
.category-type-select .btn-primary:not([disabled]):not(.disabled).active i,
.category-type-select .btn-primary:not([disabled]):not(.disabled):active i {
color: #fff;
}
.article-template-modal .select-article-template .article-template-left .template-list .templates-item:hover {
background-color: #555;
}
.article-template-modal .select-article-template .article-template-left .template-list .templates-item.active {
background-color: #666;
}
.article-template-modal .select-article-template .article-template-right {
border-left: #444 solid 1px;
}
.article-template-modal .select-article-template .article-template-right .template-content-preview {
color: #ccc;
}
.article-template-modal .select-article-template .article-template-right .template-content-preview h1,
.article-template-modal .select-article-template .article-template-right .template-content-preview h2,
.article-template-modal .select-article-template .article-template-right .template-content-preview h3,
.article-template-modal .select-article-template .article-template-right .template-content-preview h4,
.article-template-modal .select-article-template .article-template-right .template-content-preview h5,
.article-template-modal .select-article-template .article-template-right .template-content-preview h6 {
color: #fff;
}
.article-template-modal .select-article-template .article-template-right .template-content-preview table th {
background: #555;
color: #ccc;
}
.article-template-modal .select-article...