make HTML-based video controls work while keeping the XUL-based ones intact - this...

[themes.git] / LCARStrek / devtools / toolbars.css

diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css
index e7d2ed621782cc5472377692b9180b79eabbf695..7eefeac4b5dbdf83e8c668611375143df7f32659 100644 (file)
--- a/LCARStrek/devtools/toolbars.css
+++ b/LCARStrek/devtools/toolbars.css
@@ -56,14 +56,20 @@
 
 /* HTML Checkboxes - a lot copied from global/in-content/common.css */
 /* Hide the actual checkbox */
-input[type="checkbox"]:not(#browser-style-checkbox),
-#browser-style-checkbox:not([label]) { /* not()s are workaround for old placement of checkbox in label */
+input[type="checkbox"] {
   opacity: 0;
   width: 0;
   pointer-events: none;
   position: absolute;
 }
 
+label > input[type="checkbox"] { /* old placement of checkbox in label, undo above */
+  opacity: 1;
+  width: auto;
+  pointer-events: auto;
+  position: static;
+}
+
 /* Create a box to style as the checkbox */
 input[type="checkbox"] + label::before {
   display: inline-block;
@@ -125,7 +131,8 @@ input[type="checkbox"]:disabled + label {
 
 /* HTML toolbars - style them LCARStrek-like */
 
-div.devtools-toolbar {
+div.devtools-toolbar,
+div.devtools-tabbar {
   background-size: calc(100% - 30px);
   background-image: linear-gradient(90deg, var(--theme-capped-toolbar-background), var(--theme-capped-toolbar-background));
   background-repeat: no-repeat;
@@ -134,7 +141,9 @@ div.devtools-toolbar {
 }
 
 div.devtools-toolbar::before,
-div.devtools-toolbar::after {
+div.devtools-toolbar::after,
+div.devtools-tabbar::before,
+div.devtools-tabbar::after {
   display: flex;
   content: "";
   width: 12px;
@@ -142,14 +151,16 @@ div.devtools-toolbar::after {
   background-color: var(--theme-toolbar-caps);
 }
 
-div.devtools-toolbar::before {
+div.devtools-toolbar::before,
+div.devtools-tabbar::before {
   border-radius: 8px 0px 0px 8px;
   border: none;
   border-inline-end: 3px solid black;
   margin-inline-end: 2px;
 }
 
-div.devtools-toolbar::after {
+div.devtools-toolbar::after,
+div.devtools-tabbar::after {
   border-radius: 0px 8px 8px 0px;
   border: none;
   border-inline-start: 3px solid black;
@@ -200,7 +211,8 @@ div.devtools-toolbar::after {
 }
 
 /* Menu type buttons and checked states */
-.devtools-button[checked] {
+.devtools-button[checked],
+.devtools-button.checked {
   background: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
@@ -229,6 +241,7 @@ div.devtools-toolbar::after {
 .menu-filter-button {
   border: none;
 /*  min-height: 32px; */
+  font: inherit;
   background-color: var(--theme-button-background);
   color: var(--theme-button-color);
   border-radius: 300px;
@@ -484,8 +497,8 @@ div.devtools-toolbar::after {
   visibility: hidden;
 }
 
-.devtools-searchinput .textbox-input::-moz-placeholder,
-.devtools-filterinput .textbox-input::-moz-placeholder {
+.devtools-searchinput .textbox-input::placeholder,
+.devtools-filterinput .textbox-input::placeholder {
   font-style: normal;
 }
 
@@ -496,6 +509,10 @@ div.devtools-toolbar::after {
   position: relative;
 }
 
+button + .devtools-searchbox {
+  margin-inline-start: 2px;
+}
+
 /* The spacing is accomplished with a padding on the searchbox */
 .devtools-searchbox > .devtools-textinput,
 .devtools-searchbox > .devtools-searchinput {