shy-sidebery.css (4388B)
1 /*== ShyFox Sidebery =============================================================================================================================== 2 3 Styles for Sidebery extension 4 5 6 --- VARIABLES --------------------------------------------------------------------------------------------------------------------------------------- 7 8 */ 9 10 11 @-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html"){ /* wrap start */ 12 13 #root.root { 14 --general-border-radius: var(--rounding) !important; 15 --general-margin: 4px !important; 16 17 --button-size: 35px; 18 --pin-favicon-size: 30px; 19 20 --nav-btn-margin: calc(var(--margin) / 2) !important; 21 --nav-btn-width: var(--button-size) !important; 22 --nav-btn-height: var(--button-size) !important; 23 --nav-btn-len-margin: calc(var(--rounding) / 4) !important; 24 25 --audio-btn-round-margin: calc(var(--big-rounding) / 2) !important; 26 27 --tabs-audio-btn-width: 22px !important; 28 --tabs-margin: 6px !important; 29 --tabs-height: var(--button-size) !important; 30 --tabs-inner-gap: calc(var(--margin) / 2) !important; 31 --tabs-border-radius: var(--big-rounding) !important; 32 33 @media -moz-pref("shyfox.fill.accent.with.icons.fill.color") {--shy-color: var(--s-toolbar-fg, var(--shy-accent-color)) !important;} 34 --accent: var(--shy-color) !important; 35 --frame-el-overlay-selected-border: var(--accent) !important; 36 --toolbar-el-overlay-selected-border: var(--accent) !important; 37 --status-notice: var(--accent) !important; 38 } 39 40 /* 41 42 --- PINNED TABS ------------------------------------------------------------------------------------------------------------------------------------- 43 44 */ 45 46 /* size calculation */ 47 .PinnedTabsBar .tab-wrapper .Tab { 48 --n: 3; --m: 1; 49 50 width: calc( 51 100vw / var(--n) 52 - var(--tabs-margin) * (1/var(--n) + 1) 53 ) !important; 54 55 height: calc( ( 56 (100vw - var(--tabs-margin)) / 3.6 57 ) / var(--m) ) !important; 58 } 59 60 /* 1 pinned tab */ 61 .PinnedTabsBar 62 .tab-wrapper:nth-child(1):last-child .Tab 63 {--n: 1; --m: 1.4;} 64 65 /* 2 tabs in bottom row */ 66 .PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 2):last-child) 67 .tab-wrapper:nth-last-child(-n + 2) .Tab 68 {--n: 2; --m: 1.2;} 69 70 /* 4 tabs in bottom row */ 71 .PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 4):last-child) 72 .tab-wrapper:nth-last-child(-n + 4) .Tab 73 {--n: 4; --m: 1.3;} 74 75 /* audio icon */ 76 .Tab[data-pin="true"] > .body > .audio { 77 background: transparent !important; 78 box-shadow: none !important; 79 right: var(--audio-btn-round-margin) !important; 80 top: var(--audio-btn-round-margin) !important; 81 } 82 83 /* bigger favicon */ 84 .Tab[data-pin="true"] :is(.fav, .fav-icon){ 85 width: var(--pin-favicon-size) !important; 86 height: var(--pin-favicon-size) !important; 87 } 88 89 /* shadow, outline and background */ 90 .Tab[data-pin="true"] .body { 91 border: 1px solid var(--s-frame-bg) !important; 92 background-color: var(--toolbar-bg) !important; 93 } 94 95 /* selected tab outline */ 96 .Tab[data-pin="true"][data-active="true"] .body 97 {border: 1px solid var(--s-frame-fg) !important;} 98 99 /* remove bottom margin */ 100 .PinnedTabsBar {margin-bottom: 0px !important;} 101 102 /* 103 104 --- OTHER ------------------------------------------------------------------------------------------------------------------------------------------- 105 106 */ 107 108 /* consistent navbar background */ 109 #nav_bar {background-color: transparent !important;} 110 111 /* padding */ 112 #nav_bar { 113 padding-top: var(--nav-btn-margin) !important; 114 padding-bottom: var(--general-margin) !important; 115 } 116 117 .BottomBar {padding: var(--nav-btn-margin) !important;} 118 119 /* popup */ 120 .popup {margin: var(--tabs-margin) !important;} 121 .popup-container {background-color: transparent !important;} 122 123 /* search */ 124 #search_bar {margin: 4px !important;} 125 #search_bar[data-showed="false"]{display: none !important;} 126 #search_bar .clear-btn{margin-inline-end: var(--general-margin)} 127 128 .NavigationBar{box-shadow: none !important} 129 130 /* accent colored selection */ 131 ::selection {background: var(--shy-accent-color) !important;} 132 133 /* notification */ 134 .notification{ 135 border-radius: var(--rounding) !important; 136 &::after{ 137 top: calc(var(--rounding) / 4 + 3px) !important; 138 right: calc(var(--rounding) / 4 + 3px) !important; 139 } 140 } 141 142 } /* wrap end */