entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 3 Releases Activity

css: create colors chart file (#71879)
gitea/gadjo/pipeline/head This commit looks good Details

This commit is contained in:
Frédéric Péters 2022-11-03 13:18:06 +01:00 committed by Thomas Jund
parent df45a9aca9
commit a2b2605df0
2 changed files with 68 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
gadjo/static/css/_colors.scss Normal file
View File

@ -0,0 +1,44 @@
// colors chart
$blue: #386ede;
$blue-dusty: #215D9C;
$blue-dark: #003388;
$cyan: #00d6eb;
$orange: hsl(30, 100%, 46%);
$red: hsl(355, 80%, 45%);
$brown: hsl(10, 70%, 30%);
$yellow-dark: hsl(60, 98%, 30%);
$green: hsl(120, 57%, 35%);
$green-dark: hsl(150, 57%, 25%);
$pink: hsl(320, 70%, 60%);
html {
--blue: #{$blue};
--blue-dusty: #{$blue-dusty};
--cyan: #{$cyan};
--orange: #{$orange};
--red: #{$red};
--brown: #{$brown};
--yellow-dark: #{$yellow-dark};
--green: #{$green};
--green-dark: #{$green-dark};
--pink: #{$pink};
}
// colors attribution
$font-color: #3c3c33;
$primary-color: $blue;
$secondary-color: $cyan;
$link-color: $primary-color;
html {
--primary-color: #{$primary-color};
--secondary-color: #{$secondary-color};
--font-color: #{$font-color};
--font-color-light: #666;
--link-color: #{$primary-color};
--link-hover-color: #{$blue-dark};
--link-disabled-color: #aaa;
--background: #ecf0f3;
}

57
gadjo/static/css/gadjo.scss
View File

@ -2,8 +2,8 @@
@import 'opensans';
@import 'utils';
@import 'colors';
$font-color: #3c3c33;
$mobile-limit: 760px;
$font-family: "Open Sans", sans-serif;
$sidepage-background: white;
@ -15,16 +15,7 @@ $sidepage-border-width: 4px;
$cell-border-radius: 3px;
// blue
$primary-color: #386ede; $secondary-color: #00d6eb;
// red/orange
//$primary-color: #ff375e; $secondary-color: #ff5a47;
// purple
//$primary-color: #6f2b92; $secondary-color: #e72588;
$link-color: $primary-color;
/* generalities */
@ -41,9 +32,9 @@ html, body {
@media print {
font-size: 14px;
}
color: $font-color;
background: #ecf0f3;
background: linear-gradient(#ecf0f3, white);
color: var(--font-color);
background: var(--background);
background: linear-gradient(var(--background), white);
}
html {
@ -56,13 +47,13 @@ body {
}
a {
color: $link-color;
color: var(--link-color);
text-decoration: none;
border-width: 0;
border-bottom: 1px dotted $link-color;
border-bottom: 1px dotted var(--link-color);
transition: color 200ms ease-out;
&:hover {
color: #003388;
color: var(--link-hover-color);
border-style: solid;
}
img {
@ -131,7 +122,7 @@ ul.user-info {
top: 0px;
right: 0px;
z-index: 100;
background: $secondary-color;
background: var(--secondary-color);
li {
display: inline-block;
vertical-align: middle;
@ -150,7 +141,7 @@ ul.user-info {
padding-left: 3em;
}
.ui-avatar {
color: $primary-color;
color: var(--primary-color);
vertical-align: middle;
font-size: $header-height * 0.35;
background: white;
@ -209,7 +200,7 @@ ul.user-info {
/* header */
div#header {
background: $primary-color;
background: var(--primary-color);
padding-left: 0px;
position: relative;
height: $header-height;
@ -476,7 +467,7 @@ div#main-content {
width: auto;
max-width: 100%;
}
color: #666;
color: var(--font-color-light);
position: relative;
#sidebar-toggle {
left: -10px;
@ -604,13 +595,13 @@ ul.apps li a {
border: 1px solid #ccc;
text-decoration: none;
transition: all .2s ease-in-out;
color: $primary-color;
color: var(--primary-color);
border-radius: 15px;
}
ul.apps li a:hover {
border: 1px solid #333;
color: $primary-color;
color: var(--primary-color);
border-radius: 25px;
}
@ -728,7 +719,7 @@ p.paginator span {
}
p.paginator span.this-page {
background: $primary-color;
background: var(--primary-color);
border-color: #5B616B;
color: white;
}
@ -810,7 +801,7 @@ ul.objects-list li span.tag {
box-sizing: border-box;
border-radius: 1ex;
padding: 0 1ex;
background: $primary-color;
background: var(--primary-color);
color: white;
}
@ -831,13 +822,13 @@ span.meta {
position: relative;
padding: 0 0.5ex;
&.meta-success {
color: #268c26;
color: var(--green);
}
&.meta-warning {
color: #eb7500;
color: var(--orange);
}
&.meta-error {
color: #cf1726;
color: var(--red);
}
&.meta-disabled {
color: #555;
@ -934,7 +925,7 @@ body {
position: absolute;
top: 50px;
right: $sidepage-width - $sidepage-left-space - 10px + $sidepage-border-width / 2;
background: $primary-color;
background: var(--primary-color);
color: white;
height: 20px;
width: 20px;
@ -975,14 +966,14 @@ body.sidepage-expanded #sidepage span#applabel::before {
min-height: 100%;
min-height: calc(100% - #{$header-height} - 1px); /* #top 40px + border 1px */
box-sizing: border-box;
border-right: $sidepage-border-width solid $primary-color;
border-right: $sidepage-border-width solid var(--primary-color);
transition: all 0ms ease;
&::before {
content: "";
position: absolute;
left: -$sidepage-left-space;
width: $sidepage-left-space;
background: linear-gradient(to bottom, $primary-color 0%, $secondary-color 130vh);
background: linear-gradient(to bottom, var(--primary-color) 0%, var(--secondary-color) 130vh);
height: 100%;
top: 0px;
}
@ -1003,7 +994,7 @@ body.sidepage-expanded #sidepage span#applabel::before {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: $primary-color;
color: var(--link-color);
}
}
@ -1205,7 +1196,7 @@ $appicons: add, agendas, announces, bankcard, book, calendar, cards, categories,
}
}
&.highlight {
background: linear-gradient(to right, $primary-color 30%, $secondary-color 100%);
background: linear-gradient(to right, var(--primary-color) 30%, var(--secondary-color) 100%);
border-radius: $cell-border-radius;
padding: 1rem;
margin-bottom: 1rem;
@ -1246,7 +1237,7 @@ div.section {
margin-top: 0;
margin-bottom: 0;
background: $primary-color;
background: linear-gradient(to right, $primary-color 30%, $secondary-color 100%);
background: linear-gradient(to right, var(--primary-color) 30%, var(--secondary-color) 100%);
color: white;
a:not(.button) {
color: white;