Customize my tridactyl theme, and add and use light variant
[~bandali/configs] / .config / tridactyl / themes / bandali.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-bg: rgba(13, 31, 54, 0.75); */
40 --tridactyl-hint-outline: 1px solid var(--tridactyl-hintspan-bg);
41
42 --tridactyl-cmdl-font-size: 1.5rem;
43 --tridactyl-cmplt-option-height: 1.9em;
44
45 --tridactyl-border-radius: 4px;
46 }
47
48
49 :root.TridactylOwnNamespace {
50 scrollbar-width: thin;
51 }
52
53 /*
54 :root.TridactylOwnNamespace a {
55 color: #3b84ef;
56 }
57
58 :root.TridactylOwnNamespace code {
59 background-color: #2a333c;
60 padding: 3px 7px;
61 }
62 */
63
64 :root #command-line-holder {
65 order: 1;
66 }
67
68 :root #command-line-holder, :root #tridactyl-input {
69 border-radius: var(--tridactyl-border-radius) !important;
70 }
71
72 :root #tridactyl-colon::before {
73 content: "";
74 }
75
76 :root #tridactyl-input {
77 width: 96%;
78 padding: 1rem;
79 }
80
81 :root #completions table {
82 font-weight: 200;
83 table-layout: fixed;
84 padding: 1rem;
85 padding-top: 0;
86 }
87
88 :root #completions > div {
89 max-height: calc(20 * var(--tridactyl-cmplt-option-height));
90 min-height: calc(10 * var(--tridactyl-cmplt-option-height));
91 }
92
93 :root #completions {
94 border: none !important;
95 font-family: var(--tridactyl-font-family);
96 order: 2;
97 margin-top: 10px;
98 border-radius: var(--tridactyl-border-radius);
99 }
100
101 :root #completions .HistoryCompletionSource table {
102 width: 100%;
103 border-spacing: 0;
104 table-layout: fixed;
105 }
106
107
108 :root #completions .BufferCompletionSource table {
109 width: unset;
110 font-size: unset;
111 border-spacing: unset;
112 table-layout: unset;
113 }
114
115 :root #completions table tr .title {
116 width: 50%;
117 }
118
119 :root #completions tr .documentation {
120 white-space: nowrap;
121 overflow: auto;
122 text-overflow: ellipsis;
123 }
124
125 :root #completions .sectionHeader {
126 background: transparent;
127 padding: 1rem 1rem 0.4rem !important;
128 }
129
130 :root #cmdline_iframe {
131 position: fixed !important;
132 bottom: unset;
133 top: 25% !important;
134 left: 10% !important;
135 z-index: 2147483647 !important;
136 width: 80% !important;
137 filter: drop-shadow(0px 0px 20px #000000) !important;
138 }
139
140 :root .TridactylStatusIndicator {
141 position: fixed !important;
142 bottom: 10px !important;
143 right: 10px !important;
144 font-weight: 200 !important;
145 padding: 5px !important;
146 }
147
148 /*
149 :root .TridactylPrivate {
150 background: purple !important;
151 }
152
153 :root .TridactylHintElem {
154 color: var(--tridactyl-hintspan-fg) !important;
155 }
156 */
157
158 :root .TridactylHintActive, :root .TridactylHintActive > * {
159 color: var(--tridactyl-hint-active-fg) !important;
160 }