From 22184821f40358dcf559be3c7a52827c44e1fbb6 Mon Sep 17 00:00:00 2001
From: Alice <alice.poggioli@hotmail.fr>
Date: Thu, 23 Jul 2020 14:56:44 +0200
Subject: [PATCH] First color proposal
---
src/styles/index.scss | 57 +++++++++++++++++++++++++------------------
1 file changed, 33 insertions(+), 24 deletions(-)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b2a7f999..b2fd565e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -75,8 +75,13 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
--marge-base: 4.5rem;
--marge-petit: 3rem;
--marge-base-750: 1rem;
- --bg-btn-base: #01AFCC;
+ --bg-btn-base: #E55D0A;
--clr-roll-black:#444C4D;
+ --orange: #E55D0A;
+ --blue: #0E79B2;
+ --black: #191923;
+ --white: #FBFEF9;
+ --green: #58AB05;
}
/* XXXXXXXXXXXXXXXXXXXXXXXX technique XXXXXXXXXXXXXXXXXXXXXX */
@@ -307,7 +312,7 @@ input[type="submit"].disabled {
.button_dark, #confirm_suppress button{
transition: all .3s ease-in-out;
- background-color: #444C4D;
+ background-color: var(--green);
color: var(--bg-block);
text-transform: uppercase;
font-size: 1.4rem;
@@ -563,7 +568,7 @@ header .ico_search:before{
left: 0.4rem;
top: 0.2rem;
font-size: 1.1rem;
- color: #5DC6F2;
+ color: var(--orange);
}
#confirm_suppress button:before{
content:"\f061";
@@ -577,7 +582,7 @@ header .ico_search:before{
font-size: 1.5rem;
}
.fas.fa-heart-broken{
- color:#5DC6F2;
+ color:var(--green);
}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx FIN ICONE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
@@ -743,6 +748,10 @@ form .ss-main .ss-multi-selected .ss-values .ss-value{
margin: 0.5rem 0.5rem 0 0;
}
+.ss-main .ss-multi-selected .ss-values .ss-value {
+ background-color:var(--green) !important;
+ }
+
/* ----------------- CHECKBOX ---------------------------*/
.ss-list.checkbox{
@@ -815,7 +824,7 @@ header#header{
position: relative;
}
header#header img[alt="Coopstarter"] {
- width: auto;
+ width: 200px;
height: auto;
border-radius: 0;
}
@@ -1111,14 +1120,14 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
}
cs-display-resource-property[name="format.name"] p{
border-radius: 5px;
- background-color: #5DC6F2;
+ background-color: var(--orange);
padding: .5rem;
font-family: 'var(--typo-btn)';
color: var(--bg-block);
text-decoration: none;
text-align: center;
font-size: 1.4rem;
- border:2px solid #5DC6F2;
+ border:2px solid var(--orange);
cursor: pointer;
display: inline-block;
margin: .5rem;
@@ -1126,7 +1135,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
}
cs-display-resource-property[name="format.name"] p:hover{
background-color: var(--bg-block);
- color: #5DC6F2;
+ color: var(--orange);
}
div solid-display div{
padding: 1.5rem;
@@ -1164,7 +1173,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
transition: .3s all ease-in;
}
p:hover{
- color: #5DC6F2;
+ color: var(--orange);
}
}
fake-dislike{
@@ -1191,7 +1200,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
}
.fd_bleu{
width: 100%;
- background: var(--bg-btn-base);
+ background: var(--black);
color: white;
font-size: 2rem;
padding: 2rem 2rem;
@@ -1224,7 +1233,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
}
.tablink.active{
- border-bottom: solid 7px var(--bg-btn-base);
+ border-bottom: solid 7px var(--orange);
color: black;
}
@@ -1235,7 +1244,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
height: 7px;
position: absolute;
bottom: -7px;
- background: var(--bg-btn-base);
+ background: var(--orange);
transition: all .3s ease;
}
.tablink:hover:before{
@@ -1378,7 +1387,7 @@ solid-multiple label{
cs-display-resource-comment p.improvement_comment {
font-size: 1.4rem;
color: #3D424A;
- border: 2px solid #5DC6F2;
+ border: 2px solid var(--orange);
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
@@ -1389,26 +1398,26 @@ solid-multiple label, cs-resource-status[name="review.status"]+*{
width: auto;
}
.button_pending{
- background: #5DC6F2;
+ background: var(--orange);
border-radius: 4px;
border: none;
cursor: initial;
&:hover{
- background: #5DC6F2;
+ background: var(--orange);
color: #FFFFFF;
border: none;
}
}
.button_validated{
- color: #5DC6F2;
+ color: var(--green);
background: transparent;
border-radius: 4px;
- border: 1px solid #5DC6F2;
+ border: 1px solid var(--green);
cursor: initial;
&:hover{
background: transparent;
- color: #5DC6F2;
- border: 1px solid #5DC6F2;
+ color: var(--green);
+ border: 1px solid var(--green);
}
}
.button_disputed{
@@ -1418,7 +1427,7 @@ solid-multiple label, cs-resource-status[name="review.status"]+*{
border: none;
cursor: initial;
&:hover{
- background: rgb(16, 17, 17);
+ background: var(--orange);
color: #FFFFFF;
border: none;
}
@@ -1577,14 +1586,14 @@ solid-set-default[name="more_criterias_hidden"]{
/*XXXXXXXXXXXXXXXXXXXXX DETAIL RESSOURCES XXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.format_type p{
border-radius: 5px;
- background-color: #5DC6F2;
+ background-color: var(--orange);
padding: .5rem;
font-family: 'var(--typo-btn)';
color: var(--bg-block);
text-decoration: none;
text-align: center;
font-size: 1.4rem;
- border:2px solid #5DC6F2;
+ border:2px solid var(--orange);
cursor: pointer;
display: inline-block;
margin: .5rem;
@@ -1592,7 +1601,7 @@ solid-set-default[name="more_criterias_hidden"]{
float: right;
&:hover{
background-color: var(--bg-block);
- color: #5DC6F2;
+ color: (--orange);
}
}
solid-multiple.steps label {
@@ -1605,7 +1614,7 @@ solid-multiple.steps label {
cs-display-step-property[label] p{
font-weight: bold;
- border-bottom: #5DC6F2 solid 2px;
+ border-bottom: var(--orange) solid 2px;
width: auto;
float: left;
padding-bottom: .5rem;
--
GitLab