CyberGammaGroup/CyberGammaGroup-websites-css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Actualiser main-site.scss

Browse source
This commit is contained in:
GZod01 2024-11-11 11:26:36 +01:00
parent b1d9af7839
commit 116c42f579
1 changed files with 24 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
main-site.scss
View file

@ -13,30 +13,14 @@ $dangercolortext: #fff;
$dangercolortextoutline: rgb(250, 200, 200); $dangercolortextoutline: rgb(250, 200, 200);
$confirmationcolor: rgb(100, 200, 100); $confirmationcolor: rgb(100, 200, 100);
$confirmationcolortext: rgb(220, 255, 220); $confirmationcolortext: rgb(220, 255, 220);
:root {
--pri-color: rgb(150 255 161);
--bg-color: grey;
--text-color: lime;
--sec-color: rgb(74 74 74);
--sec-color-darklight: rgb(27 27 27);
--error-bg: rgb(150, 50, 50);
--error-color: rgb(255, 220, 220);
--event-bg: rgb(255, 255, 255);
--sec-color-light: rgb(180, 180, 180);
--danger-color-1: #c40014;
--danger-color-2: #e86500;
--danger-color-text: #fff;
--danger-color-text-outline: rgb(250, 200, 200);
--confirmation-color: rgb(100, 200, 100);
--confirmation-color-text: rgb(220, 255, 220);
}
* { * {
z-index: 0; z-index: 0;
} }
body { body {
background-color: var(--bg-color); background-color: $bgcolor;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
@ -46,14 +30,14 @@ body {
main.content { main.content {
margin: 0px 10px; margin: 0px 10px;
background-color: var(--bg-color); background-color: $bgcolor;
color: var(--text-color); color: $textcolor;
flex: 2 0 0%; flex: 2 0 0%;
} }
main.content .admindiv { main.content .admindiv {
width: 80%; width: 80%;
background-image: linear-gradient(20deg, var(--danger-color-1) 25%, var(--danger-color-2) 25%, var(--danger-color-2) 50%, var(--danger-color-1) 50%, var(--danger-color-1) 75%, var(--danger-color-2) 75%, var(--danger-color-2) 100%); background-image: linear-gradient(20deg, $dangercolor1 25%, $dangercolor2 25%, $dangercolor2 50%, $dangercolor1 50%, $dangercolor1 75%, $dangercolor2 75%, $dangercolor2 100%);
background-size: 116.95px 42.57px; background-size: 116.95px 42.57px;
position: relative; position: relative;
left: 50%; left: 50%;
@ -63,21 +47,21 @@ main.content .admindiv {
place-self: center; place-self: center;
border-radius: 20px; border-radius: 20px;
padding: 20px; padding: 20px;
color: var(--danger-color-text); color: $dangercolortext;
} }
main.content .admindiv * { main.content .admindiv * {
color: var(--danger-color-text); color: $dangercolortext;
font-weight: 900; font-weight: 900;
-webkit-text-fill-color: var(--danger-color-text); -webkit-text-fill-color: $dangercolortext;
-webkit-text-stroke-width: 0.5px; -webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: var(--danger-color-text-outline); -webkit-text-stroke-color: $dangercolortextoutline;
} }
header.header { header.header {
height: 50px; height: 50px;
background-color: var(--sec-color); background-color: $seccolor;
color: var(--pri-color); color: $pricolor;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -125,19 +109,19 @@ header.header ul.nav li.nav-item {
} }
header.header ul.nav li.nav-item a { header.header ul.nav li.nav-item a {
background-color: var(--sec-color); background-color: $seccolor;
display: inline-block; display: inline-block;
padding: 0px 20px; padding: 0px 20px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
color: var(--pri-color); color: $pricolor;
text-decoration: none; text-decoration: none;
} }
header.header ul.nav li.nav-item.active a { header.header ul.nav li.nav-item.active a {
background-color: var(--sec-color-darklight); background-color: $seccolordarklight;
} }
header.header ul.nav li.nav-item a:hover { header.header ul.nav li.nav-item a:hover {
@ -156,7 +140,7 @@ header.header .toggler-label svg {
} }
header.header .toggler-label svg path { header.header .toggler-label svg path {
fill: var(--pri-color); fill: $pricolor;
} }
.toggler~header.header .toggler-label { .toggler~header.header .toggler-label {
@ -180,7 +164,7 @@ header.header .toggler-label svg path {
right: 0px; right: 0px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
background: var(--pri-color); background: $pricolor;
flex-flow: column wrap; flex-flow: column wrap;
transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
z-index: 50 !important; z-index: 50 !important;
@ -212,8 +196,8 @@ header.header .toggler-label svg path {
.toggler:checked~header.header ul.nav li.nav-item { .toggler:checked~header.header ul.nav li.nav-item {
min-width: calc(50% - 2px); min-width: calc(50% - 2px);
border-left: 1px solid var(--pri-color); border-left: 1px solid $pricolor;
border-right: solid 1px var(--pri-color); border-right: solid 1px $pricolor;
} }
.toggler:checked~header.header ul.nav li.nav-item a { .toggler:checked~header.header ul.nav li.nav-item a {
@ -236,12 +220,12 @@ footer.footer {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--sec-color); background-color: $seccolor;
color: var(--pri-color); color: $pricolor;
} }
footer.footer a { footer.footer a {
color: var(--pri-color); color: $pricolor;
} }
footer.footer a:hover { footer.footer a:hover {
@ -260,7 +244,7 @@ footer.footer a:hover {
margin: 10px 0px; margin: 10px 0px;
flex-direction: row; flex-direction: row;
width: 80%; width: 80%;
background-color: var(--event-bg); background-color: $eventbg;
padding: 10px; padding: 10px;
border-radius: 20px; border-radius: 20px;
height: 300px; height: 300px;
@ -296,7 +280,7 @@ footer.footer a:hover {
.eventitem .eventinfos time.date { .eventitem .eventinfos time.date {
place-self: center; place-self: center;
background-color: var(--sec-color-light); background-color: $seccolorlight;
text-align: center; text-align: center;
border-radius: 5px; border-radius: 5px;
} }
@ -306,7 +290,7 @@ footer.footer a:hover {
flex: 2 0 0%; flex: 2 0 0%;
max-height: 200px; max-height: 200px;
overflow: auto; overflow: auto;
border: 2px solid var(--sec-color); border: 2px solid $seccolor;
border-radius: 10px; border-radius: 10px;
} }