shy-sidebery-daemon.css (22317B)
1 /*== Sidebery — Rosé Pine ========================================================================== 2 3 Sidebery draws three pages in *content*, not chrome, so userContent.css is the 4 only stylesheet that can reach them: 5 6 sidebar/sidebar.html the sidebar itself 7 page.setup/setup.html settings, styles editor, menu editor, snapshots 8 sidebery/group.html group (tab-set) pages 9 10 Because this is a **user origin** stylesheet, every declaration needs 11 `!important`. User-origin *normal* declarations lose to the extension's own 12 author CSS; only user-origin `!important` outranks it. The same rule means 13 these declarations also outrank anything typed into Sidebery's built-in Styles 14 editor -- so treat this file as the source of truth for layout and leave the 15 Styles editor holding nothing but the palette. 16 17 Imported after ShyFox/content/shy-sidebery.css, so it wins wherever the two 18 overlap. Selectors use `#root.root` to match ShyFox's specificity; at equal 19 specificity the later import wins. 20 21 Colours come from shy-rosepine.css (also imported into content), with literal 22 fallbacks so this file still renders correctly if that import is ever removed. 23 24 One knob per idea: 25 --dm-row tab row height, and every button sized off it 26 --dm-gap gutter between rows 27 --dm-fs tab title size 28 29 ===================================================================================================*/ 30 31 32 /*--- Palette + shared tokens --------------------------------------------------------------------- 33 34 Sidebery derives every colour from a handful of `--s-*` "source" variables it 35 normally reads off the browser theme (`--s-frame-bg`, `--s-accent`, ...). 36 Pinning those is a single lever that recolours all three pages consistently, 37 including surfaces this file never names. 38 */ 39 40 @-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html"), 41 regexp("^moz-extension://.*?/page.setup/setup.html.*"), 42 regexp("^moz-extension://.*?/sidebery/group.html.*") 43 { 44 #root, #root.root { 45 /* local aliases, so a variant swap in shy-rosepine.css carries through */ 46 --dm-base: var(--rp-base, #191724) !important; 47 --dm-surface: var(--rp-surface, #1f1d2e) !important; 48 --dm-overlay: var(--rp-overlay, #26233a) !important; 49 --dm-muted: var(--rp-muted, #6e6a86) !important; 50 --dm-subtle: var(--rp-subtle, #908caa) !important; 51 --dm-text: var(--rp-text, #e0def4) !important; 52 --dm-love: var(--rp-love, #eb6f92) !important; 53 --dm-gold: var(--rp-gold, #f6c177) !important; 54 --dm-rose: var(--rp-rose, #ebbcba) !important; 55 --dm-pine: var(--rp-pine, #31748f) !important; 56 --dm-foam: var(--rp-foam, #9ccfd8) !important; 57 --dm-iris: var(--rp-iris, #c4a7e7) !important; 58 --dm-hl-low: var(--rp-highlight-low, #21202e) !important; 59 --dm-hl-med: var(--rp-highlight-med, #403d52) !important; 60 --dm-hl-high: var(--rp-highlight-high, #524f67) !important; 61 62 /* iris at a few alphas -- CSS cannot mix a hex with an alpha inline */ 63 --dm-iris-10: rgba(196, 167, 231, .10) !important; 64 --dm-iris-16: rgba(196, 167, 231, .16) !important; 65 --dm-iris-24: rgba(196, 167, 231, .24) !important; 66 --dm-iris-40: rgba(196, 167, 231, .40) !important; 67 68 /* the source variables Sidebery derives everything else from */ 69 --s-frame-bg: var(--dm-base) !important; 70 --s-frame-fg: var(--dm-text) !important; 71 --s-toolbar-bg: var(--dm-surface) !important; 72 --s-toolbar-fg: var(--dm-text) !important; 73 --s-toolbar-border: rgba(64, 61, 82, .55) !important; 74 --s-accent: var(--dm-iris) !important; 75 --s-act-el-bg: var(--dm-overlay) !important; 76 --s-act-el-fg: var(--dm-text) !important; 77 --s-act-el-border: var(--dm-iris-24) !important; 78 --s-popup-bg: var(--dm-overlay) !important; 79 --s-popup-fg: var(--dm-text) !important; 80 --s-popup-border: var(--dm-hl-med) !important; 81 82 /* overlays: tint with iris instead of flat white, so hover reads as accent */ 83 --frame-el-overlay-hover-bg: var(--dm-iris-10) !important; 84 --frame-el-overlay-clicked-bg: var(--dm-iris-16) !important; 85 --frame-el-overlay-selected-bg: var(--dm-iris-16) !important; 86 --frame-el-overlay-selected-border: var(--dm-iris) !important; 87 --toolbar-el-overlay-hover-bg: var(--dm-iris-10) !important; 88 --toolbar-el-overlay-clicked-bg: var(--dm-iris-16) !important; 89 --toolbar-el-overlay-active-bg: var(--dm-iris-16) !important; 90 --toolbar-el-overlay-active-border: var(--dm-iris-24) !important; 91 --toolbar-el-overlay-selected-bg: var(--dm-iris-16) !important; 92 --toolbar-el-overlay-selected-border: var(--dm-iris) !important; 93 94 /* status colours: Sidebery ships a stock green/red that fights the palette */ 95 --status-ok: var(--dm-foam) !important; 96 --status-err: var(--dm-love) !important; 97 --status-active: var(--dm-iris) !important; 98 --status-notice: var(--dm-gold) !important; 99 --accent: var(--dm-iris) !important; 100 --focus-color: var(--dm-iris) !important; 101 --border: rgba(64, 61, 82, .55) !important; 102 103 /* badges (tab counters, unread marks) */ 104 --badge-bg: var(--dm-iris) !important; 105 --badge-fg: var(--dm-base) !important; 106 --badge-urgent-bg: var(--dm-love) !important; 107 --badge-urgent-fg: var(--dm-base) !important; 108 109 /* scrollbars */ 110 --scroll-color: var(--dm-hl-med) !important; 111 --frame-scrollbar-color: var(--dm-hl-med) !important; 112 --toolbar-scrollbar-color: var(--dm-hl-med) !important; 113 --popup-scrollbar-color: var(--dm-hl-med) !important; 114 --scrollbar-color: var(--dm-hl-med) !important; 115 } 116 117 /* Container and colourised-tab hues. Firefox offers eight; Rosé Pine has six 118 accents, so these are desaturated towards the palette rather than snapped 119 onto it -- eight tellable-apart hues matter more here than purity. */ 120 #root [data-color="blue"] { --color: #7fb4d9 !important; } 121 #root [data-color="turquoise"], 122 #root [data-color="cyan"] { --color: var(--dm-foam) !important; } 123 #root [data-color="green"] { --color: #8fc9a4 !important; } 124 #root [data-color="yellow"] { --color: var(--dm-gold) !important; } 125 #root [data-color="orange"] { --color: #eba774 !important; } 126 #root [data-color="red"] { --color: var(--dm-love) !important; } 127 #root [data-color="pink"] { --color: var(--dm-rose) !important; } 128 #root [data-color="purple"] { --color: var(--dm-iris) !important; } 129 #root [data-color="inactive"] { --color: var(--dm-muted) !important; } 130 #root [data-color="toolbar"] { --color: var(--dm-text) !important; } 131 } 132 133 134 /*=== SIDEBAR ====================================================================================== 135 */ 136 137 @-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") 138 { 139 140 /*--- Geometry ------------------------------------------------------------------------------------- 141 142 ShyFox sizes tabs and nav buttons off a single `--button-size`; overriding that 143 one variable resizes the whole sidebar consistently. 35px rows were built for a 144 300px sidebar -- at ~235px they waste vertical space and crowd the title. 145 */ 146 147 #root.root { 148 --dm-row: 31px !important; 149 --dm-gap: 4px !important; 150 --dm-fs: 13px !important; 151 152 --button-size: var(--dm-row) !important; 153 --pin-favicon-size: 24px !important; 154 155 --tabs-height: var(--dm-row) !important; 156 --tabs-margin: var(--dm-gap) !important; 157 --tabs-inner-gap: 6px !important; 158 --tabs-indent: 11px !important; 159 --tabs-font: var(--dm-fs) var(--general-font-family) !important; 160 --tabs-border-radius: 10px !important; 161 --general-border-radius: 8px !important; 162 --general-margin: 4px !important; 163 164 --nav-btn-width: var(--dm-row) !important; 165 --nav-btn-height: var(--dm-row) !important; 166 --nav-btn-border-radius: 8px !important; 167 --nav-btn-margin: 3px !important; 168 169 --bottom-bar-height: 26px !important; 170 --search-height: 28px !important; 171 --search-border-radius: 8px !important; 172 --search-font-size: var(--dm-fs) !important; 173 174 /* To run the sidebar in the system mono instead, uncomment this line. 175 Mono is wider, so expect titles to truncate ~15% sooner. */ 176 /* --general-font-family: "DM Mono Nerd Font", monospace !important; */ 177 } 178 179 /*--- Tabs ----------------------------------------------------------------------------------------- 180 181 The active tab is the one thing you look for in a 200-tab list, so it gets three 182 cues at once: an iris rail down its left edge, a lifted overlay background, and 183 a hairline ring. Everything else stays quiet. 184 */ 185 186 #root.root { 187 --tabs-normal-bg: transparent !important; 188 --tabs-normal-fg: var(--dm-subtle) !important; 189 --tabs-activated-bg: var(--dm-overlay) !important; 190 --tabs-activated-fg: var(--dm-text) !important; 191 --frame-el-shadow: none !important; 192 193 --tabs-activated-shadow: 194 inset 2px 0 0 0 var(--dm-iris), 195 inset 0 0 0 1px var(--dm-iris-24), 196 0 2px 10px -6px rgba(0, 0, 0, .85) !important; 197 198 /* colourised tabs (Settings -> Tabs -> "Colorize tabs") sit as a wash under 199 the row; stock 0.2 / 0.3 is loud enough to swamp the palette */ 200 --tabs-color-layer-opacity: .10 !important; 201 --tabs-activated-color-layer-opacity: .20 !important; 202 203 --tabs-discarded-favicon-opacity: .45 !important; 204 --tabs-discarded-title-opacity: .55 !important; 205 --tabs-lvl-opacity: .5 !important; 206 } 207 208 #root.root .Tab .t-box, 209 #root.root .Tab .title { 210 letter-spacing: .1px !important; 211 } 212 213 /* unloaded tabs read as "not here yet" without shouting */ 214 #root.root .Tab[data-discarded="true"] .title { font-style: italic !important; } 215 216 #root.root .Tab[data-active="true"] .title { 217 color: var(--dm-text) !important; 218 font-weight: 600 !important; 219 } 220 221 /* a tab playing audio is worth finding fast */ 222 #root.root .Tab[data-audible="true"] .audio-icon { fill: var(--dm-foam) !important; } 223 #root.root .Tab[data-muted="true"] .audio-icon { fill: var(--dm-muted) !important; } 224 225 /* close button: Sidebery already handles when it appears, this is just the 226 colour cue on the icon itself */ 227 #root.root .Tab .close:hover { background-color: var(--dm-iris-16) !important; } 228 #root.root .Tab .close:hover .close-icon { 229 fill: var(--dm-love) !important; 230 opacity: 1 !important; 231 } 232 233 /* loading spinner in accent */ 234 #root.root .Tab .progress-spinner { border-top-color: var(--dm-iris) !important; } 235 236 /*--- Tree guides ---------------------------------------------------------------------------------- 237 238 Sidebery's level marks are 1px ticks in the tab's own text colour. Recolouring 239 them to highlight-high turns them into a proper indent rail: visible enough to 240 follow, quiet enough to ignore. Each box-shadow copy is one nesting level. 241 */ 242 243 #root.root[data-tabs-tree-lvl-marks="true"] .Tab[data-pin="false"]:not([data-lvl="0"]) .body:after { 244 background-color: var(--dm-hl-high) !important; 245 box-shadow: 246 calc(var(--tabs-indent) * -1) 0 0 0 var(--dm-hl-high), 247 calc(var(--tabs-indent) * -2) 0 0 0 var(--dm-hl-high), 248 calc(var(--tabs-indent) * -3) 0 0 0 var(--dm-hl-high), 249 calc(var(--tabs-indent) * -4) 0 0 0 var(--dm-hl-high), 250 calc(var(--tabs-indent) * -5) 0 0 0 var(--dm-hl-high), 251 calc(var(--tabs-indent) * -6) 0 0 0 var(--dm-hl-high), 252 calc(var(--tabs-indent) * -7) 0 0 0 var(--dm-hl-high), 253 calc(var(--tabs-indent) * -8) 0 0 0 var(--dm-hl-high) !important; 254 } 255 256 /*--- Pinned tabs ---------------------------------------------------------------------------------- 257 258 ShyFox lays these out as a 3-per-row grid whose height is a fraction of the 259 sidebar width, so a narrower sidebar shrinks them automatically. Only the 260 surface treatment is changed here: the grid maths is left alone. 261 */ 262 263 #root.root .Tab[data-pin="true"] .body { 264 border: none !important; 265 background-color: var(--dm-surface) !important; 266 box-shadow: inset 0 0 0 1px rgba(64, 61, 82, .5) !important; 267 } 268 #root.root .Tab[data-pin="true"]:hover .body { 269 box-shadow: inset 0 0 0 1px var(--dm-iris-40) !important; 270 } 271 #root.root .Tab[data-pin="true"][data-active="true"] .body { 272 border: none !important; 273 background-color: var(--dm-overlay) !important; 274 box-shadow: 275 inset 0 0 0 1px var(--dm-iris), 276 0 2px 12px -6px rgba(0, 0, 0, .9) !important; 277 } 278 279 /*--- Navigation bar ------------------------------------------------------------------------------- 280 */ 281 282 #root.root .NavigationBar { 283 box-shadow: inset 0 -1px 0 0 rgba(64, 61, 82, .45) !important; 284 } 285 #root.root .NavigationBar .nav-item > svg { fill: var(--dm-subtle) !important; } 286 #root.root .NavigationBar .nav-item:hover > svg { fill: var(--dm-text) !important; } 287 #root.root .NavigationBar .nav-item[data-active="true"] > svg, 288 #root.root .NavigationBar .nav-item[data-loading="true"] > svg { fill: var(--dm-iris) !important; } 289 290 /* active panel button: filled pill rather than a bare tint */ 291 #root.root .NavigationBar .nav-item[data-active="true"]:before { 292 background-color: var(--dm-iris-16) !important; 293 box-shadow: inset 0 0 0 1px var(--dm-iris-24) !important; 294 opacity: 1 !important; 295 } 296 297 #root.root .NavigationBar .nav-item .badge { box-shadow: 0 0 0 2px var(--dm-surface) !important; } 298 299 /*--- Search bar ----------------------------------------------------------------------------------- 300 */ 301 302 #root.root .SearchBar:before { 303 background-color: var(--dm-overlay) !important; 304 box-shadow: inset 0 0 0 1px rgba(64, 61, 82, .6) !important; 305 } 306 #root.root .SearchBar[data-focused="true"]:before { 307 background-color: var(--dm-hl-low) !important; 308 box-shadow: inset 0 0 0 1px var(--dm-iris) !important; 309 } 310 #root.root .SearchBar .input, 311 #root.root .SearchBar .placeholder { color: var(--dm-text) !important; } 312 #root.root .SearchBar .search-icon > svg { fill: var(--dm-iris) !important; } 313 314 /*--- Bottom bar and new-tab buttons --------------------------------------------------------------- 315 */ 316 317 #root.root .BottomBar { box-shadow: inset 0 1px 0 0 rgba(64, 61, 82, .45) !important; } 318 #root.root .BottomBar .tool-btn > svg { 319 fill: var(--dm-muted) !important; 320 transition: fill var(--d-fast) !important; 321 } 322 #root.root .BottomBar .tool-btn:hover > svg { fill: var(--dm-iris) !important; } 323 324 /* "+" row: a ghost button, not a solid one */ 325 #root.root .new-tab-btns .new-tab-btn:before { 326 border-radius: 8px !important; 327 box-shadow: inset 0 0 0 1px rgba(64, 61, 82, .55) !important; 328 background-color: transparent !important; 329 } 330 #root.root .new-tab-btns .new-tab-btn:hover:before { 331 background-color: var(--dm-iris-10) !important; 332 box-shadow: inset 0 0 0 1px var(--dm-iris-40) !important; 333 } 334 335 /*--- Sub-panels, popups, menus, notifications ----------------------------------------------------- 336 */ 337 338 #root.root { 339 --ctx-menu-bg: var(--dm-overlay) !important; 340 --ctx-menu-fg: var(--dm-text) !important; 341 --ctx-menu-border-radius: 10px !important; 342 --ctx-menu-opt-border-radius: 6px !important; 343 --ctx-menu-shadow: 0 0 0 1px var(--dm-hl-med), 0 8px 28px -8px rgba(0, 0, 0, .95) !important; 344 --ctx-menu-separator: rgba(64, 61, 82, .8) !important; 345 346 --popup-shadow: 0 0 0 1px var(--dm-hl-med), 0 10px 32px -10px rgba(0, 0, 0, .95) !important; 347 348 --notification-bg: var(--dm-overlay) !important; 349 --notification-fg: var(--dm-text) !important; 350 --notification-border-radius: 10px !important; 351 352 --bookmarks-border-radius: 8px !important; 353 --history-item-border-radius: 8px !important; 354 } 355 356 #root.root .SubPanel, 357 #root.root .BookmarksSubPanel, 358 #root.root .ClosedTabsSubPanel { 359 box-shadow: inset 0 1px 0 0 rgba(64, 61, 82, .55) !important; 360 } 361 #root.root .SubListTitle { color: var(--dm-subtle) !important; } 362 363 /* The drag-and-drop insertion pointer already draws itself from --s-accent, 364 which the palette block above pins to iris -- nothing to do here. */ 365 } 366 367 368 /*=== SETTINGS PAGE ================================================================================ 369 370 The settings page ships as a flat wall of rows. Giving the left nav a surface 371 of its own, the active entry an iris pill, and section headers a leading accent 372 rule turns it into something you can scan. 373 */ 374 375 @-moz-document regexp("^moz-extension://.*?/page.setup/setup.html.*") 376 { 377 #root.root { 378 --setup-bg: var(--dm-base) !important; 379 --border-color: rgba(64, 61, 82, .5) !important; 380 --toolbar-fg-active: var(--dm-iris) !important; 381 --general-border-radius: 8px !important; 382 } 383 384 #root.root, #root.root .Settings { background-color: var(--dm-base) !important; } 385 386 /* left navigation column */ 387 #root.root > .nav { 388 background-color: var(--dm-surface) !important; 389 box-shadow: inset -1px 0 0 0 rgba(64, 61, 82, .5) !important; 390 } 391 #root.root > .nav .option .body, 392 #root.root > .nav .sub-option .body, 393 #root.root > .nav .sub-sub-option .body { border-radius: 7px !important; } 394 395 #root.root > .nav .option[data-active="true"] .body, 396 #root.root > .nav .sub-option[data-active="true"] .body, 397 #root.root > .nav .sub-sub-option[data-active="true"] .body { 398 color: var(--dm-iris) !important; 399 font-weight: 600 !important; 400 } 401 #root.root > .nav .option[data-active="true"] .body:before, 402 #root.root > .nav .sub-option[data-active="true"] .body:before, 403 #root.root > .nav .sub-sub-option[data-active="true"] .body:before { 404 background-color: var(--dm-iris) !important; 405 opacity: .16 !important; 406 } 407 408 /* section headings: accent rule on the left, so sections are findable */ 409 #root.root .Settings .sub-title .text { 410 color: var(--dm-text) !important; 411 padding-left: 10px !important; 412 box-shadow: inset 3px 0 0 -1px var(--dm-iris) !important; 413 } 414 #root.root .Settings .sub-title:before, 415 #root.root .Settings .sub-title:after { background-color: var(--dm-base) !important; } 416 #root.root .Settings .sub-title:after { 417 background-image: linear-gradient(0deg, transparent, var(--dm-base)) !important; 418 } 419 420 /* row labels and their explanatory notes */ 421 #root.root .ToggleField .label, 422 #root.root .SelectField .label, 423 #root.root .TextField .label, 424 #root.root .NumField .label { color: var(--dm-text) !important; } 425 #root.root .note { color: var(--dm-subtle) !important; } 426 427 /* on / off pills: stock ships a saturated green and red */ 428 #root.root .ToggleInput .opt.-true { --color: var(--dm-foam) !important; } 429 #root.root .ToggleInput .opt.-false { --color: var(--dm-muted) !important; } 430 #root.root .ToggleInput .opt[data-active="true"]:before, 431 #root.root .SelectInput .opt[data-active="true"]:before { opacity: .22 !important; } 432 433 /* buttons */ 434 #root.root .btn { border-radius: 8px !important; color: var(--dm-text) !important; } 435 #root.root .btn:before { background-color: var(--dm-iris) !important; } 436 437 /* Styles editor. The raw-CSS column ships at 11px in the browser's default 438 monospace; it is the one place on this page you actually read character by 439 character, so it gets the system mono at a legible size. */ 440 #root.root .StylesEditor .editor, 441 #root.root .StylesEditor .editor-box > .placeholder, 442 #root.root .StylesEditor .editor-box > .placeholder-note { 443 font-family: "DM Mono Nerd Font", ui-monospace, monospace !important; 444 font-size: 12px !important; 445 line-height: 1.6 !important; 446 } 447 #root.root .StylesEditor .editor, 448 #root.root .StylesEditor .editor-box > .placeholder { color: var(--dm-foam) !important; } 449 #root.root .StylesEditor .editor-box { background-color: var(--dm-base) !important; } 450 #root.root .StylesEditor .css { box-shadow: inset 1px 0 0 0 rgba(64, 61, 82, .5) !important; } 451 452 #root.root .StylesEditor .vars, 453 #root.root .StylesEditor .section-header { background-color: var(--dm-surface) !important; } 454 #root.root .StylesEditor .css-var .var-name { color: var(--dm-text) !important; } 455 #root.root .StylesEditor .css-var .var-value, 456 #root.root .StylesEditor .color-sample .value { 457 color: var(--dm-subtle) !important; 458 font-family: "DM Mono Nerd Font", ui-monospace, monospace !important; 459 } 460 #root.root .StylesEditor .color-sample .example { 461 border-radius: 4px !important; 462 box-shadow: inset 0 0 0 1px rgba(64, 61, 82, .8) !important; 463 } 464 #root.root .StylesEditor .StyleField { border-radius: 8px !important; } 465 #root.root .StylesEditor nav { box-shadow: inset 0 -1px 0 0 rgba(64, 61, 82, .5) !important; } 466 #root.root .StylesEditor .bottom-bar { background-color: var(--dm-surface) !important; } 467 468 #root.root .Snapshots .titlebar, 469 #root.root .Snapshots .active-snapshot-section .header, 470 #root.root .MenuEditor { background-color: var(--dm-surface) !important; } 471 } 472 473 474 /*=== GROUP PAGES ================================================================================== 475 */ 476 477 @-moz-document regexp("^moz-extension://.*?/sidebery/group.html.*") 478 { 479 #root.root, #root.root .bg { background-color: var(--dm-base) !important; } 480 481 #root.root .title-box .title { color: var(--dm-text) !important; } 482 #root.root .title-highlight { background-color: var(--dm-iris-16) !important; } 483 484 #root.root .tab, #root.root .pinned-tab { 485 border-radius: 10px !important; 486 background-color: var(--dm-surface) !important; 487 box-shadow: inset 0 0 0 1px rgba(64, 61, 82, .5) !important; 488 transition: box-shadow var(--d-fast), background-color var(--d-fast) !important; 489 } 490 #root.root .tab:hover, #root.root .pinned-tab:hover { 491 background-color: var(--dm-overlay) !important; 492 box-shadow: inset 0 0 0 1px var(--dm-iris-40) !important; 493 } 494 #root.root .tab-title, #root.root .pinned-tab-title { color: var(--dm-text) !important; } 495 #root.root .tab-url, #root.root .pinned-tab-url { color: var(--dm-muted) !important; } 496 497 #root.root .new-tab { 498 border-radius: 10px !important; 499 box-shadow: inset 0 0 0 1px rgba(64, 61, 82, .5) !important; 500 } 501 #root.root .new-tab:hover { box-shadow: inset 0 0 0 1px var(--dm-iris-40) !important; } 502 #root.root .new-tab-plus { fill: var(--dm-iris) !important; } 503 }