make devtools toolbar and options work in current nightly

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

diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css
index 13a5a467a833d8e1f7269a56f05ae9a3da0f4974..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);
 }