userChrome.css (7607B) - raw


      1  :root {
      2 
      3    /* Minimal Functional Fox variables*/
      4   --mff-bg: #222d32;
      5   --mff-icon-color: #e0fbfc;
      6   --mff-nav-toolbar-padding: 8px;
      7   --mff-sidebar-bg: var(--mff-bg);
      8   --mff-sidebar-color: #e0fbfc;
      9   --mff-tab-border-radius: 0px;
     10   --mff-tab-color: #f2f1f0;
     11   --mff-tab-font-family: "DejaVu", sans;
     12   --mff-tab-font-size: 11pt;
     13   --mff-tab-font-weight: 400;
     14   --mff-tab-height: 32px;
     15   --mff-tab-pinned-bg: ##19B596;
     16   --mff-tab-selected-bg: #b7416e;
     17   --mff-tab-soundplaying-bg: ##EADAB1;
     18   --mff-urlbar-color: #98c1d9;
     19   --mff-urlbar-focused-color: #e0fbfc;
     20   --mff-urlbar-font-family: "Apercu Mono", monospace;
     21   --mff-urlbar-font-size: 12pt;
     22   --mff-urlbar-font-weight: 700;
     23   --mff-urlbar-results-color: #e0fbfc;
     24   --mff-urlbar-results-font-family: "Apercu Mono", serif;
     25   --mff-urlbar-results-font-size: 12pt;
     26   --mff-urlbar-results-font-weight: 700;
     27   --mff-urlbar-results-url-color: #98c1d9;
     28   /*   --mff-tab-selected-bg: linear-gradient(90deg, rgba(232,74,95,1) 0%, rgba(255,132,124,1) 50%, rgba(254,206,168,1) 100%); */
     29   /*   --mff-urlbar-font-weight: 600; */
     30 
     31   /* Overriden Firefox variables*/
     32   --autocomplete-popup-background: var(--mff-bg) !important;
     33   --default-arrowpanel-background: var(--mff-bg) !important;
     34   --default-arrowpanel-color: #fefefa !important;
     35   --lwt-toolbarbutton-icon-fill: var(--mff-icon-color) !important;
     36   --panel-disabled-color: #f9f9fa80;
     37   --toolbar-bgcolor: var(--mff-bg) !important;
     38   --urlbar-separator-color: transparent !important;
     39 }
     40 
     41 /*
     42   _____ _   ___ ___
     43  |_   _/_\ | _ ) __|
     44    | |/ _ \| _ \__ \
     45    |_/_/ \_\___/___/
     46 
     47 */
     48 
     49 .tab-background[selected="true"] {
     50   background: var(--mff-tab-selected-bg) !important;
     51 }
     52 
     53 .tab-background:not[visuallyselected] {
     54   background: var(--mff-tab-selected-bg) !important;
     55   opacity: 0.5 !important;
     56 }
     57 
     58 /* This positions the tabs under the navaigator container */
     59 #titlebar {
     60   -moz-box-ordinal-group: 3 !important;
     61 }
     62 
     63 .tabbrowser-tab::after,
     64 .tabbrowser-tab::before {
     65   border-left: none !important;
     66 }
     67 
     68 .tab-background {
     69   border: none !important;
     70 }
     71 
     72 .tabbrowser-arrowscrollbox {
     73   margin-inline-start: 4px !important;
     74   margin-inline-end: 0px !important;
     75 }
     76 
     77 .tab-close-button {
     78  display: none !important;
     79 }
     80 
     81 .tab-text {
     82   font-family: var(--mff-tab-font-family);
     83   font-weight: var(--mff-tab-font-weight);
     84   font-size: var(--mff-tab-font-size) !important;
     85   color: var(--mff-tab-color);
     86 }
     87 
     88 /* Hide the favicon for tabs */
     89 hbox.tab-content .tab-icon-image {
     90   display: none !important;
     91 }
     92 
     93 /* Show the favicon for tabs that are pinned */
     94 hbox.tab-content[pinned=true] .tab-icon-image {
     95   display: initial !important;
     96 }
     97 
     98 hbox.tab-content[pinned=true] .tab-text {
     99   display: none !important;
    100 }
    101 
    102 #tabbrowser-tabs {
    103   --tab-loading-fill: #033433 !important;
    104 
    105 }
    106 
    107 .tab-label-container:not([textoverflow]) {
    108   display: flex;
    109   overflow: hidden;
    110   justify-content: center;
    111 width: 50% !important;
    112   max-width: 50% !important;
    113   min-width: 50% !important;
    114 }
    115 
    116 /* .tab-label-container::after {
    117   content: "?" !important;
    118 
    119 } */
    120 
    121 .tab-line {
    122   display: none !important;
    123 }
    124 
    125 .tabbrowser-tab {
    126   border-radius: var(--mff-tab-border-radius) !important;
    127   border-width: 0;
    128   height: var(--mff-tab-height) !important;
    129   margin-bottom: 4px !important;
    130   margin-inline-end: 4px !important;
    131   margin-top: 4px !important;
    132   max-height: var(--mff-tab-height) !important;
    133   min-height: var(--mff-tab-height) !important;
    134 }
    135 
    136 .tabbrowser-tab[soundplaying="true"] {
    137   background-color: var(--mff-tab-soundplaying-bg) !important;
    138 }
    139 
    140 #tabs-newtab-button {
    141   list-style-image: url("add.svg") !important;
    142   opacity: 0.7;
    143 }
    144 
    145 .tab-icon-sound {
    146   display: none !important;
    147 }
    148 
    149 /*
    150   _____ ___   ___  _    ___   _   ___
    151 |_   _/ _ \ / _ \| |  | _ ) /_\ | _ \
    152   | || (_) | (_) | |__| _ \/ _ \|   /
    153   |_| \___/ \___/|____|___/_/  \_\_|_\
    154 */
    155 
    156 .urlbar-icon > image {
    157   fill: var(--mff-icon-color) !important;
    158   color: var(--mff-icon-color) !important;
    159 }
    160 
    161 .toolbarbutton-text {
    162   color: var(--mff-icon-color)  !important;
    163 }
    164 .urlbar-icon {
    165   color: var(--mff-icon-color)  !important;
    166 
    167 }
    168 
    169 .toolbarbutton-icon {
    170 /* filter: drop-shadow(0 0 0.75rem crimson); */
    171 }
    172 
    173 #urlbar-results {
    174   font-family: var(--mff-urlbar-results-font-family);
    175   font-weight: var(--mff-urlbar-results-font-weight);
    176   font-size: var(--mff-urlbar-results-font-size) !important;
    177   color: var(--mff-urlbar-results-color) !important;
    178 }
    179 
    180 .urlbarView-row[type="bookmark"] > span{
    181   color: green !important;
    182 }
    183 
    184 .urlbarView-row[type="switchtab"] > span{
    185   color: orange !important;
    186 }
    187 
    188 .urlbarView-url, .search-panel-one-offs-container {
    189   color: var(--mff-urlbar-results-url-color) !important;
    190   font-family: var(--mff-urlbar-font-family);
    191   font-weight: var(--mff-urlbar-results-font-weight);
    192   font-size: var(--mff-urlbar-font-size) !important;
    193 }
    194 
    195 .urlbarView-favicon, .urlbarView-type-icon {
    196   display: none !important;
    197 }
    198 
    199 #urlbar-input {
    200   font-size: var(--mff-urlbar-font-size) !important;
    201   color: var(--mff-urlbar-color) !important;
    202   font-family: var(--mff-urlbar-font-family) !important;
    203   font-weight: var(--mff-urlbar-font-weight)!important;
    204   text-align: center !important;
    205 }
    206 
    207 #tracking-protection-icon-container, #identity-box {
    208   display: none;
    209 }
    210 
    211 #back-button > .toolbarbutton-icon{
    212   --backbutton-background: transparent !important;
    213   border: none !important;
    214 }
    215 
    216 #back-button {
    217   list-style-image: url("left-arrow.svg") !important;
    218 }
    219 
    220 #forward-button {
    221   list-style-image: url("right-arrow.svg") !important;
    222 }
    223 
    224 toolbar {
    225   background-image: none !important;
    226 }
    227 
    228 #urlbar-background {
    229   opacity: .98 !important;
    230 }
    231 
    232 #navigator-toolbox, toolbaritem {
    233   border: none !important;
    234 }
    235 
    236 #urlbar-background {
    237   background-color: var(--mff-bg) !important;
    238   border: none !important;
    239 }
    240 
    241 .toolbar-items {
    242   background-color: var(--mff-bg) !important;
    243 }
    244 
    245 #sidebar-search-container {
    246   background-color: var(--mff-sidebar-bg) !important;
    247 }
    248 
    249 box.panel-arrowbox {
    250   display: none;
    251 }
    252 
    253 box.panel-arrowcontent {
    254   border-radius: 8px !important;
    255   border: none !important;
    256 }
    257 
    258 tab.tabbrowser-tab {
    259   overflow: hidden;
    260 }
    261 
    262 tab.tabbrowser-tab:hover {
    263   box-shadow: 0 1px 4px rgba(0,0,0,.05);
    264 }
    265 
    266 image#star-button {
    267   display: none;
    268 }
    269 
    270 toolbar#nav-bar {
    271   padding: var(--mff-nav-toolbar-padding) !important;
    272 }
    273 
    274 toolbar#nav-bar {
    275   padding: 4px !important;
    276 }
    277 
    278 #urlbar {
    279   max-width: 70% !important;
    280   margin: 0 15% !important;
    281   /* 	position: unset!important; */;
    282 }
    283 
    284 #urlbar-input:focus {
    285   color: var(--mff-urlbar-focused-color) !important;
    286 }
    287 
    288 
    289 .megabar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
    290   box-shadow: none !important;
    291   background-color: transparent !important;
    292 }
    293 
    294 toolbarbutton {
    295   box-shadow: none !important;
    296 }
    297 
    298 
    299 /*
    300   ___ ___ ___  ___ ___   _   ___
    301  / __|_ _|   \| __| _ ) /_\ | _ \
    302  \__ \| || |) | _|| _ \/ _ \|   /
    303  |___/___|___/|___|___/_/ \_\_|_\
    304 */
    305 
    306 .close-icon, .urlbar-icon {
    307   fill: var(--mff-icon-color) !important;
    308 }
    309 
    310 .sidebar-placesTree {
    311   color: var(--mff-sidebar-color) !important;
    312 }
    313 
    314 #sidebar-switcher-target {
    315 /*   color: white !important; */
    316 }
    317 
    318 #sidebar-box {
    319   --sidebar-background-color: var(--mff-sidebar-bg) !important;
    320 }
    321 
    322 splitter#sidebar-splitter {
    323   opacity: 0 !important;
    324 }
    325 
    326 splitter#sidebar-splitter {
    327   border: none !important;
    328   background-color: transparent !important;
    329 }
    330 
    331 image#sidebar-icon {
    332   display: none;
    333 }
    334 
    335 
    336 /*
    337     _   ___ ___  _____      _____  _   _  _ ___ _
    338    /_\ | _ \ _ \/ _ \ \    / / _ \/_\ | \| | __| |
    339   / _ \|   /   / (_) \ \/\/ /|  _/ _ \| .` | _|| |__
    340  /_/ \_\_|_\_|_\\___/ \_/\_/ |_|/_/ \_\_|\_|___|____|
    341  */
    342 
    343 .panel-arrowcontent {
    344   padding: 0px !important;
    345   margin: 0px !important;
    346 }
    347 
    348 toolbarseparator {
    349   display: none;
    350 }