mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-17 18:37:00 +02:00
Colors now in too
This commit is contained in:
Antonio Laguna
681
src/scss/_color.scss
Normal file
681
src/scss/_color.scss
Normal file
@@ -0,0 +1,681 @@
|
||||
// sass-lint:disable no-color-literals
|
||||
// sass-lint:disable no-vendor-prefixes
|
||||
body {
|
||||
background-color: $body-bg;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
:focus {
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
[class*='bg-'] a,
|
||||
[class*='bg-gradient-'] a {
|
||||
color: $spindle;
|
||||
}
|
||||
|
||||
.bg-brown a {
|
||||
color: $link-color-secondary;
|
||||
}
|
||||
|
||||
a,
|
||||
.bg-white a,
|
||||
.bg-light a,
|
||||
.bg-gradient-white a {
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $link-hover;
|
||||
}
|
||||
|
||||
.flexblock li>a,
|
||||
[class*='bg-'] li>a,
|
||||
[class*='bg-gradient-'] li>a,
|
||||
article header a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: $hr-bg;
|
||||
}
|
||||
|
||||
hr:after {
|
||||
background-color: rgba($white, .8);
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
abbr,
|
||||
acronym {
|
||||
border-bottom: 1px dotted $body-bg;
|
||||
}
|
||||
|
||||
mark,
|
||||
ins {
|
||||
background-color: rgba($pattens-blue, .8);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: rgba($pattens-blue, .8);
|
||||
}
|
||||
|
||||
::-webkit-selection {
|
||||
background-color: rgba($pattens-blue, .8);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgba($pattens-blue, .8);
|
||||
}
|
||||
|
||||
pre {
|
||||
background: $white;
|
||||
border: 1px solid rgba($stratos, .1);
|
||||
box-shadow: 0 8px 16px rgba($stratos, .04), 0 4px 16px rgba($black, .08);
|
||||
}
|
||||
|
||||
pre:hover {
|
||||
box-shadow: 0 8px 16px rgba(0, 40, 160, .08), 0 8px 24px rgba($black, .08);
|
||||
}
|
||||
|
||||
code,
|
||||
[class*='bg-'] pre {
|
||||
background-color: rgba($white, .09);
|
||||
}
|
||||
|
||||
.bg-white code {
|
||||
background: rgba($stratos, .03);
|
||||
}
|
||||
|
||||
@each $name, $color in $bg-colors {
|
||||
.bg-#{$name} {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='bg-'] .bg-white {
|
||||
color: $body-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.bg-apple {
|
||||
background: linear-gradient(to bottom, $black 0%, #1a2028 50%, #293845 100%);
|
||||
}
|
||||
|
||||
.bg-trans-dark,
|
||||
.bg-trans-gradient,
|
||||
.bg-primary,
|
||||
.bg-secondary,
|
||||
.bg-blue,
|
||||
.bg-green,
|
||||
.bg-purple,
|
||||
.bg-red,
|
||||
.bg-facebook,
|
||||
.bg-apple,
|
||||
[class*='bg-black'],
|
||||
[class*='bg-gradient-'] {
|
||||
color: $white;
|
||||
text-shadow: 0 1px 0 #013;
|
||||
}
|
||||
|
||||
.bg-light p {
|
||||
color: #456;
|
||||
}
|
||||
|
||||
.bg-brown p {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bg-trans-dark {
|
||||
background: rgba($black, .8);
|
||||
}
|
||||
|
||||
.bg-trans-light {
|
||||
background: rgba($black, .2);
|
||||
}
|
||||
|
||||
.bg-trans-gradient {
|
||||
background: linear-gradient(to top, rgba($black, .8) 0%, rgba($black, 0) 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-h {
|
||||
background: linear-gradient(134deg, #32b 0, #62b 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-v {
|
||||
background: linear-gradient(to top, #62b 0%, #32b 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-r {
|
||||
background: radial-gradient(ellipse at center, #62b 0%, #32b 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-white {
|
||||
background: linear-gradient(180deg, #f2f4f6 0, $white 100%);
|
||||
color: $body-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.bg-gradient-gray {
|
||||
background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%);
|
||||
color: $body-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: .8rem solid $white;
|
||||
}
|
||||
|
||||
[class*='background'].frame {
|
||||
border-width: .2rem;
|
||||
}
|
||||
|
||||
.shadow,
|
||||
.pre {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shadow:before,
|
||||
.shadow:after {
|
||||
box-shadow: 0 16px 24px rgba($stratos, .3);
|
||||
}
|
||||
|
||||
.text-separator:before {
|
||||
background-color: rgba(170, 0, 0, .8);
|
||||
}
|
||||
|
||||
[class*='text-pull-'] {
|
||||
border-top: 4px solid rgba($black, .5);
|
||||
}
|
||||
|
||||
img[class*='text-pull-'],
|
||||
figure[class*='text-pull-'] {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
[class*='bg-'] .text-context:before {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.text-context:before,
|
||||
.bg-white .text-context:before {
|
||||
background-color: rgba($stratos, .2);
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: 0 0 40px rgba($black, .5);
|
||||
}
|
||||
|
||||
[class*='card-'] time,
|
||||
h1 span {
|
||||
color: #abd;
|
||||
}
|
||||
|
||||
.code-comment {
|
||||
color: rgba(70, 170, 130, .9);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
header[role='banner'] {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav[role='navigation'] li {
|
||||
&.active a {
|
||||
background-color: #555;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: rgba(50, 50, 50, .9);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(50, 50, 50, .7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $social-nav {
|
||||
nav li.#{$name} a:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.flexblock li.active a,
|
||||
.metrics li:hover,
|
||||
.specs li:hover,
|
||||
.reasons li:hover {
|
||||
background-color: rgba($stratos, .03);
|
||||
}
|
||||
|
||||
.features li,
|
||||
.clients li {
|
||||
background-color: rgba($white, .9);
|
||||
}
|
||||
|
||||
[class*='bg-'] .features li,
|
||||
[class*='bg-'] .clients li {
|
||||
background-color: rgba($white, .1);
|
||||
}
|
||||
|
||||
.features li:hover,
|
||||
.clients li:hover {
|
||||
box-shadow: 0 8px 16px rgba($stratos, .02), 0 4px 16px rgba($black, .08);
|
||||
}
|
||||
|
||||
.border {
|
||||
border-bottom: 1px solid rgba($stratos, .1);
|
||||
border-right: 1px solid rgba($stratos, .1);
|
||||
}
|
||||
|
||||
.border li {
|
||||
border-left: 1px solid rgba($stratos, .1);
|
||||
border-top: 1px solid rgba($stratos, .1);
|
||||
}
|
||||
|
||||
.flexblock.border li li {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.steps li:nth-child(1) {
|
||||
background-color: #e8eef7;
|
||||
}
|
||||
|
||||
.steps li:nth-child(2) {
|
||||
background-color: #dde5f3;
|
||||
}
|
||||
|
||||
.steps li:nth-child(3) {
|
||||
background-color: #cdd8ec;
|
||||
}
|
||||
|
||||
.steps li:nth-child(4) {
|
||||
background-color: #bbcdec;
|
||||
}
|
||||
|
||||
.process {
|
||||
border-bottom: 15px solid transparent;
|
||||
border-top: 15px solid transparent;
|
||||
}
|
||||
|
||||
.steps li:hover,
|
||||
.steps.blink li:hover>a {
|
||||
background-color: #b8cef7;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.process.step-2 {
|
||||
border-left-color: #e8eef7;
|
||||
}
|
||||
|
||||
.process.step-3 {
|
||||
border-left-color: #dde5f3;
|
||||
}
|
||||
|
||||
.process.step-4 {
|
||||
border-left-color: #cdd8ec;
|
||||
}
|
||||
|
||||
.steps li:hover + li [class*='step-'] {
|
||||
border-left-color: #b8cef7;
|
||||
}
|
||||
}
|
||||
|
||||
.specs li:after {
|
||||
background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%);
|
||||
}
|
||||
|
||||
.specs li:last-child:after {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.reasons li:after {
|
||||
background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%);
|
||||
}
|
||||
|
||||
.reasons li:last-child:after {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background-color: rgba($black, .2);
|
||||
}
|
||||
|
||||
li:hover .overlay {
|
||||
background-color: rgba($black, .1);
|
||||
}
|
||||
|
||||
.overlay,
|
||||
.overlay a {
|
||||
color: $white;
|
||||
text-shadow: 0 1px 0 #111;
|
||||
}
|
||||
|
||||
.gallery li {
|
||||
background-color: rgba($stratos, .06);
|
||||
box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .03);
|
||||
}
|
||||
|
||||
.gallery li figcaption {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.flexblock.gallery li:hover {
|
||||
box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .08);
|
||||
}
|
||||
|
||||
.gallery li footer {
|
||||
border-top: 1px solid rgba($stratos, .1);
|
||||
}
|
||||
|
||||
.gallery li a {
|
||||
color: $body-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.flesblock.gallery li a footer {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.gallery li figcaption:before {
|
||||
border: .8rem solid $black;
|
||||
border-color: transparent transparent $white $white;
|
||||
}
|
||||
|
||||
.plans>li div,
|
||||
.flexblock.plans li:hover div {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.plans>li:hover,
|
||||
.plans>li:nth-child(2) {
|
||||
box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1);
|
||||
}
|
||||
|
||||
.plans:hover li:nth-child(2):not(:hover) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.plans li h2 {
|
||||
background-color: rgba($stratos, .5);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.plans ul li {
|
||||
border-bottom: 1px solid rgba($stratos, .1);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plans > li > a {
|
||||
color: $body-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.activity li {
|
||||
border-top: .1rem solid rgba($stratos, .1);
|
||||
}
|
||||
|
||||
.activity li:hover {
|
||||
background-color: rgba($stratos, .02);
|
||||
}
|
||||
|
||||
.work-label,
|
||||
.work li a {
|
||||
border-bottom: 1px solid rgba($stratos, .1);
|
||||
}
|
||||
|
||||
.work li:nth-child(odd)>a {
|
||||
background-color: rgba($stratos, .03);
|
||||
}
|
||||
|
||||
.work li a:hover {
|
||||
background-color: rgba($stratos, .04);
|
||||
}
|
||||
|
||||
.clients.border figcaption {
|
||||
border-top: 1px solid rgba($stratos, .1);
|
||||
}
|
||||
|
||||
img.blacklogo {
|
||||
background: none;
|
||||
filter: grayscale(100%) brightness(10%) contrast(100%);
|
||||
}
|
||||
|
||||
img.graylogo {
|
||||
filter: grayscale(100%) brightness(10%) contrast(10%);
|
||||
}
|
||||
|
||||
img.whitelogo {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
li:hover img.blacklogo,
|
||||
li:hover img.graylogo,
|
||||
img.blacklogo:hover,
|
||||
img.graylogo:hover {
|
||||
background: none;
|
||||
filter: grayscale(0%);
|
||||
transition: all .6s ease;
|
||||
}
|
||||
|
||||
[class*='card-'] > a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.description>li {
|
||||
border-bottom: 1px solid rgba($stratos, .1);
|
||||
}
|
||||
|
||||
.description>li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
[class*='card-'][class*='bg-'] figure {
|
||||
background-color: rgba($stratos, .06);
|
||||
}
|
||||
|
||||
[class*='card'] figcaption,
|
||||
[class*='card'] figcaption a {
|
||||
background: linear-gradient(to bottom, rgba($black 0) 0%, rgba($black, .2) 100%);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cta .benefit {
|
||||
border-image: linear-gradient(90deg, transparent, rgba($black, .4) 50%, transparent) 1 100%;
|
||||
border-left-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
table td,
|
||||
th,
|
||||
thead {
|
||||
border: 1px solid rgba($black, .5);
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: rgba($black, .3);
|
||||
}
|
||||
|
||||
tr:nth-child(even)>td {
|
||||
background: rgba($black, .1);
|
||||
}
|
||||
|
||||
tr>td {
|
||||
border-top: 1px solid rgba($black, .5);
|
||||
}
|
||||
|
||||
td:hover,
|
||||
tr:nth-child(even)>td:hover {
|
||||
background-color: rgba($white, .5);
|
||||
}
|
||||
|
||||
.browser {
|
||||
border: 1px solid rgba($stratos, .1);
|
||||
}
|
||||
|
||||
.browser:hover {
|
||||
box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1);
|
||||
}
|
||||
|
||||
.browser:before {
|
||||
background-color: rgba($stratos, .1);
|
||||
border-bottom: 1px solid rgba($stratos, .2);
|
||||
color: rgba($white, .9);
|
||||
}
|
||||
|
||||
.browser:hover:before {
|
||||
background-color: rgba($stratos, .12);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
|
||||
}
|
||||
|
||||
input:focus::-moz-placeholder {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
input:focus::-webkit-input-placeholder {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
a.button,
|
||||
[class*='badge-'],
|
||||
button[type='submit'],
|
||||
input {
|
||||
box-shadow: 0 10px 16px -8px rgba($stratos, .3);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button[type='submit'],
|
||||
input[type='submit'],
|
||||
.button,
|
||||
.button:hover,
|
||||
button[type='submit']:hover,
|
||||
input[type='submit']:hover {
|
||||
border: 1px solid $royal-blue;
|
||||
}
|
||||
|
||||
button[type='submit'],
|
||||
input[type='submit'],
|
||||
.button,
|
||||
.button:hover,
|
||||
button[type='submit']:hover,
|
||||
input[type='submit']:hover {
|
||||
background-color: $royal-blue;
|
||||
color: $white;
|
||||
text-shadow: 0 1px 0 #123;
|
||||
}
|
||||
|
||||
.button:active,
|
||||
button[type='submit']:active,
|
||||
input[type='submit']:active {
|
||||
background-color: #17d;
|
||||
}
|
||||
|
||||
.ghost,
|
||||
.ghost:hover {
|
||||
background: none;
|
||||
color: inherit;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.bg-primary select,
|
||||
.bg-primary textarea,
|
||||
.bg-primary .button,
|
||||
.bg-primary button,
|
||||
.bg-primary button:hover,
|
||||
.bg-primary input,
|
||||
[class*='bg-gradient-'] .button,
|
||||
[class*='bg-'] a.button.ghost {
|
||||
border-color: $white;
|
||||
}
|
||||
|
||||
[class*='bg-'] a.button {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bg-white a.button.ghost,
|
||||
.bg-gradient-white a.button.ghost {
|
||||
border: 1px solid $royal-blue;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
:disabled,
|
||||
button:disabled:hover {
|
||||
background-color: #eee;
|
||||
border-color: #eee;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
background-color: rgba($stratos, .2);
|
||||
border: 1px solid $royal-blue;
|
||||
}
|
||||
|
||||
legend {
|
||||
background-color: rgba($black, .6);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
input:hover,
|
||||
select:hover {
|
||||
box-shadow: 0 0 8px rgba($black, .3);
|
||||
}
|
||||
|
||||
[class*='badge-'] {
|
||||
background-color: $black;
|
||||
border: 1px solid #345;
|
||||
}
|
||||
|
||||
form .flexblock li:hover {
|
||||
background-color: rgba($black, .05);
|
||||
}
|
||||
|
||||
.toc,
|
||||
.toc ol>li:before,
|
||||
.chapter {
|
||||
background-color: #f7f9fb;
|
||||
}
|
||||
|
||||
.toc li .toc-page:before {
|
||||
border-bottom: 1px dotted rgba($black, .9);
|
||||
}
|
||||
|
||||
#counter,
|
||||
#navigation a {
|
||||
color: #abc;
|
||||
}
|
||||
|
||||
#webslides:hover #navigation a:hover {
|
||||
background-color: rgba($black, .9);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
footer[role='contentinfo'] {
|
||||
background-color: $white;
|
||||
}
|
||||
@@ -1,8 +1,11 @@
|
||||
// sass-lint:disable no-color-literals
|
||||
|
||||
// =========
|
||||
// Colours. Names from http://chir.ag/projects/name-that-color/
|
||||
// Colors. Names from http://chir.ag/projects/name-that-color/
|
||||
// =========
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$mine-shaft: #333;
|
||||
$royal-blue: #44d;
|
||||
$havelock-blue: #67d;
|
||||
$catskill-white: #edf2f7;
|
||||
@@ -17,8 +20,12 @@ $cardinal: #c23;
|
||||
$mirage: #1a2028;
|
||||
$pickled-bluewood: #293845;
|
||||
$facebook: #3b5998;
|
||||
$spindle: #bce;
|
||||
$dodger-blue: #3af;
|
||||
$pattens-blue: #def;
|
||||
$stratos: #001450;
|
||||
|
||||
$bg-colours: (
|
||||
$bg-colors: (
|
||||
'primary': $royal-blue,
|
||||
'secondary': $havelock-blue,
|
||||
'light': $catskill-white,
|
||||
@@ -32,6 +39,22 @@ $bg-colours: (
|
||||
'red': $cardinal,
|
||||
'white': $white,
|
||||
// Branding
|
||||
'apple': linear-gradient(to bottom, $black 0%, $mirage 50%, $pickled-bluewood 100%),
|
||||
'facebook': $facebook
|
||||
) !default;
|
||||
|
||||
$social-nav: (
|
||||
'twitter': #1da1f3,
|
||||
'facebook': $facebook,
|
||||
'linkedin': #1683bb,
|
||||
'dribbble': #ea4c89,
|
||||
'github': #60b044,
|
||||
'email': #dd4b39
|
||||
) !default;
|
||||
|
||||
$body-color: $mine-shaft !default;
|
||||
$body-bg: $catskill-white !default;
|
||||
$focus-box-shadow: 0 0 2px rgba(150, 187, 238, 1) !default;
|
||||
$link-color: $royal-blue !default;
|
||||
$link-color-secondary: $cardinal !default;
|
||||
$link-hover: $dodger-blue !default;
|
||||
$hr-bg: radial-gradient(ellipse at center, rgba(0, 20, 80, .2) 0, rgba(255, 255, 255, 0) 75%) !default;
|
||||
|
||||
Reference in New Issue
Block a user