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() { @function list-colors() {
$newmap: map.merge($palette, $semantics); $newmap: map.merge($palette, $semantics);
@return $newmap; @return $newmap;

2
scss/components/_buttons.scss
View File

@ -26,7 +26,7 @@
} }
@mixin button-hover($background-color, $light-color, $dark-color) { @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 // 11.1 - Buttons

56
scss/components/_cards.scss
View File

@ -1,10 +1,14 @@
// Mixin and colors // Mixin and colors
$card-color-default: white; $card-color-default: get_color("light");
@mixin card-self-contained() { @mixin card-self-contained() {
@include borders();
@include card-container(); @include card-container();
background-color:$card-color-default; 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() { @mixin card-container() {
@ -16,19 +20,26 @@ $card-color-default: white;
} }
@mixin card-element() { @mixin card-element() {
border:0; @include borders();
border-radius:0; border-top-width:0;
border-bottom-width:0;
background-color:$card-color-default; background-color:$card-color-default;
border-color: darkenColor($card-color-default);
box-shadow: inset 0px 0px 0px 2px lightenColor($card-color-default);
&:first-child { &:first-child {
border-top-width:2px;
@include border-radius-top($border-radius); @include border-radius-top($border-radius);
} }
&:last-child { &:last-child {
border-bottom-width:2px;
@include border-radius-bottom($border-radius); @include border-radius-bottom($border-radius);
} }
&:only-child { &:only-child {
border-top-width:2px;
border-bottom-width:2px;
@include border-radius(); @include border-radius();
} }
} }
@ -45,13 +56,23 @@ $card-color-default: white;
@mixin colorize-card() { @mixin colorize-card() {
@each $name, $color in list-colors() { @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) { @mixin card-color($background-color, $light-color, $dark-color) {
& > .card-header, & > .card-footer { @include background-color($background-color, $light-color, $dark-color); } & > .card-header, & > .card-footer {
&.card-colored > .card-body { @include background-color($background-color, $light-color, $dark-color); } @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 // ALERT COLORIZATION
@ -63,20 +84,9 @@ $card-color-default: white;
} }
@mixin alert-color($background-color) { @mixin alert-color($background-color) {
background-color: lighten($background-color, 35%); @include background-color($background-color, #FFF, get_color("dark"));
@if (luminance($background-color) > 128 * 0.8) { border-color: darkenColor($background-color);
color: darken($background-color, 70%); box-shadow: inset 0px 0px 0px 2px lightenColor($background-color);
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;
}
}
} }
@ -103,7 +113,6 @@ $card-color-default: white;
@include card-element(); @include card-element();
@include borders(); @include borders();
font-size:1.1em; font-size:1.1em;
box-shadow: $inset-relief;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3); text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-weight:600; font-weight:600;
border-radius: 0; border-radius: 0;
@ -171,9 +180,9 @@ a.list-group-item:hover {
/* 10.2 - Breadcrumb */ /* 10.2 - Breadcrumb */
.breadcrumb { .breadcrumb {
@include card-relief();
@include li-no-margin(); @include li-no-margin();
background-color:#eeeeec; @include card-self-contained();
border-style:solid;
} }
/* 10.3 - Alerts */ /* 10.3 - Alerts */
@ -183,4 +192,5 @@ a.list-group-item:hover {
color:rgba(0, 0, 0, 0.7); color:rgba(0, 0, 0, 0.7);
@include colorize-alert(); @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 { .card-blue > .card-header, .card-blue > .card-footer {
background-color: #4e63c9 !important; background-color: #4e63c9 !important;
color: #FFF; color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
} }
.card-blue.card-colored > .card-body { .card-blue.card-colored > .card-body {
background-color: #4e63c9 !important; background-color: #4e63c9 !important;
color: #FFF; color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
} }
.card-violet > .card-header, .card-violet > .card-footer { .card-violet > .card-header, .card-violet > .card-footer {
background-color: #ce4dcd !important; background-color: #ce4dcd !important;
color: #FFF; color: #FFF;
border-color: #b632b5;
box-shadow: inset 0px 0px 0px 2px #d975d8;
} }
.card-violet.card-colored > .card-body { .card-violet.card-colored > .card-body {
background-color: #ce4dcd !important; background-color: #ce4dcd !important;
color: #FFF; color: #FFF;
border-color: #b632b5;
box-shadow: inset 0px 0px 0px 2px #d975d8;
} }
.card-purple > .card-header, .card-purple > .card-footer { .card-purple > .card-header, .card-purple > .card-footer {
background-color: #7951c0 !important; background-color: #7951c0 !important;
color: #FFF; color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
} }
.card-purple.card-colored > .card-body { .card-purple.card-colored > .card-body {
background-color: #7951c0 !important; background-color: #7951c0 !important;
color: #FFF; color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
} }
.card-red > .card-header, .card-red > .card-footer { .card-red > .card-header, .card-red > .card-footer {
background-color: #e33d22 !important; background-color: #e33d22 !important;
color: #FFF; color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
} }
.card-red.card-colored > .card-body { .card-red.card-colored > .card-body {
background-color: #e33d22 !important; background-color: #e33d22 !important;
color: #FFF; color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
} }
.card-orange > .card-header, .card-orange > .card-footer { .card-orange > .card-header, .card-orange > .card-footer {
background-color: #eb790a !important; background-color: #eb790a !important;
color: #FFF; color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
} }
.card-orange.card-colored > .card-body { .card-orange.card-colored > .card-body {
background-color: #eb790a !important; background-color: #eb790a !important;
color: #FFF; color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
} }
.card-green > .card-header, .card-green > .card-footer { .card-green > .card-header, .card-green > .card-footer {
background-color: #75b82d !important; background-color: #75b82d !important;
color: #FFF; color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
} }
.card-green.card-colored > .card-body { .card-green.card-colored > .card-body {
background-color: #75b82d !important; background-color: #75b82d !important;
color: #FFF; color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
} }
.card-skyblue > .card-header, .card-skyblue > .card-footer { .card-skyblue > .card-header, .card-skyblue > .card-footer {
background-color: #42a0f3 !important; background-color: #42a0f3 !important;
color: #FFF; color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
} }
.card-skyblue.card-colored > .card-body { .card-skyblue.card-colored > .card-body {
background-color: #42a0f3 !important; background-color: #42a0f3 !important;
color: #FFF; color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
} }
.card-dark > .card-header, .card-dark > .card-footer { .card-dark > .card-header, .card-dark > .card-footer {
background-color: #2D2D2D !important; background-color: #2D2D2D !important;
color: #FFF; color: #FFF;
border-color: #141414;
box-shadow: inset 0px 0px 0px 2px #474747;
} }
.card-dark.card-colored > .card-body { .card-dark.card-colored > .card-body {
background-color: #2D2D2D !important; background-color: #2D2D2D !important;
color: #FFF; color: #FFF;
border-color: #141414;
box-shadow: inset 0px 0px 0px 2px #474747;
} }
.card-light > .card-header, .card-light > .card-footer { .card-light > .card-header, .card-light > .card-footer {
background-color: #eeeeec !important; background-color: #eeeeec !important;
color: #000; color: #000;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
} }
.card-light.card-colored > .card-body { .card-light.card-colored > .card-body {
background-color: #eeeeec !important; background-color: #eeeeec !important;
color: #000; color: #000;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
} }
.card-turquoise > .card-header, .card-turquoise > .card-footer { .card-turquoise > .card-header, .card-turquoise > .card-footer {
background-color: #46bd9e !important; background-color: #46bd9e !important;
color: #FFF; color: #FFF;
border-color: #379980;
box-shadow: inset 0px 0px 0px 2px #6ccab2;
} }
.card-turquoise.card-colored > .card-body { .card-turquoise.card-colored > .card-body {
background-color: #46bd9e !important; background-color: #46bd9e !important;
color: #FFF; color: #FFF;
border-color: #379980;
box-shadow: inset 0px 0px 0px 2px #6ccab2;
} }
.card-yellow > .card-header, .card-yellow > .card-footer { .card-yellow > .card-header, .card-yellow > .card-footer {
background-color: #f6d32d !important; background-color: #f6d32d !important;
color: #FFF; color: #FFF;
border-color: #e6c00a;
box-shadow: inset 0px 0px 0px 2px #f8dd5e;
} }
.card-yellow.card-colored > .card-body { .card-yellow.card-colored > .card-body {
background-color: #f6d32d !important; background-color: #f6d32d !important;
color: #FFF; color: #FFF;
border-color: #e6c00a;
box-shadow: inset 0px 0px 0px 2px #f8dd5e;
} }
.card-brown > .card-header, .card-brown > .card-footer { .card-brown > .card-header, .card-brown > .card-footer {
background-color: #986a44 !important; background-color: #986a44 !important;
color: #FFF; color: #FFF;
border-color: #755134;
box-shadow: inset 0px 0px 0px 2px #b5835a;
} }
.card-brown.card-colored > .card-body { .card-brown.card-colored > .card-body {
background-color: #986a44 !important; background-color: #986a44 !important;
color: #FFF; color: #FFF;
border-color: #755134;
box-shadow: inset 0px 0px 0px 2px #b5835a;
} }
.card-grey > .card-header, .card-grey > .card-footer { .card-grey > .card-header, .card-grey > .card-footer {
background-color: #77767b !important; background-color: #77767b !important;
color: #FFF; color: #FFF;
border-color: #5e5d61;
box-shadow: inset 0px 0px 0px 2px #919094;
} }
.card-grey.card-colored > .card-body { .card-grey.card-colored > .card-body {
background-color: #77767b !important; background-color: #77767b !important;
color: #FFF; color: #FFF;
border-color: #5e5d61;
box-shadow: inset 0px 0px 0px 2px #919094;
} }
.card-primary > .card-header, .card-primary > .card-footer { .card-primary > .card-header, .card-primary > .card-footer {
background-color: #7951c0 !important; background-color: #7951c0 !important;
color: #FFF; color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
} }
.card-primary.card-colored > .card-body { .card-primary.card-colored > .card-body {
background-color: #7951c0 !important; background-color: #7951c0 !important;
color: #FFF; color: #FFF;
border-color: #603ba3;
box-shadow: inset 0px 0px 0px 2px #9676ce;
} }
.card-secondary > .card-header, .card-secondary > .card-footer { .card-secondary > .card-header, .card-secondary > .card-footer {
background-color: #4e63c9 !important; background-color: #4e63c9 !important;
color: #FFF; color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
} }
.card-secondary.card-colored > .card-body { .card-secondary.card-colored > .card-body {
background-color: #4e63c9 !important; background-color: #4e63c9 !important;
color: #FFF; color: #FFF;
border-color: #354aaf;
box-shadow: inset 0px 0px 0px 2px #7585d5;
} }
.card-warning > .card-header, .card-warning > .card-footer { .card-warning > .card-header, .card-warning > .card-footer {
background-color: #eb790a !important; background-color: #eb790a !important;
color: #FFF; color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
} }
.card-warning.card-colored > .card-body { .card-warning.card-colored > .card-body {
background-color: #eb790a !important; background-color: #eb790a !important;
color: #FFF; color: #FFF;
border-color: #ba6008;
box-shadow: inset 0px 0px 0px 2px #f69332;
} }
.card-danger > .card-header, .card-danger > .card-footer { .card-danger > .card-header, .card-danger > .card-footer {
background-color: #e33d22 !important; background-color: #e33d22 !important;
color: #FFF; color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
} }
.card-danger.card-colored > .card-body { .card-danger.card-colored > .card-body {
background-color: #e33d22 !important; background-color: #e33d22 !important;
color: #FFF; color: #FFF;
border-color: #ba2e18;
box-shadow: inset 0px 0px 0px 2px #e9654f;
} }
.card-info > .card-header, .card-info > .card-footer { .card-info > .card-header, .card-info > .card-footer {
background-color: #42a0f3 !important; background-color: #42a0f3 !important;
color: #FFF; color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
} }
.card-info.card-colored > .card-body { .card-info.card-colored > .card-body {
background-color: #42a0f3 !important; background-color: #42a0f3 !important;
color: #FFF; color: #FFF;
border-color: #1288f0;
box-shadow: inset 0px 0px 0px 2px #72b8f6;
} }
.card-success > .card-header, .card-success > .card-footer { .card-success > .card-header, .card-success > .card-footer {
background-color: #75b82d !important; background-color: #75b82d !important;
color: #FFF; color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
} }
.card-success.card-colored > .card-body { .card-success.card-colored > .card-body {
background-color: #75b82d !important; background-color: #75b82d !important;
color: #FFF; color: #FFF;
border-color: #5b8f23;
box-shadow: inset 0px 0px 0px 2px #8fd246;
} }
.card-body { .card-body {
border: 0; border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 0; border-top-width: 0;
background-color: white; border-bottom-width: 0;
background-color: #eeeeec;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
} }
.card-body:first-child { .card-body:first-child {
border-top-width: 2px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.card-body:last-child { .card-body:last-child {
border-bottom-width: 2px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.card-body:only-child { .card-body:only-child {
border-top-width: 2px;
border-bottom-width: 2px;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
} }
/* 10.1.1 - Headers */ /* 10.1.1 - Headers */
.card-header, .card-footer { .card-header, .card-footer {
border: 0; border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 0; border-top-width: 0;
background-color: white; 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); border: 2px solid rgba(0, 0, 0, 0.3);
font-size: 1.1em; 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); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 600; font-weight: 600;
border-radius: 0; border-radius: 0;
} }
.card-header:first-child, .card-footer:first-child { .card-header:first-child, .card-footer:first-child {
border-top-width: 2px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.card-header:last-child, .card-footer:last-child { .card-header:last-child, .card-footer:last-child {
border-bottom-width: 2px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.card-header:only-child, .card-footer:only-child { .card-header:only-child, .card-footer:only-child {
border-top-width: 2px;
border-bottom-width: 2px;
border-radius: 5px 5px 5px 5px; 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 { .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 */ /* 10.1.2 - Meta */
.card-meta { .card-meta {
padding: 1em; padding: 1em;
border: 0; border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 0; border-top-width: 0;
background-color: white; 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); border-bottom: 2px solid rgba(0, 0, 0, 0.2);
} }
.card-meta:first-child { .card-meta:first-child {
border-top-width: 2px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.card-meta:last-child { .card-meta:last-child {
border-bottom-width: 2px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.card-meta:only-child { .card-meta:only-child {
border-top-width: 2px;
border-bottom-width: 2px;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
} }
.card-meta.media { .card-meta.media {
@ -866,23 +962,30 @@ ul.social li a:hover {
/* 10.1.3 - Lists */ /* 10.1.3 - Lists */
.list-group { .list-group {
border: 0; border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 0; border-top-width: 0;
background-color: white; border-bottom-width: 0;
background-color: #eeeeec;
border-color: #d6d6d1;
box-shadow: inset 0px 0px 0px 2px white;
} }
.list-group:first-child { .list-group:first-child {
border-top-width: 2px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.list-group:last-child { .list-group:last-child {
border-bottom-width: 2px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.list-group:only-child { .list-group:only-child {
border-top-width: 2px;
border-bottom-width: 2px;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
} }
@ -900,11 +1003,17 @@ a.list-group-item:hover {
/* 10.2 - Breadcrumb */ /* 10.2 - Breadcrumb */
.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; background-color: #eeeeec;
} border-color: #d6d6d1;
.breadcrumb .card-body:last-child { box-shadow: inset 0px 0px 0px 2px white;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2); border-style: solid;
border-style: solid;
} }
.breadcrumb li { .breadcrumb li {
margin: 0; margin: 0;
@ -912,165 +1021,132 @@ a.list-group-item:hover {
/* 10.3 - Alerts */ /* 10.3 - Alerts */
.alert { .alert {
border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none; border: none;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
background-color: transparent; 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); color: rgba(0, 0, 0, 0.7);
border-style: solid;
} }
.alert-blue { .alert-blue {
background-color: #d7dcf3; background-color: #4e63c9 !important;
color: black; color: #FFF;
} border-color: #354aaf;
.alert-blue a, .alert-blue .alert-link { box-shadow: inset 0px 0px 0px 2px #7585d5;
color: black;
font-weight: bold;
} }
.alert-violet { .alert-violet {
background-color: #f5d9f4; background-color: #ce4dcd !important;
color: black; color: #FFF;
} border-color: #b632b5;
.alert-violet a, .alert-violet .alert-link { box-shadow: inset 0px 0px 0px 2px #d975d8;
color: black;
font-weight: bold;
} }
.alert-purple { .alert-purple {
background-color: #ded4ef; background-color: #7951c0 !important;
color: black; color: #FFF;
} border-color: #603ba3;
.alert-purple a, .alert-purple .alert-link { box-shadow: inset 0px 0px 0px 2px #9676ce;
color: black;
font-weight: bold;
} }
.alert-red { .alert-red {
background-color: #f7c8c0; background-color: #e33d22 !important;
color: black; color: #FFF;
} border-color: #ba2e18;
.alert-red a, .alert-red .alert-link { box-shadow: inset 0px 0px 0px 2px #e9654f;
color: black;
font-weight: bold;
} }
.alert-orange { .alert-orange {
background-color: #fbd3ac; background-color: #eb790a !important;
color: black; color: #FFF;
} border-color: #ba6008;
.alert-orange a, .alert-orange .alert-link { box-shadow: inset 0px 0px 0px 2px #f69332;
color: black;
font-weight: bold;
} }
.alert-green { .alert-green {
background-color: #cdebad; background-color: #75b82d !important;
color: black; color: #FFF;
} border-color: #5b8f23;
.alert-green a, .alert-green .alert-link { box-shadow: inset 0px 0px 0px 2px #8fd246;
color: black;
font-weight: bold;
} }
.alert-skyblue { .alert-skyblue {
background-color: #eaf4fe; background-color: #42a0f3 !important;
color: black; color: #FFF;
} border-color: #1288f0;
.alert-skyblue a, .alert-skyblue .alert-link { box-shadow: inset 0px 0px 0px 2px #72b8f6;
color: black;
font-weight: bold;
} }
.alert-dark { .alert-dark {
background-color: #868686; background-color: #2D2D2D !important;
color: #f9f9f9; color: #FFF;
} border-color: #141414;
.alert-dark a, .alert-dark .alert-link { box-shadow: inset 0px 0px 0px 2px #474747;
color: white;
font-weight: bold;
} }
.alert-light { .alert-light {
background-color: white; background-color: #eeeeec !important;
color: #3e3e37; color: #2D2D2D;
} border-color: #d6d6d1;
.alert-light a, .alert-light .alert-link { box-shadow: inset 0px 0px 0px 2px white;
color: #3e3e37;
font-weight: bold;
} }
.alert-turquoise { .alert-turquoise {
background-color: #caece3; background-color: #46bd9e !important;
color: black; color: #FFF;
} border-color: #379980;
.alert-turquoise a, .alert-turquoise .alert-link { box-shadow: inset 0px 0px 0px 2px #6ccab2;
color: black;
font-weight: bold;
} }
.alert-yellow { .alert-yellow {
background-color: #fdf7d8; background-color: #f6d32d !important;
color: black; color: #FFF;
} border-color: #e6c00a;
.alert-yellow a, .alert-yellow .alert-link { box-shadow: inset 0px 0px 0px 2px #f8dd5e;
color: black;
font-weight: bold;
} }
.alert-brown { .alert-brown {
background-color: #ddc5b2; background-color: #986a44 !important;
color: black; color: #FFF;
} border-color: #755134;
.alert-brown a, .alert-brown .alert-link { box-shadow: inset 0px 0px 0px 2px #b5835a;
color: black;
font-weight: bold;
} }
.alert-grey { .alert-grey {
background-color: #d1d1d3; background-color: #77767b !important;
color: black; color: #FFF;
} border-color: #5e5d61;
.alert-grey a, .alert-grey .alert-link { box-shadow: inset 0px 0px 0px 2px #919094;
color: black;
font-weight: bold;
} }
.alert-primary { .alert-primary {
background-color: #ded4ef; background-color: #7951c0 !important;
color: black; color: #FFF;
} border-color: #603ba3;
.alert-primary a, .alert-primary .alert-link { box-shadow: inset 0px 0px 0px 2px #9676ce;
color: black;
font-weight: bold;
} }
.alert-secondary { .alert-secondary {
background-color: #d7dcf3; background-color: #4e63c9 !important;
color: black; color: #FFF;
} border-color: #354aaf;
.alert-secondary a, .alert-secondary .alert-link { box-shadow: inset 0px 0px 0px 2px #7585d5;
color: black;
font-weight: bold;
} }
.alert-warning { .alert-warning {
background-color: #fbd3ac; background-color: #eb790a !important;
color: black; color: #FFF;
} border-color: #ba6008;
.alert-warning a, .alert-warning .alert-link { box-shadow: inset 0px 0px 0px 2px #f69332;
color: black;
font-weight: bold;
} }
.alert-danger { .alert-danger {
background-color: #f7c8c0; background-color: #e33d22 !important;
color: black; color: #FFF;
} border-color: #ba2e18;
.alert-danger a, .alert-danger .alert-link { box-shadow: inset 0px 0px 0px 2px #e9654f;
color: black;
font-weight: bold;
} }
.alert-info { .alert-info {
background-color: #eaf4fe; background-color: #42a0f3 !important;
color: black; color: #FFF;
} border-color: #1288f0;
.alert-info a, .alert-info .alert-link { box-shadow: inset 0px 0px 0px 2px #72b8f6;
color: black;
font-weight: bold;
} }
.alert-success { .alert-success {
background-color: #cdebad; background-color: #75b82d !important;
color: black; color: #FFF;
} border-color: #5b8f23;
.alert-success a, .alert-success .alert-link { box-shadow: inset 0px 0px 0px 2px #8fd246;
color: black;
font-weight: bold;
} }
.btn { .btn {

2
style.css.map
View File

File diff suppressed because one or more lines are too long