klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-10-15 01:08:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes & améliorations du nouveau CSS (#616)

Browse Source
This commit is contained in:
Julien Constant
2023-04-05 18:03:43 +02:00
committed by GitHub
parent d83842af27
commit a198f5252d
3 changed files with 211 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
core/static/core/header.scss
View File

@@ -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 {