Remove tabler import from glpi custom css

cconard96 · Jan 8, 2024 · a9327ef · a9327ef
1 parent 265d281
commit a9327ef
Show file tree

Hide file tree

Showing 48 changed files with 315 additions and 237 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,6 +25,7 @@ phpunit.xml
 /nbproject
 .composer.hash
 /**/*.min.css
+!/css/standalone/tinymce_empty_skin/*.min.css
 /css_compiled/
 /css/compiled/
 /css/lib/

diff --git a/.webpack.config.js b/.webpack.config.js
@@ -182,6 +182,11 @@ var filesToCopy = [
         from: 'src/scss/**/*.scss',
         to: scssOutputPath,
     },
+    {
+        package: 'tinymce',
+        from: 'skins/ui/oxide*/skin.css',
+        to: scssOutputPath,
+    },
     {
         package: 'swagger-ui-dist',
         from: 'oauth2-redirect.html'

diff --git a/css/core_palettes.scss b/css/core_palettes.scss
@@ -31,8 +31,7 @@
  * ---------------------------------------------------------------------
  */
 
-// Base light/dark mode palettes
-@import "includes/palette_light";
+// Base dark mode palette. Base for light palette is in css/includes/_base.scss.
 @import "includes/palette_dark";
 
 // Palettes

diff --git a/css/glpi.scss b/css/glpi.scss
@@ -34,6 +34,4 @@
 $enable-negative-margins: true;
 $link-hover-decoration: none;
 
-@import "includes/fonts";
-@import "includes/logos";
 @import "includes/includes";
diff --git a/css/includes/_base.scss b/css/includes/_base.scss
@@ -52,8 +52,14 @@
     --glpi-tabs-active-bg: var(--tblr-bg-surface);
     --glpi-tabs-active-fg: var(--tblr-body-color);
     --glpi-tabs-active-border-color: var(--glpi-tabs-border-color);
-    --glpi-logo: "../pics/logos/logo-GLPI-100-white.png";
-    --glpi-logo-reduced: "../pics/logos/logo-G-100-white.png";
+    --glpi-logo-light: url("../pics/logos/logo-GLPI-100-white.png");
+    --glpi-logo-light-reduced: url("../pics/logos/logo-G-100-white.png");
+    --glpi-logo-dark: url("../pics/logos/logo-GLPI-100-black.png");
+    --glpi-logo-dark-reduced: url("../pics/logos/logo-G-100-black.png");
+    --glpi-logo-dark-login: url("../pics/logos/logo-GLPI-250-black.png");
+    --glpi-logo-light-login: url("../pics/logos/logo-GLPI-250-white.png");
+    --glpi-logo: var(--glpi-logo-light);
+    --glpi-logo-reduced: var(--glpi-logo-light-reduced);
     --glpi-mainmenu-bg: #2f3f64;
     --glpi-mainmenu-fg: #f4f6fa;
     --glpi-mainmenu-active-bg: color-mix(in srgb, var(--glpi-mainmenu-bg), white 45%);
@@ -93,6 +99,7 @@
     --glpi-timeline-log-bg: #cacaca21;
     --glpi-timeline-badge-bg: rgba(97, 97, 97, 15%);
     --glpi-timeline-badge-fg: rgba(43, 43, 43, 80%);
+    --glpi-hover-bg: rgba(var(--tblr-secondary-rgb), .08);
     --tblr-gray-100: var(--tblr-light);
     --tblr-gray-200: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 4%);
     --tblr-gray-300: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 6%);
@@ -103,6 +110,23 @@
     --tblr-gray-800: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 84%);
     --tblr-gray-900: var(--tblr-dark);
     --tblr-gray-50: var(--tblr-gray-200);
+    --animate-duration: 0.3s !important; // No prefix because it is overrides animate.js default
+    --glpi-zindex-dropdown: $zindex-dropdown;
+    --glpi-zindex-sticky: $zindex-sticky;
+    --glpi-zindex-fixed: $zindex-fixed;
+    --glpi-zindex-offcanvas-backdrop: $zindex-offcanvas-backdrop;
+    --glpi-zindex-offcanvas: $zindex-offcanvas;
+    --glpi-zindex-modal-backdrop: $zindex-modal-backdrop;
+    --glpi-zindex-modal: $zindex-modal;
+    --glpi-zindex-popover: $zindex-popover;
+    --glpi-zindex-tooltip: $zindex-tooltip;
+    --glpi-zindex-toast: $zindex-toast;
+}
+
+@media(prefers-reduced-motion) {
+    :root {
+        --animate-duration: 0s !important; // No prefix because it is overrides animate.js default
+    }
 }
 
 body.iframed,
@@ -113,7 +137,7 @@ body.in_modal {
 
 .page {
     .glpi-logo {
-        background: url($logo) no-repeat;
+        background: var(--glpi-logo) no-repeat;
         height: 55px;
         width: 100px;
     }
@@ -135,7 +159,7 @@ body.in_modal {
 .breadcrumb-alternate {
     a {
         &:hover {
-            text-decoration: $link-hover-decoration;
+            text-decoration: var(--tblr-link-hover-decoration);
         }
     }
 }
@@ -267,7 +291,7 @@ body.in_modal {
 
 .page-anonymous {
     .glpi-logo {
-        --logo: url(#{$logo-dark-login});
+        --logo: var(--glpi-logo-dark-login);
 
         content: var(--logo);
         width: 200px;
@@ -359,12 +383,12 @@ table {
 
 .qtip-bootstrap,
 .popover .popover-body {
-    background-color: var(--contrast-light);
-    color: var(--dark);
+    background-color: var(--tblr-bg-surface);
+    color: var(--tblr-dark);
 }
 
 .popover .popover-arrow::after {
-    border-top-color: var(--contrast-light);
+    border-top-color: var(--tblr-bg-surface);
 }
 
 kbd {

diff --git a/css/includes/_global-variables.scss b/css/includes/_global-variables.scss
diff --git a/css/includes/_highcontrast.scss b/css/includes/_highcontrast.scss
@@ -32,13 +32,9 @@
  */
 
 :root[data-high-contrast="1"] {
-    $hc-border-color: $gray-600;
-    $hc-tr-background-color: $gray-600;
-    $hc-border-color-contrast: $gray-800;
-
-    @if $is-dark {
-        $hc-border-color-contrast: $gray-400;
-    }
+    $hc-border-color: var(--tblr-gray-600);
+    $hc-tr-background-color: var(--tblr-gray-600);
+    $hc-border-color-contrast: var(--tblr-gray-800);
 
     /****** TABLES ******/
 
@@ -79,7 +75,7 @@
     }
 
     .order_DESC::before {
-        color: $dark;
+        color: var(--tblr-dark);
     }
 
     .tab_cadre_pager {
@@ -158,23 +154,12 @@
     }
 
     @each $color, $value in $theme-colors {
-        @if $is-dark {
-            @each $color, $value in $theme-colors {
-                .btn-#{$color} {
-                    border-color: lighten($value, 15%);
-                }
-                .btn-outline-#{$color} {
-                    border-color: lighten($value, 15%);
-                }
+        @each $color, $value in $theme-colors {
+            .btn-#{$color} {
+                border-color: color-mix(in srgb, $value, black 45%);
             }
-        } @else {
-            @each $color, $value in $theme-colors {
-                .btn-#{$color} {
-                    border-color: darken($value, 45%);
-                }
-                .btn-outline-#{$color} {
-                    border-color: darken($value, 45%);
-                }
+            .btn-outline-#{$color} {
+                border-color: color-mix(in srgb, $value, black 45%);
             }
         }
     }
@@ -189,8 +174,8 @@
     }
 
     .subheader .box {
-        background-color: $light;
-        border: 2px solid $dark;
+        background-color: var(--tblr-light);
+        border: 2px solid var(--tblr-dark);
         margin-right: 2px;
     }
 
@@ -227,7 +212,7 @@
     }
 
     #navbar-menu .dropdown-toggle {
-        border: 1px solid $dark;
+        border: 1px solid var(--tblr-dark);
     }
 
     .nav.nav-tabs .nav-item .nav-link {
@@ -267,3 +252,18 @@
         border: 1px solid $hc-border-color-contrast;
     }
 }
+
+:root[data-high-contrast="1"][glpi-theme-dark="1"] {
+    $hc-border-color-contrast: var(--tblr-gray-400);
+
+    @each $color, $value in $theme-colors {
+        @each $color, $value in $theme-colors {
+            .btn-#{$color} {
+                border-color: color-mix(in srgb, $value, white 15%);
+            }
+            .btn-outline-#{$color} {
+                border-color: color-mix(in srgb, $value, white 15%);
+            }
+        }
+    }
+}
diff --git a/css/includes/_includes.scss b/css/includes/_includes.scss
@@ -33,10 +33,9 @@
 
 $is-dark: false !default;
 
-@import "~@tabler/core/src/scss/core";
+@import "tabler_compat";
 @import "base";
 @import "mixins/badges_fixes";
-@import "global-variables";
 @import "highcontrast";
 @import "components/autocomplete";
 @import "components/asset-form";
@@ -63,6 +62,7 @@ $is-dark: false !default;
 @import "components/select2";
 @import "components/sortable";
 @import "components/tabs";
+@import "components/tinymce";
 @import "components/itilobject/footer";
 @import "components/itilobject/layout";
 @import "components/itilobject/timeline";

diff --git a/css/includes/_palette_dark.scss b/css/includes/_palette_dark.scss
@@ -31,8 +31,6 @@
  * ---------------------------------------------------------------------
  */
 
-@import "logos";
-
 :root[data-glpi-theme-dark="1"] {
     --tblr-dark: #000;
     --tblr-light: #e6e6e6;
@@ -95,22 +93,22 @@
     .table-danger {
         --tblr-table-bg: #642b2b;
         --tblr-table-striped-bg: #642b2b;
-        --tblr-table-striped-color: var(--light);
+        --tblr-table-striped-color: var(--tblr-light);
         --tblr-table-active-bg: #642b2b;
-        --tblr-table-active-color: var(--light);
+        --tblr-table-active-color: var(--tblr-light);
         --tblr-table-hover-bg: #642b2b;
-        --tblr-table-hover-color: var(--light);
+        --tblr-table-hover-color: var(--tblr-light);
 
-        color: var(--light);
+        color: var(--tblr-light);
         border-color: #6d000a;
     }
 
     .accordion-item .accordion-button {
-        background-color: var(--dark) !important;
+        background-color: var(--tblr-dark) !important;
     }
 
     .search_page .search-container .search-card .search-results.deleted-results td {
-        color: var(--light);
+        color: var(--tblr-light);
     }
 
     .navbar-collapsed {
@@ -128,14 +126,14 @@
 
     .page-anonymous {
         .glpi-logo {
-            --logo: url(#{$logo-light-login}) !important;
+            --logo: var(--glpi-logo-light-login) !important;
         }
     }
 
     .qtip-bootstrap,
     .popover .popover-body {
         background-color: var(--tblr-active-bg) !important;
-        color: var(--light) !important;
+        color: var(--tblr-light) !important;
     }
 
     .popover .popover-arrow::after {