diff --git a/.stylelintrc.json b/.stylelintrc.json
index 56a1bbdf1402d362c4e9cdc05d7856a162b14c87..388914d3f247c0ae24152dbf0b7b51ef6053ddea 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -75,7 +75,11 @@
"string-quotes": null,
"value-keyword-case": null,
"value-list-max-empty-lines": null,
- "value-no-vendor-prefix": null
+ "value-no-vendor-prefix": null,
+ "custom-property-pattern": [
+ "^([a-z][a-z0-9]*-+)*[a-z0-9]+$",
+ {"message": "Expected custom property name to be kebab-case-ish (multiple dashes are allowed"}
+ ]
},
"overrides": [
{
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index 006716f9f2d6634ec678f6df455e11101640c7dc..b2f271538b756d38523642462d4a1e45521e68d2 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -68,14 +68,12 @@
display: flex;
flex-direction: row;
flex-wrap: nowrap;
- justify-content: space-between;
+ justify-content: flex-start;
align-content: stretch;
align-items: stretch;
- background-color: $color--main-navigation-background;
- border-bottom: 1px solid $color--main-navigation-border;
+ background-color: var(--color--main-navigation-background);
+ border-bottom: 1px solid var(--color--main-navigation-border);
box-sizing: border-box;
- display: flex;
- justify-content: flex-start;
min-width: $site-width;
width: 100%;
height: $header-height;
@@ -113,7 +111,7 @@
align-items: stretch;
justify-content: flex-start;
flex-grow: 1;
-
+
&.oversized {
overflow: visible;
}
@@ -133,13 +131,13 @@
#context-title {
font-size: 24px;
- color: $color--font-primary;
+ color: var(--color--font-primary);
height: 30px;
padding: 10px 15px 5px 15px;
max-height: 30px;
overflow: hidden;
- background-color: $color--main-navigation-background;
-
+ background-color: var(--color--main-navigation-background);
+
> .context-avatar {
margin: 0 5px 0 -6px;
vertical-align: top;
@@ -163,16 +161,16 @@
flex-direction: row;
align-items: stretch;
justify-content: space-between;
- background-color: $color--main-navigation-background;
+ background-color: var(--color--main-navigation-background);
font-size: 0.9em;
- color: $color--font-primary;
+ color: var(--color--font-primary);
min-height: 2.3em;
- border-bottom: 1px solid $color--main-navigation-border;
+ border-bottom: 1px solid var(--color--main-navigation-border);
padding-left: $page-margin;
padding-top: 10px;
}
- #tabs {
+ #tabs {
transition: margin-left;
transition-duration: var(--transition-duration);
transition-delay: 500ms;
@@ -219,15 +217,15 @@
position: relative;
width: 28px;
z-index: 1;
-
+
img {
height: 100%;
width: 100%;
}
-
+
// Add arrow on the right
@include icon(after, arr_1down, info_alt);
-
+
&::after {
background-position: center;
background-repeat: no-repeat;
@@ -236,16 +234,16 @@
left: 100%;
top: 0;
}
-
+
#notification-container + & {
border-left: 0;
}
}
-
+
.action-menu-title {
margin: 0 0 0.3em;
}
-
+
.action-menu-content {
position: absolute;
top: 41px;
@@ -254,7 +252,7 @@
box-shadow: 1px 1px 1px var(--dark-gray-color-60);
text-align: left;
white-space: nowrap;
-
+
a:link,
a:visited {
color: var(--base-color);
@@ -263,7 +261,7 @@
a:active {
color: var(--active-color);
}
-
+
div {
color: var(--black);
}
@@ -276,4 +274,4 @@
// $see https://gitlab.studip.de/studip/studip/-/issues/1019
html {
scroll-padding-top: calc($bar-bottom-container-height + 1em);
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 3c09d6127bb0524b37907b31786638438c48ad48..f95e7e79860ec0e9a420f33bde4ef722b0d87e9b 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -180,6 +180,72 @@ $grid-gap: 0;
#{"--"}transition-duration-slow: $transition-duration-slow;
#{"--"}transition-duration-superslow: $transition-duration-superslow;
+ #{"--"}color--blue-1: $color--blue-1;
+ #{"--"}color--gray-1: $color--gray-1;
+ #{"--"}color--gray-2: $color--gray-2;
+ #{"--"}color--gray-3: $color--gray-3;
+ #{"--"}color--gray-4: $color--gray-4;
+ #{"--"}color--gray-5: $color--gray-5;
+ #{"--"}color--gray-6: $color--gray-6;
+ #{"--"}color--gray-7: $color--gray-7;
+ #{"--"}color--green-1: $color--green-1;
+ #{"--"}color--red-1: $color--red-1;
+ #{"--"}color--white: $color--white;
+ #{"--"}color--yellow-1: $color--yellow-1;
+
+ #{"--"}color--global-background: $color--global-background;
+
+ #{"--"}color--brand-primary: $color--brand-primary;
+ #{"--"}color--brand-secondary: $color--brand-secondary;
+
+ #{"--"}color--font-primary: $color--font-primary;
+ #{"--"}color--font-secondary: $color--font-secondary;
+ #{"--"}color--font-inactive: $color--font-inactive;
+ #{"--"}color--font-inverted: $color--font-inverted;
+
+ #{"--"}color--main-navigation-background: $color--main-navigation-background;
+ #{"--"}color--main-navigation-border: $color--main-navigation-border;
+
+ #{"--"}color--sidebar-marker-focus: $color--sidebar-marker-focus;
+ #{"--"}color--sidebar-marker-hover: $color--sidebar-marker-hover;
+ #{"--"}color--sidebar-focus: $color--sidebar-focus;
+ #{"--"}color--sidebar-hover: $color--sidebar-hover;
+
+ #{"--"}color--dialog-overlay: $color--dialog-overlay;
+
+ #{"--"}color--tile-border-focus: $color--tile-border-focus;
+ #{"--"}color--tile-border-hover: $color--tile-border-hover;
+ #{"--"}color--tile-border: $color--tile-border;
+ #{"--"}color--tile-background: $color--tile-background;
+ #{"--"}color--tile-background-focus: $color--tile-background-focus;
+ #{"--"}color--tile-background-hover: $color--tile-background-hover;
+
+ #{"--"}color--content-box-border: $color--content-box-border;
+ #{"--"}color--content-box-background: $color--content-box-background;
+
+ #{"--"}color--table-header: $color--table-header;
+ #{"--"}color--table-border: $color--table-border;
+ #{"--"}color--table-focus: $color--table-focus;
+ #{"--"}color--table-hover: $color--table-hover;
+
+ #{"--"}color--button-background: $color--button-background;
+ #{"--"}color--button-border: $color--button-border;
+ #{"--"}color--button-focus: $color--button-focus;
+ #{"--"}color--button-hover: $color--button-hover;
+
+ #{"--"}color--input-field-border: $color--input-field-border;
+ #{"--"}color--input-field-background: $color--input-field-background;
+
+ #{"--"}color--divider: $color--divider;
+ #{"--"}color--line: $color--line;
+
+ #{"--"}color--shadow: $color--shadow;
+ #{"--"}color--focus: $color--focus;
+
+ #{"--"}color--warning: $color--warning;
+ #{"--"}color--attention: $color--attention;
+ #{"--"}color--good: $color--good;
+
@media (prefers-reduced-motion) {
#{"--"}transition-duration: 0s;
#{"--"}transition-duration-slow: 0s;