LCARStrek/devtools/toolbars.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
   7 .theme-light,
   8 .theme-dark,
   9 .theme-firebug {
  10   --toolbar-tab-hover: #FFCF00;
  11   --toolbar-tab-hover-active: #FF9F00;
  12   --searchbox-background-color: #000000;
  13   --searchbox-border-color: #9C9CFF;
  14   --searcbox-no-match-background-color: #400000;
  15   --searcbox-no-match-border-color: #FF0000;
  16   --magnifying-glass-image: url(images/search.svg);
  17   --filter-image: url(images/filter.svg);
  18   --tool-options-image: url(images/tool-options-tbutton.svg);
  19   --icon-filter: invert(1);
  20   --checked-icon-filter: url(images/filters.svg#checked-icon-state);
  21   --toolbar-button-border-color: #A09090;
  22 }
  23
  24 /* Toolbars */
  25 .devtools-toolbar,
  26 .devtools-sidebar-tabs tabs {
  27   padding: 0;
  28   border-width: 0;
  29 /*  border-bottom-width: 1px;*/
  30   border-style: solid;
  31 /*  height: 24px;
  32   line-height: 24px;*/
  33   box-sizing: border-box;
  34   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  35 }
  36 .devtools-toolbar {
  37   height: 24px;
  38 }
  39
  40 .devtools-toolbar {
  41   border-bottom: 3px solid var(--theme-body-background);
  42 }
  43
  44 .devtools-toolbar checkbox {
  45   /* LCARStrek checkbox colors don't work well against toolbar background */
  46   background-color: var(--theme-toolbar-background);
  47   padding: 2px;
  48   line-height: -moz-block-height;
  49 }
  50 .devtools-toolbar checkbox .checkbox-check {
  51 }
  52 .devtools-toolbar checkbox .checkbox-label-box {
  53 }
  54 .devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
  55 }
  56
  57 /* HTML Checkboxes - a lot copied from global/in-content/common.css */
  58 /* Hide the actual checkbox */
  59 input[type="checkbox"] {
  60   opacity: 0;
  61   width: 0;
  62   pointer-events: none;
  63   position: absolute;
  64 }
  65
  66 label > input[type="checkbox"] { /* old placement of checkbox in label, undo above */
  67   opacity: 1;
  68   width: auto;
  69   pointer-events: auto;
  70   position: static;
  71 }
  72
  73 /* Create a box to style as the checkbox */
  74 input[type="checkbox"] + label::before {
  75   display: inline-block;
  76   content: "";
  77   vertical-align: middle;
  78 }
  79
  80 .devtools-searchbox + #browser-style-checkbox-label, /* workaround for old placement of checkbox in label */
  81 input[type="checkbox"] + label {
  82   line-height: 0px;
  83   color: var(--theme-capped-toolbar-text);
  84 }
  85
  86 input[type="checkbox"] + label::before {
  87   -moz-appearance: none;
  88   width: 13px;
  89   height: 13px;
  90   border-radius: 0;
  91   border: 1px solid var(--theme-body-color);
  92   margin-inline-end: 3px;
  93   margin-inline-start: 2px;
  94   background-color: var(--theme-toolbar-background);
  95   background-position: center center;
  96   background-repeat: no-repeat;
  97 }
  98
  99 input[type="checkbox"]:not(:disabled) + label:hover::before {
 100   border-color: var(--theme-hover-background);
 101 }
 102 .devtools-searchbox + #browser-style-checkbox-label:hover, /* workaround for old placement of checkbox in label */
 103 input[type="checkbox"]:not(:disabled) + label:hover {
 104   color: var(--theme-hover-background);
 105 }
 106 input[type="checkbox"]:checked + label::before {
 107   background-image: url("chrome://global/skin/in-content/check.svg#check");
 108 }
 109
 110 input[type="checkbox"]:checked:disabled + label::before {
 111   background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
 112 }
 113 input[type="checkbox"]:checked:not(:disabled) + label:hover::before {
 114   background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
 115 }
 116 input[type="checkbox"]:disabled + label::before {
 117   border-color: var(--theme-body-color-inactive);
 118 }
 119 input[type="checkbox"]:disabled + label {
 120   color: var(--theme-body-color-inactive);
 121 }
 122
 123 .devtools-separator {
 124   margin: 0 2px;
 125   width: 2px;
 126   background-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%);
 127   background-size: 1px 100%;
 128   background-repeat: no-repeat;
 129   background-position: 0, 1px, 2px;
 130 }
 131
 132 /* HTML toolbars - style them LCARStrek-like */
 133
 134 div.devtools-toolbar,
 135 div.devtools-tabbar {
 136   background-size: calc(100% - 30px);
 137   background-image: linear-gradient(90deg, var(--theme-capped-toolbar-background), var(--theme-capped-toolbar-background));
 138   background-repeat: no-repeat;
 139   background-position: center center;
 140   display: flex;
 141 }
 142
 143 div.devtools-toolbar::before,
 144 div.devtools-toolbar::after,
 145 div.devtools-tabbar::before,
 146 div.devtools-tabbar::after {
 147   display: flex;
 148   content: "";
 149   width: 12px;
 150   min-height: 16px;
 151   background-color: var(--theme-toolbar-caps);
 152 }
 153
 154 div.devtools-toolbar::before,
 155 div.devtools-tabbar::before {
 156   border-radius: 8px 0px 0px 8px;
 157   border: none;
 158   border-inline-end: 3px solid black;
 159   margin-inline-end: 2px;
 160 }
 161
 162 div.devtools-toolbar::after,
 163 div.devtools-tabbar::after {
 164   border-radius: 0px 8px 8px 0px;
 165   border: none;
 166   border-inline-start: 3px solid black;
 167   margin-inline-start: auto; /* originally 2px, but auto makes us able to get flexible free space */
 168 }
 169
 170 /* In-tools sidebar */
 171
 172 .devtools-sidebar-tabs {
 173   height: 100%;
 174 }
 175
 176 .devtools-sidebar-tabs > tabpanels {
 177   padding: 0;
 178   border: 0;
 179 }
 180
 181 .devtools-sidebar-tabs tabs {
 182   position: static;
 183   overflow: hidden;
 184 }
 185
 186 .devtools-sidebar-alltabs {
 187 /*  -moz-appearance: none;
 188   height: 24px;
 189   line-height: 24px;
 190   padding: 0 4px;
 191   margin: 0;
 192   border-width: 0 0 1px 0;
 193   border-inline-start-width: 1px;
 194   border-style: solid;*/
 195 }
 196
 197 .devtools-sidebar-alltabs .toolbarbutton-icon {
 198   display: none;
 199 }
 200
 201 .devtools-sidebar-tabs tabs > .tabs-right,
 202 .devtools-sidebar-tabs tabs > .tabs-left {
 203   display: none;
 204 }
 205
 206 .devtools-sidebar-tabs tabs > tab {
 207   min-width: 78px;
 208   text-align: center;
 209   -moz-box-flex: 1;
 210   position: static;
 211   margin-top: 0;
 212 }
 213
 214 .devtools-sidebar-tabs tabs > tab:-moz-focusring {
 215   position: static;
 216 }
 217
 218 .devtools-sidebar-tabs tabs > tab:first-of-type {
 219   margin-inline-start: 0;
 220 }
 221
 222 .devtools-sidebar-tabs tabs > tab:last-of-type {
 223   border-inline-end-width: 0;
 224 }
 225
 226 .devtools-sidebar-tabs tabs > tab {
 227 }
 228
 229 .devtools-sidebar-tabs tabs > tab[selected],
 230 .devtools-sidebar-tabs tabs > tab[selected] + tab {
 231 }
 232
 233 .devtools-sidebar-tabs tabs > tab:first-child {
 234 }
 235
 236 .devtools-sidebar-tabs tabs > tab:hover {
 237 }
 238
 239 .devtools-sidebar-tabs tabs > tab:hover:active {
 240 }
 241
 242 .devtools-sidebar-tabs tabs > tab[selected],
 243 .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
 244 }
 245
 246 .hidden-labels-box:not(.visible) > label,
 247 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
 248   display: none;
 249 }
 250
 251 .devtools-invisible-splitter {
 252   border-color: transparent;
 253   background-color: transparent;
 254 }
 255
 256 .devtools-horizontal-splitter,
 257 .devtools-side-splitter {
 258 /*  background-color: var(--theme-splitter-color);*/
 259 }
 260
 261 /* HACK around hardcoded stylings for the HTML-based sidebar tabs */
 262 .tabs .tabs-menu-item,
 263 .theme-dark .tabs .tabs-menu-item,
 264 .theme-light .tabs .tabs-menu-item {
 265   margin: 0;
 266   margin-inline-end: 3px !important;
 267   padding: 0 !important;
 268   border-radius: 8px 8px 0 0;
 269   border: 0 !important;
 270   background-color: var(--theme-button-background);
 271 }
 272 .tabs .tabs-menu-item a {
 273   color: var(--theme-button-color) !important;
 274   padding: 0px 3px !important;
 275 }
 276 .tabs .tabs-menu-item.is-active {
 277   height: auto !important;
 278 }
 279 .tabs .tabs-navigation {
 280   height: auto !important;
 281   border: 0 !important;
 282   border-bottom: 3px solid  var(--theme-body-background) !important;
 283 }