Last active
January 15, 2023 13:41
-
-
Save tyjak/455370217c10960f38fdc157bca38543 to your computer and use it in GitHub Desktop.
Vieb solarized color scheme
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
| /* | |
| * Vieb - Vim Inspired Electron Browser | |
| * Copyright (C) 2019-2022 Jelmer van Arnhem | |
| * | |
| * This program is free software: you can redistribute it and/or modify | |
| * it under the terms of the GNU General Public License as published by | |
| * the Free Software Foundation, either version 3 of the License, or | |
| * (at your option) any later version. | |
| * | |
| * This program is distributed in the hope that it will be useful, | |
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | |
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
| * GNU General Public License for more details. | |
| * | |
| * You should have received a copy of the GNU General Public License | |
| * along with this program. If not, see <https://www.gnu.org/licenses/>. | |
| * | |
| * Solarized theme with tab and command line on the bottom | |
| * | |
| * GistID: 455370217c10960f38fdc157bca38543 | |
| * | |
| */ | |
| /* | |
| * COLORS | |
| */ | |
| :root { | |
| /* general */ | |
| --bg: #002b36; | |
| --fg: #839496; | |
| --tab-background: #073642; | |
| --tab-suspended: #586e75; | |
| --visible-tab: #859900; | |
| --tab-split: #b58900; | |
| --tab-audio: #268bd2; | |
| --tab-muted: #fdf6e3; | |
| --tab-muted-playing: #b58900; | |
| --tab-crashed: #dc322f; | |
| --tab-unresponsive: | |
| var(--tab-crashed); | |
| --tab-scrollbar: #5ff; | |
| --container-background: none; | |
| --mode-normal-fg: #eee; | |
| --mode-normal-bg: #073642; | |
| --mode-command-fg: #dc322f; | |
| --mode-command-bg: #073642; | |
| --mode-insert-fg: #859900; | |
| --mode-insert-bg: #073642; | |
| --mode-follow-fg: #f3f; | |
| --mode-follow-bg: #073642; | |
| --mode-explore-fg: #268bd2; | |
| --mode-explore-bg: #073642; | |
| --mode-search-fg: #b58900; | |
| --mode-search-bg: #073642; | |
| --mode-pointer-fg: #777; | |
| --mode-pointer-bg: #073642; | |
| --mode-visual-fg: #000; | |
| --mode-visual-bg: #073642; | |
| --url-default: none; | |
| --url-search: #cb4b16; | |
| --url-searchwords: #fcf; | |
| --url-url: #268bd2; | |
| --url-suggest: #859900; | |
| --url-file: #ff9; | |
| --url-invalid: #dc322f; | |
| --follow-text: #111; | |
| --follow-url-bg: #bff; | |
| --follow-url-border: #7dd; | |
| --follow-url-hover: #7dd7; | |
| --follow-click-bg: #fbb; | |
| --follow-click-border: #d77; | |
| --follow-click-hover: #d777; | |
| --follow-insert-bg: #bfb; | |
| --follow-insert-border: #7d7; | |
| --follow-insert-hover: #7d77; | |
| --follow-onclick-bg: #ffb; | |
| --follow-onclick-border: #dd7; | |
| --follow-onclick-hover: #dd77; | |
| --follow-media-bg: #bbf; | |
| --follow-media-border: #77d; | |
| --follow-media-hover: #77d7; | |
| --follow-image-bg: #fbf; | |
| --follow-image-border: #d7d; | |
| --follow-image-hover: #d7d7; | |
| --follow-other-bg: #ddd; | |
| --follow-other-border: #bbb; | |
| --follow-other-hover: #bbb7; | |
| --suggestions-border: #777; | |
| --suggestions-bg: #444; | |
| --suggestions-selected: #666; | |
| --suggestions-searchwords: #fcf; | |
| --suggestions-url: #bff; | |
| --suggestions-file: #ffb; | |
| --notification-border: #111; | |
| --notification-date: #aaa; | |
| --notification-permission: #aaa; | |
| --notification-dialog: | |
| var(--notification-permission); | |
| --notification-error: #dc322f; | |
| --notification-warning: #fd0; | |
| --notification-info: #0cf; | |
| --notification-success: #859900; | |
| --url-hover-fg: #000; | |
| --url-hover-bg: #fdf6e39; | |
| --screenshot-highlight: #cb4b16; | |
| /* special pages */ | |
| --link-color: #0cf; | |
| --link-underline: #059; | |
| --scrollbar-bg: #073642; | |
| --scrollbar-thumb: #b58900; | |
| --button-disabled: #999; | |
| --code-fg: #fdf6e3; | |
| --code-bg: #111; | |
| --code-command: #f88; | |
| --placeholder-text: #ccc; | |
| --special-page-element-bg: #444; | |
| --special-page-element-border: #222; | |
| --input-unfocused: #666; | |
| --input-focused: #aaa; | |
| --download-progress-fg: #ccc; | |
| --download-progress-bg: #666; | |
| --helppage-h1: #d33; | |
| --helppage-h2: #f76; | |
| --helppage-h3: #fb9; | |
| --helppage-countable: #fc0; | |
| --helppage-range-compat: #fc0; | |
| --helppage-nativetheme-fg-light: #aaa; | |
| --helppage-nativetheme-bg-light: #fdf6e3; | |
| --helppage-nativetheme-fg-dark: #666; | |
| --helppage-nativetheme-bg-dark: #000; | |
| /* sourceviewer */ | |
| --syntax-fg: | |
| var(--fg); | |
| --syntax-bg: | |
| var(--bg); | |
| --syntax-keyword: #f77; | |
| --syntax-entity: #daf; | |
| --syntax-constant: #8cf; | |
| --syntax-string: #adf; | |
| --syntax-variable: #fa5; | |
| --syntax-comment: #89a; | |
| --syntax-entity-tag: #8e8; | |
| --syntax-markup-heading: #27e; | |
| --syntax-markup-list: #fc6; | |
| --syntax-markup-emphasis: #cde; | |
| --syntax-markup-addition-fg: #bfb; | |
| --syntax-markup-addition-bg: #041; | |
| --syntax-markup-deletion-fg: #fdd; | |
| --syntax-markup-deletion-bg: #600; | |
| } | |
| /* | |
| * GLOBAL | |
| */ | |
| html {margin: 0;padding: 0} | |
| body {color: var(--fg);font: 12px "DejaVu Sans Mono", "Courier", monospace;padding: 0;margin: 0;opacity: 0;} | |
| #app {height: 100vh;width: 100vw;overflow: hidden;user-select: none;display: flex;flex-direction: column-reverse;background: var(--bg);opacity: 1;line-height: 1.3em;} | |
| body:not(#app) input {background: transparent;color: var(--fg);font: inherit;width: 100%;border: .1em solid var(--input-unfocused);padding: .2em;margin-bottom: 1em;box-sizing: border-box;outline: none;height: 2em;} | |
| body:not(#app) input:focus {border: .1em solid var(--input-focused);} | |
| body:not(#app) kbd {background: var(--code-bg);color: var(--code-fg);padding: .1em;overflow-wrap: anywhere;} | |
| body:not(#app) button {background: transparent;color: var(--fg);border: .1em solid var(--fg);font: inherit;} | |
| body:not(#app) button:not(:disabled):hover {cursor: pointer;font-weight: bold;} | |
| body:not(#app) button:disabled {border-color: var(--button-disabled);color: var(--button-disabled);} | |
| body:not(#app) ::placeholder {color: var(--placeholder-text);} | |
| ::-webkit-scrollbar {width: .5em;background: var(--scrollbar-bg);} | |
| ::-webkit-scrollbar-thumb {border-radius: .2em;background: var(--scrollbar-thumb);} | |
| /* | |
| * APP | |
| */ | |
| /* navbar & tabs */ | |
| #navbar {z-index: 45;} | |
| #tabs, #navbar {width: 100vw; display: flex; height: 1.4em; font-size: .9em; background: var(--bg);} | |
| /*#logo {-webkit-app-region: drag;height: 1.8em;width: 1.8em;margin: .1em;min-width: 1.8em;min-height: 1.8em;} */ | |
| #logo {display: none} | |
| #mode-container {display: flex;width: 5em;text-align: center;padding: 0 0; margin: 0 .5em 0 0;} | |
| #mode {text-transform: capitalize;font-size: 1em; margin: auto;line-height: 1.2em;/* font-weight: bold; */display: flex;} | |
| #repeat-counter, #pressed-keys {margin: auto .2em;line-height: 2em;display: none;} | |
| /* modes */ | |
| [current-mode=normal] #mode-container, #helppage .normal, .normal {color: var(--mode-normal-fg);background: var(--mode-normal-bg);} | |
| [current-mode=command] #mode-container, #helppage .command, .command {color: var(--mode-command-fg);background: var(--mode-command-bg);} | |
| [current-mode=insert] #mode-container, #helppage .insert, .insert {color: var(--mode-insert-fg);background: var(--mode-insert-bg);} | |
| [current-mode=follow] #mode-container, #helppage .follow, .follow {color: var(--mode-follow-fg);background: var(--mode-follow-bg);} | |
| [current-mode=explore] #mode-container, #helppage .explore, .explore {color: var(--mode-explore-fg);background: var(--mode-explore-bg);} | |
| [current-mode=search] #mode-container, #helppage .search, .search {color: var(--mode-search-fg);background: var(--mode-search-bg);} | |
| [current-mode=pointer] #mode-container, #helppage .pointer, .pointer {color: var(--mode-pointer-fg);background: var(--mode-pointer-bg);} | |
| [current-mode=visual] #mode-container, #helppage .visual, .visual {color: var(--mode-visual-fg);background: var(--mode-visual-bg);} | |
| /* tabs */ | |
| #tabs {display: flex;overflow: hidden;max-width: 100vw;width: 100vw;z-index: 2;height: 1.8em;} | |
| #tabs > span {color: var(--fg);background: var(--tab-background);display: flex;margin: 0 .1em .1em 0;flex: 1;overflow: hidden;white-space: nowrap;height: 1.8em;} | |
| #tabs > span > img {margin: auto 0 auto .25em;padding: 0;height: 1.2em;width: 1.2em;min-height: 1.2em;min-width: 1.2em;pointer-events: none;} | |
| #tabs > span > span {margin: auto 0 auto .25em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} | |
| #tabs .visible-tab {background: var(--visible-tab);color: #fdf6e3} | |
| #tabs [suspended] {background: var(--tab-suspended);} | |
| #tabs.multiple #current-tab {border-left: solid .3em var(--tab-split);} | |
| #tabs .pinned {min-width: 1.9em !important;max-width: 1.9em;width: 1.9em;padding: 0;} | |
| #tabs .pinned[media-playing], #tabs .pinned[muted] {width: 2.2em;max-width: 2.2em;} | |
| #tabs .pinned > img {padding: 0;margin: .2em;} | |
| #tabs .crashed {background: var(--tab-crashed);} | |
| #tabs .unresponsive:not(.crashed)::before {border-left: solid .3em var(--tab-unresponsive);content: "";} | |
| #tabs #current-tab.crashed {border-left: solid .3em var(--tab-split);} | |
| #tabs [media-playing]::before {border-left: solid .3em var(--tab-audio);content: "";} | |
| #tabs [muted]::before {border-left: solid .3em var(--tab-muted);content: "";} | |
| #tabs [muted][media-playing]::before {border-left: solid .3em var(--tab-muted-playing);content: "";} | |
| #tabs.scroll {overflow-x: auto;} | |
| #tabs.wrap {flex-wrap: wrap;} | |
| /* pages container */ | |
| .webview {position: fixed;display: none;pointer-events: none;} | |
| #page-container, #current-page, .visible-page {display: flex;flex: 1;height: 100%;width: 100%;} | |
| #pages.multiple .webview {border: solid .15em transparent;box-sizing: border-box;} | |
| #pages.multiple #current-page {border-color: var(--tab-split);} | |
| #pagelayout {display: flex;height: 100%;width: 100%;} | |
| #pagelayout * {flex: 1;} | |
| #pagelayout.hor, #pagelayout .hor {flex-direction: row;display: flex;} | |
| #pagelayout.ver, #pagelayout .ver {flex-direction: column;display: flex;} | |
| /* fullscreen */ | |
| #app.fullscreen #navbar, #app.fullscreen #tabs, #app.fullscreen .webview {display: none;} | |
| #app.fullscreen #current-page {display: flex;border: none;width: 100vw !important;height: 100vh !important;top: 0 !important;bottom: 0 !important;left: 0 !important;right: 0 !important;} | |
| /* conditionally hide tabs or navbar from the vieb window */ | |
| #app.tabshidden #tabs {display: none;} | |
| #app.navigationhidden #navbar {position: absolute;top: -10em;} | |
| #app.navigationhidden #suggest-dropdown {top: .1em;max-height: calc(100vh - .2em);} | |
| /* Nav url/search/command */ | |
| #containername {display: flex;margin: auto;height: 1.8em;align-items: center;padding: 0 .5em;background: var(--container-background);color: var(--fg);} | |
| #url {display: inline-block;flex: 1;border: solid .1em var(--url-default);margin: .1em;background: transparent;color: var(--fg);outline: none;font: inherit;min-width: 0;padding: .1em;width: 0;} | |
| #url.search {border-color: var(--url-search);} | |
| #url.searchwords {border-color: var(--url-searchwords);} | |
| #url.url {border-color: var(--url-url);} | |
| #url.suggest {border-color: var(--url-suggest);} | |
| #url.file {border-color: var(--url-file);} | |
| #url.invalid {border-color: var(--url-invalid);} | |
| /* follow */ | |
| #app #follow {position: fixed;display: none;z-index: 1;} | |
| #app #follow .follow-url, #app #follow .follow-inputs-click, #app #follow .follow-inputs-insert, #app #follow .follow-onclick, #app #follow .follow-media, #app #follow .follow-image, #app #follow .follow-other {position: absolute;color: var(--follow-text);padding: 0 .1em;} | |
| .follow-url-border, .follow-inputs-click-border, .follow-inputs-insert-border, .follow-onclick-border, .follow-media-border, .follow-image-border, .follow-other-border {position: absolute;box-sizing: border-box;} | |
| .follow-url {background: var(--follow-url-bg);border: solid .15em var(--follow-url-border);} | |
| .follow-inputs-click {background: var(--follow-click-bg);border: solid .15em var(--follow-click-border);} | |
| .follow-inputs-insert {background: var(--follow-insert-bg);border: solid .15em var(--follow-insert-border);} | |
| .follow-onclick {background: var(--follow-onclick-bg);border: solid .15em var(--follow-onclick-border);} | |
| .follow-media {background: var(--follow-media-bg);border: solid .15em var(--follow-media-border);} | |
| .follow-image {background: var(--follow-image-bg);border: solid .15em var(--follow-image-border);} | |
| .follow-other {background: var(--follow-other-bg);border: solid .15em var(--follow-other-border);} | |
| .follow-url-border {border: solid .07em var(--follow-url-border);} | |
| .follow-inputs-click-border {border: solid .07em var(--follow-click-border);} | |
| .follow-inputs-insert-border {border: solid .07em var(--follow-insert-border);} | |
| .follow-onclick-border {border: solid .07em var(--follow-onclick-border);} | |
| .follow-media-border {border: solid .07em var(--follow-media-border);} | |
| .follow-image-border {border: solid .07em var(--follow-image-border);} | |
| .follow-other-border {border: solid .07em var(--follow-other-border);} | |
| /* suggestions */ | |
| #suggest-dropdown {z-index: 35;position: fixed; top:unset; bottom: 2.1em; left: .1em;width: calc(100vw - .2em);background: var(--suggestions-border);max-height: calc(100vh - 2.2em);overflow-y: auto;display: flex;flex-direction: column-reverse;} | |
| #suggest-dropdown div {flex-grow: 1;flex-shrink: 0;display: flex;padding: .4em;margin: .1em;background: var(--suggestions-bg);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} | |
| #suggest-dropdown div .title, #suggest-dropdown div .file, #suggest-dropdown div .url {margin: auto .5em;min-width: 0;text-overflow: ellipsis;overflow: hidden;} | |
| #suggest-dropdown div .title {flex-shrink: 0;max-width: 50%;} | |
| #suggest-dropdown div .icon {height: 1.5em;width: 1.5em;} | |
| #suggest-dropdown div .url {color: var(--suggestions-url);} | |
| #suggest-dropdown div .file {color: var(--suggestions-file);} | |
| #suggest-dropdown div .searchwords {color: var(--suggestions-searchwords);} | |
| #suggest-dropdown div.selected {background: var(--suggestions-selected);} | |
| #screenshot-highlight {display: none;z-index: 30;position: absolute;box-sizing: content-box;border: solid var(--screenshot-highlight) .5em;} | |
| /* mouse related */ | |
| #mode-suggestions {background: var(--bg);max-height: 0;position: absolute;left: 2em;top:2em;z-index: 37;overflow: hidden;display: inline-block;width: 7em;text-transform: capitalize;display: flex;flex-direction: column;} | |
| #mode-suggestions:hover {max-height: 100vw;} | |
| #app.mouse-modeselector #mode-container:hover #mode-suggestions {max-height: 100vw;} | |
| #mode-suggestions div {font-size: 1.3em;} | |
| #app.mouse-suggestselect #suggest-dropdown div:hover, #mode-suggestions div:hover, #app.mouse-switchtab #tabs > span:hover {font-weight: bold;cursor: pointer;} | |
| #app[current-mode=insert].mouse-pageininsert .webview, #app:not([current-mode=insert]).mouse-pageoutsideinsert .webview {pointer-events: all;} | |
| .mouse-follow .follow-url-border.hover {background: var(--follow-url-hover);cursor: pointer;} | |
| .mouse-follow .follow-inputs-click-border.hover {background: var(--follow-click-hover);cursor: pointer;} | |
| .mouse-follow .follow-inputs-insert-border.hover {background: var(--follow-insert-hover);cursor: pointer;} | |
| .mouse-follow .follow-onclick-border.hover {background: var(--follow-onclick-hover);cursor: pointer;} | |
| .mouse-follow .follow-media-border.hover {background: var(--follow-media-hover);cursor: pointer;} | |
| .mouse-follow .follow-image-border.hover {background: var(--follow-image-hover);cursor: pointer;} | |
| .mouse-follow .follow-other-border.hover {background: var(--follow-other-hover);cursor: pointer;} | |
| .mouse-follow .hover + .follow-url, .mouse-follow .hover + .follow-inputs-click, .mouse-follow .hover + .follow-inputs-insert, .mouse-follow .hover + .follow-onclick, .mouse-follow .hover + .follow-media, .mouse-follow .hover + .follow-image, .mouse-follow .hover + .follow-other {cursor: pointer;} | |
| /* notifications & map suggestions */ | |
| #notifications, #app #mapsuggest {display: flex;position: fixed;flex-direction: column;z-index: 2;} | |
| #notifications > span, #app #mapsuggest {background: var(--bg);margin-bottom: 2.5em;padding: .5em;display: flex;min-width: 25em;width: 33vw;max-width: 100em;border: .1em solid var(--notification-border);overflow-wrap: anywhere;white-space: pre-wrap;} | |
| #notifications > span.permission {color: var(--notification-permission);} | |
| #notifications > span.dialog {color: var(--notification-dialog);} | |
| #notifications > span.error {color: var(--notification-error);} | |
| #notifications > span.warning, #app #mapsuggest span.warning {color: var(--notification-warning);} | |
| #notifications > span.info, #app #mapsuggest span.info {color: var(--notification-info);} | |
| #notifications > span.success, #app #mapsuggest span.success {color: var(--notification-success);} | |
| #app #mapsuggest {width: auto;max-width: 90vw;max-height: calc(100vh - 6.5em);overflow-y: auto;} | |
| #app #mapsuggest span.warning {display: inline-block;margin-right: 1em;} | |
| .bottomright {right: .7em;bottom: 0;} | |
| .bottomleft {left: .7em;bottom: 0;} | |
| .topright {right: .7em;top: 4.7em;} | |
| .topleft {left: .7em;top: 4.7em;} | |
| .bottomright {right: .7em;bottom: 0;} | |
| .bottomleft {left: .7em;bottom: 0;} | |
| .topright {right: .7em;top: 4.7em;} | |
| .topleft {left: .7em;top: 4.7em;} | |
| #app.tabshidden .topright, #app.tabshidden .topleft {top: 2.7em;} | |
| #app.navigationhidden .topright, #app.navigationhidden .topleft {top: 2.7em;} | |
| #app.navigationhidden.tabshidden .topright, #app.navigationhidden.tabshidden .topleft {top: .7em;} | |
| #app.tabshidden #mapsuggest, #app.navigationhidden #mapsuggest {max-height: calc(100vh - 4.5em);} | |
| #app.navigationhidden.tabshidden #mapsuggest {max-height: calc(100vh - 2.5em);} | |
| /* scrollbar for overflowing tabs */ | |
| #tabs::-webkit-scrollbar {height: .2em;} | |
| #tabs::-webkit-scrollbar-thumb {background: var(--tab-scrollbar);} | |
| /* context menu */ | |
| #context-menu {padding: 0;margin: 0;background: var(--suggestions-bg);position: fixed;z-index: 50;white-space: nowrap;max-height: 100vh;overflow-y: auto;} | |
| #context-menu:not(:empty) {border: .1em solid var(--suggestions-border);} | |
| #context-menu > .menu-item {padding: .1em .8em;margin: 0;cursor: pointer;} | |
| #context-menu > .menu-item.selected {background: var(--suggestions-selected);} | |
| #context-menu > .menu-group {padding: .2em 0 0 0;font-weight: bold;} | |
| /* other */ | |
| @keyframes pointer {0% {background: #f007;} 17% {background: #ff07;} 33% {background: #0f07;} 49% {background: #0ff7;} 66% {background: #00f7;} 83% {background: #f0f7;} 100% {background: #f007;}} | |
| #app #pointer {display: none;position: fixed;height: 1em;width: .7em;z-index: 40;backdrop-filter: invert(100%);animation: 1s infinite pointer;} | |
| #app[current-mode=pointer] #pointer {display: block;} | |
| #app[current-mode=visual] #pointer {display: block;} | |
| #url-hover {display: none;position: absolute;background: var(--url-hover-bg);color:var(--url-hover-fg);bottom: 0;left: 0;right: 0;pointer-events: none;padding: .1em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: fit-content;margin: auto;max-width: 80vw;text-align: center;z-index: 3;} | |
| /* | |
| * SPECIAL PAGES | |
| */ | |
| .specialpage {width: 90vw;margin: auto;} | |
| .specialpage a {color: var(--link-color);white-space: nowrap;overflow: hidden;} | |
| .specialpage a:not([class]) {text-decoration: var(--link-underline) underline;} | |
| .specialpage a[href^="https"]::after {background: url(../img/topright.png) no-repeat 0 0;background-size: .5em 1em;content: "";padding-right: .5em;} | |
| .specialpage a:hover {text-decoration: var(--link-color) underline;} | |
| .specialpage h1 {font-size: 2em;margin: 1em 0;padding: 0;} | |
| .specialpage img {height: 1.9em;margin: .5em;float: right;} | |
| .specialpage *[onclick] {cursor: pointer;} | |
| .specialpage #remove-all {height: 2.4em;margin: .2em;cursor: pointer;} | |
| .specialpage #list {display: flex;flex-direction: column-reverse;} | |
| /* cookies */ | |
| #cookiespage .cookie {background: var(--special-page-element-bg);margin: .35em 0;padding: .35em;display: flex;border: .1em solid var(--special-page-element-border);} | |
| #cookiespage .cookie * {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 33%;padding: .2em 0;} | |
| #cookiespage .remove {height: 1em;width: 1em;margin: auto 0;cursor: pointer;} | |
| /* downloads */ | |
| #downloadspage .download {background: var(--special-page-element-bg);margin-bottom: 1em;border: .1em solid var(--special-page-element-border);} | |
| #downloadspage .title {margin: .4em;font-size: 1.5em;width: calc(100% - 4em);cursor:pointer;} | |
| #downloadspage progress {-webkit-appearance: none;width: calc(100% - 1em);margin: .5em;} | |
| #downloadspage progress::-webkit-progress-value {background: var(--download-progress-fg);} | |
| #downloadspage progress::-webkit-progress-bar {background: var(--download-progress-bg);} | |
| #downloadspage .misc {display: flex;margin: .5em;flex-direction: column;width: calc(100% - 1em);} | |
| #downloadspage .filelocation {cursor: pointer;} | |
| #downloadspage img {cursor: pointer;} | |
| /* help */ | |
| #helppage {margin: 3vw;width: auto;line-height: 2;} | |
| #helppage main {max-width: 65em;margin: auto;} | |
| #helppage .header, #helppage .header > div {font-size: 5vw;display: flex;flex: 1;justify-content: center;} | |
| #helppage .header > div > img {height: 10vw;margin: 0 1em 0 0;} | |
| #helppage .cheatsheet {float: none;height: auto;width: 100%;filter: contrast(.5) invert() contrast(4) hue-rotate(180deg) saturate(4);} | |
| #helppage a {overflow-wrap: anywhere;} | |
| #helppage li {line-height: 1.5em;} | |
| #helppage .section {display: flex;flex-wrap: wrap;align-items: center;} | |
| #helppage .section h1, .section h2, .section h3, .section h4, .section h5, .section h6 {margin: 0;overflow-wrap: anywhere;} | |
| #helppage .section .spacer {flex-grow: 1;} | |
| #helppage .section {margin: 1em 0;} | |
| #helppage .section > a {margin: auto 0;overflow-wrap: anywhere;text-align: right;} | |
| #helppage h1 {font-size: 3em;margin: .7em 0 .5em;color: var(--helppage-h1);} | |
| #helppage h2 {font-size: 2em;margin: .7em 0;color: var(--helppage-h2);} | |
| #helppage h3 {font-size: 1.5em;margin: .7em 0;color: var(--helppage-h3);} | |
| #helppage h4 {font-size: 1.25em;margin: .7em 0;} | |
| #helppage h5, #helppage h6 {font-size: 1;margin: .7em 0;} | |
| #helppage .setting-status {display: flex;flex-wrap: wrap;} | |
| #helppage .setting-status * {margin: 0 .5em;overflow-wrap: anywhere;max-width: calc(100vw - 3em);} | |
| #helppage .map-status * {display: block;} | |
| #helppage .countable {height: 2em;margin: 0 1em;color: var(--helppage-countable);} | |
| #helppage .range-compat {height: 2em;margin: 0 1em;color: var(--helppage-range-compat);} | |
| #helppage .command-block {color: var(--code-command);white-space: normal;overflow-wrap: anywhere;background: var(--code-bg);padding: .1em;} | |
| #helppage .url-search {color: var(--url-search);} | |
| #helppage .url-url {color: var(--url-url);} | |
| #helppage .url-searchwords {color: var(--url-searchwords);} | |
| #helppage .url-suggest {color: var(--url-suggest);} | |
| #helppage .url-file {color: var(--url-file);} | |
| #helppage .follow-url {background: var(--follow-url-bg);color: var(--follow-text);} | |
| #helppage .follow-inputs-click {background: var(--follow-click-bg);color: var(--follow-text);} | |
| #helppage .follow-inputs-insert {background: var(--follow-insert-bg);color: var(--follow-text);} | |
| #helppage .follow-onclick {background: var(--follow-onclick-bg);color: var(--follow-text);} | |
| #helppage .follow-media {background: var(--follow-media-bg);color: var(--follow-text);} | |
| #helppage .follow-image {background: var(--follow-image-bg);color: var(--follow-text);} | |
| #helppage .follow-other {background: var(--follow-other-bg);color: var(--follow-text);} | |
| #helppage .example-buttons {margin: 1em;} | |
| #helppage .example-buttons button {font-size: 1em;margin: .5em 2em;padding: .5em 2em;background: transparent;cursor: pointer;} | |
| #helppage .nowrap, #helppage .nowrap.command-block {white-space: nowrap;} | |
| #helppage .nativetheme {display: none;} | |
| #helppage .nativetheme.light {color: var(--helppage-nativetheme-fg-light);background-color: var(--helppage-nativetheme-bg-light);} | |
| #helppage .nativetheme.dark {color: var(--helppage-nativetheme-fg-dark);background-color: var(--helppage-nativetheme-bg-dark);} | |
| @media (prefers-color-scheme: light) { | |
| #helppage .nativetheme.light {display: inline-block;} | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| #helppage .nativetheme.dark {display: inline-block;} | |
| } | |
| /* history */ | |
| #historypage #list {display: inline;} | |
| #historypage #no-results {margin-bottom: 1em;} | |
| #historypage #breakpoints {display: flex;flex-direction: column;} | |
| #historypage .hist-entry {background: var(--special-page-element-bg);margin: .7em 0;padding: .35em;border: .1em solid var(--special-page-element-border);} | |
| #historypage .hist-entry .hist-date {width: auto;color: var(--notification-date);margin-right: 1em;} | |
| #historypage .hist-entry span {display: inline-block;width: calc(100% - 16em);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} | |
| #historypage .hist-entry a {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;} | |
| #historypage img {height: 1.5em;float: right;margin: .35em .9em;cursor: pointer;} | |
| #historypage .hist-entry img {height: 1em;margin: .1em;} | |
| #historypage .hist-entry .favicon {float: none;margin: 0 .3em .1em 0;cursor: auto;} | |
| #historypage .hist-entry.marked {background: var(--special-page-element-border);} | |
| /* newtab */ | |
| #newtabpage {display: none;flex-direction: column;height: 100vh;} | |
| #newtabpage main {margin: auto;max-width: 80vw;min-width: 450px;} | |
| #newtabpage img {height: 2em;width: 2em;min-height: 2em;min-width: 2em;margin: 0 .5em 0 0;} | |
| #newtabpage a {display: flex;padding: .5em;font-size: 1.4em;text-decoration: none;max-width: 80vw;align-items: center;} | |
| #newtabpage a div {display: flex;flex-direction: column;} | |
| #newtabpage a div, a div * {overflow: hidden;white-space: wrap;text-overflow: ellipsis;} | |
| #newtabpage main > div {display: flex;flex-wrap: wrap;overflow: hidden;} | |
| #newtabpage p {text-align: center;} | |
| #favorites, #topsites {margin: 1em 0;display: none;max-width: 80vw;min-width: 42em;width: auto;flex-grow: 1;flex-basis: 50%;} | |
| #newtabpage small {font-size: .7em;text-decoration: underline;} | |
| /* notifications */ | |
| #notificationspage .notification {background: var(--special-page-element-bg);border: .1em solid var(--notification-border);margin: .35em 0;padding: .35em;overflow-wrap: anywhere;white-space: pre-wrap;} | |
| #notificationspage .date {color: var(--notification-date);} | |
| #notificationspage .permission {color: var(--notification-permission);} | |
| #notificationspage .dialog {color: var(--notification-dialog);} | |
| #notificationspage .error {color: var(--notification-error);} | |
| #notificationspage .warning {color: var(--notification-warning);} | |
| #notificationspage .info {color: var(--notification-info);} | |
| #notificationspage .success {color: var(--notification-success);} | |
| #notificationspage .filelocation {cursor: pointer;} | |
| /* version */ | |
| #versionpage {display: flex;width: 80vw;min-width: 450px;height: 100vh;text-align: center;} | |
| #versionpage #title {font-size: 2.5em;} | |
| #versionpage #subtitle {font-size: 1.5em;} | |
| #versionpage .header {display: flex;flex-direction: column;margin: auto;} | |
| #versionpage .header > img {width: 30vmin;height: 30vmin;margin: auto;} | |
| #versionpage .info {width: 42em;min-width: 450px;max-width: 80vw;} | |
| #versionpage #update-check {margin: .7em;} | |
| /* | |
| * POPUPS | |
| */ | |
| .popup {box-sizing: border-box;height: 100vh;width: 100vw;overflow: hidden;user-select: none;background: var(--bg);color: var(--fg);border: .1em solid var(--notification-border);} | |
| /* login */ | |
| #loginpopup {padding: 1em;} | |
| #loginpopup * {pointer-events: none;} | |
| #loginpopup p {word-wrap: break-word;overflow: hidden;} | |
| /* notification */ | |
| #notificationpopup #notification {padding: 1em;height: calc(100% - 4.1em);overflow-wrap: break-word;overflow-x: hidden;overflow-y: auto;line-height: 1em;user-select: text;white-space: pre-wrap;} | |
| #notificationpopup footer {font-size: 1em;line-height: 2em;height: 2em;position: fixed;left: 0;bottom: 0;width: 100vw;border: .1em solid var(--notification-border);} | |
| /* | |
| * READERVIEW | |
| */ | |
| #readerview {margin: auto;max-width: 65em;padding: 2vw;color: var(--fg);background: var(--bg);} | |
| #readerview img {max-width: 100%;} | |
| #readerview a {color: var(--link-color);} | |
| /* | |
| * MARKDOWNVIEWER | |
| */ | |
| #markdownviewer {margin: auto;max-width: 65em;padding: 2vw;color: var(--fg);background: var(--bg);} | |
| #markdownviewer img {max-width: 100%;} | |
| #markdownviewer a {color: var(--link-color);} | |
| /* | |
| * SOURCEVIEWER | |
| */ | |
| .hljs {color: var(--syntax-fg);background: var(--syntax-bg);} | |
| .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {color: var(--syntax-keyword);} | |
| .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {color: var(--syntax-entity);} | |
| .hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id {color: var(--syntax-constant);} | |
| .hljs-regexp, .hljs-string, .hljs-meta .hljs-string {color: var(--syntax-string);} | |
| .hljs-built_in, .hljs-symbol {color: var(--syntax-variable);} | |
| .hljs-comment, .hljs-code, .hljs-formula {color: var(--syntax-comment);} | |
| .hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo {color: var(--syntax-entity-tag);} | |
| .hljs-subst {color: var(--syntax-markup-emphasis);} | |
| .hljs-section {color: var(--syntax-markup-heading);font-weight: bold;} | |
| .hljs-bullet {color: var(--syntax-markup-list);} | |
| .hljs-emphasis {color: var(--syntax-markup-emphasis);font-style: italic;} | |
| .hljs-strong {color: var(--syntax-markup-emphasis);font-weight: bold;} | |
| .hljs-addition {color: var(--syntax-markup-addition-fg);background-color: var(--syntax-markup-addition-bg);} | |
| .hljs-deletion {color: var(--syntax-markup-deletion-fg);background-color: var(--syntax-markup-deletion-bg);} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment