mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-18 10:51:28 +02:00
Code Issues Releases Wiki Activity

adding comments

Browse Source
This commit is contained in:
José Luis Antúnez
2017-06-22 10:54:57 +02:00
committed by GitHub
parent 7fda1f4de9
commit ab63347ef3
1 changed files with 105 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/scss/_color.scss
View File

@@ -99,6 +99,11 @@ code,
background: rgba($stratos, .03); background: rgba($stratos, .03);
} }
/*================================================
Slides - Backgrounds <section class="bg-primary">
================================================== */
/*3 Corp Colors*/
@each $name, $color in $bg-colors { @each $name, $color in $bg-colors {
.bg-#{$name} { .bg-#{$name} {
background-color: $color; background-color: $color;
@@ -110,10 +115,12 @@ code,
text-shadow: none; text-shadow: none;
} }
/* BG Apple Keynote*/
.bg-apple { .bg-apple {
background: linear-gradient(to bottom, $black 0%, #1a2028 50%, #293845 100%); background: linear-gradient(to bottom, $black 0%, #1a2028 50%, #293845 100%);
} }
/*Font Color*/
.bg-trans-dark, .bg-trans-dark,
.bg-trans-gradient, .bg-trans-gradient,
.bg-primary, .bg-primary,
@@ -138,6 +145,7 @@ code,
color: #666; color: #666;
} }
/*Transparent/Opacity*/
.bg-trans-dark { .bg-trans-dark {
background: rgba($black, .8); background: rgba($black, .8);
} }
@@ -146,34 +154,41 @@ code,
background: rgba($black, .2); background: rgba($black, .2);
} }
/*Covers/Longforms...*/
.bg-trans-gradient { .bg-trans-gradient {
background: linear-gradient(to top, rgba($black, .8) 0%, rgba($black, 0) 100%); background: linear-gradient(to top, rgba($black, .8) 0%, rgba($black, 0) 100%);
} }
/*Horizontal Gradient*/
.bg-gradient-h { .bg-gradient-h {
background: linear-gradient(134deg, #32b 0, #62b 100%); background: linear-gradient(134deg, #32b 0, #62b 100%);
} }
/*Vertical Gradient*/
.bg-gradient-v { .bg-gradient-v {
background: linear-gradient(to top, #62b 0%, #32b 100%); background: linear-gradient(to top, #62b 0%, #32b 100%);
} }
/*Radial Gradient*/
.bg-gradient-r { .bg-gradient-r {
background: radial-gradient(ellipse at center, #62b 0%, #32b 100%); background: radial-gradient(ellipse at center, #62b 0%, #32b 100%);
} }
/*White Gradient (vertical)*/
.bg-gradient-white { .bg-gradient-white {
background: linear-gradient(180deg, #f2f4f6 0, $white 100%); background: linear-gradient(180deg, #f2f4f6 0, $white 100%);
color: $body-color; color: $body-color;
text-shadow: none; text-shadow: none;
} }
/*Gray Gradient (horizontal)*/
.bg-gradient-gray { .bg-gradient-gray {
background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%); background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%);
color: $body-color; color: $body-color;
text-shadow: none; text-shadow: none;
} }
/*Border/Frame*/
.frame { .frame {
border: .8rem solid $white; border: .8rem solid $white;
} }
@@ -182,6 +197,7 @@ code,
border-width: .2rem; border-width: .2rem;
} }
/*Layer/Box Shadow*/
.shadow, .shadow,
.pre { .pre {
position: relative; position: relative;
@@ -192,10 +208,16 @@ code,
box-shadow: 0 16px 24px rgba($stratos, .3); box-shadow: 0 16px 24px rgba($stratos, .3);
} }
/*============================
TYPOGRAPHY
============================== */
/* -- Horizontal separator -- */
.text-separator:before { .text-separator:before {
background-color: rgba(170, 0, 0, .8); background-color: rgba(170, 0, 0, .8);
} }
/* -- Pull Quote (Right/Left) -- */
[class*='text-pull-'] { [class*='text-pull-'] {
border-top: 4px solid rgba($black, .5); border-top: 4px solid rgba($black, .5);
} }
@@ -205,6 +227,7 @@ figure[class*='text-pull-'] {
border-top: 0; border-top: 0;
} }
/* -- Context -- */
[class*='bg-'] .text-context:before { [class*='bg-'] .text-context:before {
background-color: $white; background-color: $white;
} }
@@ -214,20 +237,26 @@ figure[class*='text-pull-'] {
background-color: rgba($stratos, .2); background-color: rgba($stratos, .2);
} }
/* -- Text shadow -- */
.text-shadow { .text-shadow {
text-shadow: 0 0 40px rgba($black, .5); text-shadow: 0 0 40px rgba($black, .5);
} }
/* -- time, ampersands, prepositions (for, of...), symbols...
[class*='card-'] time, [class*='card-'] time,
h1 span { h1 span {
color: #abd; color: #abd;
} }
/* -- <pre> comment -- */
.code-comment { .code-comment {
color: rgba(70, 170, 130, .9); color: rgba(70, 170, 130, .9);
text-shadow: none; text-shadow: none;
} }
/*=========================================
Header/Nav
=========================================== */
header[role='banner'] { header[role='banner'] {
background-color: $white; background-color: $white;
} }
@@ -257,6 +286,9 @@ nav[role='navigation'] li {
} }
} }
/*===================================================
.flexblock li hover/active
===================================================== */
.flexblock li.active a, .flexblock li.active a,
.metrics li:hover, .metrics li:hover,
.specs li:hover, .specs li:hover,
@@ -264,6 +296,9 @@ nav[role='navigation'] li {
background-color: rgba($stratos, .03); background-color: rgba($stratos, .03);
} }
/*=========================================
Features & Clients List
=========================================== */
.features li, .features li,
.clients li { .clients li {
background-color: rgba($white, .9); background-color: rgba($white, .9);
@@ -279,6 +314,9 @@ nav[role='navigation'] li {
box-shadow: 0 8px 16px rgba($stratos, .02), 0 4px 16px rgba($black, .08); box-shadow: 0 8px 16px rgba($stratos, .02), 0 4px 16px rgba($black, .08);
} }
/*============================
.flexblock with border
============================== */
.border { .border {
border-bottom: 1px solid rgba($stratos, .1); border-bottom: 1px solid rgba($stratos, .1);
border-right: 1px solid rgba($stratos, .1); border-right: 1px solid rgba($stratos, .1);
@@ -293,6 +331,9 @@ nav[role='navigation'] li {
border: 0; border: 0;
} }
/*===========================================
flexblock.steps
============================================= */
.steps li:nth-child(1) { .steps li:nth-child(1) {
background-color: #e8eef7; background-color: #e8eef7;
} }
@@ -337,6 +378,9 @@ nav[role='navigation'] li {
} }
} }
/*=========================================================
Items: You can use for settings, drag&drop, close/delete...
=========================================================== */
.specs li:after { .specs li:after {
background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%); background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%);
} }
@@ -345,6 +389,9 @@ nav[role='navigation'] li {
background: none; background: none;
} }
/*=========================================================
Why/Steps/Motivation/Reasons - Decimal/Numbers
=========================================================== */
.reasons li:after { .reasons li:after {
background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%); background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%);
} }
@@ -353,6 +400,9 @@ nav[role='navigation'] li {
background: none; background: none;
} }
/*=========================================
Overlays
=========================================== */
.overlay { .overlay {
background-color: rgba($black, .2); background-color: rgba($black, .2);
} }
@@ -367,6 +417,9 @@ li:hover .overlay {
text-shadow: 0 1px 0 #111; text-shadow: 0 1px 0 #111;
} }
/*=========================================
Gallery li+.overlay+image
=========================================== */
.gallery li { .gallery li {
background-color: rgba($stratos, .06); background-color: rgba($stratos, .06);
box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .03); box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .03);
@@ -393,11 +446,15 @@ li:hover .overlay {
color: #aaa; color: #aaa;
} }
/*Arrow */
.gallery li figcaption:before { .gallery li figcaption:before {
border: .8rem solid $black; border: .8rem solid $black;
border-color: transparent transparent $white $white; border-color: transparent transparent $white $white;
} }
/*=========================================
Plans / Pricing
=========================================== */
.plans>li div, .plans>li div,
.flexblock.plans li:hover div { .flexblock.plans li:hover div {
background-color: $white; background-color: $white;
@@ -430,6 +487,9 @@ li:hover .overlay {
text-shadow: none; text-shadow: none;
} }
/*============================
Activity/CV/Timeline/News
============================== */
.activity li { .activity li {
border-top: .1rem solid rgba($stratos, .1); border-top: .1rem solid rgba($stratos, .1);
} }
@@ -438,6 +498,9 @@ li:hover .overlay {
background-color: rgba($stratos, .02); background-color: rgba($stratos, .02);
} }
/*=========================================
Resume/Work/CV/Portfolio
=========================================== */
.work-label, .work-label,
.work li a { .work li a {
border-bottom: 1px solid rgba($stratos, .1); border-bottom: 1px solid rgba($stratos, .1);
@@ -451,23 +514,34 @@ li:hover .overlay {
background-color: rgba($stratos, .04); background-color: rgba($stratos, .04);
} }
/*===========================================
Clients / Services / Logos...
============================================= */
.clients.border figcaption { .clients.border figcaption {
border-top: 1px solid rgba($stratos, .1); border-top: 1px solid rgba($stratos, .1);
} }
/*====================
LOGOS
====================== */
/* --- Images (black logo/image) --- */
img.blacklogo { img.blacklogo {
background: none; background: none;
filter: grayscale(100%) brightness(10%) contrast(100%); filter: grayscale(100%) brightness(10%) contrast(100%);
} }
/* --- Images (gray logo/image) --- */
img.graylogo { img.graylogo {
filter: grayscale(100%) brightness(10%) contrast(10%); filter: grayscale(100%) brightness(10%) contrast(10%);
} }
/* --- Images (white Logo/Image) --- */
img.whitelogo { img.whitelogo {
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
} }
/* --- Logo/Images Hover --- */
li:hover img.blacklogo, li:hover img.blacklogo,
li:hover img.graylogo, li:hover img.graylogo,
img.blacklogo:hover, img.blacklogo:hover,
@@ -477,10 +551,14 @@ img.graylogo:hover {
transition: all .6s ease; transition: all .6s ease;
} }
/*=========================================================
Cards
=========================================================== */
[class*='card-'] > a { [class*='card-'] > a {
color: inherit; color: inherit;
} }
/* --- card ul specs --- */
.description>li { .description>li {
border-bottom: 1px solid rgba($stratos, .1); border-bottom: 1px solid rgba($stratos, .1);
} }
@@ -489,16 +567,19 @@ img.graylogo:hover {
border-bottom: 0; border-bottom: 0;
} }
/*== Figure Background === */
[class*='card-'][class*='bg-'] figure { [class*='card-'][class*='bg-'] figure {
background-color: rgba($stratos, .06); background-color: rgba($stratos, .06);
} }
/*== Ficaption Cards === */
[class*='card'] figcaption, [class*='card'] figcaption,
[class*='card'] figcaption a { [class*='card'] figcaption a {
background: linear-gradient(to bottom, rgba($black, 0) 0%, rgba($black, .2) 100%); background: linear-gradient(to bottom, rgba($black, 0) 0%, rgba($black, .2) 100%);
color: $white; color: $white;
} }
/*===CTA (Call to Action - Numbers, Price, Promo...) ===== */
@media (min-width: 768px) { @media (min-width: 768px) {
.cta .benefit { .cta .benefit {
border-image: linear-gradient(90deg, transparent, rgba($black, .4) 50%, transparent) 1 100%; border-image: linear-gradient(90deg, transparent, rgba($black, .4) 50%, transparent) 1 100%;
@@ -507,6 +588,9 @@ img.graylogo:hover {
} }
} }
/*=========================================
Tables
=========================================== */
table td, table td,
th, th,
thead { thead {
@@ -530,6 +614,9 @@ tr:nth-child(even)>td:hover {
background-color: rgba($white, .5); background-color: rgba($white, .5);
} }
/*============================
Browser (Screenshots)
============================== */
.browser { .browser {
border: 1px solid rgba($stratos, .1); border: 1px solid rgba($stratos, .1);
} }
@@ -538,6 +625,7 @@ tr:nth-child(even)>td:hover {
box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1); box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1);
} }
/*=== Topbar === */
.browser:before { .browser:before {
background-color: rgba($stratos, .1); background-color: rgba($stratos, .1);
border-bottom: 1px solid rgba($stratos, .2); border-bottom: 1px solid rgba($stratos, .2);
@@ -549,6 +637,9 @@ tr:nth-child(even)>td:hover {
color: $white; color: $white;
} }
/*=========================================
Forms
=========================================== */
input, input,
textarea { textarea {
background-color: #fafbfc; background-color: #fafbfc;
@@ -650,11 +741,13 @@ legend {
color: $white; color: $white;
} }
/* Inputs/Buttons - hover */
input:hover, input:hover,
select:hover { select:hover {
box-shadow: 0 0 8px rgba($black, .3); box-shadow: 0 0 8px rgba($black, .3);
} }
/* App Store Badges */
[class*='badge-'] { [class*='badge-'] {
background-color: $black; background-color: $black;
border: 1px solid #345; border: 1px solid #345;
@@ -664,6 +757,9 @@ form .flexblock li:hover {
background-color: rgba($black, .05); background-color: rgba($black, .05);
} }
/*============================
Table of Contents
============================== */
.toc, .toc,
.toc ol>li:before, .toc ol>li:before,
.chapter { .chapter {
@@ -674,6 +770,9 @@ form .flexblock li:hover {
border-bottom: 1px dotted rgba($black, .9); border-bottom: 1px dotted rgba($black, .9);
} }
/*============================
Slides (Counter/Arrows)
============================== */
#counter, #counter,
#navigation a { #navigation a {
color: #abc; color: #abc;
@@ -684,10 +783,16 @@ form .flexblock li:hover {
color: $white; color: $white;
} }
/*============================
Footer
============================== */
footer[role='contentinfo'] { footer[role='contentinfo'] {
background-color: $white; background-color: $white;
} }
/*============================
Slides Index
============================== */
#webslides-zoomed .column > .wrap-zoom { #webslides-zoomed .column > .wrap-zoom {
background-color: $catskill-white; background-color: $catskill-white;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .04); box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .04);