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

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

@@ -1,123 +1,102 @@
body {
--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;
margin: 0px;
padding: 0px;
margin-right: 2%;
margin-left: 8%;
margin-top: 5%;
font-family: museo-sans-rounded, sans-serif;
font-weight: 300;
font-style: normal;
background-color: #282828;
color: white;
margin: 0px;
padding: 0px;
margin-right: 2%;
margin-left: 8%;
margin-top: 5%;
font-family: museo-sans-rounded, sans-serif;
font-weight: 300;
font-style: normal;
}
button {
background-color: var(--grey4);
padding: 15px;
display: inline-block;
border: 2px solid var(--border-color);
border-radius: var(--radius);
color: white;
font-size: 16pt;
background-color: #787878;
padding: 15px;
display: inline-block;
border: 2px solid white;
border-radius: 15px;
color: white;
font-size: 16pt;
}
button:hover {background-color: var(--grey3);}
button:focus {outline:0;}
button:hover {
background-color: #505050;
}
button:focus {
outline: 0;
}
h1 {
color: var(--blue);
text-align: center;
background-color: var(--grey2);
padding: 15px;
margin-left: 10%;
margin-right: 10%;
border-radius: var(--radius);
color: #2883d0;
text-align: center;
background-color: #3c3c3c;
padding: 15px;
margin-left: 10%;
margin-right: 10%;
border-radius: 15px;
}
h2 {
color: var(--green);
color: #91e22c;
}
a { color: #66D9EF; }
a:hover { color: #A6E22E; }
form {
a {
color: #66D9EF;
}
input[type=text] {
a:hover {
color: #A6E22E;
}
input[type=color] {
width: 4em;
height: 2em;
background-color: var(--grey4);
width: 4em;
height: 2em;
background-color: #787878;
}
.center {
background-color: var(--grey3);
margin: auto;
margin-bottom: 10%;
width: 70%;
padding: 5%;
height: max-content;
border-radius: var(--radius);
background-color: #505050;
margin: auto;
margin-bottom: 10%;
width: 70%;
padding: 5%;
height: max-content;
border-radius: 15px;
}
.center * {
margin: auto;
display: block;
margin: auto;
display: block;
}
.inline {
margin: var(--standardMargin);
margin: 15px;
}
.inline * {
display: inline-block;
display: inline-block;
}
.leftalign * {
margin: var(--standardMargin);
text-align: left;
margin: 15px;
text-align: left;
}
table {
width: 100%;
width: 100%;
}
td, th {
border: 1px solid var(--border-color);
padding: 8px;
border: 1px solid white;
padding: 8px;
}
tr:nth-child(even) { background-color: #00000033}
tr:hover { background-color: rgba(255, 255, 255, 0.281);}
th {
text-align: left;
background-color: #4CAF50;
}
text-align: left;
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);}
}