From 77b5eb0f4f15bc85f6ec7ad344dd0da26239814e Mon Sep 17 00:00:00 2001 From: Amin Bandali Date: Sun, 15 May 2022 16:01:59 -0400 Subject: [PATCH] Customize my tridactyl theme, and add and use light variant --- .config/tridactyl/themes/bandali-dark.css | 36 +++-- .config/tridactyl/themes/bandali.css | 160 ++++++++++++++++++++++ .config/tridactyl/tridactylrc | 2 + 3 files changed, 188 insertions(+), 10 deletions(-) create mode 100644 .config/tridactyl/themes/bandali.css diff --git a/.config/tridactyl/themes/bandali-dark.css b/.config/tridactyl/themes/bandali-dark.css index 153dc19..bc152ab 100644 --- a/.config/tridactyl/themes/bandali-dark.css +++ b/.config/tridactyl/themes/bandali-dark.css @@ -3,29 +3,36 @@ repository, under the Apache License, Version 2.0 (Apache-2.0). https://github.com/tridactyl/tridactyl/blob/0eeaf15b0648ed1d807386b9ce34642992f71d1d/src/static/themes/midnight/midnight.css + + I'm making my further changes available under the same license. */ :root { - --tridactyl-font-family: "San Francisco", sans-serif; - --tridactyl-bg: #161a20; + /* --tridactyl-font-family: "San Francisco", sans-serif; */ + --tridactyl-font-family: sans-serif; + --tridactyl-bg: #161a20; --tridactyl-fg: white; --tridactyl-status-font-size: 12px; - --tridactyl-status-font-family: "Fira Code", "San Francisco"; + /* --tridactyl-status-font-family: "Fira Code", "San Francisco"; */ --tridactyl-status-font-bg: var(--tridactyl-cmdl-bg); --tridactyl-status-border: 2px solid black; --tridactyl-status-border-radius: 4px; --tridactyl-header-font-size: 16px; - + --tridactyl-of-fg: black; - --tridactyl-of-bg: #FFD662; + /* --tridactyl-of-bg: #FFD662; */ + --tridactyl-of-bg: #FFD700; --tridactyl-hintspan-fg: white; --tridactyl-hintspan-bg: #204e8a; - --tridactyl-hint-active-fg: #333; - --tridactyl-hint-active-bg: #006E51; + /* --tridactyl-hint-active-fg: #333; */ + --tridactyl-hint-active-fg: black; + /* --tridactyl-hint-active-bg: #006E51; */ + /* --tridactyl-hint-active-bg: #91b6e6; */ + --tridactyl-hint-active-bg: var(--tridactyl-of-bg); --tridactyl-hint-active-outline: 1px solid #000; --tridactyl-hint-bg: rgba(13, 31, 54, 0.25); @@ -33,7 +40,7 @@ --tridactyl-cmdl-font-size: 1.5rem; --tridactyl-cmplt-option-height: 1.9em; - + --tridactyl-border-radius: 4px; } @@ -43,12 +50,13 @@ } :root.TridactylOwnNamespace a { - color: #3b84ef; + /* color: #3b84ef; */ + color: #acdeff; } :root.TridactylOwnNamespace code { background-color: #2a333c; - padding: 3px 7px; + /* padding: 3px 7px; */ } :root #command-line-holder { @@ -134,3 +142,11 @@ font-weight: 200 !important; padding: 5px !important; } + +:root .TridactylPrivate { + background: purple !important; +} + +:root .TridactylHintActive, :root .TridactylHintActive > * { + color: var(--tridactyl-hint-active-fg) !important; +} diff --git a/.config/tridactyl/themes/bandali.css b/.config/tridactyl/themes/bandali.css new file mode 100644 index 0000000..173691a --- /dev/null +++ b/.config/tridactyl/themes/bandali.css @@ -0,0 +1,160 @@ +/* + Originally based on the 'midnight' theme from the tridactyl + repository, under the Apache License, Version 2.0 (Apache-2.0). + + https://github.com/tridactyl/tridactyl/blob/0eeaf15b0648ed1d807386b9ce34642992f71d1d/src/static/themes/midnight/midnight.css + + I'm making my further changes available under the same license. +*/ + +:root { + /* --tridactyl-font-family: "San Francisco", sans-serif; */ + --tridactyl-font-family: sans-serif; + /* --tridactyl-bg: #161a20; */ + /* --tridactyl-fg: white; */ + + --tridactyl-status-font-size: 12px; + /* --tridactyl-status-font-family: "Fira Code", "San Francisco"; */ + --tridactyl-status-font-bg: var(--tridactyl-cmdl-bg); + --tridactyl-status-border: 2px solid black; + --tridactyl-status-border-radius: 4px; + + --tridactyl-header-font-size: 16px; + + --tridactyl-of-fg: black; + /* --tridactyl-of-bg: #FFD662; */ + --tridactyl-of-bg: #FFD700; + + --tridactyl-hintspan-fg: white; + --tridactyl-hintspan-bg: #204e8a; + + /* --tridactyl-hint-active-fg: #333; */ + --tridactyl-hint-active-fg: black; + /* --tridactyl-hint-active-bg: #006E51; */ + /* --tridactyl-hint-active-bg: #91b6e6; */ + --tridactyl-hint-active-bg: var(--tridactyl-of-bg); + --tridactyl-hint-active-outline: 1px solid #000; + + --tridactyl-hint-bg: rgba(13, 31, 54, 0.25); + /* --tridactyl-hint-bg: rgba(13, 31, 54, 0.75); */ + --tridactyl-hint-outline: 1px solid var(--tridactyl-hintspan-bg); + + --tridactyl-cmdl-font-size: 1.5rem; + --tridactyl-cmplt-option-height: 1.9em; + + --tridactyl-border-radius: 4px; +} + + +:root.TridactylOwnNamespace { + scrollbar-width: thin; +} + +/* +:root.TridactylOwnNamespace a { + color: #3b84ef; +} + +:root.TridactylOwnNamespace code { + background-color: #2a333c; + padding: 3px 7px; +} +*/ + +:root #command-line-holder { + order: 1; +} + +:root #command-line-holder, :root #tridactyl-input { + border-radius: var(--tridactyl-border-radius) !important; +} + +:root #tridactyl-colon::before { + content: ""; +} + +:root #tridactyl-input { + width: 96%; + padding: 1rem; +} + +:root #completions table { + font-weight: 200; + table-layout: fixed; + padding: 1rem; + padding-top: 0; +} + +:root #completions > div { + max-height: calc(20 * var(--tridactyl-cmplt-option-height)); + min-height: calc(10 * var(--tridactyl-cmplt-option-height)); +} + +:root #completions { + border: none !important; + font-family: var(--tridactyl-font-family); + order: 2; + margin-top: 10px; + border-radius: var(--tridactyl-border-radius); +} + +:root #completions .HistoryCompletionSource table { + width: 100%; + border-spacing: 0; + table-layout: fixed; +} + + +:root #completions .BufferCompletionSource table { + width: unset; + font-size: unset; + border-spacing: unset; + table-layout: unset; +} + +:root #completions table tr .title { + width: 50%; +} + +:root #completions tr .documentation { + white-space: nowrap; + overflow: auto; + text-overflow: ellipsis; +} + +:root #completions .sectionHeader { + background: transparent; + padding: 1rem 1rem 0.4rem !important; +} + +:root #cmdline_iframe { + position: fixed !important; + bottom: unset; + top: 25% !important; + left: 10% !important; + z-index: 2147483647 !important; + width: 80% !important; + filter: drop-shadow(0px 0px 20px #000000) !important; +} + +:root .TridactylStatusIndicator { + position: fixed !important; + bottom: 10px !important; + right: 10px !important; + font-weight: 200 !important; + padding: 5px !important; +} + +/* +:root .TridactylPrivate { + background: purple !important; +} + +:root .TridactylHintElem { + color: var(--tridactyl-hintspan-fg) !important; +} +*/ + +:root .TridactylHintActive, :root .TridactylHintActive > * { + color: var(--tridactyl-hint-active-fg) !important; +} diff --git a/.config/tridactyl/tridactylrc b/.config/tridactyl/tridactylrc index bb717e3..887e250 100644 --- a/.config/tridactyl/tridactylrc +++ b/.config/tridactyl/tridactylrc @@ -42,3 +42,5 @@ set browser abrowser seturl warrior.uwaterloo.ca noiframe true " autocmd DocStart www.reddit.com js tri.excmds.urlmodify("-t", "www", "old") + +colourscheme bandali -- 2.20.1