--theme-toolbar-background: #000000;
--theme-hover-background: #FFCF00;
--theme-hover-color: #000000;
+ --theme-active-background: #FFCF00;
+ --theme-active-color: #000000;
--theme-selection-background: #008484;
--theme-selection-color: #000000;
--theme-selection-background2: #004242;
.theme-toolbar,
.devtools-toolbar,
-.devtools-sidebar-tabs > tabs,
+.devtools-sidebar-tabs tabs,
+.devtools-sidebar-alltabs,
.CodeMirror-dialog { /* General toolbar styling */
/* color: var(--theme-body-color-alt);
background-color: var(--theme-toolbar-background);*/
border-bottom: 0;
}
-.devtools-horizontal-splitter {
-/* border-bottom: 1px solid var(--theme-splitter-color); */
-}
-
-.devtools-side-splitter {
-/* -moz-border-end: 1px solid var(--theme-splitter-color);
- border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */
-}
-
.devtools-textinput,
.devtools-searchinput {
background-color: #000000;
/* Toolbars */
.devtools-toolbar,
-.devtools-sidebar-tabs > tabs {
+.devtools-sidebar-tabs tabs,
+.devtools-sidebar-alltabs {
}
.devtools-toolbar {
}
.devtools-toolbar .devtools-toolbarbutton {
+ -moz-margin-start: 2px;
}
.devtools-toolbarbutton > .toolbarbutton-icon {
}
/* Button States */
-.devtools-toolbarbutton:hover,
-#toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover,
-.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover {
+.devtools-toolbarbutton:not([disabled]):hover,
+#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
+.devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
/* background: rgba(0, 0, 0, .3); / Splitters */
}
-.devtools-toolbarbutton:hover:active,
-#toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover:active,
-.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+.devtools-toolbarbutton:not([disabled]):hover:active,
+#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
+.devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
/* background: rgba(0, 0, 0, .4); / Splitters */
}
.devtools-separator + .devtools-toolbarbutton {
}
+/* HTML buttons, similar to toolbar buttons, but work in HTML documents */
+
+.devtools-button {
+ border: 0 solid var(--theme-splitter-color);
+ background: var(--theme-toolbar-background);
+ margin: 0;
+ padding: 0;
+ min-width: 32px;
+ min-height: 18px;
+ /* The icon is absolutely positioned in the button using ::before */
+ position: relative;
+}
+
+.devtools-button[standalone] {
+ min-height: 32px;
+ border-width: 1px;
+}
+
+/* Button States */
+.devtools-button:not([disabled]):hover {
+ background: var(--theme-hover-background);
+ color: var(--theme-hover-color);
+}
+
+.devtools-button:not([disabled]):hover:active {
+ background: var(--theme-active-background);
+ color: var(--theme-active-color);
+}
+
+/* Menu type buttons and checked states */
+.devtools-button[checked] {
+ background: var(--theme-selection-background);
+ color: var(--theme-selection-color);
+}
+
+.devtools-button::before {
+ content: "";
+ display: block;
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin: -8px 0 0 -8px;
+ background-repeat: no-repeat;
+}
+
+@media (min-resolution: 2dppx) {
+ .devtools-button::before {
+ background-size: 32px;
+ }
+}
+
/* Text input */
.devtools-textinput,
border: 0;
}
-.devtools-sidebar-tabs > tabs {
+.devtools-sidebar-tabs tabs {
position: static;
overflow: hidden;
}
-.devtools-sidebar-tabs > tabs > .tabs-right,
-.devtools-sidebar-tabs > tabs > .tabs-left {
+.devtools-sidebar-alltabs {
+/* margin: 0;
+ border-width: 0 0 1px 0;
+ -moz-border-start-width: 1px;
+ border-style: solid;*/
+}
+
+.devtools-sidebar-alltabs dropmarker {
display: none;
}
-.devtools-sidebar-tabs > tabs > tab {
+.devtools-sidebar-tabs tabs > .tabs-right,
+.devtools-sidebar-tabs tabs > .tabs-left {
+ display: none;
+}
+
+.devtools-sidebar-tabs tabs > tab {
min-width: 78px;
text-align: center;
-moz-box-flex: 1;
margin-top: 0;
}
-.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
+.devtools-sidebar-tabs tabs > tab:-moz-focusring {
position: static;
}
-.devtools-sidebar-tabs > tabs > tab:last-of-type {
+.devtools-sidebar-tabs tabs > tab:last-of-type {
-moz-border-end-width: 0;
}
-.devtools-sidebar-tabs > tabs > tab:first-child {
+.devtools-sidebar-tabs tabs > tab:first-child {
}
-.devtools-sidebar-tabs > tabs > tab:hover {
+.devtools-sidebar-tabs tabs > tab:hover {
}
-.devtools-sidebar-tabs > tabs > tab:hover:active {
+.devtools-sidebar-tabs tabs > tab:hover:active {
}
-.devtools-sidebar-tabs > tabs > tab[selected] + tab {
+.devtools-sidebar-tabs tabs > tab[selected] + tab {
}
-.devtools-sidebar-tabs > tabs > tab[selected] + tab:hover {
+.devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
}
-.devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active {
+.devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
}
-.devtools-sidebar-tabs > tabs > tab[selected],
-.devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
+.devtools-sidebar-tabs tabs > tab[selected],
+.devtools-sidebar-tabs tabs > tab[selected]:hover:active {
}
/* Toolbox - moved from toolbox.css.
display: none;
}
+.devtools-horizontal-splitter {
+/* border-bottom: 1px solid var(--theme-splitter-color); */
+}
+
+.devtools-side-splitter {
+/* -moz-border-end: 1px solid var(--theme-splitter-color);
+ border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */
+}
+/* Throbbers */
+
+.devtools-throbber::before {
+ content: "";
+ display: inline-block;
+ vertical-align: bottom;
+ -moz-margin-end: 0.5em;
+ width: 1em;
+ height: 1em;
+ border: 2px solid currentColor;
+ border-right-color: transparent;
+ border-radius: 50%;
+ animation: 1.1s linear throbber-spin infinite;
+}
+
+@keyframes throbber-spin {
+ from {
+ transform: none;
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
/* === END toolbars.inc.css === */