Bump qs from 6.14.1 to 6.14.2 in /components/ILIAS/Chatroom/chat

components/ILIAS/UICore/classes/MetaTemplate/PageContentGUI.php

@@ -483,7 +483,7 @@ protected function setCenterColumnClass(): void
                 break;
 
             case (null !== $this->left_content || null !== $this->right_content):
-                $center_column_class = 'col-sm-9';
+                $center_column_class = 'col-sm-8';
                 break;
 
             default:

templates/default/010-settings/_settings_button.scss

@@ -1,6 +1,8 @@
 @use "./_settings_color-palette.scss" as s-color;
 @use "./_settings_typography.scss" as s-typo;
 @use "./settings_borders" as s-border;
+@use "../050-layout/basics" as l;
+@use "./legacy-settings/legacy-settings_form" as s-form;
 
 //== Buttons
 //
@@ -35,8 +37,8 @@ $il-btn-ctrl-bg: s-color.$il-highlight-bg !default;
 //** Border color of the primary button (most important button on the screen)
 $il-btn-ctrl-border: s-color.$il-highlight-bg !default;
 $il-btn-ctrl-engaged-border: s-color.$il-link-color !default;
-$il-btn-ctrl-outer-height: 2.2rem !default;
-$il-btn-ctrl-inner-btn-height: 1.7rem !default;
+$il-btn-ctrl-outer-height: s-form.$il-input-min-height + 2 * l.$il-padding-xs-vertical !default;
+$il-btn-ctrl-inner-btn-height: s-form.$il-input-min-height !default;
 
 //** Colors of inactive buttons
 $il-disabled-btn-color: darken(s-color.$il-text-color, 20%) !default;
@@ -64,4 +66,4 @@ $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;
+$il-btn-border-radius-small:        s-border.$il-border-radius-small !default;

templates/default/010-settings/_settings_header.scss

@@ -1,9 +1,12 @@
 @use "./_settings_color-palette.scss" as s-color;
+@use "./settings_typography" as s-typo;
+@use "../030-tools/tool_scale-with-ratio" as t-scale;
+@use "../050-layout/basics" as l;
 
 //** 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-logo-height: t-scale.scale-with-ratio(l.$scale-ratio, 5, l.$spacing-base) !default;
+$il-standard-page-logo-width: t-scale.scale-with-ratio(l.$scale-ratio, 5, l.$spacing-base) !default;
+$il-standard-page-header-height: t-scale.scale-with-ratio(l.$scale-ratio, 6, l.$spacing-base) !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;
+$il-standard-page-header-page-title-color: s-color.$il-text-color !default;

templates/default/010-settings/_settings_mainbar.scss

@@ -1,14 +1,14 @@
 @use "./settings_color-palette" as s;
 
-$il-mainbar-btn-color: s.$il-main-bg !default;
-$il-mainbar-btn-bg-color: s.$il-neutral-color !default;
+$il-mainbar-btn-color: s.$il-neutral-color !default;
+$il-mainbar-btn-bg-color: s.$il-main-dark-bg !default;
 
-$il-mainbar-btn-color-hover: s.$il-neutral-color !default;
-$il-mainbar-btn-bg-color-hover: s.$il-main-bg !default;
+$il-mainbar-btn-color-hover: s.$il-main-bg !default;
+$il-mainbar-btn-bg-color-hover: s.$il-neutral-color !default;
 
 $il-mainbar-btn-color-engaged: s.$il-neutral-color !default;
 $il-mainbar-btn-bg-color-engaged: s.$il-main-bg !default;
 
-$il-mainbar-btn-icon-filter: brightness(0) invert(1) !default;
-$il-mainbar-btn-hover-icon-filter: invert(50%) !default;
+$il-mainbar-btn-icon-filter: invert(50%) !default;
+$il-mainbar-btn-hover-icon-filter: brightness(0) invert(1) !default;
 $il-mainbar-btn-engaged-icon-filter: invert(50%) !default;

templates/default/010-settings/_settings_typography.scss

@@ -1,37 +1,42 @@
-@use "../030-tools/tool_rem-conversion" as t-rem-px;
 @use "sass:math";
+@use "../030-tools/tool_rem-conversion" as t-rem-px;
+@use "../030-tools/tool_scale-with-ratio" as t-scale;
+
 //== 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-font-family-sans-serif: 'Atkinson Hyperlegible Next', Verdana, Arial, Helvetica, sans-serif !default;
 
 $il-headings-font-family: $il-font-family-sans-serif !default;
 
+$il-font-scaling-ratio: 1.333;
+
+$il-font-size-base:		  1rem !default;
+
 //** Should only be used to indicate mainbar entries. Equivalent to 10px => 10*1/16=0.625rem.
-$il-font-size-xsmall:		0.625rem !default;
+$il-font-size-xsmall:		t-scale.scale-with-ratio($il-font-scaling-ratio, -1, $il-font-size-base, 3) !default;
 //** Used to indicate subordinate text, such as bylines in forms, subtabs, etc. Equivalent to 12px.
-$il-font-size-small:		0.75rem !default;
+$il-font-size-small:		t-scale.scale-with-ratio($il-font-scaling-ratio, -0.5, $il-font-size-base, 3) !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;
+$il-font-size-large:	t-scale.scale-with-ratio($il-font-scaling-ratio, 0.75, $il-font-size-base, 3)	!default;
 //** Used to indicate h3. Equivalent to 18px.
-$il-font-size-xlarge:    1.115rem !default;
+$il-font-size-xlarge:    t-scale.scale-with-ratio($il-font-scaling-ratio, 1, $il-font-size-base, 3) !default;
 //** Used to indicate h2. Equivalent to 24px.
-$il-font-size-xxlarge:    1.5rem !default;
+$il-font-size-xxlarge:    t-scale.scale-with-ratio($il-font-scaling-ratio, 2, $il-font-size-base, 3) !default;
 //** Used to indicate h1. Should only used one time per screen. Equivalent to 28px.
-$il-font-size-h1:    1.75rem !default;
+$il-font-size-h1:    t-scale.scale-with-ratio($il-font-scaling-ratio, 3, $il-font-size-base, 3) !default;
 
 //** Unit-less `line-height` for use in components like buttons.
-$il-line-height-base:		1.428571429 !default;
+$il-line-height-base:		$il-font-scaling-ratio !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;
+$il-line-height-small: $il-font-scaling-ratio !default;
 
 
 //** Used to lighten text, e.g. workflow steps.

templates/default/010-settings/legacy-settings/_legacy-settings_form.scss

@@ -1,4 +1,6 @@
-@use "../../010-settings/" as *;
+@use "../../010-settings/settings_color-palette" as *;
+@use "../../010-settings/settings_typography" as *;
+@use "../../010-settings/settings_borders" as *;
 @use "../../050-layout/basics/" as *;
 
 //** Textcolor used in the forms sections bodies
@@ -25,9 +27,9 @@ $il-standard-form-header-byline-font-size: $il-font-size-small;
 //** Background color used for dependant groups (sub forms) in standard forms
 $il-standard-form-dependant-group-bg: $il-main-darker-bg;
 //** Padding above headings of individual groups in forms
-$il-standard-form-header-padding: $il-padding-xxlarge-vertical 0 $il-padding-xxlarge-vertical $il-padding-xlarge-horizontal;
+$il-standard-form-header-padding: $il-padding-xlarge-vertical 0 $il-padding-xlarge-vertical $il-padding-large-horizontal;
 //** Margin above headings of individual groups in forms
-$il-standard-form-header-margin: $il-margin-xlarge-horizontal 0 0 0;
+$il-standard-form-header-margin: $il-margin-large-horizontal 0 0 0;
 //** Border seperating individual groups in forms
 $il-standard-form-header-border:    1px solid $il-main-border-color;
 
@@ -39,8 +41,8 @@ $il-button-min-width-forms: 60px;
 
 $cursor-disabled: not-allowed;
 
-$il-input-line-height-base: ceil($il-line-height-computed + $il-padding-base-vertical * 2 + 2);
-$il-input-min-height: $il-line-height-computed + ((2+2*$il-padding-base-vertical)); // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+$il-input-line-height-base: ceil($il-line-height-computed + $il-padding-small-vertical * 2 + 2);
+$il-input-min-height: 2 * $il-padding-medium-vertical; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
 $il-input-color: $il-text-color;
 $il-input-bg: $il-main-bg;
 $il-input-border-color: $il-main-border-dark-color;

templates/default/010-settings/legacy-settings/_legacy-settings_panel.scss

@@ -2,10 +2,10 @@
 @use "../../050-layout/basics/" as *;
 
 $il-panel-footer-bg:             $il-main-dark-bg;
-$il-panel-heading-padding: $il-padding-xlarge-vertical $il-padding-xlarge-horizontal;
+$il-panel-heading-padding: $il-padding-medium-vertical $il-padding-medium-horizontal;
 $il-panel-heading-color: $il-text-color;
 $il-panel-shadow: none;
 $il-panel-border: 1px solid $il-main-border-color;
 $il-panel-border-radius: $il-border-radius-secondary-small;
-$il-panel-footer-padding: $il-padding-xlarge-vertical $il-padding-xlarge-horizontal;
-$il-panel-inner-border:          $il-main-border-color;
+$il-panel-footer-padding: $il-padding-medium-vertical $il-padding-medium-horizontal;
+$il-panel-inner-border:          $il-main-border-color;

templates/default/030-tools/_tool_highlighted-box.scss

@@ -17,7 +17,7 @@ $min-height: auto !default;
   $border-color: $border-color
 ) {
   min-height: $min-height;
-  padding: $il-padding-xxxlarge-horizontal;
+  padding: $il-padding-xlarge-horizontal;
   background-color: $background-color;
   border: $border;
   border-radius: $il-border-radius-base;
@@ -26,4 +26,4 @@ $min-height: auto !default;
   blockquote {
     border-color: $border-color;
   }
-}
+}

templates/default/030-tools/_tool_rem-conversion.scss

@@ -19,9 +19,10 @@ $il-pixel-to-rem: 0.0625;
         @return($converted);
     }
     @else {
-        @error "Rem to pixel conversion requires a rem value as an input. Unit was '#{math.unit($convert-this)}' instead.";
+        // @error "Rem to pixel conversion requires a rem value as an input. Unit was '#{math.unit($convert-this)}' instead.";
+        @return($convert-this);
     }
 }
 
 // @debug "20px in rem is #{pixel-to-rem(20px)}";
-// @debug "1rem in px is #{rem-to-pixel(1rem)}";
+// @debug "1rem in px is #{rem-to-pixel(1rem)}";

templates/default/030-tools/_tool_scale-with-ratio.scss

@@ -0,0 +1,15 @@
+@use "sass:math";
+
+////
+/// Creates visually balanced scaled sizes
+/// @group tools
+////
+
+@function scale-with-ratio($ratio, $scale-factor, $base-size, $round-to-num-of-decimals: 0) {
+  $result: $base-size * math.pow($ratio, $scale-factor);
+  @if $round-to-num-of-decimals != null and $round-to-num-of-decimals >= 0 {
+    $result: math.div(math.round($result * (math.pow(10, $round-to-num-of-decimals))), (math.pow(10, $round-to-num-of-decimals)));
+  }
+  @debug "Requested scale factor #{$scale-factor} rounding set to #{$round-to-num-of-decimals} decimals gives result: #{$result}";
+  @return $result;
+}

templates/default/040-normalize/_normalize_typography.scss

@@ -1,85 +1,68 @@
 @use "../010-settings/" as *;
-
+/* atkinson-hyperlegible-next-regular - latin */
 @font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-Regular.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-Regular.woff') format('woff');
-	font-weight: 400;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-Bold.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-Bold.woff') format('woff');
-	font-weight: 700;
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'Atkinson Hyperlegible Next';
 	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-Italic.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-Italic.woff') format('woff');
 	font-weight: 400;
-	font-style: italic;
+	src: url('#{$il-web-font-path}AtkinsonHyperlegibleNext/atkinson-hyperlegible-next-v7-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
+/* atkinson-hyperlegible-next-italic - latin */
 @font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-BoldItalic.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-BoldItalic.woff') format('woff');
-	font-weight: 700;
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'Atkinson Hyperlegible Next';
 	font-style: italic;
+	font-weight: 400;
+	src: url('#{$il-web-font-path}AtkinsonHyperlegibleNext/atkinson-hyperlegible-next-v7-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
+/* atkinson-hyperlegible-next-600 - latin */
 @font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-Light.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-Light.woff') format('woff');
-	font-weight: 300;
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'Atkinson Hyperlegible Next';
 	font-style: normal;
+	font-weight: 600;
+	src: url('#{$il-web-font-path}AtkinsonHyperlegibleNext/atkinson-hyperlegible-next-v7-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
+/* atkinson-hyperlegible-next-600italic - latin */
 @font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-LightItalic.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-LightItalic.woff') format('woff');
-	font-weight: 300;
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'Atkinson Hyperlegible Next';
 	font-style: italic;
+	font-weight: 600;
+	src: url('#{$il-web-font-path}AtkinsonHyperlegibleNext/atkinson-hyperlegible-next-v7-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
+/* atkinson-hyperlegible-next-700 - latin */
 @font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-Semibold.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-Semibold.woff') format('woff');
-	font-weight: 600;
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'Atkinson Hyperlegible Next';
 	font-style: normal;
+	font-weight: 700;
+	src: url('#{$il-web-font-path}AtkinsonHyperlegibleNext/atkinson-hyperlegible-next-v7-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
+/* atkinson-hyperlegible-next-700italic - latin */
 @font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-SemiboldItalic.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-SemiboldItalic.woff') format('woff');
-	font-weight: 600;
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'Atkinson Hyperlegible Next';
 	font-style: italic;
+	font-weight: 700;
+	src: url('#{$il-web-font-path}AtkinsonHyperlegibleNext/atkinson-hyperlegible-next-v7-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
+/* atkinson-hyperlegible-next-800 - latin */
 @font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-ExtraBold.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-ExtraBold.woff') format('woff');
-	font-weight: 800;
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'Atkinson Hyperlegible Next';
 	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Open Sans';
-	src:	url('#{$il-web-font-path}OpenSansWeb/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
-			url('#{$il-web-font-path}OpenSansWeb/OpenSans-ExtraBoldItalic.woff') format('woff');
 	font-weight: 800;
-	font-style: italic;
+	src: url('#{$il-web-font-path}AtkinsonHyperlegibleNext/atkinson-hyperlegible-next-v7-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
+
 // currently from https://github.com/MorbZ/OpenSansEmoji
 // under http://www.apache.org/licenses/LICENSE-2.0
 @font-face {

templates/default/050-layout/_index.scss

@@ -2,6 +2,5 @@
 // You MUST NOT include this index file in any component.
 
 @use "./layout_grid";
-@use "./layout_container";
 @use "./layout_element-bar";
-@use "./layout_visibility-utilities";
+@use "./layout_visibility-utilities";