Created
September 5, 2019 07:11
-
-
Save STaRDoGG/70bc7807cfdb2a88a04dcad8474dbd07 to your computer and use it in GitHub Desktop.
Dark Nord Material Theme for WallaBag by J. Scott Elblein
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* A Dark Nord Material Theme for WallaBag - by J. SCOTT ELBLEIN ( https://geekdrop.com ) | |
| * | |
| * v1.0.0 | |
| * | |
| * This is based on the excellent Nord Theme color palette: https://www.nordtheme.com | |
| * | |
| * WallaBag theme based off of it's Material theme. Switch your Wallabag theme to it first. | |
| * | |
| * I've also included some of the other Nord palette colors in the comments where they all looked great to me & I couldn't really decide | |
| * which I truly liked best there, (but I wanted to keep it mostly dark), so I (or you) could easily swap around later at will. | |
| * | |
| */ | |
| /* [1] Following line is only required for Stylus/Stylish, to let it know where to enable the style */ | |
| @-moz-document regexp(".*/wallabag/web/.*") { | |
| .logo { background-color: #B48EAD; } /* Logo Backgounds: Other cool colors: 4C566A B48EAD A3BE8C BF616A */ | |
| .logo:hover { background-color: #3B4252 !important; } | |
| html { color: #D8DEE9; } /* Default font color */ | |
| body { background: #434C5E; } | |
| a { color: #81A1C1; } /* Links (cards): Other cool colors: 8FBCBB 88C0D0 BF616A D08770 EBCB8B A3BE8C B48EAD */ | |
| .select-wrapper span.caret { color: #4C566A; } | |
| .tooltipped { color: #4C566A; } | |
| /* Only seen on the API Docs page AFAICT */ | |
| h1 { color: #E5E9F0; } | |
| h5 { margin: 2rem 0 .656rem; color: #EBCB8B; } | |
| /* Overall text color */ | |
| .grey-text { color: #D8DEE9; color: rgba(216, 222, 233, .7) !important; } | |
| .nav { color: #ECEFF4; } | |
| /************** | |
| * Header Bar * | |
| **************/ | |
| .cyan, .cyan.darken-1 { background-color: #3B4252 !important; } | |
| /************ | |
| * Side Bar * | |
| ************/ | |
| .side-nav { background-color: #2E3440; } | |
| .side-nav li>a, .results .nb-results, .nav-panel-item .material-icons { color: #E5E9F0; } | |
| .side-nav li>a:hover, .side-nav .collapsible-header:hover, .side-nav.fixed .collapsible-header:hover { background-color: #3B4252; } /* Hover color */ | |
| .side-nav .collapsible-body, .side-nav.fixed .collapsible-body { background-color: #434C5E; } /* Backgound color for items like the Share item when expanded (i.e. Article Page) */ | |
| .border-bottom { border-bottom: 1px solid #3B4252; } | |
| .nav-panels { background-color: #3B4252; } | |
| /* Main content background */ | |
| #content { background-color: #434C5E; } | |
| /* Search field */ | |
| #search_entry_term { background-color: inherit !important; } | |
| /******** | |
| * Tabs * | |
| ********/ | |
| .tabs .tab a { color: #D8DEE9; } | |
| .tabs .tab a.active, .tabs .tab a:hover { color: #E5E9F0; } | |
| .tabs .indicator { background-color: #81A1C1; } | |
| /* Collection. i.e. on the Untagged Entries page */ | |
| .collection .collection-item, .card, .card-panel, .tabs { background-color: #2E3440; border-bottom: 1px solid #3B4252; } | |
| .collection { border: 1px solid #3B4252; border-radius: 4px; } /* Outer Border */ | |
| /* Results icons */ | |
| .results a { color: #81A1C1; } | |
| /**************************** | |
| * "Cards" a.k.a. Bookmarks * | |
| ****************************/ | |
| .card { background-color: #3B4252; } | |
| .data .card .card-body { background-color: #2E3440; border-radius: 5px 5px 0 0; } | |
| .card-stacked .preview, .card .card-fullimage .preview, .card .card-image .preview { background-color: #3B4252; border-radius: 5px 5px 0 0; } /* Card Placeholders: Other cool colors: 4C566A D8DEE9 B48EAD EBCB8B D08770 */ | |
| .card .card-content .card-title, .card .card-reveal .card-title { font-size: 1.2em; } | |
| .card-entry-labels li, .card-tag-labels li, .card-stacked div.metadata .chip { background-color: #BF616A; } /* Tag Backgounds: Other cool colors: B48EAD A3BE8C EBCB8B D08770 */ | |
| #list .chip a, .card-entry-labels-hidden a, .card-entry-labels a, .card-entry-tags a, .card-tag-labels a { color: #ECEFF4; } | |
| .card .card-action:last-child { border-radius: 0 0 5px 5px; } | |
| .card, .card-panel { border-radius: 5px; } | |
| .grey-text.text-darken-4 { color: #4C566A !important; } /* Ellipses */ | |
| .card .card-reveal { background-color: #3B4252; } /* After clicking the Ellipses */ | |
| .card .card-entry-labels-hidden li { background-color: #BF616A; color: inherit; } /* Tag backgrounds on the reveal card */ | |
| .pagination .active span { color: #D8DEE9; } | |
| .pagination li.active { background-color: #81A1C1; } | |
| .pagination li a { color: #81A1C1; font-size: 0.9rem; } /* Page numbers */ | |
| .pagination .disabled { color: #D8DEE9; } /* Page number ellipses */ | |
| input:not([type]), input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea.materialize-textarea, .select-wrapper input.select-dropdown { border-bottom: 1px solid #3B4252; } | |
| /* Regular buttons */ | |
| .btn, .btn-large { color: #ECEFF4; background-color: #5E81AC; } | |
| .btn-large:hover, .btn:hover { background-color: #81A1C1; } | |
| /************* | |
| * Tags Page * | |
| *************/ | |
| .card-tag-labels li { color: inherit; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2); } | |
| /*************** | |
| * Config Page * | |
| ***************/ | |
| .input-field label, div > label { color: #EBCB8B; } | |
| div > h6.grey-text { color: #EBCB8B !important; } | |
| /* Tagging Rules table */ | |
| thead { color: #EBCB8B; } | |
| table.bordered>tbody>tr, table.bordered>thead>tr { border-bottom: 1px solid #3B4252; } | |
| #set5 li { list-style-type: circle; padding-bottom: 1.2rem; } | |
| #set5 .grey-text { color: #81A1C1 !important; } | |
| #set5 .material-icons { float: left; padding-right: 1.8rem; } /* Move the icons to the left of each item. BUG: when an item is multiline the icons don't place themselves at the true beginning */ | |
| table.striped>tbody>tr>td { background-color: #434C5E; } | |
| .collapsible { | |
| border-top: 1px solid #4C566A; | |
| border-right: 1px solid #4C566A; | |
| border-left: 1px solid #4C566A; | |
| border-radius: 5px 5px 5px 5px; | |
| } | |
| .collapsible-header { background-color: #3B4252; border-bottom: 1px solid #434C5E; } | |
| .collapsible-body { background-color: #434C5E; border-bottom: 1px solid #434C5E; } | |
| /* The 'Focused' underline in text input areas */ | |
| input:not([type]):focus:not([readonly]), | |
| input[type=date]:focus:not([readonly]), | |
| input[type=datetime-local]:focus:not([readonly]), | |
| input[type=datetime]:focus:not([readonly]), | |
| input[type=email]:focus:not([readonly]), | |
| input[type=number]:focus:not([readonly]), | |
| input[type=password]:focus:not([readonly]), | |
| input[type=search]:focus:not([readonly]), | |
| input[type=tel]:focus:not([readonly]), | |
| input[type=text]:focus:not([readonly]), | |
| input[type=time]:focus:not([readonly]), | |
| input[type=url]:focus:not([readonly]), | |
| textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #A3BE8C; box-shadow: 0 1px 0 0 #A3BE8C; } | |
| /* Certain (apparently random) Labels when it's text field is clicked in */ | |
| input[type=text]:focus:not([readonly])+label { color: #A3BE8C; } | |
| /* Reset buttons */ | |
| .red { background-color: #BF616A !important; margin-top: 20px; } | |
| /* For that 1 weird, random horizontal rule */ | |
| hr { border: 1px solid #3B4252 !important; } | |
| .hljs { color: inherit; background: #2E3440; } | |
| /* The drop-down combo-box backgrounds when selected */ | |
| input[type=text]:focus:not([readonly]), .dropdown-content, .dropdown-content li.active.selected { background-color: #2E3440 !important; } | |
| /*************** | |
| * Import Page * | |
| ***************/ | |
| /* Change the color from red to the Nord color for green; Red to me seems like a 'danger' type color, while green is more of a 'this is safe' color */ | |
| blockquote { border-left: 5px solid #A3BE8C; } | |
| /* The "Add New Item" drop-down input field */ | |
| .input-field.nav-panel-item, .nav-panels .input-field input:focus { background-color: #4C566A; } | |
| .input-field.nav-panel-item .close { color: #D8DEE9 !important; } /* "X" button */ | |
| .nav-panel-item .add, .nav-panel-item .search { color: #D8DEE9 !important; } /* "+" button */ | |
| input[type=url]:focus:not([readonly]), input[type=text]:focus:not([readonly]), nav .input-field input[type=text]:valid { | |
| border-bottom: 0px solid #D08770; | |
| box-shadow: 0 1px 0 0 #D08770; | |
| background-color: #4C566A; | |
| color: #D8DEE9; | |
| } | |
| /**************** | |
| * Filters Area * | |
| ****************/ | |
| .dropdown-content li>span { color: #A3BE8C; } | |
| .dropdown-content li.active, .dropdown-content li.selected, .dropdown-content li:hover { background-color: #3B4252; } | |
| #filters > form > div > div > label { color: #EBCB8B; } | |
| /* Checkboxes */ | |
| [type=checkbox]+label:before, [type=checkbox]:not(.filled-in)+label:after { border: 1px solid #4C566A; } | |
| /* A lil more space between the check-box and the button, and specifically set it's text color */ | |
| [type=checkbox]+label { margin-bottom: 1.5rem; color: #D8DEE9 !important; } | |
| /* Date Picker */ | |
| .picker { color: inherit; } /* Text in the drop-down combos */ | |
| .picker__box { background: #2E3440; border: 0; } | |
| .picker__input.picker__input--active { border-color: #81A1C1; } | |
| .picker__day.picker__day--today { color: #EBCB8B; } | |
| .picker__close, .picker__today { color: #81A1C1; } | |
| .picker__day--infocus:hover { color: #ECEFF4; } | |
| .picker__day--infocus { color: #4C566A; } | |
| .picker__nav--next:hover, .picker__nav--prev:hover { background: #3B4252; } /* Arrows hover color */ | |
| .picker__nav--next, .picker__nav--prev { top: -0.0em; } /* Bump the arrows down a bit more to line them up properly */ | |
| .picker__select--month.browser-default, .picker__select--year.browser-default { background-color: #434C5E; } | |
| .picker__weekday { color: #D8DEE9; } /* M-F color */ | |
| .picker--focused .picker__day--selected, .picker__day--selected, .picker__day--selected:hover { background-color: #5E81AC; color: #ECEFF4; } /* Selected Day Circle */ | |
| .picker__footer { border-top: 1px solid #3B4252; } /* Line about the calendar footer */ | |
| select:focus { outline: 1px solid #5E81AC; } /* Border around month/year pickers */ | |
| select.picker__select--year.browser-default, select.picker__select--month.browser-default { border: 0; } | |
| /********** | |
| * Footer * | |
| **********/ | |
| .cyan.darken-2 { background-color: #3B4252 !important; } | |
| .page-footer .footer-copyright { font-weight: 200; font-size: 0.8rem; } | |
| .grey-text.text-lighten-4 { color: #81A1C1 !important; } | |
| /***************** | |
| * 'How To' Page * | |
| *****************/ | |
| .hljs-string { color: #EBCB8B; } | |
| pre[class*=language-] { background: #3B4252; border: .3em solid #434C5E; } | |
| /***************** | |
| * API Docs Page * | |
| *****************/ | |
| #header { background-color: #3B4252; border-bottom: 1px solid #4C566A; } | |
| /* Text under "Documentation" */ | |
| div.content > div > div > div > p { color: inherit; } | |
| /* Border around 'code' tags */ | |
| div.content > div > div > div > p:nth-child(2) > code { background-color: inherit; border: 1px dashed #81A1C1; } | |
| /* Divider lines */ | |
| table thead tr th { border-bottom: solid #434C5E; color: inherit; } | |
| table.fullwidth > tbody > tr { border-bottom: 1px dashed #434C5E; } | |
| /* Spacing between items */ | |
| div.content > div > div > table > tbody > tr > td { padding: 10px 6px; } | |
| .heading { border: 10; } | |
| li.operation .heading h3 span.http_method i, li.operation .heading h3 span.deprecated i { color: #E5E9F0; } | |
| li.operation .heading h3 span.http_method i { margin: .5em; } /* "Icon" spacing */ | |
| /* Colored Labels */ | |
| li.operation.post .heading { border-color: #A3BE8C; background-color: #4C566A; } | |
| li.operation.post .heading h3 span.http_method i { background-color: #A3BE8C; } | |
| li.operation.get .heading { border-color: #5E81AC; background-color: #4C566A; } | |
| li.operation.get .heading h3 span.http_method i { background-color: #5E81AC; } | |
| li.operation.get div.content h4 { color: #5E81AC; } | |
| li.operation.put .heading { border-color: #D08770; background-color: #4C566A; } | |
| li.operation.put .heading h3 span.http_method i { background-color: #D08770; } | |
| li.operation.put div.content h4 { color: #D08770; } | |
| li.operation.delete .heading { border-color: #BF616A; background-color: #4C566A; } | |
| li.operation.delete .heading h3 span.http_method i { background-color: #BF616A; } | |
| li.operation.delete div.content h4 { color: #BF616A; } | |
| li.operation.patch .heading { border-color: #B48EAD; background-color: #4C566A; } | |
| li.operation.patch .heading h3 span.http_method i { background-color: #B48EAD; } | |
| li.operation .heading h3 { color: #D8DEE9; } | |
| .heading ul.options li { margin: .01em 0; padding: .4em !important; } | |
| /* Fallback colors might be bad; I didn't test, I just added them to shut CSS Lint up ;) */ | |
| li.operation.delete .heading ul.options li { color: #BF616A; background-color: #BF616A; background-color: rgba(191, 97, 106, .2); border: 2px solid #BF616A; border: 2px solid rgba(191, 97, 106, .4); } | |
| li.operation.post .heading ul.options li { color: #A3BE8C; background-color: #A3BE8C; background-color: rgba(163, 190, 140, .2); border: 2px solid #A3BE8C; border: 2px solid rgba(163, 190, 140, .4); } | |
| li.operation.put .heading ul.options li { color: #c5862b; background-color: #D08770; background-color: rgba(197, 134, 43, .2); border: 2px solid #D08770; border: 2px solid rgba(197, 134, 43, .4); } | |
| li.operation.get .heading ul.options li { color: #81A1C1; background-color: #81A1C1; background-color: rgba(15, 106, 180, .2); border: 2px solid #81A1C1; border: 2px solid rgba(129, 161, 193, .4); } | |
| li.operation.patch .heading ul.options li { color: #B48EAD; background-color: #B48EAD; background-color: rgba(180, 142, 173, .2); border: 2px solid #B48EAD; border: 2px solid rgba(180, 142, 173, .4); } | |
| li.operation.post div.content, li.operation.get div.content, li.operation.put div.content, li.operation.delete div.content, li.operation.patch div.content { border-color: #4C566A; background-color: #2E3440; } | |
| /* ----------- */ | |
| /* Info Footer */ | |
| #colophon { border-top: inherit; color: #D8DEE9; } | |
| /********************* | |
| * Article View Page * | |
| *********************/ | |
| #slide-out > li > a > i { color: inherit; } /* NavBar icons */ | |
| #article { background-color: #3B4252; border: 1px solid #2E3440; font-size: 1.5em; padding: 0 1em; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2); } | |
| #article aside .tools { background-color: #434C5E; border-radius: 4px; font-size: 0.6em; } /* 'Tools' area */ | |
| #article aside .tools .tags { margin: 0.5em auto; } /* Tag spacing */ | |
| #article aside .tools .stats li i.material-icons, .reader-mode:hover .collapsible-body li a i.material-icons { color: inherit; font-size: 1.5em; } /* Icons */ | |
| #article aside .tools .stats { font-size: .8em; margin: auto; } /* Tools area */ | |
| #article aside .tools .stats a { color: #D08770; } /* Link text */ | |
| /* Tags */ | |
| #article aside .chip { background-color: #BF616A; font-size: .8em; line-height: 2.3em; height: 2em; } | |
| #article aside .chip a, #article aside .chip i { color: #ECEFF4; } /* Tag text */ | |
| #article aside .chip i.material-icons { line-height: 1.1em; } /* Tag icon */ | |
| #article>header>h1 { font-size: 1.6em; margin: 2.1rem 0 .68rem; background-color: #2E3440; color: #EBCB8B; padding: 1.5em; text-align: center; border-radius: 4px; } /* Article header */ | |
| #article article { color: inherit; } | |
| #article article a { border-bottom: inherit; } /* Article links */ | |
| #article article h2, #article article h3, #article article h4 { color: #8FBCBB; font-style: italic; } /* Title text */ | |
| #article pre { background-color: #2E3440; border: inherit; } /* Code (pre) tags */ | |
| #article article blockquote { background-color: #2E3440; border-radius: 2px; } /* Blockquote tags */ | |
| #article input[type=text]:focus:not([readonly]) { background-color: inherit !important; border-radius: 1px; } | |
| #article input[type=text] { border-bottom: 1px solid #EBCB8B; } | |
| .reader-mode:hover .collapsible-body li a i.material-icons { margin: auto 5px auto -8px; } | |
| /************** | |
| * Share Page * | |
| **************/ | |
| body > article { color: inherit; } | |
| } /* [1] Closing brace for Stylus/Stylish */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment