X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Ftoolbars.css;h=13a5a467a833d8e1f7269a56f05ae9a3da0f4974;hp=ea1816d2e7871d0d9d60b9d3d41f96cde2ea63f9;hb=9f6401c22b50f8e59ea2275e257f9585a8e04e41;hpb=6f751fd100ed69c35ed979e9d0db9d0f991af80a

diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css
index ea1816d2..13a5a467 100644
--- a/LCARStrek/devtools/toolbars.css
+++ b/LCARStrek/devtools/toolbars.css
@@ -24,6 +24,17 @@
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
+  padding: 0;
+  border-width: 0;
+/*  border-bottom-width: 1px;*/
+  border-style: solid;
+/*  height: 24px;
+  line-height: 24px;*/
+  box-sizing: border-box;
+  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
+}
+.devtools-toolbar {
+  height: 24px;
 }
 
 .devtools-toolbar {
@@ -43,6 +54,66 @@
 .devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
 }
 
+/* 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 */
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+/* Create a box to style as the checkbox */
+input[type="checkbox"] + label::before {
+  display: inline-block;
+  content: "";
+  vertical-align: middle;
+}
+
+.devtools-searchbox + #browser-style-checkbox-label, /* workaround for old placement of checkbox in label */
+input[type="checkbox"] + label {
+  line-height: 0px;
+  color: var(--theme-capped-toolbar-text);
+}
+
+input[type="checkbox"] + label::before {
+  -moz-appearance: none;
+  width: 13px;
+  height: 13px;
+  border-radius: 0;
+  border: 1px solid var(--theme-body-color);
+  margin-inline-end: 3px;
+  margin-inline-start: 2px;
+  background-color: var(--theme-toolbar-background);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+input[type="checkbox"]:not(:disabled) + label:hover::before {
+  border-color: var(--theme-hover-background);
+}
+.devtools-searchbox + #browser-style-checkbox-label:hover, /* workaround for old placement of checkbox in label */
+input[type="checkbox"]:not(:disabled) + label:hover {
+  color: var(--theme-hover-background);
+}
+input[type="checkbox"]:checked + label::before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check");
+}
+
+input[type="checkbox"]:checked:disabled + label::before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
+}
+input[type="checkbox"]:checked:not(:disabled) + label:hover::before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
+}
+input[type="checkbox"]:disabled + label::before {
+  border-color: var(--theme-body-color-inactive);
+}
+input[type="checkbox"]:disabled + label {
+  color: var(--theme-body-color-inactive);
+}
+
 .devtools-separator {
   margin: 0 2px;
   width: 2px;
@@ -52,6 +123,39 @@
   background-position: 0, 1px, 2px;
 }
 
+/* HTML toolbars - style them LCARStrek-like */
+
+div.devtools-toolbar {
+  background-size: calc(100% - 30px);
+  background-image: linear-gradient(90deg, var(--theme-capped-toolbar-background), var(--theme-capped-toolbar-background));
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+}
+
+div.devtools-toolbar::before,
+div.devtools-toolbar::after {
+  display: flex;
+  content: "";
+  width: 12px;
+  min-height: 16px;
+  background-color: var(--theme-toolbar-caps);
+}
+
+div.devtools-toolbar::before {
+  border-radius: 8px 0px 0px 8px;
+  border: none;
+  border-inline-end: 3px solid black;
+  margin-inline-end: 2px;
+}
+
+div.devtools-toolbar::after {
+  border-radius: 0px 8px 8px 0px;
+  border: none;
+  border-inline-start: 3px solid black;
+  margin-inline-start: auto; /* originally 2px, but auto makes us able to get flexible free space */
+}
+
 /* Toolbar buttons */
 
 .devtools-menulist,
@@ -121,9 +225,11 @@
 .devtools-button[standalone],
 .devtools-button[data-standalone],
 .devtools-toolbarbutton[standalone],
-.devtools-toolbarbutton[data-standalone] {
+.devtools-toolbarbutton[data-standalone],
+.menu-filter-button {
   border: none;
 /*  min-height: 32px; */
+  font: inherit;
   background-color: var(--theme-button-background);
   color: var(--theme-button-color);
   border-radius: 300px;
@@ -132,7 +238,8 @@
 .devtools-button[standalone]:hover,
 .devtools-button[data-standalone]:hover,
 .devtools-toolbarbutton[standalone]:hover,
-.devtools-toolbarbutton[data-standalone]:hover {
+.devtools-toolbarbutton[data-standalone]:hover,
+.menu-filter-button:hover {
   background-color: var(--theme-hover-background);
   color: var(--theme-hover-color);
 }
@@ -140,11 +247,21 @@
 .devtools-button[standalone]:hover:active,
 .devtools-button[data-standalone]:hover:active,
 .devtools-toolbarbutton[standalone]:hover:active,
-.devtools-toolbarbutton[data-standalone]:hover:active {
+.devtools-toolbarbutton[data-standalone]:hover:active,
+.menu-filter-button:hover:active {
   background-color: var(--theme-active-background);
   color: var(--theme-active-color);
 }
 
+.menu-filter-button.checked {
+  background: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.menu-filter-button + .menu-filter-button {
+  margin-inline-start: 2px;
+}
+
 .devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
 }
 
@@ -353,7 +470,7 @@
 }
 
 .devtools-filterinput {
-  background-image: url(--filter-image);
+  background-image: var(--filter-image);
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl),
@@ -368,8 +485,8 @@
   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;
 }
 
@@ -380,6 +497,10 @@
   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 {
@@ -412,7 +533,7 @@
 .devtools-rule-searchbox {
   -moz-box-flex: 1;
   width: 100%;
-  font: inherit;
+/*  font: inherit;*/
 }
 
 .devtools-rule-searchbox[filled] {
@@ -422,8 +543,8 @@
 }
 
 .devtools-style-searchbox-no-match {
-  background-color: var(--searcbox-no-match-background-color) !important;
-  border-color: var(--searcbox-no-match-border-color) !important;
+  background-color: var(--searchbox-no-match-background-color) !important;
+  border-color: var(--searchbox-no-match-border-color) !important;
 }
 
 .devtools-searchinput-clear {
@@ -558,6 +679,30 @@
 /*  background-color: var(--theme-splitter-color);*/
 }
 
+/* HACK around hardcoded stylings for the HTML-based sidebar tabs */
+.tabs .tabs-menu-item,
+.theme-dark .tabs .tabs-menu-item,
+.theme-light .tabs .tabs-menu-item {
+  margin: 0;
+  margin-inline-end: 3px !important;
+  padding: 0 !important;
+  border-radius: 8px 8px 0 0;
+  border: 0 !important;
+  background-color: var(--theme-button-background);
+}
+.tabs .tabs-menu-item a {
+  color: var(--theme-button-color) !important;
+  padding: 0px 3px !important;
+}
+.tabs .tabs-menu-item.is-active {
+  height: auto !important;
+}
+.tabs .tabs-navigation {
+  height: auto !important;
+  border: 0 !important;
+  border-bottom: 3px solid  var(--theme-body-background) !important;
+}
+
 /* Throbbers */
 
 .devtools-throbber::before {