Customize my tridactyl theme, and add and use light variant
[~bandali/configs] / .config / tridactyl / themes / bandali-dark.css
1 /*
2 Originally based on the 'midnight' theme from the tridactyl
3 repository, under the Apache License, Version 2.0 (Apache-2.0).
4
5 https://github.com/tridactyl/tridactyl/blob/0eeaf15b0648ed1d807386b9ce34642992f71d1d/src/static/themes/midnight/midnight.css
6
7 I'm making my further changes available under the same license.
8 */
9
10 :root {
11 /* --tridactyl-font-family: "San Francisco", sans-serif; */
12 --tridactyl-font-family: sans-serif;
13 --tridactyl-bg: #161a20;
14 --tridactyl-fg: white;
15
16 --tridactyl-status-font-size: 12px;
17 /* --tridactyl-status-font-family: "Fira Code", "San Francisco"; */
18 --tridactyl-status-font-bg: var(--tridactyl-cmdl-bg);
19 --tridactyl-status-border: 2px solid black;
20 --tridactyl-status-border-radius: 4px;
21
22 --tridactyl-header-font-size: 16px;
23
24 --tridactyl-of-fg: black;
25 /* --tridactyl-of-bg: #FFD662; */
26 --tridactyl-of-bg: #FFD700;
27
28 --tridactyl-hintspan-fg: white;
29 --tridactyl-hintspan-bg: #204e8a;
30
31 /* --tridactyl-hint-active-fg: #333; */
32 --tridactyl-hint-active-fg: black;
33 /* --tridactyl-hint-active-bg: #006E51; */
34 /* --tridactyl-hint-active-bg: #91b6e6; */
35 --tridactyl-hint-active-bg: var(--tridactyl-of-bg);
36 --tridactyl-hint-active-outline: 1px solid #000;
37
38 --tridactyl-hint-bg: rgba(13, 31, 54, 0.25);
39 --tridactyl-hint-outline: 1px solid var(--tridactyl-hintspan-bg);
40
41 --tridactyl-cmdl-font-size: 1.5rem;
42 --tridactyl-cmplt-option-height: 1.9em;
43
44 --tridactyl-border-radius: 4px;
45 }
46
47
48 :root.TridactylOwnNamespace {
49 scrollbar-width: thin;
50 }
51
52 :root.TridactylOwnNamespace a {
53 /* color: #3b84ef; */
54 color: #acdeff;
55 }
56
57 :root.TridactylOwnNamespace code {
58 background-color: #2a333c;
59 /* padding: 3px 7px; */
60 }
61
62 :root #command-line-holder {
63 order: 1;
64 }
65
66 :root #command-line-holder, :root #tridactyl-input {
67 border-radius: var(--tridactyl-border-radius) !important;
68 }
69
70 :root #tridactyl-colon::before {
71 content: "";
72 }
73
74 :root #tridactyl-input {
75 width: 96%;
76 padding: 1rem;
77 }
78
79 :root #completions table {
80 font-weight: 200;
81 table-layout: fixed;
82 padding: 1rem;
83 padding-top: 0;
84 }
85
86 :root #completions > div {
87 max-height: calc(20 * var(--tridactyl-cmplt-option-height));
88 min-height: calc(10 * var(--tridactyl-cmplt-option-height));
89 }
90
91 :root #completions {
92 border: none !important;
93 font-family: var(--tridactyl-font-family);
94 order: 2;
95 margin-top: 10px;
96 border-radius: var(--tridactyl-border-radius);
97 }
98
99 :root #completions .HistoryCompletionSource table {
100 width: 100%;
101 border-spacing: 0;
102 table-layout: fixed;
103 }
104
105
106 :root #completions .BufferCompletionSource table {
107 width: unset;
108 font-size: unset;
109 border-spacing: unset;
110 table-layout: unset;
111 }
112
113 :root #completions table tr .title {
114 width: 50%;
115 }
116
117 :root #completions tr .documentation {
118 white-space: nowrap;
119 overflow: auto;
120 text-overflow: ellipsis;
121 }
122
123 :root #completions .sectionHeader {
124 background: transparent;
125 padding: 1rem 1rem 0.4rem !important;
126 }
127
128 :root #cmdline_iframe {
129 position: fixed !important;
130 bottom: unset;
131 top: 25% !important;
132 left: 10% !important;
133 z-index: 2147483647 !important;
134 width: 80% !important;
135 filter: drop-shadow(0px 0px 20px #000000) !important;
136 }
137
138 :root .TridactylStatusIndicator {
139 position: fixed !important;
140 bottom: 10px !important;
141 right: 10px !important;
142 font-weight: 200 !important;
143 padding: 5px !important;
144 }
145
146 :root .TridactylPrivate {
147 background: purple !important;
148 }
149
150 :root .TridactylHintActive, :root .TridactylHintActive > * {
151 color: var(--tridactyl-hint-active-fg) !important;
152 }