Change hex to hsl

This commit is contained in:
Soldat 2018-10-07 21:33:49 +02:00
parent a78f1101c3
commit cce33d13b3

View File

@ -1,34 +1,34 @@
$first-color: hsl(220, 100%, 50%); $first-color: hsl(220, 100%, 50%);
$second-color: #ffdd59; $second-color: hsl(48, 100%, 67%);
$primary-color: hsl(219.9, 53.7%, 50%); $primary-color: hsl(219.9, 53.7%, 50%);
$secondary-color: #2980b9; $secondary-color: hsl(204, 64%, 44%);
$primary-color-text: hsl(0, 0%, 100%); $primary-color-text: hsl(0, 0%, 100%);
$secondary-color-text: hsla(0, 0%, 0%, 0.87); $secondary-color-text: hsla(0, 0%, 0%, 0.87);
$primary-light-color: hsl(219.8, 46.4%, 64.9%); $primary-light-color: hsl(219.8, 46.4%, 64.9%);
$primary-dark-color: #2d98da; $primary-dark-color: hsl(203, 70%, 52%);
$secondary-light-color: hsl(40, 68%, 65%); $secondary-light-color: hsl(40, 68%, 65%);
$secondary-dark-color: hsl(40, 68%, 35%); $secondary-dark-color: hsl(40, 68%, 35%);
$primary-neutral-color: hsl(219.6, 20.8%, 50%); $primary-neutral-color: hsl(219.6, 20.8%, 50%);
$primary-neutral-light-color: #efefef; $primary-neutral-light-color: hsl(0, 0%, 94%);
$primary-neutral-dark-color: #34495e; $primary-neutral-dark-color: hsl(210, 29%, 29%);
$secondary-neutral-color: #2980b9; $secondary-neutral-color: hsl(204, 64%, 44%);
$secondary-neutral-light-color: #e7e7e7; $secondary-neutral-light-color: hsl(0, 0%, 91%);
$secondary-neutral-dark-color: hsl(40, 57.6%, 17%); $secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
$white-color: hsl(219.6, 20.8%, 98%); $white-color: hsl(219.6, 20.8%, 98%);
$black-color: hsl(40.0, 0%, 17%); $black-color: hsl(40.0, 0%, 17%);
$faceblue: #3B5998; $faceblue: hsl(221, 44%, 41%);
$twitblue: #55acee; $twitblue: hsl(206, 82%, 63%);
$shadow-color: rgb(223, 223, 223); $shadow-color: rgb(223, 223, 223);
$background-bouton-color: #e6e6e6; $background-bouton-color: hsl(0, 0%, 90%);
/*--------------------------------GENERAL------------------------------*/ /*--------------------------------GENERAL------------------------------*/
@ -50,7 +50,7 @@ input[type=button], input[type=submit], input[type=reset],input[type=file] {
box-shadow: $shadow-color 0px 0px 1px; box-shadow: $shadow-color 0px 0px 1px;
&:hover { &:hover {
background: #d3d3d3; background: hsl(0, 0%, 83%);
} }
} }
button{ button{
@ -63,7 +63,7 @@ button{
box-shadow: $shadow-color 0px 0px 1px; box-shadow: $shadow-color 0px 0px 1px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #d3d3d3; background: hsl(0, 0%, 83%);
} }
} }
input,textarea[type=text],[type=number]{ input,textarea[type=text],[type=number]{
@ -256,7 +256,7 @@ header {
li { li {
padding: 0.2em; padding: 0.2em;
&:hover { &:hover {
background: #bcc; background: hsl(180, 14%, 77%);
} }
} }
li:last-child { li:last-child {
@ -308,7 +308,7 @@ header {
font-family: FontAwesome; font-family: FontAwesome;
font-size: 4em; font-size: 4em;
content: "\f05a"; content: "\f05a";
color: #1e90ff; color: hsl(210, 100%, 56%);
} }
} }
#alert_box { #alert_box {
@ -729,14 +729,14 @@ header {
padding-right: 20px; padding-right: 20px;
margin-left: 5px; margin-left: 5px;
border-radius: 20px; border-radius: 20px;
background-color: #ffaa00; background-color: hsl(40, 100%, 50%);
color: black; color: black;
&:hover{ &:hover{
color: black; color: black;
background-color: #c99836; background-color: hsl(40, 58%, 50%);
} }
&.delete{ &.delete{
background-color: #cb0000; background-color: hsl(0, 100%, 40%);
} }
} }
} }
@ -821,11 +821,11 @@ header {
.edit, .moderate, .slideshow{ .edit, .moderate, .slideshow{
padding: 5px; padding: 5px;
border-radius: 20px; border-radius: 20px;
background-color: #ffaa00; background-color: hsl(40, 100%, 50%);
color: black; color: black;
&:hover{ &:hover{
color: black; color: black;
background-color: #c99836; background-color: hsl(40, 58%, 50%);
} }
&:nth-child(2n){ &:nth-child(2n){
margin-top: 5px; margin-top: 5px;
@ -835,8 +835,8 @@ header {
.tooltip{ .tooltip{
visibility: hidden; visibility: hidden;
width: 120px; width: 120px;
background-color: #f9fafb; background-color: hsl(210, 20%, 98%);
color: #000; color: hsl(0, 0%, 0%);
text-align: center; text-align: center;
padding: 5px 0; padding: 5px 0;
border-radius: 6px; border-radius: 6px;
@ -1235,8 +1235,8 @@ u, .underline {
#pict { #pict {
display: inline-block; display: inline-block;
width: 80%; width: 80%;
background: #333; background: hsl(0, 0%, 20%);
border: solid #333 2px; border: solid hsl(0, 0%, 20%) 2px;
} }
/*--------------------------------MATMAT-------------------------------*/ /*--------------------------------MATMAT-------------------------------*/
.matmat_results { .matmat_results {
@ -1290,7 +1290,7 @@ textarea {
#forum { #forum {
.button { .button {
background-color: rgb(230, 230, 230); background-color: rgb(230, 230, 230);
padding: 7px; padding: 10px;
font-weight: bold; font-weight: bold;
border-radius: 5px; border-radius: 5px;
&:hover { &:hover {
@ -1359,7 +1359,7 @@ textarea {
.category { .category {
margin-top: 5px; margin-top: 5px;
background: $secondary-color; background: $secondary-color;
color: #ffffff; color: white;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
.title { .title {
text-transform: uppercase; text-transform: uppercase;
@ -1369,7 +1369,7 @@ textarea {
.message { .message {
padding: 1px; padding: 1px;
margin: 1px; margin: 1px;
background: #f3f3f3; background: $secondary-neutral-light-color;
&:nth-child(odd) { &:nth-child(odd) {
background: $primary-neutral-light-color; background: $primary-neutral-light-color;
} }
@ -1420,10 +1420,10 @@ textarea {
} }
.forum_signature { .forum_signature {
color: #C0C0C0; color: hsl(0, 0%, 75%);
border-top: 1px solid #C0C0C0; border-top: 1px solid hsl(0, 0%, 75%);
a { a {
color: #C0C0C0; color: hsl(0, 0%, 75%);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -1440,7 +1440,7 @@ textarea {
padding: 5px; padding: 5px;
width: 200px; width: 200px;
height: 140px; height: 140px;
background: #eee; background: hsl(0, 0%, 93%);
box-shadow: black 2px 2px 10px; box-shadow: black 2px 2px 10px;
margin: 10px; margin: 10px;
vertical-align: top; vertical-align: top;
@ -1455,7 +1455,7 @@ textarea {
width: 150px; width: 150px;
height: 100px; height: 100px;
margin: 5px; margin: 5px;
background: #eee; background: #eeeeee;
box-shadow: grey 2px 2px 5px; box-shadow: grey 2px 2px 5px;
padding: 2px; padding: 2px;
vertical-align: middle; vertical-align: middle;