Style changes from '3fed04c946996bacd6aea992036d5eaec7348e83'

Original message: 'CI: fix invalid workflow'

ILIAS-eLearning/ILIAS@3fed04c

010-settings/_index.scss

@@ -0,0 +1,16 @@
+//
+//== Settings
+//
+
+// The linked files contains globally used variables set by ILIAS.
+// These variables MUST be only the ones absolutely needed to quickly recolor and reshape ILIAS.
+// Bootstrap variables MUST be overridden in the Dependency layer.
+
+@forward "./settings_color-palette";
+@forward "./settings_typography";
+@forward "./settings_borders";
+@forward "./settings_button";
+@forward "./settings_footer"; 
+@forward "./settings_header";
+@forward "./settings_layout";
+@forward "./settings_media";

010-settings/_settings_borders.scss

@@ -0,0 +1,13 @@
+//** Base Border Color, e.g. applied to Meta Bar and Breadcrumbs in Default.
+$il-main-border-color: #dddddd !default;
+//** Darker version of Base Border Color. Used as e.g. Text Inputs.
+$il-main-border-dark-color: #757575 !default;
+$il-main-border: 1px solid $il-main-border-color !default;
+//** Border Radius for giving the whole skin a rounded look
+$il-border-radius-base: 0px !default;
+$il-border-radius-large: 0px !default;
+$il-border-radius-small: 0px !default;
+//** Border Radius for sub-elements that are rounded to stand out from the default (like tags).
+$il-border-radius-secondary-base: 4px !default;
+$il-border-radius-secondary-large: 6px !default;
+$il-border-radius-secondary-small: 3px !default;

010-settings/_settings_button.scss

@@ -0,0 +1,44 @@
+@use "./_settings_color-palette.scss" as s-color;
+@use "./_settings_typography.scss" as s-typo;
+@use "./settings_borders" as s-border;
+
+//== Buttons
+//
+
+//** Size of the font displayed inside a button
+$il-button-font-size: s-typo.$il-font-size-small !default;
+
+$il-button-font-weight: s-typo.$il-font-weight-base !default;
+
+//** Text color of the standard button (most button instances)
+$il-btn-standard-color: white !default;
+//** Background color of the standard button (most button instances)
+$il-btn-standard-bg: s-color.$il-main-color !default;
+//** Border color of the standard button (most button instances)
+$il-btn-standard-border: s-color.$il-main-color !default;
+
+//** Text color of the primary button (most important button on the screen)
+$il-btn-primary-color: white !default;
+//** Background color of the primary button (most important button on the screen)
+$il-btn-primary-bg: darken(s-color.$il-secondary-color, 10%) !default;
+//** Border color of the primary button (most important button on the screen)
+$il-btn-primary-border: darken(s-color.$il-secondary-color, 10%) !default;
+
+//** Colors of inactive buttons
+$il-disabled-btn-color: darken(s-color.$il-text-color, 20%) !default;
+$il-disabled-btn-bg: #b0b0b0 !default;
+$il-disabled-btn-border: #b0b0b0 !default;
+
+//** Tag Colors
+$il-btn-tag-bg: #75deea !default;
+$il-btn-tag-bg-highlighted: s-color.$il-warning-color !default;
+
+//** Width of the `border` for generating carets that indicate dropdowns.
+$il-caret-width-base:          4px !default;
+//** Carets increase slightly in size for larger components.
+$il-caret-width-large:         5px !default;
+
+// Allows for customizing button radius independently from global border radius
+$il-btn-border-radius-base:         s-border.$il-border-radius-base !default;
+$il-btn-border-radius-large:        s-border.$il-border-radius-large !default;
+$il-btn-border-radius-small:        s-border.$il-border-radius-small !default;

010-settings/_settings_color-palette.scss

@@ -0,0 +1,98 @@
+//== Main Colors
+//
+//## The Main Colors used in ILIAS along with their semantics
+//** For Standard Buttons, Main color used in various places, used to be $brand-primary
+$il-main-color: #4c6586 !default;
+//** For Primary Buttons, used to point to interactions with a special importance, used to be $brand-secondary
+$il-secondary-color: #6ea03c !default;
+//** Used to indicate some success, used to be $brand-success
+$il-success-color: #6ea03c !default;
+//** Used to indicate some success, used to be $brand-info
+$il-info-color: #31708f !default;
+//** Used to indicate some warning or to draw special focus to some element, used to be $brand-warning
+$il-warning-color: #B54F00 !default;
+//** Used to indicate some warning or to draw special focus to some element, used to be $brand-danger
+$il-danger-color: #d00 !default;
+
+//** Neutral Color for various Backgrounds, used to be $gray-dark and $il-neutral-color
+$il-neutral-color: #2c2c2c !default;
+
+$il-text-muted: $il-neutral-color !default;
+
+//** Light version of the $il-neutral-color, used to be $gray-light
+$il-neutral-light-color: #737373 !default;
+
+//** Base Background Color, e.g. applied to Meta Bar and Breadcrumbs in Default, but also to panels in main content area.
+$il-main-bg: white !default;
+//** Title area of various components such as Panels. Used as e.g. in containers as bg. Used to be $il-secondary-bg
+$il-main-dark-bg: #f9f9f9 !default;
+//** Background of subelements like subforms. Used mainly on the main-dark-bg.
+$il-main-darker-bg: #f0f0f0 !default;
+
+//** Currently used for several highlighting effects, such as hovering
+$il-highlight-bg: lighten($il-main-color, 50%) !default;
+
+//** Used to be $text-color. Can be used on all background colors.
+$il-text-color: #161616 !default;
+
+$il-headings-color: inherit !default;
+
+//** Used if text is hovered in components such a Dropdowns
+$il-text-hover-color: darken($il-text-color, 10%) !default;
+//** Used e.g. for Bylines in Forms. Used to be $il-light-text-color. For accessibility reasons, the $il-text-color should only be used on the $il-main-bg.
+$il-text-light-color: lighten($il-text-color, 35%) !default;
+//** Text color in inverted designs
+$il-text-color-invert: $il-main-bg !default;
+
+//** Used to be $link-color
+$il-link-color: $il-main-color !default;
+//** Used to be $link-hover-color
+$il-link-hover-color: darken($il-link-color, 10%) !default;
+
+//** Used to set focus on interactive elements for keyboard navigation.
+$il-focus-color: #0078D7 !default;
+$il-focus-protection-color: #FFFFFF !default;
+
+//== Alert
+$il-alert-success-bg: lighten($il-success-color, 50%);
+$il-alert-success-border: $il-success-color;
+$il-alert-success-text: $il-text-color;
+
+$il-alert-info-bg: lighten($il-info-color, 50%);
+$il-alert-info-border: $il-info-color;
+$il-alert-info-text: $il-text-color;
+
+$il-alert-warning-bg: lighten($il-warning-color, 55%);
+$il-alert-warning-border: $il-warning-color;
+$il-alert-warning-text: $il-text-color;
+
+$il-alert-danger-bg: lighten($il-danger-color, 50%);
+$il-alert-danger-border: $il-danger-color;
+$il-alert-danger-text: $il-text-color;
+
+//== Extended Colors
+//
+//## Extended Colors of ILIAS to be used to generate coloring for components like charts.
+
+//** Variant 1 of the extended color set in ILIAS
+$il-extended-color-1: #f3de2c !default;
+//** Variant 2 of the extended color set in ILIAS
+$il-extended-color-2: #d38000 !default;
+//** Variant 3 of the extended color set in ILIAS
+$il-extended-color-3: #307C88 !default;
+//** Variant 4 of the extended color set in ILIAS
+$il-extended-color-4: #86cb92 !default;
+//** Variant 5 of the extended color set in ILIAS
+$il-extended-color-5: #ce73a8 !default;
+//** Variant 6 of the extended color set in ILIAS
+$il-extended-color-6: #82639e !default;
+//** Variant 7 of the extended color set in ILIAS
+$il-extended-color-7: #9e7c7d !default;
+//** Variant 8 of the extended color set in ILIAS
+$il-extended-color-8: #f75e82 !default;
+//** Variant 9 of the extended color set in ILIAS
+$il-extended-color-9: #ea4d54 !default;
+
+//** all variants of letter avatar background colors (MUST be 26), note for a11y reason, they must be in contrast 3x1 to white (foreground color)
+$il-avatar-letter-color-variants: (#0e6252, #107360, #aa890a, #c87e0a, #176437, #196f3d, #bf6516, #a04000, #1d6fa5, #1b557a, #bf2718, #81261d, #713b87, #522764, #78848c, #34495e, #2c3e50, #566566, #90175a, #9e2b6e, #d22f10, #666d4e, #715a32, #83693a, #963a30, #e74c3c) !default;
+

010-settings/_settings_footer.scss

@@ -0,0 +1,6 @@
+@use "./_settings_color-palette.scss" as s-color;
+
+//** footer
+$il-footer-bg-color: s-color.$il-main-bg !default;
+$il-footer-color: s-color.$il-text-color !default;
+$il-footer-height: 45px !default;

010-settings/_settings_header.scss

@@ -0,0 +1,9 @@
+@use "./_settings_color-palette.scss" as s-color;
+
+//** header
+$il-standard-page-logo-height: 45px !default;
+$il-standard-page-logo-width: 45px !default;
+$il-standard-page-header-height: 60px !default;
+$il-standard-page-header-bg-color: s-color.$il-main-bg !default;
+
+$il-standard-page-header-page-title-color: s-color.$il-text-color !default;

010-settings/_settings_layout.scss

@@ -0,0 +1,5 @@
+@use "../050-layout/layout_breakpoints" as *;
+
+$il-grid-float-breakpoint-max: $screen-sm !default;
+$il-grid-float-breakpoint:  $screen-sm-min !default;
+$il-toolbar-height: 40px !default;

010-settings/_settings_media.scss

@@ -0,0 +1,2 @@
+//** if left unchanged, you have to copy all the background images to your skin/images folder. To use the delos background images in your skin, please change this value (in custom less data or in variables.scss of your custom skin) to "../../../../templates/default/images/"
+$il-background-images-path: "./images/" !default;

010-settings/_settings_typography.scss

@@ -0,0 +1,49 @@
+@use "../030-tools/tool_rem-conversion" as t-rem-px;
+@use "sass:math";
+//== Typography
+//
+//##
+
+//** if left unchanged, you have to copy delos fonts folder to your skin folder. To use the delos fonts in your skin, please change this value (in custom less data or variables.scss of your custom skin) to "../../../../templates/default/fonts/"
+$il-web-font-path: "./fonts/" !default;
+$il-font-family-sans-serif: 'Open Sans', Verdana, Arial, Helvetica, sans-serif !default;
+
+$il-headings-font-family: $il-font-family-sans-serif !default;
+
+//** Should only be used to indicate mainbar entries. Equivalent to 10px => 10*1/16=0.625rem.
+$il-font-size-xsmall:		0.625rem !default;
+//** Used to indicate subordinate text, such as bylines in forms, subtabs, etc. Equivalent to 12px.
+$il-font-size-small:		0.75rem !default;
+//** Default font size. Also used for h5. Equivalent to 14px.
+$il-font-size-base:		  0.875rem !default;
+//** Used to indicate h4. Equivalent to 16px.
+$il-font-size-large:		1rem !default;
+//** Used to indicate h3. Equivalent to 18px.
+$il-font-size-xlarge:    1.115rem !default;
+//** Used to indicate h2. Equivalent to 24px.
+$il-font-size-xxlarge:    1.5rem !default;
+//** Used to indicate h1. Should only used one time per screen. Equivalent to 28px.
+$il-font-size-h1:    1.75rem !default;
+
+//** Unit-less `line-height` for use in components like buttons.
+$il-line-height-base:		1.428571429 !default;
+$il-line-height-computed: math.round(t-rem-px.rem-to-pixel($il-font-size-base) * $il-line-height-base) !default;
+$il-small-line-height-computed: math.round(t-rem-px.rem-to-pixel($il-font-size-small) * $il-line-height-base) !default;
+$il-line-height-large:  1.33 !default;
+$il-headings-line-height: 1.33 !default;
+$il-line-height-small: 1.5 !default;
+
+
+//** Used to lighten text, e.g. workflow steps.
+$il-font-weight-light:    300 !default;
+//** Default font weight.
+$il-font-weight-base:    400 !default;
+//** Used to indicate headings.
+$il-font-weight-bold:    600 !default;
+//** Used to indicate e.g. dates with appointements
+$il-font-weight-xbold:    700 !default;
+
+$il-headings-font-weight: 500 !default;
+
+$il-link-decoration: none !default;
+$il-link-hover-decoration: underline !default;