X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fstyleeditor.css;h=5168985caa6c27fcb0de4690946eb1a96c811360;hp=aabfdf6ff2539363bf12dad5af895a2afa64e838;hb=b1d1a8bbaca0a31b2c2581911368b6892d447718;hpb=7d6161c5de5eb8284455c6ca486f0f51b51a1618

diff --git a/LCARStrek/devtools/styleeditor.css b/LCARStrek/devtools/styleeditor.css
index aabfdf6f..5168985c 100644
--- a/LCARStrek/devtools/styleeditor.css
+++ b/LCARStrek/devtools/styleeditor.css
@@ -10,17 +10,77 @@ window:not([windowtype]) {
 }
 
 #style-editor-chrome {
+  -moz-box-flex: 1;
   background-color: #000000;
 }
 
+.splitview-nav > li,
+.stylesheet-info,
+.stylesheet-more,
+.stylesheet-rule-count,
+li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
+li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
+  display: -moz-box;
+}
+
+.devtools-toolbar > spacer {
+  -moz-box-flex: 1;
+}
+
+.style-editor-newButton {
+  list-style-image: url(images/add.svg);
+}
+
+.style-editor-importButton {
+  list-style-image: url(images/import.svg);
+}
+
+.stylesheet-details-container {
+  -moz-box-flex: 1;
+}
+
+.stylesheet-media-container {
+  overflow-y: auto;
+}
+
+.stylesheet-error-message {
+  display: none;
+}
+
+li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
+  display: block;
+}
+
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;
-  color: var(--theme-highlight-blue);
 }
 
 .stylesheet-name {
   font-size: 13px;
+  white-space: nowrap;
+}
+
+.stylesheet-name > label {
+  display: inline;
+  cursor: pointer;
+}
+
+.stylesheet-info > h1 {
+  -moz-box-flex: 1;
+}
+
+.splitview-nav > li > hgroup.stylesheet-info {
+  -moz-box-pack: center;
+}
+
+.stylesheet-more > spacer {
+  -moz-box-flex: 1;
+}
+
+.stylesheet-title,
+.stylesheet-name {
+  color: var(--theme-highlight-blue);
 }
 
 .stylesheet-rule-count,
@@ -30,6 +90,9 @@ window:not([windowtype]) {
 }
 
 .stylesheet-saveButton {
+  display: none;
+  margin-top: 0px;
+  margin-bottom: 0px;
   text-decoration: underline;
   cursor: pointer;
 }
@@ -49,6 +112,16 @@ window:not([windowtype]) {
   outline: 0; /* focus ring is on the stylesheet name */
 }
 
+.splitview-nav > li {
+  -moz-box-orient: horizontal;
+}
+
+.splitview-nav > li > hgroup {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
   font-style: italic;
 }
@@ -66,16 +139,18 @@ window:not([windowtype]) {
   max-width: 400px;
   min-width: 100px;
 
-  border-color: #9C9CFF; /* Splitters */
+  border-color: var(--theme-splitter-color);
 }
 
 .media-rule-label {
-  border-bottom: 1px solid #A09090; /* Grey */
+  border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .media-rule-label {
+  display: flex;
   padding: 4px;
   cursor: pointer;
+  border-bottom: 1px solid;
 }
 
 .media-responsive-mode-toggle {
@@ -84,7 +159,7 @@ window:not([windowtype]) {
 }
 
 .media-rule-line {
-  -moz-padding-start: 4px;
+  padding-inline-start: 4px;
 }
 
 .media-condition-unmatched {
@@ -92,26 +167,28 @@ window:not([windowtype]) {
 /*  opacity: 0.4;*/
 }
 
+.media-rule-condition {
+  flex: 1;
+  overflow: hidden;
+}
+
 .stylesheet-enabled {
+  display: -moz-box;
+  cursor: pointer;
   padding: 8px 0;
   margin: 0 8px;
-  background-image: url("images/itemToggle.png");
+  background-image: url("images/itemToggle.svg");
   background-repeat: no-repeat;
   background-clip: content-box;
-  background-position: 0 8px;
-  background-size: 48px 24px;
+  background-position: center;
+  background-size: 16px;
   width: 24px;
   height: 40px;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .stylesheet-enabled {
-    background-image: url("images/itemToggle@2x.png");
-  }
+/*  filter: var(--icon-filter);*/
 }
 
 .disabled > .stylesheet-enabled {
-  background-position: -24px 8px;
+  filter: url(images/filters.svg#disabled-icon-state);
 }
 
 .splitview-nav > li > .stylesheet-enabled:focus,
@@ -120,23 +197,38 @@ window:not([windowtype]) {
 }
 
 .stylesheet-linked-file:not(:empty){
-  -moz-margin-end: 0.4em;
+  margin-inline-end: 0.4em;
 }
 
 .stylesheet-linked-file:not(:empty):before {
-  -moz-margin-start: 0.4em;
+  margin-inline-start: 0.4em;
+  content: " ↳ ";
+}
+
+li.unsaved > hgroup > h1 > .stylesheet-name:before {
+  content: "*";
+}
+
+li.linked-file-error .stylesheet-linked-file {
+  text-decoration: line-through;
 }
 
 li.linked-file-error .stylesheet-linked-file:after {
   font-size: 110%;
+  content: " ✘";
+}
+
+li.linked-file-error .stylesheet-rule-count {
+  visibility: hidden;
 }
 
 .stylesheet-more > h3 {
   font-size: 11px;
-  -moz-margin-end: 2px;
+  margin-inline-end: 2px;
 }
 
-.devtools-searchinput {
+.devtools-searchinput,
+.devtools-filterinput {
   max-width: 25ex;
   font-size: 11px;
 }
@@ -162,6 +254,11 @@ h3 {
 
 /* portrait mode */
 @media (max-width: 550px) {
+  li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
+  li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
+    display: none;
+  }
+
   .splitview-nav {
     box-shadow: none;
   }
@@ -182,26 +279,66 @@ h3 {
 
   .splitview-nav > li > hgroup.stylesheet-info {
     -moz-box-align: baseline;
+    -moz-box-orient: horizontal;
+    -moz-box-flex: 1;
   }
 
   .stylesheet-sidebar {
     width: 180px;
   }
+
+  .stylesheet-more {
+    -moz-box-flex: 1;
+    -moz-box-pack: end;
+  }
+
+  .stylesheet-more > spacer {
+    -moz-box-flex: 0;
+  }
 }
 
+/* CSS coverage */
 .csscoverage-report {
   background-color: var(--theme-contrastsidebar-background);
+  -moz-box-orient: horizontal;
 }
 
 .csscoverage-report-container {
   height: 100vh;
-  padding: 10px;
+  padding: 0 10px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -moz-box-flex: 1;
 }
 
 .csscoverage-report-content {
   margin: 20px auto;
   -moz-column-width: 300px;
   font-size: 13px;
+  -moz-user-select: text;
+}
+
+.csscoverage-report-summary,
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  display: inline-block;
+}
+
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 950px) {
+  .csscoverage-report-content {
+    display: block;
+  }
+
+  .csscoverage-report-summary {
+    display: block;
+    text-align: center;
+  }
 }
 
 .csscoverage-report h1 {
@@ -219,6 +356,12 @@ h3 {
   margin: 10px 0;
 }
 
+.csscoverage-report code,
+.csscoverage-report textarea {
+  font-family: var(--monospace-font-family);
+  font-size: inherit;
+}
+
 .csscoverage-list:after {
   content: ', ';
 }
@@ -251,12 +394,17 @@ h3 {
   border-radius: 0;
   border-top: none;
   border-bottom: none;
-  -moz-border-start: none;
+  border-inline-start: none;
+}
+
+.csscoverage-report .pie-table-chart-container {
+  -moz-box-orient: vertical;
+  text-align: start;
 }
 
 .chart-colored-blob[name="Used Preload"] {
   fill: var(--theme-highlight-pink);
-  background: var(--theme-highlight-pink);;
+  background: var(--theme-highlight-pink);
 }
 
 .chart-colored-blob[name=Used] {
@@ -280,5 +428,5 @@ h3 {
 }
 
 .csscoverage-report-chart {
-  margin: 0 50px;
+  margin: 0 20px;
 }