jdr-et-univers
/
roleplay.css
Archived
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

improvement: base card coloring

This commit is contained in:
Kazhnuz 2019-11-13 12:52:36 +01:00
parent 4866816d56
commit 0a64b2456c
5 changed files with 251 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scss/_palette.scss
View File

@ -18,6 +18,14 @@ $whiteness_value: 0.8;
}
}
@function darkenColor($color) {
@return darken($color, 10%);
}
@function lightenColor($color) {
@return lighten($color, 10%);
}
@function list-colors() {
$newmap: map.merge($palette, $semantics);
@return $newmap;

2
scss/components/_buttons.scss
View File

@ -26,7 +26,7 @@
}
@mixin button-hover($background-color, $light-color, $dark-color) {
@include background-color(lighten($background-color, 10%), $light-color, $dark-color);
@include background-color(lightenColor($background-color), $light-color, $dark-color);
}
// 11.1 - Buttons

56
scss/components/_cards.scss
View File

@ -1,10 +1,14 @@
// Mixin and colors
$card-color-default: white;
$card-color-default: get_color("light");
@mixin card-self-contained() {
@include borders();
@include card-container();
background-color:$card-color-default;
border-color: darkenColor($card-color-default);
box-shadow: inset 0px 0px 0px 2px lightenColor($card-color-default);
border-style:solid;
}
@mixin card-container() {
@ -16,19 +20,26 @@ $card-color-default: white;
}
@mixin card-element() {
border:0;
border-radius:0;
@include borders();
border-top-width:0;
border-bottom-width:0;
background-color:$card-color-default;
border-color: darkenColor($card-color-default);
box-shadow: inset 0px 0px 0px 2px lightenColor($card-color-default);
&:first-child {
border-top-width:2px;
@include border-radius-top($border-radius);
}
&:last-child {
border-bottom-width:2px;
@include border-radius-bottom($border-radius);
}
&:only-child {
border-top-width:2px;
border-bottom-width:2px;
@include border-radius();
}
}
@ -45,13 +56,23 @@ $card-color-default: white;
@mixin colorize-card() {
@each $name, $color in list-colors() {
&-#{$name} { @include card-color(get-color($name), #FFF, #000); }
&-#{$name} {
@include card-color(get-color($name), #FFF, #000);
}
}
}
@mixin card-color($background-color, $light-color, $dark-color) {
& > .card-header, & > .card-footer { @include background-color($background-color, $light-color, $dark-color); }
&.card-colored > .card-body { @include background-color($background-color, $light-color, $dark-color); }
& > .card-header, & > .card-footer {
@include background-color($background-color, $light-color, $dark-color);
border-color: darkenColor($background-color);
box-shadow: inset 0px 0px 0px 2px lightenColor($background-color);
}
&.card-colored > .card-body {
@include background-color($background-color, $light-color, $dark-color);
border-color: darkenColor($background-color);
box-shadow: inset 0px 0px 0px 2px lightenColor($background-color);
}
}
// ALERT COLORIZATION
@ -63,20 +84,9 @@ $card-color-default: white;
}
@mixin alert-color($background-color) {
background-color: lighten($background-color, 35%);
@if (luminance($background-color) > 128 * 0.8) {
color: darken($background-color, 70%);
a, .alert-link {
color:darken($background-color, 70%);
font-weight:bold;
}
} @else {
color: lighten($background-color, 80%);
a, .alert-link {
color:lighten($background-color, 85%);
font-weight:bold;
}
}
@include background-color($background-color, #FFF, get_color("dark"));
border-color: darkenColor($background-color);
box-shadow: inset 0px 0px 0px 2px lightenColor($background-color);
}
@ -103,7 +113,6 @@ $card-color-default: white;
@include card-element();
@include borders();
font-size:1.1em;
box-shadow: $inset-relief;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-weight:600;
border-radius: 0;
@ -171,9 +180,9 @@ a.list-group-item:hover {
/* 10.2 - Breadcrumb */
.breadcrumb {
@include card-relief();
@include li-no-margin();
background-color:#eeeeec;
@include card-self-contained();
border-style:solid;
}
/* 10.3 - Alerts */
@ -183,4 +192,5 @@ a.list-group-item:hover {
color:rgba(0, 0, 0, 0.7);
@include colorize-alert();
border-style:solid;
}

340
style.css
View File

@ -614,202 +614,291 @@ ul.social li a:hover {
.card-blue > .card-header, .card-blue > .card-footer {
background-color: #4e63c9 !important;
color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
}
.card-blue.card-colored > .card-body {
background-color: #4e63c9 !important;
color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
}
.card-violet > .card-header, .card-violet > .card-footer {
background-color: #ce4dcd !important;
color: #FFF;
border-color: #b632b5;
box-shadow: inset 0px 0px 0px 2px #d975d8;
}
.card-violet.card-colored > .card-body {
background-color: #ce4dcd !important;
color: #FFF;
border-color: #b632b5;
box-shadow: inset 0px 0px 0px 2px #d975d8;
}
.card-purple > .card-header, .card-purple > .card-footer {
background-color: #7951c0 !important;
color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
}
.card-purple.card-colored > .card-body {
background-color: #7951c0 !important;
color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
}
.card-red > .card-header, .card-red > .card-footer {
background-color: #e33d22 !important;
color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
}
.card-red.card-colored > .card-body {
background-color: #e33d22 !important;
color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
}
.card-orange > .card-header, .card-orange > .card-footer {
background-color: #eb790a !important;
color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
}
.card-orange.card-colored > .card-body {
background-color: #eb790a !important;
color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
}
.card-green > .card-header, .card-green > .card-footer {
background-color: #75b82d !important;
color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
}
.card-green.card-colored > .card-body {
background-color: #75b82d !important;
color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
}
.card-skyblue > .card-header, .card-skyblue > .card-footer {
background-color: #42a0f3 !important;
color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
}
.card-skyblue.card-colored > .card-body {
background-color: #42a0f3 !important;
color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
}
.card-dark > .card-header, .card-dark > .card-footer {
background-color: #2D2D2D !important;
color: #FFF;
border-color: #141414;
box-shadow: inset 0px 0px 0px 2px #474747;
}
.card-dark.card-colored > .card-body {
background-color: #2D2D2D !important;
color: #FFF;
border-color: #141414;
box-shadow: inset 0px 0px 0px 2px #474747;
}
.card-light > .card-header, .card-light > .card-footer {
background-color: #eeeeec !important;
color: #000;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
}
.card-light.card-colored > .card-body {
background-color: #eeeeec !important;
color: #000;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
}
.card-turquoise > .card-header, .card-turquoise > .card-footer {
background-color: #46bd9e !important;
color: #FFF;
border-color: #379980;
box-shadow: inset 0px 0px 0px 2px #6ccab2;
}
.card-turquoise.card-colored > .card-body {
background-color: #46bd9e !important;
color: #FFF;
border-color: #379980;
box-shadow: inset 0px 0px 0px 2px #6ccab2;
}
.card-yellow > .card-header, .card-yellow > .card-footer {
background-color: #f6d32d !important;
color: #FFF;
border-color: #e6c00a;
box-shadow: inset 0px 0px 0px 2px #f8dd5e;
}
.card-yellow.card-colored > .card-body {
background-color: #f6d32d !important;
color: #FFF;
border-color: #e6c00a;
box-shadow: inset 0px 0px 0px 2px #f8dd5e;
}
.card-brown > .card-header, .card-brown > .card-footer {
background-color: #986a44 !important;
color: #FFF;
border-color: #755134;
box-shadow: inset 0px 0px 0px 2px #b5835a;
}
.card-brown.card-colored > .card-body {
background-color: #986a44 !important;
color: #FFF;
border-color: #755134;
box-shadow: inset 0px 0px 0px 2px #b5835a;
}
.card-grey > .card-header, .card-grey > .card-footer {
background-color: #77767b !important;
color: #FFF;
border-color: #5e5d61;
box-shadow: inset 0px 0px 0px 2px #919094;
}
.card-grey.card-colored > .card-body {
background-color: #77767b !important;
color: #FFF;
border-color: #5e5d61;
box-shadow: inset 0px 0px 0px 2px #919094;
}
.card-primary > .card-header, .card-primary > .card-footer {
background-color: #7951c0 !important;
color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
}
.card-primary.card-colored > .card-body {
background-color: #7951c0 !important;
color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
}
.card-secondary > .card-header, .card-secondary > .card-footer {
background-color: #4e63c9 !important;
color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
}
.card-secondary.card-colored > .card-body {
background-color: #4e63c9 !important;
color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
}
.card-warning > .card-header, .card-warning > .card-footer {
background-color: #eb790a !important;
color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
}
.card-warning.card-colored > .card-body {
background-color: #eb790a !important;
color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
}
.card-danger > .card-header, .card-danger > .card-footer {
background-color: #e33d22 !important;
color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
}
.card-danger.card-colored > .card-body {
background-color: #e33d22 !important;
color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
}
.card-info > .card-header, .card-info > .card-footer {
background-color: #42a0f3 !important;
color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
}
.card-info.card-colored > .card-body {
background-color: #42a0f3 !important;
color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
}
.card-success > .card-header, .card-success > .card-footer {
background-color: #75b82d !important;
color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
}
.card-success.card-colored > .card-body {
background-color: #75b82d !important;
color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
}
.card-body {
border: 0;
border-radius: 0;
background-color: white;
border: 2px solid rgba(0, 0, 0, 0.3);
border-top-width: 0;
border-bottom-width: 0;
background-color: #eeeeec;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
}
.card-body:first-child {
border-top-width: 2px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-body:last-child {
border-bottom-width: 2px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-body:only-child {
border-top-width: 2px;
border-bottom-width: 2px;
border-radius: 5px 5px 5px 5px;
}
/* 10.1.1 - Headers */
.card-header, .card-footer {
border: 0;
border-radius: 0;
background-color: white;
border: 2px solid rgba(0, 0, 0, 0.3);
border-top-width: 0;
border-bottom-width: 0;
background-color: #eeeeec;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
border: 2px solid rgba(0, 0, 0, 0.3);
font-size: 1.1em;
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 600;
border-radius: 0;
}
.card-header:first-child, .card-footer:first-child {
border-top-width: 2px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-header:last-child, .card-footer:last-child {
border-bottom-width: 2px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-header:only-child, .card-footer:only-child {
border-top-width: 2px;
border-bottom-width: 2px;
border-radius: 5px 5px 5px 5px;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10, .card-footer h1, .card-footer h2, .card-footer h3, .card-footer h4, .card-footer h5, .card-footer h6, .card-footer h7, .card-footer h8, .card-footer h9, .card-footer h10 {
@ -825,24 +914,31 @@ ul.social li a:hover {
/* 10.1.2 - Meta */
.card-meta {
padding: 1em;
border: 0;
border-radius: 0;
background-color: white;
border: 2px solid rgba(0, 0, 0, 0.3);
border-top-width: 0;
border-bottom-width: 0;
background-color: #eeeeec;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.card-meta:first-child {
border-top-width: 2px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-meta:last-child {
border-bottom-width: 2px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-meta:only-child {
border-top-width: 2px;
border-bottom-width: 2px;
border-radius: 5px 5px 5px 5px;
}
.card-meta.media {
@ -866,23 +962,30 @@ ul.social li a:hover {
/* 10.1.3 - Lists */
.list-group {
border: 0;
border-radius: 0;
background-color: white;
border: 2px solid rgba(0, 0, 0, 0.3);
border-top-width: 0;
border-bottom-width: 0;
background-color: #eeeeec;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
}
.list-group:first-child {
border-top-width: 2px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.list-group:last-child {
border-bottom-width: 2px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.list-group:only-child {
border-top-width: 2px;
border-bottom-width: 2px;
border-radius: 5px 5px 5px 5px;
}
@ -900,11 +1003,17 @@ a.list-group-item:hover {
/* 10.2 - Breadcrumb */
.breadcrumb {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.5rem;
background-color: transparent;
background-color: #eeeeec;
}
.breadcrumb .card-body:last-child {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
border-style: solid;
border-style: solid;
}
.breadcrumb li {
margin: 0;
@ -912,165 +1021,132 @@ a.list-group-item:hover {
/* 10.3 - Alerts */
.alert {
border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.5rem;
background-color: transparent;
background-color: white;
background-color: #eeeeec;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
border-style: solid;
color: rgba(0, 0, 0, 0.7);
border-style: solid;
}
.alert-blue {
background-color: #d7dcf3;
color: black;
}
.alert-blue a, .alert-blue .alert-link {
color: black;
font-weight: bold;
background-color: #4e63c9 !important;
color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
}
.alert-violet {
background-color: #f5d9f4;
color: black;
}
.alert-violet a, .alert-violet .alert-link {
color: black;
font-weight: bold;
background-color: #ce4dcd !important;
color: #FFF;
border-color: #b632b5;
box-shadow: inset 0px 0px 0px 2px #d975d8;
}
.alert-purple {
background-color: #ded4ef;
color: black;
}
.alert-purple a, .alert-purple .alert-link {
color: black;
font-weight: bold;
background-color: #7951c0 !important;
color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
}
.alert-red {
background-color: #f7c8c0;
color: black;
}
.alert-red a, .alert-red .alert-link {
color: black;
font-weight: bold;
background-color: #e33d22 !important;
color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
}
.alert-orange {
background-color: #fbd3ac;
color: black;
}
.alert-orange a, .alert-orange .alert-link {
color: black;
font-weight: bold;
background-color: #eb790a !important;
color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
}
.alert-green {
background-color: #cdebad;
color: black;
}
.alert-green a, .alert-green .alert-link {
color: black;
font-weight: bold;
background-color: #75b82d !important;
color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
}
.alert-skyblue {
background-color: #eaf4fe;
color: black;
}
.alert-skyblue a, .alert-skyblue .alert-link {
color: black;
font-weight: bold;
background-color: #42a0f3 !important;
color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
}
.alert-dark {
background-color: #868686;
color: #f9f9f9;
}
.alert-dark a, .alert-dark .alert-link {
color: white;
font-weight: bold;
background-color: #2D2D2D !important;
color: #FFF;
border-color: #141414;
box-shadow: inset 0px 0px 0px 2px #474747;
}
.alert-light {
background-color: white;
color: #3e3e37;
}
.alert-light a, .alert-light .alert-link {
color: #3e3e37;
font-weight: bold;
background-color: #eeeeec !important;
color: #2D2D2D;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
}
.alert-turquoise {
background-color: #caece3;
color: black;
}
.alert-turquoise a, .alert-turquoise .alert-link {
color: black;
font-weight: bold;
background-color: #46bd9e !important;
color: #FFF;
border-color: #379980;
box-shadow: inset 0px 0px 0px 2px #6ccab2;
}
.alert-yellow {
background-color: #fdf7d8;
color: black;
}
.alert-yellow a, .alert-yellow .alert-link {
color: black;
font-weight: bold;
background-color: #f6d32d !important;
color: #FFF;
border-color: #e6c00a;
box-shadow: inset 0px 0px 0px 2px #f8dd5e;
}
.alert-brown {
background-color: #ddc5b2;
color: black;
}
.alert-brown a, .alert-brown .alert-link {
color: black;
font-weight: bold;
background-color: #986a44 !important;
color: #FFF;
border-color: #755134;
box-shadow: inset 0px 0px 0px 2px #b5835a;
}
.alert-grey {
background-color: #d1d1d3;
color: black;
}
.alert-grey a, .alert-grey .alert-link {
color: black;
font-weight: bold;
background-color: #77767b !important;
color: #FFF;
border-color: #5e5d61;
box-shadow: inset 0px 0px 0px 2px #919094;
}
.alert-primary {
background-color: #ded4ef;
color: black;
}
.alert-primary a, .alert-primary .alert-link {
color: black;
font-weight: bold;
background-color: #7951c0 !important;
color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
}
.alert-secondary {
background-color: #d7dcf3;
color: black;
}
.alert-secondary a, .alert-secondary .alert-link {
color: black;
font-weight: bold;
background-color: #4e63c9 !important;
color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
}
.alert-warning {
background-color: #fbd3ac;
color: black;
}
.alert-warning a, .alert-warning .alert-link {
color: black;
font-weight: bold;
background-color: #eb790a !important;
color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
}
.alert-danger {
background-color: #f7c8c0;
color: black;
}
.alert-danger a, .alert-danger .alert-link {
color: black;
font-weight: bold;
background-color: #e33d22 !important;
color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
}
.alert-info {
background-color: #eaf4fe;
color: black;
}
.alert-info a, .alert-info .alert-link {
color: black;
font-weight: bold;
background-color: #42a0f3 !important;
color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
}
.alert-success {
background-color: #cdebad;
color: black;
}
.alert-success a, .alert-success .alert-link {
color: black;
font-weight: bold;
background-color: #75b82d !important;
color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
}
.btn {

2
style.css.map
View File

File diff suppressed because one or more lines are too long