From 870b52baaa93b64747ea91e0bfd5f9b6a3d0be71 Mon Sep 17 00:00:00 2001 From: Thomas Hackl Date: Mon, 25 Jul 2022 17:02:22 +0200 Subject: cleanup after rebase, re #838 --- resources/assets/stylesheets/mixins/colors.less | 1 - resources/assets/stylesheets/mixins/colors.scss | 1 + resources/assets/stylesheets/scss/header.scss | 2 +- resources/assets/stylesheets/scss/index.scss | 165 ++++++++++++++---------- resources/assets/stylesheets/scss/layouts.scss | 37 +++--- 5 files changed, 122 insertions(+), 84 deletions(-) diff --git a/resources/assets/stylesheets/mixins/colors.less b/resources/assets/stylesheets/mixins/colors.less index bf1bb38..9731101 100644 --- a/resources/assets/stylesheets/mixins/colors.less +++ b/resources/assets/stylesheets/mixins/colors.less @@ -1,6 +1,5 @@ //if you like, change this (your brand color) @base-color: #28497c; // #28497c -@contrast-blue: #2849d8; //PLEASE, no changes from here //@base-gray: #3c454e; // #3c454e diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss index 99ba8de..795fcf8 100644 --- a/resources/assets/stylesheets/mixins/colors.scss +++ b/resources/assets/stylesheets/mixins/colors.scss @@ -1,6 +1,7 @@ //if you like, change this (your brand color) $base-color: #28497c; // #28497c +$contrast-blue: #2849d8; //PLEASE, no changes from here //$base-gray: #3c454e; // #3c454e diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss index 6fc49fb..87279a0 100644 --- a/resources/assets/stylesheets/scss/header.scss +++ b/resources/assets/stylesheets/scss/header.scss @@ -35,7 +35,7 @@ body > header { // Fix header covering relevant other areas // @see https://gitlab.studip.de/studip/studip/-/issues/1019 html { - scroll-padding-top: calc($bar-bottom-container-height + 1em); + scroll-padding-top: calc(#{$bar-bottom-container-height} + 1em); } #main-footer, diff --git a/resources/assets/stylesheets/scss/index.scss b/resources/assets/stylesheets/scss/index.scss index d26384c..b65b6d2 100644 --- a/resources/assets/stylesheets/scss/index.scss +++ b/resources/assets/stylesheets/scss/index.scss @@ -1,50 +1,116 @@ -#background-desktop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; -} +div.index_container { + margin: 0 0; + top: 111px; + bottom: 0px; + width: 100%; + height: calc(100% - 110px); + + ul#tabs { + display: none; + } -#background-mobile { - display: none; - z-index: -1; -} + #background-desktop { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + } + + #background-mobile { + display: none; + z-index: -1; + } -#loginbox { - background-color: rgba(255, 255, 255, 0.8); - box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); - margin-left: 50px; - margin-top: 50px; - padding: 20px; - width: 450px; + div.messagebox { + margin-left: 50px; + margin-top: 50px; + width: 428px; + } - header { - margin: 10px 0 0 10px; + div.index_main { + background-color: rgba(255, 255, 255, 0.8); + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); + margin-left: 50px; + margin-top: 50px; + width: 500px; - h1 { - border-bottom: 0; + & > div { + padding: 20px; } - } - nav { - ul { + form { + padding: 20px; + padding-bottom: 0; + } + + footer { + overflow: auto; + padding: 20px; + + div#languages { + border-top: 1px solid $light-gray-color; + font-size: 0.9em; + padding: 10px; + + a { + padding-right: 10px; + } + } + + div#contrast { + display: flex; + align-items: center; + gap: 5px; + border-top: 1px solid $light-gray-color; + font-size: 0.9em; + padding: 10px; + + a { + text-decoration: underline; + color: $contrast-blue; + + &:hover, &:focus { + font-size: 1em; + color: $red; + } + } + } + + div.login_info { + border-top: 1px solid $light-gray-color; + font-size: 0.8em; + div { + text-align: right; + float: left; + padding: 5px; + + &:last-child { + float:right; + } + } + } + & > a { + margin-left: 12px; + } + } + nav { + h1 { + border-bottom: 0px; + } + padding: 10px; + margin-left: 20px; + margin-top: 20px; display: inline-block; - list-style-type: none; - margin: 0; width: 450px; - padding: 0 10px; - - .login_link { + div.login_link { display: inline-block; width: 180px; vertical-align: top; padding-right: 25px; - a { font-size: 1.5em; - p { font-size: 0.5em; color: $light-gray-color; @@ -52,45 +118,14 @@ } } } - } - footer { - overflow: auto; - - div#languages { - border-top: 1px solid $light-gray-color; - font-size: 0.9em; - padding: 10px; - - a { - padding-right: 10px; - } - } - - div.login_info { - border-top: 1px solid $light-gray-color; - font-size: 0.8em; - div { - text-align: right; - float: left; - padding: 5px; - - &:last-child { - float:right; - } - } - } - & > a { - margin-left: 12px; - } } } #index, #login { .messagebox { - margin: 50px 0 -25px 50px; - width: 418px; + margin-bottom: -25px; } } diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss index 60a325f..b6ff893 100644 --- a/resources/assets/stylesheets/scss/layouts.scss +++ b/resources/assets/stylesheets/scss/layouts.scss @@ -245,33 +245,36 @@ body { transition-delay: 500ms; } - > ul { // column 1 of flex-header - flex: 1 1 auto; - } + > ul { // column 1 of flex-header + flex: 1 1 auto; + } - #top-logo { - flex: 0 1 auto; - margin-right: 12px; - margin-top: -13px; - #layout_container { // row 3 of layout_page - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-content: stretch; - align-items: stretch; - justify-content: flex-start; + #top-logo { + flex: 0 1 auto; + margin-right: 12px; + margin-top: -13px; - flex-grow: 1; - min-width: $page-width; + #layout_container { // row 3 of layout_page + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-content: stretch; + align-items: stretch; + justify-content: flex-start; - #layout_content { // column 1 of layout_container flex-grow: 1; + min-width: $page-width; + + #layout_content { // column 1 of layout_container + flex-grow: 1; + } } } } } @-moz-document url-prefix() { + .flex-container { width: 100%; box-sizing: border-box; -- cgit v1.0