/* 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;
/* 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;
}
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;
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;
}
/* 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);
}