oysteikt/IT2
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Implemented sass

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit
2020-01-29 17:23:28 +01:00
parent 04efff0d15
commit 9596687e71
3 changed files with 186 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
resources/css/main.css Executable file → Normal file
View File

@@ -1,123 +1,102 @@
body { body {
background-color: #282828;
--blue: rgb(40, 131, 208);
--green: rgb(145, 226, 44);
--red: rgb(249, 38, 119);
--yellow: rgb(253, 151, 31);
--purple: rgb(174, 129, 255);
--grey1: rgb(40, 40, 40);
--grey2: rgb(60, 60, 60);
--grey3: rgb(80, 80, 80);
--grey4: rgb(120, 120, 120);
--border-color: white;
--radius: 15px;
--standardMargin: 15px;
background-color: var(--grey1);
color: white; color: white;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
margin-right: 2%; margin-right: 2%;
margin-left: 8%; margin-left: 8%;
margin-top: 5%; margin-top: 5%;
font-family: museo-sans-rounded, sans-serif; font-family: museo-sans-rounded, sans-serif;
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
} }
button { button {
background-color: var(--grey4); background-color: #787878;
padding: 15px; padding: 15px;
display: inline-block; display: inline-block;
border: 2px solid var(--border-color); border: 2px solid white;
border-radius: var(--radius); border-radius: 15px;
color: white; color: white;
font-size: 16pt; font-size: 16pt;
} }
button:hover {background-color: var(--grey3);} button:hover {
button:focus {outline:0;} background-color: #505050;
}
button:focus {
outline: 0;
}
h1 { h1 {
color: var(--blue); color: #2883d0;
text-align: center; text-align: center;
background-color: var(--grey2); background-color: #3c3c3c;
padding: 15px; padding: 15px;
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
border-radius: var(--radius); border-radius: 15px;
} }
h2 { h2 {
color: var(--green); color: #91e22c;
} }
a { color: #66D9EF; } a {
a:hover { color: #A6E22E; } color: #66D9EF;
form {
} }
a:hover {
input[type=text] { color: #A6E22E;
} }
input[type=color] { input[type=color] {
width: 4em; width: 4em;
height: 2em; height: 2em;
background-color: var(--grey4); background-color: #787878;
} }
.center { .center {
background-color: var(--grey3); background-color: #505050;
margin: auto; margin: auto;
margin-bottom: 10%; margin-bottom: 10%;
width: 70%; width: 70%;
padding: 5%; padding: 5%;
height: max-content; height: max-content;
border-radius: var(--radius); border-radius: 15px;
} }
.center * { .center * {
margin: auto; margin: auto;
display: block; display: block;
} }
.inline { .inline {
margin: var(--standardMargin); margin: 15px;
} }
.inline * { .inline * {
display: inline-block; display: inline-block;
} }
.leftalign * { .leftalign * {
margin: var(--standardMargin); margin: 15px;
text-align: left; text-align: left;
} }
table { table {
width: 100%; width: 100%;
} }
td, th { td, th {
border: 1px solid var(--border-color); border: 1px solid white;
padding: 8px; padding: 8px;
} }
tr:nth-child(even) { background-color: #00000033}
tr:hover { background-color: rgba(255, 255, 255, 0.281);}
th { th {
text-align: left; text-align: left;
background-color: #4CAF50; background-color: #4CAF50;
} }
tr:nth-child(even) {
background-color: #00000033;
}
tr:hover {
background-color: rgba(255, 255, 255, 0.281);
}

15
resources/css/scss/_colors.scss Normal file
View File

@@ -0,0 +1,15 @@
$blue: rgb(40, 131, 208);
$green: rgb(145, 226, 44);
$red: rgb(249, 38, 119);
$yellow: rgb(253, 151, 31);
$purple: rgb(174, 129, 255);
$grey1: rgb(40, 40, 40);
$grey2: rgb(60, 60, 60);
$grey3: rgb(80, 80, 80);
$grey4: rgb(120, 120, 120);
$border-color: white;
$radius: 15px;
$standardMargin: 15px;

103
resources/css/scss/main.scss Normal file
View File

@@ -0,0 +1,103 @@
@import "colors";
body {
background-color: $grey1;
color: white;
margin: 0px;
padding: 0px;
margin: {
right: 2%;
left: 8%;
top: 5%;
}
font: {
family: museo-sans-rounded, sans-serif;
weight: 300;
style: normal;
}
}
button {
background-color: $grey4;
padding: 15px;
display: inline-block;
border: 2px solid $border-color;
border-radius: $radius;
color: white;
font-size: 16pt;
&:hover {background-color: $grey3;}
&:focus {outline:0;}
}
h1 {
color: $blue;
text-align: center;
background-color: $grey2;
padding: 15px;
margin-left: 10%;
margin-right: 10%;
border-radius: $radius;
}
h2 {
color: $green;
}
a {
color: #66D9EF;
&:hover { color: #A6E22E; }
}
input[type=color] {
width: 4em;
height: 2em;
background-color: $grey4;
}
.center {
background-color: $grey3;
margin: auto;
margin-bottom: 10%;
width: 70%;
padding: 5%;
height: max-content;
border-radius: $radius;
* {
margin: auto;
display: block;
}
}
.inline {
margin: $standardMargin;
* {display: inline-block;}
}
.leftalign * {
margin: $standardMargin;
text-align: left;
}
table {
width: 100%;
}
td, th {
border: 1px solid $border-color;
padding: 8px;
}
th {
text-align: left;
background-color: #4CAF50;
}
tr {
&:nth-child(even) { background-color: #00000033;}
&:hover { background-color: rgba(255, 255, 255, 0.281);}
}