Dark theme for Standard Notes
May 6, 2017•1,517 words
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
:root
{
/* FONTS */
--overall-font-family: 'Roboto';
--overall-font-size: 14px;
--overall-font-color: #cccccc;
/* Header fonts */
--h1-font-size: 32px;
--h1-font-color: #cccccc;
--h2-font-size: 26px;
--h2-font-color: #cccccc;
--h3-font-size: 22px;
--h3-font-color: #cccccc;
--h4-font-size: 18px;
--h4-font-color: #cccccc;
/* SECTION DIVIDER (Sort, Menu and Editor) */
--section-tag-bg-color: #121212;
--section-tag-border-size: 1px;
--section-tag-border-color: #000000;
--section-tag-font-size: 10px;
--sectiont-tag-font-color: #cccccc; /* Color for dropdown menu font */
--section-tag-text-transform: capitalize;
--section-bg-color: #080808;
--section-border-size: 1px;
--section-border-color: #000000;
--section-font-size: 10px;
--section-font-color: #cccccc; /* Color for dropdown menu font */
--section-text-transform: capitalize;
/* Dropdown-menu */
--dropmenu-head-bg-color: #080808;
--dropmenu-bg-color: #121212;
--dropmenu-font-color: #cccccc;
--dropmenu-font-li-color: #f1f1f1;
--dropmenu-li-hover-color: #040404;
--dropmenu-font-editors-color: black;
/* Dropdown menu OPEN for extensions */
--dropmenu-editor-head-bg-color: #121212;
--dropmenu-editor-head-border-size: 1px;
--dropmenu-editor-head-border-color: #080808;
--dropmenu-editor-head-font-color: #cccccc;
--dropmenu-editor-ul-bg-color: #101010;
--dropmenu-editor-ul-hover-bg-color: #020202;
--dropmenu-editor-ul-border-size: 1px;
--dropmenu-editor-ul-border-color: black;
--dropmenu-editor-ul-font-color: #f1f1f1;
--dropmenu-editor-ul-a-font-color: #f1f1f1;
--dropmenu-editor-footer-bg-color: #121212;
--dropmenu-editor-footer-border-size: 1px;
--dropmenu-editor-footer-border-color: #080808;
/* PANEL (Account, Extensions, the boxes that open, not the footer) */
--panel-bg-color: #121212;
--panel-font-color: #fafafa;
/* Extensions background, the box */
--whitebg-bg-color: #080808;
--whitebg-font-color: #fafafa;
--whitebg-border-size: 2px;
--whitebg-border-color: #000000;
--whitebg-h1-a-size: 14px;
--whitebg-h1-a-color: #cccccc;
/* FOOTER */
--footer-bg-color: #080808;
--footer-a-font-color: #ccc;
/* FORMS */
--form-bg-color: #000000;
--form-border-size: 0px;
--form-border-color: #121212;
/* TAGS */
/* Title box (the one at the top) */
--tags-title-bg-color: #171717;
--tags-title-border-size: 30px;
--tags-title-font-size: 18px;
--tags-title-font-weight: normal;
--tags-title-font-color: #d9d9d9;
--tags-title-text-transform: uppercase;
/* Tags add button */
--tags-addBtn-bg-color: #080808;
--tags-addBtnHover-bg-color: #000000;
--tags-addBtn-height: 35px;
--tags-addBtn-width: 35px;
--tags-addBtn-margin-top: -8px;
--tags-addBtn-border-radius: 50%;
--tags-addBtn-font-size: 28px;
/* Tags area */
--tags-bg-color: #171717;
--tags-padding-size: 10px 5px 5px 10px;
--tags-font-size: 12px;
--tags-font-color: #a6a6a6;
--tags-font-style: normal;
/* Selected tag */
--tags-sel-bg-color: #020202;
--tags-sel-font-size: 12px;
/* Tags links (rename and delete) */
--tags-link-font-size: 10px;
--tags-link-font-color: gray;
--tags-link-font-style: normal;
/* NOTES */
/* Title box (the one at the top) */
--notes-title-bg-color: #0f0f0f;
--notes-title-font-size: 18px;
--notes-title-font-color: #cccccc;
--notes-title-text-transform: uppercase;
/* Notes add button */
--notes-addBtn-bg-color: #080808;
--notes-addBtnHover-bg-color: #000000;
--notes-addBtn-height: 35px;
--notes-addBtn-width: 35px;
--notes-addBtn-margin-top: -6px;
--notes-addBtn-border-radius: 50%;
--notes-addBtn-font-size: 28px;
/* Notes filter */
--notes-filter-bg-color: #000000;
--notes-filter-font-size: 18px;
--notes-filter-text-transform: capitalize;
/* Notes area */
--notes-bg-color: #0f0f0f;
--notes-sideborder-size: 0px;
--notes-sideborder-color: #0f0f0f;
/* Notes */
--notes-note-bg-color: #151515;
--notes-note-border-bottom-size: 1px;
--notes-note-border-bottom-color: #0a0a0a;
--notes-note-headline-font-size: 14px;
--notes-note-headline-font-color: #737373;
--notes-note-preview-font-size: 12px;
--notes-note-preview-font-color: #737373;
--notes-note-date-font-size: 10px;
--notes-note-date-font-color: #737373;
/* Selected Note */
--notes-sel-bg-color: #080808;
--notes-sel-borderleft-size: 3px;
--notes-sel-borderleft-color: #000000;
--notes-sel-headline-font-color: #f2f2f2;
/* EDITOR */
/* Titlebox */
--editor-title-bg-color: #080808;
--editor-title-padding-top: 10px;
--editor-title-headline-font-color: #cccccc;
--editor-title-headline-font-size: 24px;
--editor-title-headline-font-weight: normal;
--editor-title-tag-font-color: #5e5e5e;
--editor-title-tag-font-size: 14px;
--editor-title-tag-font-weight: normal;
/* Editor */
--editor-bg-color: #080808;
--editor-active-bg-color: #060606;
--editor-toolbar-bg-color: #080808;
--editor-toolbar-borderbottom-size: 1px;
--editor-toolbar-borderbottom-color: #000000;
--editor-toolbar-seperator-size: 1px;
--editor-toolbar-seperator-left-color: #ccc;
--editor-toolbar-seperator-right-color: #ccc;
--editor-toolbar-btn-border: 0px;
--editor-toolbar-btn-borderradius: 5px;
--editor-toolbar-a-bg-color: #080808;
--editor-toolbar-a-hover-bg-color: #020202;
--editor-toolbar-a-font-color: #cccccc;
/* Styles for text in-editor and active window */
--editor-code-bg-color: #101010;
--editor-link-font-color: #cccccc;
--editor-table-border-color: #171717;
--editor-table-collapse: collapse;
--editor-table-padding: 8px;
--editor-table-header-bg-color: #232323;
--editor-table-even-bg-color: #121212;
--editor-table-odd-bg-color: #171717;
}
body, p, ul, li, ol
{
font-family: var(--overall-font-family) !important;
font-size: var(--overall-font-size) !important;
color: var(--overall-font-color) !important;
}
code
{
font-family: var(--overall-font-family) !important;
font-size: var(--overall-font-size) !important;
color: var(--overall-font-color) !important;
}
table, th, td
{
border: 1px solid var(--editor-table-border-color) !important;
border-collapse: var(--editor-table-collapse) !important;
}
::-webkit-scrollbar
{
width: 8px !important;
}
/* Track */
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px transparent !important;
}
/* Handle */
::-webkit-scrollbar-thumb
{
background: #121212 !important;
-webkit-box-shadow: inset 0 0 4px transparent !important;
}
/* Sort, Menu, Editor */
/* Editor selection menu */
#tag-menu-bar.section-menu-bar
{
background-color: var(--section-tag-bg-color) !important;
color: var(--section-tag-font-color) !important;
border-top: var(--section-tag-border-size) solid var(--section-tag-border-color) !important;
border-bottom: var(--section-tag-border-size) solid var(--section-tag-border-color) !important;
text-transform: capitalize !important;
}
.section-menu-bar
{
background-color: var(--section-bg-color) !important;
color: var(--section-font-color) !important;
border-top: var(--section-border-size) solid var(--section-border-color) !important;
border-bottom: var(--section-border-size) solid var(--section-border-color) !important;
}
.section-menu-bar li:hover
{
background-color: var(--dropmenu-editor-ul-hover-bg-color) !important;
color: var(--section-font-color) !important;
}
.section-menu-bar li:selected
{
background-color: var(--dropmenu-editor-ul-hover-bg-color) !important;
color: var(--section-font-color) !important;
}
.sectioned-menu .header
{
background-color: var(--dropmenu-head-bg-color) !important;
border-bottom: var(--section-border-size) solid var(--section-border-color) !important;
font-size: var(--section-font-size) !important;
color: var(--dropmenu-font-color) !important;
}
.dropdown-menu
{
background-color: var(--dropmenu-editor-ul-bg-color) !important;
border-bottom: var(--dropmenu-editor-ul-border-size) solid var(--dropmenu-editor-ul-border-color) !important;
color: var(--dropmenu-editor-ul-font-color);
}
.menu-item
{
background-color: var(--dropmenu-editor-ul-bg-color) !important;
border-bottom: var(--dropmenu-editor-ul-border-size) solid var(--dropmenu-editor-ul-border-color) !important;
color: var(--dropmenu-editor-ul-font-color);
}
.menu-item:hover
{
background-color: var(--dropmenu-editor-ul-hover-bg-color) !important;
}
.dropdown-menu label
{
color: var(--dropmenu-editor-ul-font-color) !important;
}
.sectioned-menu .footer
{
background-color: var(--dropmenu-editor-footer-bg-color) !important;
border-top: var(--dropmenu-editor-footer-border-size) solid var(--dropmenu-editor-footer-border-color) !important;
border-bottom: var(--dropmenu-editor-footer-border-size) solid var(--dropmenu-editor-footer-border-color) !important;
}
.block .blue /* Link to more editors */
{
color: var(--dropmenu-font-editors-color) !important;
}
/* ACCUNT and EXTENSIONS background */
.panel
{
background-color: var(--panel-bg-color) !important;
color: var(--panel-font-color) !important;
}
/* Extensions background, the box */
.white-bg
{
background-color: var(--whitebg-bg-color) !important;
color: var(--whitebg-font-color) !important;
border: var(--whitebg-border-size) solid var(--whitebg-border-color) !important;
}
.white-bg a, .white-bg h1
{
font-size: var(--whitebg-h1-a-size) !important;
color: var(--whitebg-h1-a-color) !important;
}
/* WHAT IS THIS????? IS THIS PLAIN TEXT???? */
.gray-bg
{
background-color: #121212 !important;
color: var(--graybg-font-color) !important;
border: var(--graybg-border-size) solid var(graybg-border-color) !important;
}
/* FOOTER */
#footer-bar
{
background-color: var(--footer-bg-color) !important;
}
#footer-bar a
{
color: var(--footer-a-font-color) !important;
}
/* UI */
.form-control
{
background-color: var(--form-bg-color) !important;
border: var(--form-border-size) solid var(--form-border-color) !important;
}
/* TAGS */
.app .tags .content
{
background-color: var(--tags-bg-color) !important;
}
#tags-title-bar
{
background-color: var(--tags-title-bg-color) !important;
border-bottom: var(--tags-title-border-size) solid var(--tags-title-bg-color) !important;
font-size: var(--tags-title-font-size) !important;
font-weight: var(--tags-title-font-weight) !important;
color: var(--tags-title-font-color) !important;
text-transform: var(--tags-title-text-transform) !important;
}
#tags-title-bar .add-button
{
background-color: var(--tags-addBtn-bg-color) !important;
height: var(--tags-addBtn-height) !important;
width: var(--tags-addBtn-width) !important;
margin-top: var(--tags-addBtn-margin-top) !important;
border-radius: var(--tags-addBtn-border-radius) !important;
font-size: var(--tags-addBtn-font-size) !important;
}
#tags-title-bar .add-button:hover
{
background-color: var(--tags-addBtnHover-bg-color) !important;
height: var(--tags-addBtn-height) !important;
width: var(--tags-addBtn-width) !important;
margin-top: var(--tags-addBtn-margin-top) !important;
border-radius: var(--tags-addBtn-border-radius) !important;
font-size: var(--tags-addBtn-font-size) !important;
-webkit-transition: all ease-in-out 0.15s !important;
transition: all ease-in-out 0.15s !important;
}
.tags .tag
{
padding: var(--tags-padding-size) !important;
}
.tags .tag > .info > .title
{
font-size: var(--tags-font-size) !important;
color: var(--tags-font-color) !important;
font-style: var(--tags-font-style) !important;
}
.tags .tag > .info > .count
{
font-size: var(--tags-font-size) !important;
color: var(--tags-font-color) !important;
font-style: var(--tags-font-style) !important;
}
.tags .tag > .menu a
{
font-size: var(--tags-link-font-size) !important;
color: var(--tags-link-font-color) !important;
font-style: var(--tags-link-font-style) !important;
}
.tags .tag.selected
{
background-color: var(--tags-sel-bg-color) !important;
padding: var(--tags-padding-size) !important;
}
.tags .tag:hover:not(.selected)
{
background-color: var(--tags-sel-bg-color) !important;
padding: var(--tags-padding-size) !important;
-webkit-transition: all ease-in-out 0.1s !important;
transition: all ease-in-out 0.1s !important;
}
/* Notes */
.app .notes .content
{
background-color: var(--notes-bg-color) !important;
}
.notes
{
border-left: var(--notes-sideborder-size) solid var(--notes-sideborder-color) !important;
border-right: var(--notes-sideborder-size) solid var(--notes-sideborder-color) !important;
}
#notes-title-bar
{
background-color: var(--notes-title-bg-color) !important;
font-size: var(--notes-title-font-size) !important;
color: var(--notes-title-font-color) !important;
text-transform: var(--notes-title-text-transform) !important;
}
#notes-title-bar .add-button
{
background-color: var(--notes-addBtn-bg-color) !important;
height: var(--notes-addBtn-height) !important;
width: var(--notes-addBtn-width) !important;
margin-top: var(--notes-addBtn-margin-top) !important;
border-radius: var(--notes-addBtn-border-radius) !important;
font-size: var(--notes-addBtn-font-size) !important;
}
#notes-title-bar .add-button:hover
{
background-color: var(--notes-addBtnHover-bg-color) !important;
height: var(--notes-addBtn-height) !important;
width: var(--notes-addBtn-width) !important;
margin-top: var(--notes-addBtn-margin-top) !important;
border-radius: var(--notes-addBtn-border-radius) !important;
font-size: var(--notes-addBtn-font-size) !important;
-webkit-transition: all ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
transition: all ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
}
.notes .filter-section .filter-bar
{
background-color: var(--notes-filter-bg-color) !important;
font-size: var(--notes-filter-font-size) !important;
text-transform: var(--notes-filter-text-transform) !important;
}
.notes .note
{
background-color: var(--notes-note-bg-color) !important;
border-bottom: var(--notes-note-border-bottom-size) solid var(--notes-note-border-bottom-color) !important;
font-size: var(--notes-note-headline-font-size) !important;
color: var(--notes-note-headline-font-color) !important;
}
.notes .note .note-preview
{
font-size: var(--notes-note-preview-font-size) !important;
color: var(--notes-note-preview-font-color) !important;
}
.notes .note .date
{
font-size: var(--notes-note-date-font-size) !important;
color: var(--notes-note-date-font-color) !important;
}
.notes .note.selected
{
background-color: var(--notes-sel-bg-color) !important;
border-left: solid var(--notes-sel-borderleft-size) var(--notes-sel-borderleft-color) !important;
font-size: var(--notes-note-headline-font-size) !important;
color: var(--notes-sel-headline-font-color) !important;
}
.notes .note:hover
{
background-color: var(--notes-sel-bg-color) !important;
border-left: solid var(--notes-sel-borderleft-size) var(--notes-sel-borderleft-color) !important;
font-size: var(--notes-note-headline-font-size) !important;
color: var(--notes-sel-headline-font-color) !important;
-webkit-transition: all ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
transition: all ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
}
/* EDITOR */
#editor-title-bar
{
background-color: var(--editor-title-bg-color) !important;
padding-top: var(--editor-title-padding-top) !important;
}
#editor-title-bar > .title > .input
{
color: var(--editor-title-headline-font-color) !important;
font-size: var(--editor-title-headline-font-size) !important;
font-weight: var(--editor-title-headline-font-weight) !important;
}
#editor-title-bar .editor-tags .tags-input
{
color: var(--editor-title-tag-font-color) !important;
font-size: var(--editor-title-tag-font-size) !important;
font-weight: var(--editor-title-tag-font-weight) !important;
}
#editor-title-bar #save-status
{
color: var(--editor-title-tag-font-color) !important;
font-size: var(--editor-title-tag-font-size) !important;
font-weight: var(--editor-title-tag-font-weight) !important;
}
/* Plain text??????? */
.editor-content
{
background-color: var(--editor-bg-color) !important;
}
.editor-content .editable
{
background-color: var(--editor-bg-color) !important;
font-family: var(--overall-font-family) !important;
font-size: var(-overall-font-size) !important;
color: var(--overall-font-color) !important;
}
/***** EDITOR *****/
.CodeMirror
{
background-color: var(--editor-bg-color) !important;
font-family: var(--overall-font-family) !important;
font-size: var(--overall-font-size) !important;
color: var(--overall-font-color) !important;
border: 0px !important;
border-radius: 0px !important;
}
.CodeMirror-cursor
{
border-color: var(--overall-font-color);
}
.editor-toolbar
{
background-color: var(--editor-toolbar-bg-color) !important;
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
border-bottom: var(--editor-toolbar-borderbottom-size) solid var(--editor-toolbar-borderbottom-color) !important;
border-radius: 0px !important;
}
.editor-toolbar.fullscreen::before
{
background: none !important;
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
border-bottom: var(--editor-toolbar-borderbottom-size) solid var(--editor-toolbar-borderbottom-color) !important;
border-radius: 0px !important;
}
.editor-toolbar.fullscreen::after
{
background: none !important;
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
border-bottom: var(--editor-toolbar-borderbottom-size) solid var(--editor-toolbar-borderbottom-color) !important;
border-radius: 0px !important;
}
.editor-toolbar i.separator
{
border-left: var(--editor-toolbar-seperator-size) solid var(--editor-toolbar-seperator-left-color) !important;
border-right: var(--editor-toolbar-seperator-size) solid var(--editor-toolbar-seperator-right-color) !important;
}
.editor-toolbar a
{
background-color: var(--editor-toolbar-a-bg-color) !important;
border: var(--editor-toolbar-btn-border) !important;
border-radius: var(--editor-toolbar-btn-borderradius) !important;
color: var(--editor-toolbar-a-font-color) !important;
}
.editor-toolbar a:hover
{
background-color: var(--editor-toolbar-a-hover-bg-color) !important;
border: var(--editor-toolbar-btn-border) !important;
border-radius: var(--editor-toolbar-btn-borderradius) !important;
color: var(--editor-toolbar-a-font-color) !important;
}
.editor-preview-active-side
{
background-color: var(--editor-active-bg-color) !important;
border: 0px !important;
border-radius: 0px !important;
}
.editor-preview-active
{
background-color: var(--editor-active-bg-color) !important;
border: 0px !important;
border-radius: 0px !important;
}
.editor-preview pre, .editor-preview-side pre
{
background: var(--editor-code-bg-color) !important;
padding: 5px 2px 5px 2px !important;
}
a, a:hover, a:visited, .cm-link
{
color: var(--editor-link-font-color) !important;
}
h1, .cm-header-1
{
font-size: var(--h1-font-size) !important;
color: var(--h1-font-color) !important;
}
h2, .cm-header-2
{
font-size: var(--h2-font-size) !important;
color: var(--h2-font-color) !important;
}
h3, .cm-header-3
{
font-size: var(--h3-font-size) !important;
color: var(--h3-font-color) !important;
}
h4, .cm-header-4
{
font-size: var(--h4-font-size) !important;
color: var(--h4-font-color) !important;
}
.editor-preview-side img,
.editor-preview img
{
max-width: 100%;
height: auto;
width: auto; /* ie8 */
}
/* Tables */
.editor-preview-side table,
.editor-preview table
{
padding: var(--editor-table-padding) !important;
font-size: var(overall-font-size) !important;
}
.editor-preview-side th,
.editor-preview th
{
background-color: var(--editor-table-header-bg-color) !important;
}
.editor-preview-side tr:nth-child(even),
.editor-preview tr:nth-child(even)
{
background-color: var(--editor-table-even-bg-color) !important;
}
.editor-preview-side tr:nth-child(odd),
.editor-preview tr:nth-child(odd)
{
background-color: var(--editor-table-odd-bg-color) !important;
}