From a198f5252d3013b0469bc4480d7e3a3254a8958d Mon Sep 17 00:00:00 2001 From: Julien Constant <49886317+Juknum@users.noreply.github.com> Date: Wed, 5 Apr 2023 18:03:43 +0200 Subject: [PATCH] =?UTF-8?q?Fixes=20&=20am=C3=A9liorations=20du=20nouveau?= =?UTF-8?q?=20CSS=20(#616)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/static/core/header.scss | 71 +++++++----- core/static/core/navbar.scss | 194 +++++++++++++++++++-------------- core/templates/core/base.jinja | 102 +++++++++-------- 3 files changed, 211 insertions(+), 156 deletions(-) diff --git a/core/static/core/header.scss b/core/static/core/header.scss index dea1aab4..5c90e319 100644 --- a/core/static/core/header.scss +++ b/core/static/core/header.scss @@ -1,6 +1,15 @@ +$hovered-text-color: #c2c2c2; +$text-color: white; + +$background-color: #354a5f; +$background-color-hovered: #283747; + +$red-text-color: #eb2f06; +$hovered-red-text-color: #ff4d4d; + .header { box-sizing: border-box; - background-color: #354a5f; + background-color: $background-color; box-shadow: 3px 3px 3px 0 #dfdfdf; border-radius: 0; width: 100%; @@ -24,11 +33,11 @@ gap: 10px; >a { - color: #fff; + color: $text-color; } &:hover>a { - color: #1a78b3; + color: $hovered-text-color;; } @media (max-width: 607px) { @@ -51,7 +60,7 @@ } &-text { - color: white; + color: $text-color; display: flex; flex-direction: column; justify-content: center; @@ -89,16 +98,16 @@ border-radius: 0; margin: 0; box-sizing: border-box; - background-color: #354a5f; + background-color: $background-color; width: 45px; height: 25px; padding: 0; - color: white; + color: $text-color; font-weight: normal; line-height: 1.3em; &:hover { - background-color: #283747; + background-color: $background-color-hovered; } } } @@ -126,13 +135,13 @@ align-items: center; text-transform: uppercase; text-decoration: none; - color: white; + color: $text-color; margin: 0; font-size: .9em; width: 120px; &:hover { - background-color: #283747; + background-color: $background-color-hovered; } } } @@ -198,30 +207,34 @@ > a { display: block; - width: 40px; + min-width: 40px; height: 40px; border-radius: 50%; background-position: center center; background-size: cover; background-repeat: no-repeat; - background-color: #354a5f; + background-color: $background-color; } >.options { display: flex; flex-direction: column; - gap: 2px; + gap: 5px; >.username { display: flex; justify-content: flex-end; gap: 5px; + @media (max-width: 500px) { + justify-content: flex-start; + } + >a { - color: white; + color: $text-color; &:hover { - color: #1a78b3; + color: $hovered-text-color; } } } @@ -230,7 +243,7 @@ width: 100%; display: flex; justify-content: flex-end; - gap: 5px; + gap: 15px; @media (max-width: 1200px) { justify-content: flex-start; @@ -238,17 +251,17 @@ >a { text-align: right; - color: white; + color: $text-color; &:hover { - color: #1a78b3; + color: $hovered-text-color; } &:last-child { - color: #eb2f06; + color: $red-text-color; &:hover { - color: #cc2804; + color: $hovered-red-text-color; } } } @@ -265,16 +278,16 @@ position: relative; >a { - color: white; + color: $text-color; position: relative; font-size: 25px; &:hover { - color: #1a78b3; + color: $hovered-text-color; } >span { - color: white; + color: $text-color; font-size: 14px; display: flex; justify-content: center; @@ -282,7 +295,7 @@ width: 10px; height: 10px; padding: 5px; - background-color: #eb2f06; + background-color: $red-text-color; border-radius: 50%; position: absolute; top: -50%; @@ -388,9 +401,13 @@ border-radius: 5px; font-size: .9em; margin: 0; - background-color: #283747; + background-color: $background-color-hovered; padding: 0 10px; - color: white; + color: $text-color; + + &::placeholder { + color: $hovered-text-color; + } } } } @@ -418,10 +435,10 @@ >li>a { display: flex; - color: white; + color: $text-color; &:hover { - color: #1a78b3; + color: $hovered-text-color; } >span { diff --git a/core/static/core/navbar.scss b/core/static/core/navbar.scss index 2eede6c0..6566c9e5 100644 --- a/core/static/core/navbar.scss +++ b/core/static/core/navbar.scss @@ -1,13 +1,9 @@ nav.navbar { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: center; background-color: hsl(203, 75%, 40%); margin: 1em; color: white; border-radius: 0.6em; + min-height: 40px; @media (max-width: 500px) { position: relative; @@ -17,94 +13,126 @@ nav.navbar { margin: .2em; } - > .menu, - > .link { - box-sizing: border-box; - width: 130px; - height: 52px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - - @media (max-width: 500px) { - width: 100%; - height: auto; - justify-content: flex-start; - - &:first-child { - border-radius: .6em .6em 0 0; - } - - &:last-child { - border-radius: 0 0 .6em .6em; - - > .content { - box-shadow: 3px 3px 3px 0 #dfdfdf; - } - } - } - } - - > .menu > .head, - > .link { - color: white; - padding: 10px 20px; - box-sizing: border-box; - - @media (max-width: 500px) { - padding: 10px; - } - } - - .link:hover, - .menu:hover { - background-color: rgba(0, 0, 0, .2); - } - - > .menu:hover > .content, - > .menu > .head:hover + .content, - > .menu > .content:hover { - display: flex; - } - - > .menu { - display: flex; + > .expand-button { + background-color: transparent; + display: none; position: relative; + padding: 10px; + cursor: pointer; + width: 40px; + height: 40px; + justify-content: center; + align-items: center; + margin: 0; - > .content { - z-index: 10; - display: none; - position: absolute; - top: 100%; - background-color: white; - margin: 0; - list-style-type: none; + > i { + font-size: 1.5em; + color: white; + } + + @media (max-width: 500px) { + display: flex; + } + } + + > .content { + @media (min-width: 500px) {display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + display: flex !important; + } + + > .menu, + > .link { + box-sizing: border-box; width: 130px; - box-shadow: 3px 3px 3px 0 #dfdfdf; - flex-direction: column; + height: 52px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; @media (max-width: 500px) { - position: absolute; - flex-direction: row; - flex-wrap: wrap; width: 100%; - box-shadow: inset 3px 3px 3px 0 #dfdfdf; - } + height: auto; + justify-content: flex-start; - > li > a { - display: flex; - padding: 15px 20px; - - @media (max-width: 500px) { - padding: 10px; + &:first-child { + border-radius: .6em .6em 0 0; } - &:hover { - color: hsl(203, 75%, 40%); - background-color: rgba(0, 0, 0, .05); + &:last-child { + border-radius: 0 0 .6em .6em; + + > .content { + box-shadow: 3px 3px 3px 0 #dfdfdf; + } } } } - } + + > .menu > .head, + > .link { + color: white; + padding: 10px 20px; + box-sizing: border-box; + + @media (max-width: 500px) { + padding: 10px; + } + } + + .link:hover, + .menu:hover { + background-color: rgba(0, 0, 0, .2); + } + + > .menu:hover > .content, + > .menu > .head:hover + .content, + > .menu > .content:hover { + display: flex; + } + + > .menu { + display: flex; + position: relative; + + > .content { + z-index: 10; + display: none; + position: absolute; + top: 100%; + background-color: white; + margin: 0; + list-style-type: none; + width: 130px; + box-shadow: 3px 3px 3px 0 #dfdfdf; + flex-direction: column; + + @media (max-width: 500px) { + position: absolute; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + box-shadow: inset 3px 3px 3px 0 #dfdfdf; + } + + > li > a { + display: flex; + padding: 15px 20px; + + @media (max-width: 500px) { + padding: 10px; + } + + &:hover { + color: hsl(203, 75%, 40%); + background-color: rgba(0, 0, 0, .05); + } + } + } + } + } } \ No newline at end of file diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja index 79e15d8b..bc93d967 100644 --- a/core/templates/core/base.jinja +++ b/core/templates/core/base.jinja @@ -196,52 +196,55 @@ {% block nav %} {% if not popup %} {% endif %} @@ -308,6 +311,13 @@ +