Tidied CSS and improved dark skin.

#584 4ada840#commitcomment-144703302
znuny · Aug 22, 2024 · 514dd9c · 514dd9c
1 parent 679ec64
commit 514dd9c
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 97 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,4 +1,5 @@
 # 7.1.3 2024-??-??
+ - 2024-08-21 Improved CSS for skin 'Dark'. [#558](https://github.com/znuny/Znuny/issues/558)
  - 2024-08-21 Sector Nord AG: Fixed overflow of dynamic field groups in AgentTicketZoom process widget. Thanks to Sector Nord AG (@jsinagowitz). [PR#553](https://github.com/znuny/Znuny/pull/553)
  - 2024-06-26 Fixed wrong inversion of avatar image when using skin 'Dark'. [#558](https://github.com/znuny/Znuny/issues/558)
 

diff --git a/var/httpd/htdocs/skins/Agent/dark/css/Core.Agent.Admin.SupportDataCollector.css b/var/httpd/htdocs/skins/Agent/dark/css/Core.Agent.Admin.SupportDataCollector.css
@@ -13,6 +13,6 @@ did not receive this file, see http://www.gnu.org/licenses/agpl.txt.
 
 @media screen,projection,tv,handheld {
     .AdminSupportDataCollector .CheckResults > li h3.Heading {
-      filter: invert(0%);
+        filter: invert(0%);
     }
 }
diff --git a/var/httpd/htdocs/skins/Agent/dark/css/Core.Default.css b/var/httpd/htdocs/skins/Agent/dark/css/Core.Default.css
@@ -12,100 +12,118 @@ did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
  */
 
 @media screen,projection,tv,handheld {
-  body{
-      filter: invert(90%) hue-rotate(180deg);
-  }
-  html {
-      background-color: #111;
-  }
-  img, video, svg {
-      filter: invert(0%);
-  }
-  div.MessageBox.Error {
-      filter: invert(0%);
-  }
-  .icon {
-      filter: invert(15%) hue-rotate(180deg);
-  }
-  .UserAvatar,
-  .Avatar{
-     filter: invert(180%) hue-rotate(180deg);
-  }
-  .toolbar-row-wrapper .toolbar-row ul li a .iconWrapper span.Counter {
-      background: var(--primary-color);
-  }
-  pre {
-    filter: invert(6%);
-  }
-  li::marker {
-    color: #666;
-  }
-
-  /*Dim headlines*/
-  h1,h2,h3,
-  div.Headline h1 {
-    color: var(--bread-crumb);
-  }
-  h1 > a,
-  h2 > a,
-  h3 > a{
-    filter: invert(0%);
-  }
-  .WidgetSimple > .Header h2,
-  .WidgetSimple > .Header h3 {
-    filter: invert(0%);
-  }
-
-  .MainBox h1 > a {
-    color: var(--primary-color-darker);
-    filter: invert(100%) hue-rotate(180deg);
-  }
-  /*Admin Menu Header*/
-  .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple.GridGroups .Header h2{
-    background: none;
-  }
-  /*Checkboxes in general*/
-  input[type=checkbox] {
-    border: var(--border-width) solid #484848;
-  }
-
-  /*AgentTicketPhone/Email CustomerUser*/
-  input[readonly] {
-    background: var(--disabled-input);
-    color: #5b5b5b;
-  }
-
-  .OverviewLarge .Preview h3 {
-    filter: invert(0%);
-  }
-
-  .Notice i {
-    color: #313030;
-  }
-
-  .SmallBox,
-  .MessageBrowser,
-  .MessageBox,
-  .ACLNote {
-      background: wheat;
-  }
-
-  /*Different elements that get "colors" */
-  .jscolor,
-  .jscolor-picker-wrap * {
-    filter: invert(100%)hue-rotate(180deg);
-  }
-
-  [class*="PriorityID"] {
-    filter: invert(100%) hue-rotate(180deg)!important;
-  }
-  .pill {
-    filter: invert(100%) hue-rotate(180deg)!important;
-  }
-
-  /*Unread star*/
-  span.UnreadArticles i,
-  div.UnreadArticles i {
-      color: var(--color-grey9);
-  }
+
+    body {
+        filter: invert(90%) hue-rotate(180deg);
+    }
+
+    html {
+        background-color: #111;
+    }
+
+    img,
+    video,
+    svg {
+        filter: invert(0%);
+    }
+
+    div.MessageBox.Error {
+        filter: invert(0%);
+    }
+
+    .icon {
+        filter: invert(15%) hue-rotate(180deg);
+    }
+
+    .UserAvatar img,
+    .Avatar img {
+        filter: invert(180%) hue-rotate(180deg);
+    }
+
+    .toolbar-row-wrapper .toolbar-row ul li a .iconWrapper span.Counter {
+        background: var(--primary-color);
+    }
+
+    pre {
+        filter: invert(6%);
+    }
+
+    li::marker {
+        color: #666;
+    }
+
+    /* Dim headlines */
+    h1,
+    h2,
+    h3,
+    div.Headline h1 {
+        color: var(--bread-crumb);
+    }
+
+    h1>a,
+    h2>a,
+    h3>a {
+        filter: invert(0%);
+    }
+
+    .WidgetSimple>.Header h2,
+    .WidgetSimple>.Header h3 {
+        filter: invert(0%);
+    }
+
+    .MainBox h1>a {
+        color: var(--primary-color-darker);
+        filter: invert(100%) hue-rotate(180deg);
+    }
+
+    /* Admin Menu Header */
+    .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple.GridGroups .Header h2 {
+        background: none;
+    }
+
+    /* Checkboxes in general */
+    input[type=checkbox] {
+        border: var(--border-width) solid #484848;
+    }
+
+    /* AgentTicketPhone/Email CustomerUser */
+    input[readonly] {
+        background: var(--disabled-input);
+        color: #5b5b5b;
+    }
+
+    .OverviewLarge .Preview h3 {
+        filter: invert(0%);
+    }
+
+    .Notice i {
+        color: #313030;
+    }
+
+    .SmallBox,
+    .MessageBrowser,
+    .MessageBox,
+    .ACLNote {
+        background: wheat;
+    }
+
+    /* Different elements that get "colors" */
+    .jscolor,
+    .jscolor-picker-wrap * {
+        filter: invert(100%)hue-rotate(180deg);
+    }
+
+    [class*="PriorityID"] {
+        filter: invert(100%) hue-rotate(180deg) !important;
+    }
+
+    .pill {
+        filter: invert(100%) hue-rotate(180deg) !important;
+    }
+
+    /* Unread star */
+    span.UnreadArticles i,
+    div.UnreadArticles i {
+        color: var(--color-grey9);
+    }
 }
diff --git a/var/httpd/htdocs/skins/Agent/dark/css/Core.RichTextEditor.ContentsCss.css b/var/httpd/htdocs/skins/Agent/dark/css/Core.RichTextEditor.ContentsCss.css
@@ -17,6 +17,7 @@ did not receive this file, see http://www.gnu.org/licenses/agpl.txt.
  * Applies a CSS filter to invert the colors and rotate the hue of images, videos, and SVG elements.
  * This creates a dark mode effect by inverting the colors and rotating the hue by 180 degrees.
  */
+
 img, video, svg {
     filter: invert(100%) hue-rotate(180deg);
 }