mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-16 18:14:09 +02:00
Legacying
This commit is contained in:
Antonio Laguna
3340
static/css/legacy/base.css
Normal file
3340
static/css/legacy/base.css
Normal file
File diff suppressed because it is too large
Load Diff
921
static/css/legacy/colors.css
Normal file
921
static/css/legacy/colors.css
Normal file
@@ -0,0 +1,921 @@
|
|||||||
|
/*=========================================
|
||||||
|
WebSlides - Colors
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
/* == Backgrounds == */
|
||||||
|
|
||||||
|
/* .bg-primary */
|
||||||
|
/* .bg-secondary */
|
||||||
|
/* .bg-light */
|
||||||
|
|
||||||
|
/* == General == */
|
||||||
|
/* .bg-white */
|
||||||
|
/* .bg-black */
|
||||||
|
/* .bg-black-blue */
|
||||||
|
/* .bg-brown */
|
||||||
|
/* .bg-blue */
|
||||||
|
/* .bg-gray */
|
||||||
|
/* .bg-purple */
|
||||||
|
/* .bg-red */
|
||||||
|
|
||||||
|
/* == Brands == */
|
||||||
|
/* .bg-apple */
|
||||||
|
/* .bg-facebook */
|
||||||
|
|
||||||
|
/* == Gradients == */
|
||||||
|
/* .bg-gradient-r (radial) */
|
||||||
|
/* .bg-gradient-h (horizontal) */
|
||||||
|
/* .bg-gradient-v (vertical) */
|
||||||
|
/* .bg-gradient-white */
|
||||||
|
/* .bg-gradient-gray */
|
||||||
|
|
||||||
|
/* == Transparent/Opacity Black == */
|
||||||
|
/* .bg-trans-dark */
|
||||||
|
/* .bg-trans-light */
|
||||||
|
/* .bg-trans-gradient */
|
||||||
|
|
||||||
|
|
||||||
|
/*=========================================
|
||||||
|
Base
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #333;
|
||||||
|
background-color: #f7f9fb;
|
||||||
|
}
|
||||||
|
:focus {
|
||||||
|
box-shadow: 0 0 2px rgba(150, 187, 238, 1);
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="bg-"] a,
|
||||||
|
[class*="bg-gradient-"] a {
|
||||||
|
color: #bce;
|
||||||
|
}
|
||||||
|
.bg-brown a {color: #c23;}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.bg-white a,
|
||||||
|
.bg-light a,.bg-gradient-white a {
|
||||||
|
color: #44d;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #3af;
|
||||||
|
}
|
||||||
|
.flexblock li>a,[class*="bg-"] li>a,
|
||||||
|
[class*="bg-gradient-"] li>a,
|
||||||
|
article header a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
background: rgba(0, 20, 80, 0.2);
|
||||||
|
background: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.2) 0, rgba(255, 255, 255, 0) 75%);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr:after {
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
bbbr,
|
||||||
|
acronym {
|
||||||
|
border-bottom: 1px dotted #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark,
|
||||||
|
ins {
|
||||||
|
background-color: rgba(221,238,255, 0.8);
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background-color: rgba(221,238,255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-selection {
|
||||||
|
background-color: rgba(221,238,255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: rgba(221,238,255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
border: 1px solid rgba(0, 20, 80, 0.1);
|
||||||
|
box-shadow: 0 8px 16px rgba(0,20,80,.04),0 4px 16px rgba(0,0,0,.08);
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
pre:hover {
|
||||||
|
box-shadow: 0 8px 16px rgba(0,40,160,.08),0 8px 24px rgba(0,0,0,.08);
|
||||||
|
|
||||||
|
}
|
||||||
|
code,[class*="bg-"] pre {
|
||||||
|
background-color: rgba(255, 255, 255, 0.09);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white code{
|
||||||
|
background: rgba(0, 20, 80, 0.03);
|
||||||
|
}
|
||||||
|
/*================================================
|
||||||
|
Slides - Backgrounds <section class="bg-primary">
|
||||||
|
================================================== */
|
||||||
|
|
||||||
|
/*3 Corp Colors*/
|
||||||
|
|
||||||
|
.bg-primary {
|
||||||
|
background-color: #44d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-secondary {
|
||||||
|
background-color: #67d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-light {
|
||||||
|
background-color: #edf2f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*General Colors*/
|
||||||
|
|
||||||
|
.bg-black {
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
.bg-black-blue {
|
||||||
|
background-color: #123;
|
||||||
|
}
|
||||||
|
.bg-blue {
|
||||||
|
background-color: #346;
|
||||||
|
}
|
||||||
|
.bg-brown {
|
||||||
|
background-color: #f8f8f9;
|
||||||
|
}
|
||||||
|
.bg-gray {
|
||||||
|
background-color: #d5d9e2;
|
||||||
|
}
|
||||||
|
.bg-green {
|
||||||
|
background-color: #077;
|
||||||
|
}
|
||||||
|
.bg-purple {
|
||||||
|
background-color: #62b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-red {
|
||||||
|
background-color: #c23;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
[class*="bg-"] .bg-white {
|
||||||
|
text-shadow: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BG Apple Keynote*/
|
||||||
|
|
||||||
|
.bg-apple {
|
||||||
|
background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* BG Facebook */
|
||||||
|
|
||||||
|
.bg-facebook {
|
||||||
|
background: #3b5998;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Font Color*/
|
||||||
|
.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: #fff;
|
||||||
|
text-shadow: 0 1px 0 #013;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-light p {
|
||||||
|
color: #456;
|
||||||
|
}
|
||||||
|
/*.bg-white p,*/
|
||||||
|
.bg-brown p{color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Transparent/Opacity*/
|
||||||
|
|
||||||
|
.bg-trans-dark {
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-trans-light {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Covers/Longforms...*/
|
||||||
|
.bg-trans-gradient{
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Horizontal Gradient*/
|
||||||
|
|
||||||
|
.bg-gradient-h {
|
||||||
|
background: linear-gradient(134deg,#32b 0,#62b 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Vertical Gradient*/
|
||||||
|
|
||||||
|
.bg-gradient-v {
|
||||||
|
background: linear-gradient(to top, #62b 0%, #32b 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Radial Gradient*/
|
||||||
|
|
||||||
|
.bg-gradient-r {
|
||||||
|
background: radial-gradient(ellipse at center, #62b 0%, #32b 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*White Gradient (vertical)*/
|
||||||
|
.bg-gradient-white {
|
||||||
|
background: linear-gradient(180deg,#f2f4f6 0,#fff 100%);
|
||||||
|
color: #333;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Gray Gradient (horizontal)*/
|
||||||
|
.bg-gradient-gray{
|
||||||
|
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
|
||||||
|
color: #333;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
/*Border/Frame*/
|
||||||
|
.frame {
|
||||||
|
border: .8rem solid #fff;
|
||||||
|
}
|
||||||
|
[class*="background"].frame {
|
||||||
|
border-width: .2rem;
|
||||||
|
}
|
||||||
|
/*Layer/Box Shadow*/
|
||||||
|
.shadow,.pre {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.shadow:before,.shadow:after {
|
||||||
|
box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*============================
|
||||||
|
TYPOGRAPHY
|
||||||
|
============================== */
|
||||||
|
|
||||||
|
/* -- Horizontal separator -- */
|
||||||
|
|
||||||
|
.text-separator:before {
|
||||||
|
background-color: rgba(170, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- Pull Quote (Right/Left) -- */
|
||||||
|
|
||||||
|
[class*="text-pull-"] {
|
||||||
|
border-top: 4px solid rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
img[class*="text-pull-"],figure[class*="text-pull-"] {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
/* -- Context -- */
|
||||||
|
|
||||||
|
[class*="bg-"] .text-context:before {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.text-context:before,.bg-white .text-context:before{
|
||||||
|
background-color: rgba(0, 20, 80, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- Text shadow -- */
|
||||||
|
.text-shadow {
|
||||||
|
text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- time, ampersands, prepositions (for, of...), symbols... -- */
|
||||||
|
|
||||||
|
[class*="card-"] time,
|
||||||
|
h1 span {
|
||||||
|
color: #abd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- <pre> comment -- */
|
||||||
|
.code-comment {
|
||||||
|
color: rgba(70, 170, 130, 0.9);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=========================================
|
||||||
|
Header/Nav
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
header[role=banner] {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[role=navigation] li a {
|
||||||
|
background-color: rgba(50, 50, 50, .9);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[role=navigation] li a:hover {
|
||||||
|
background-color: rgba(50, 50, 50, .7);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[role=navigation] li a,
|
||||||
|
nav[role=navigation] li a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[role=navigation] li.active a {
|
||||||
|
background-color: #555;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
nav li.twitter a:hover {
|
||||||
|
background-color: #1da1f3;
|
||||||
|
}
|
||||||
|
nav li.facebook a:hover {
|
||||||
|
background-color: #3b5998;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li.linkedin a:hover {
|
||||||
|
background-color: #1683bb;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li.dribbble a:hover {
|
||||||
|
background-color: #ea4c89;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li.github a:hover {
|
||||||
|
background-color: #60b044;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li.email a:hover {
|
||||||
|
background: #dd4b39;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===================================================
|
||||||
|
.flexblock li hover/active
|
||||||
|
===================================================== */
|
||||||
|
|
||||||
|
.flexblock li.active a,
|
||||||
|
.metrics li:hover,
|
||||||
|
.specs li:hover,.reasons li:hover {
|
||||||
|
background-color: rgba(0, 20, 80, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=========================================
|
||||||
|
Features & Clients List
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
.features li,.clients li {
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="bg-"] .features li,
|
||||||
|
[class*="bg-"] .clients li {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.features li:hover,.clients li:hover {
|
||||||
|
box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
|
||||||
|
}
|
||||||
|
/*.features li span,.features li svg{color: #44d;}*/
|
||||||
|
|
||||||
|
/*============================
|
||||||
|
.flexblock with border
|
||||||
|
============================== */
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-right: 1px solid rgba(0, 20, 80, 0.1);
|
||||||
|
border-bottom: 1px solid rgba(0, 20, 80, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.border li {
|
||||||
|
border-top: 1px solid rgba(0, 20, 80, 0.1);
|
||||||
|
border-left: 1px solid rgba(0, 20, 80, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexblock.border li li {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===========================================
|
||||||
|
flexblock.steps
|
||||||
|
============================================= */
|
||||||
|
|
||||||
|
.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-top: 15px solid transparent;
|
||||||
|
border-bottom: 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*=========================================================
|
||||||
|
Items: You can use for settings, drag&drop, close/delete...
|
||||||
|
=========================================================== */
|
||||||
|
|
||||||
|
.specs li:after {
|
||||||
|
background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.specs li:last-child:after {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.specs li {background: rgba(255,255,255,0.2);}*/
|
||||||
|
|
||||||
|
/*=========================================================
|
||||||
|
Why/Steps/Motivation/Reasons - Decimal/Numbers
|
||||||
|
=========================================================== */
|
||||||
|
|
||||||
|
.reasons li:after {
|
||||||
|
background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reasons li:last-child:after {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=========================================
|
||||||
|
Overlays
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
/*background-color: rgba(255,255,255 , 0.9);*/
|
||||||
|
/*border: 3px double #fff;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover .overlay {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay,
|
||||||
|
.overlay a {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 1px 0 #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*=========================================
|
||||||
|
Gallery li+.overlay+image
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
.gallery li {
|
||||||
|
background-color: rgba(0, 20, 80, 0.06);
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery li figcaption {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexblock.gallery li:hover {
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
.gallery li footer {
|
||||||
|
border-top:1px solid rgba(0,20,80,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery li a {
|
||||||
|
color: #333;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
.flesblock.gallery li a footer{color: #aaa;}
|
||||||
|
/*Arrow */
|
||||||
|
|
||||||
|
.gallery li figcaption:before {
|
||||||
|
border: .8rem solid black;
|
||||||
|
border-color: transparent transparent #fff #fff;
|
||||||
|
/*box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*=========================================
|
||||||
|
Plans / Pricing
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
.plans>li div,
|
||||||
|
.flexblock.plans li:hover div {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans>li:hover,
|
||||||
|
.plans>li:nth-child(2) {
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans:hover li:nth-child(2):not(:hover) {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans li h2 {
|
||||||
|
background-color: rgba(0, 20, 80, 0.5);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans ul li {
|
||||||
|
border-bottom: 1px solid rgba(0, 20, 80, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans ul li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans>li>a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans>li>a {
|
||||||
|
color: #333;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*============================
|
||||||
|
Activity/CV/Timeline/News
|
||||||
|
============================== */
|
||||||
|
|
||||||
|
.activity li {
|
||||||
|
border-top: .1rem solid rgba(0, 20, 80, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity li:hover {
|
||||||
|
background-color: rgba(0, 20, 80, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*=========================================
|
||||||
|
Resume/Work/CV/Portfolio
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
.work-label,
|
||||||
|
.work li a {
|
||||||
|
border-bottom: 1px solid rgba(0, 20, 80, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.work li:nth-child(odd)>a {
|
||||||
|
background-color: rgba(0, 20, 80, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.work li a:hover {
|
||||||
|
background-color: rgba(0, 20, 80, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*===========================================
|
||||||
|
Clients / Services / Logos...
|
||||||
|
============================================= */
|
||||||
|
|
||||||
|
|
||||||
|
.clients.border figcaption {border-top:1px solid rgba(0,20,80,0.1);
|
||||||
|
}
|
||||||
|
/*.clients>li {
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*====================
|
||||||
|
LOGOS
|
||||||
|
====================== */
|
||||||
|
|
||||||
|
img.blacklogo {
|
||||||
|
background: none;
|
||||||
|
/* --- Images (black logo/image) --- */
|
||||||
|
-webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
|
||||||
|
filter: grayscale(100%) brightness(10%) contrast(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- Images (gray logo/image) --- */
|
||||||
|
|
||||||
|
img.graylogo {
|
||||||
|
-webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
|
||||||
|
filter: grayscale(100%) brightness(10%) contrast(10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- Images (white Logo/Image) --- */
|
||||||
|
|
||||||
|
img.whitelogo {
|
||||||
|
-webkit-filter: brightness(0) invert(1);
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- Logo/Images Hover --- */
|
||||||
|
|
||||||
|
li:hover img.blacklogo,
|
||||||
|
li:hover img.graylogo,
|
||||||
|
img.blacklogo:hover,img.graylogo:hover {
|
||||||
|
background: none;
|
||||||
|
/*Images - Original Color*/
|
||||||
|
filter: grayscale(0%);
|
||||||
|
-webkit-filter: grayscale(0%);
|
||||||
|
filter: none;
|
||||||
|
transition: all 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*=========================================================
|
||||||
|
Cards
|
||||||
|
=========================================================== */
|
||||||
|
|
||||||
|
[class*="card-"]>a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- card ul specs --- */
|
||||||
|
|
||||||
|
.description>li {
|
||||||
|
border-bottom: 1px solid rgba(0, 20, 80, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description>li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*== Figure Background === */
|
||||||
|
|
||||||
|
[class*="card-"][class*="bg-"] figure {
|
||||||
|
background-color: rgba(0, 20, 80, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*== Ficaption Cards === */
|
||||||
|
|
||||||
|
[class*="card"] figcaption,
|
||||||
|
[class*="card"] figcaption a {
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
/*===CTA (Call to Action - Numbers, Price, Promo...) ===== */
|
||||||
|
.cta .benefit {
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
|
||||||
|
-webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
|
||||||
|
-moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*=========================================
|
||||||
|
Tables
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
table td,
|
||||||
|
th,
|
||||||
|
thead {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even)>td {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr>td {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
td:hover,
|
||||||
|
tr:nth-child(even)>td:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*============================
|
||||||
|
Browser (Screenshots)
|
||||||
|
============================== */
|
||||||
|
|
||||||
|
.browser {
|
||||||
|
border: 1px solid rgba(0, 20, 80, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser:hover {
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*=== Topbar === */
|
||||||
|
|
||||||
|
.browser:before {
|
||||||
|
background-color: rgba(0, 20, 80, 0.1);
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
border-bottom: 1px solid rgba(0, 20, 80, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser:hover:before {
|
||||||
|
background-color: rgba(0, 20, 80, 0.12);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*=========================================
|
||||||
|
Forms
|
||||||
|
=========================================== */
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
background-color: #fafbfc;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
textarea:focus {
|
||||||
|
background-color: #fff;
|
||||||
|
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: 0px 10px 16px -8px rgba(0, 20, 80, 0.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 #44d;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[type="submit"],
|
||||||
|
input[type="submit"],
|
||||||
|
.button,.button:hover,button[type="submit"]:hover,input[type="submit"]:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #44d;
|
||||||
|
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: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="bg-"] a.button {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white a.button.ghost,.bg-gradient-white a.button.ghost {color: #333;border: 1px solid #44d;}
|
||||||
|
|
||||||
|
:disabled,
|
||||||
|
button:disabled:hover {
|
||||||
|
background-color: #eee;
|
||||||
|
border-color: #eee;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid #44d;
|
||||||
|
background-color: rgba(0, 20, 80, 0.2)
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Inputs/Buttons - hover */
|
||||||
|
|
||||||
|
input:hover,
|
||||||
|
select:hover {
|
||||||
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* App Store Badges */
|
||||||
|
|
||||||
|
[class*="badge-"] {
|
||||||
|
border: 1px solid #345;
|
||||||
|
background-color: #000;
|
||||||
|
/* Transparent Button */
|
||||||
|
/* background: none;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
form .flexblock li:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*============================
|
||||||
|
Table of Contents
|
||||||
|
============================== */
|
||||||
|
|
||||||
|
.toc,
|
||||||
|
.toc ol>li:before,
|
||||||
|
.chapter {
|
||||||
|
background-color: #f7f9fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc li .toc-page:before {
|
||||||
|
border-bottom: 1px dotted rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*============================
|
||||||
|
Slides (Counter/Arrows)
|
||||||
|
============================== */
|
||||||
|
|
||||||
|
|
||||||
|
/*#navigation:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
#counter,
|
||||||
|
#navigation a {
|
||||||
|
color: #abc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#webslides:hover #navigation a:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*============================
|
||||||
|
Footer
|
||||||
|
============================== */
|
||||||
|
|
||||||
|
footer[role=contentinfo] {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*footer:hover {
|
||||||
|
background-color:rgba(255,255,255 , 0.3);
|
||||||
|
}
|
||||||
|
*/
|
||||||
Reference in New Issue
Block a user