sync theme with cn-develop

superdesk · Oct 17, 2023 · 3c97c22 · 3c97c22
1 parent 2456332
commit 3c97c22
Showing 1 changed file with 73 additions and 16 deletions.
diff --git a/server/theme/theme.css b/server/theme/theme.css
@@ -1,27 +1,64 @@
-:root {    
-    --color-background:     hsl(0, 0%, 97%);
+:root {
+    /* CORE: TYPOGRAPHY */
+    --font-family-core--sans: "Lato", sans-serif;
+    --font-family-core--serif: "Titillium Web", sans-serif;
     --badge-bg-highlight1:  hsl(356, 72%, 46%);
     --color-primary:        hsl(356, 72%, 46%);
-    --top-bar-color-bg:     hsl(0, 3%, 15%);
-
-    --sidenav-color-bg: var(--color-primary);
 
     --color-home-section-heading: var(--color-text);
 
-    --top-bar-color-bg: hsl(0, 0%, 18%);
-    --top-bar-color-fg: hsl(0, 0%, 60%);
-
     --color-interactive-focus-base: 356, 72%;
     --color-interactive-focus-l: 46%;
 
-    /* CORE: TYPOGRAPHY */
-    --font-family-core--sans: "Lato", sans-serif;
-    --font-family-core--serif: "Titillium Web", sans-serif;
-
+    /* LOGIN PAGE */
+    --login-page-color-bg: hsl(0, 3%, 15%);
+
+    /* COMPONENT: NAVBAR MAIN */
+    --top-bar-color-bg: var(--color-primary);
+    --top-bar-color-bg-notifications: hsla(216, 45%, 4%, 0.3);
+    --top-bar-color-bg-notifications--hover: hsla(216, 45%, 0%, 0.5);
+    --top-bar-color-bg-avatar-block: hsla(216, 45%, 4%, 0);
+    --top-bar-color-bg-avatar: hsla(216, 45%, 4%, 0.3);
+    --top-bar-color-bg-avatar--hover: hsla(216, 45%, 4%, 0.5);
+    --top-bar-color-bg-badge: hsl(0, 0%, 100%);
+    --top-bar-color-fg-badge: hsl(0, 3%, 15%);
+    --color-text-link--navbar: hsl(0, 0%, 100%);
+    /* Logo main */
+    --top-bar-logo-main-max-width: 224px;
+    --top-bar-logo-main-max-width--mobile: 200px;
+    --top-bar-logo-main-margin-top: -9px;
+    --top-bar-logo-main-margin-top--mobile: -6px;
+    /* Logo additional */
+    --top-bar-logo-additional-display: flex;
+    --top-bar-logo-additional-max-width: 78px;
+    --top-bar-logo-additional-min-width--mobile: 0px;
+    --top-bar-logo-additional-padding-y: 12px;
+    --top-bar-logo-additional-padding-x: 0;
+    /* Navbar Brand */
+    --top-bar-nav-brand-margin-x: 0;
+    --top-bar-nav-brand-margin-y: 16px;
+    --top-bar-nav-brand-padding-x: 16px;
+    --top-bar-nav-brand-border-color: hsla(0, 0%, 100%, 0.4);
+    --top-bar-nav-brand-border-type: solid;
+
+
+    /* COMPONENT: SIDENAV */
+    --sidenav-color-bg:                 hsl(0, 3%, 15%);
+    --sidenav-color-item-bg--active:    hsl(356, 72%, 46%);
+    --sidenav-color-item-fg--active:    hsla(0, 0%, 100%, 1);
+    --sidenav-color-badge-bg:           hsla(0, 0%, 98%, 1);
+    --sidenav-color-badge-fg:           hsl(356, 72%, 46%);
+
     /* COMPONENT: BUTTONS */
-    /* Primary */
-    --button-color-bg--primary-base: 356, 72%;
-    --button-color-bg--primary-l: 46%;
+    /* // Primary */
+    --button-color-bg--primary-base: 0, 3%;
+    --button-color-bg--primary-l: 25%;
+
+    /* COMPONENT: ICON BUTTON */
+    /* // Primary */
+    --icon-button-color-icon--primary: hsl(0, 3%, 15%);
+    --icon-button-color-border--primary-hover: var(--icon-button-color-fg);
+    --icon-button-shadow-primary--active: var(--icon-button-shadow--active);
 
     /* COMPONENT: PROFILE SIDEBAR */
     --profile-sidebar-color-bg:                hsl(0, 0%, 88%);
@@ -30,11 +67,31 @@
     --profile-sidebar-button-color-border--secondary:        hsla(0, 0%, 10%, 0.45);
     --profile-sidebar-button-color-fg--secondary-hover:      hsla(0, 0%, 10%, 0.98);
     --profile-sidebar-button-color-border--secondary-hover:  hsla(0, 0%, 10%, 0.65);
-    /* sidebar avatar */
+    /* // sidebar avatar */
     --profile-sidebar-avatar-color-bg:         hsl(0, 0%, 14%);
     --profile-sidebar-avatar-color-fg:         hsl(0, 0%, 99%);
     --profile-sidebar-avatar-color-border:     hsl(0, 0%, 60%);
 
     /* COMPONENT: MAIN FOOTER */
     --footer-size--height: 48px;
 }
+
+.navbar__logo img.navbar__logo-img--fr {
+    max-width: 200px;
+    margin-block-start: 0;
+}
+
+.navbar__additional-logo img.navbar__additional-logo-img {
+    width: var(--top-bar-logo-additional-max-width);
+}
+.navbar__additional-logo img.navbar__additional-logo-img.navbar__additional-logo-img--fr {
+    width: 120px;
+}
+
+
+@media only screen and (max-width: 575px) {
+    .navbar__logo img.navbar__logo-img--fr {
+        margin-block-start: 0;
+        max-width: 160px;
+    }
+}