Made minimal dark version
This commit is contained in:
@@ -2,14 +2,14 @@
|
||||
text-align: center;
|
||||
i {
|
||||
font-size: 160px;
|
||||
color: @blue;
|
||||
color: @light-gray;
|
||||
}
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
#share {
|
||||
text-align:center;
|
||||
background: @blue;
|
||||
background: @dark-blue;
|
||||
color: #fff;
|
||||
i {
|
||||
font-size: 50px;
|
||||
@@ -28,24 +28,25 @@
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
background: @dark-blue;
|
||||
background: @light-blue;
|
||||
padding: 30px 0;
|
||||
p {
|
||||
margin: 0;
|
||||
color: @white;
|
||||
}
|
||||
i {
|
||||
color: @red;
|
||||
}
|
||||
a {
|
||||
color: @light-gray;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
#features {
|
||||
background: @light-gray;
|
||||
background: @dark-gray;
|
||||
text-align: center;
|
||||
i {
|
||||
color: @blue;
|
||||
color: @light-gray;
|
||||
font-size: 160px;
|
||||
}
|
||||
padding: 40px 0;
|
||||
@@ -58,7 +59,7 @@ footer {
|
||||
code {
|
||||
display:block;
|
||||
padding: 20px;
|
||||
background: @light-gray;
|
||||
background: @dark-gray;
|
||||
font-family: @font-family-mono;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
body {
|
||||
max-width: 2000px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: #383c49;
|
||||
}
|
||||
|
||||
.browsehappy {
|
||||
@@ -16,7 +16,7 @@ body {
|
||||
ul {
|
||||
list-style: none;
|
||||
max-width: 400px;
|
||||
marghomein: 0 auto;
|
||||
// marghomein: 0 auto;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
@@ -26,22 +26,13 @@ body {
|
||||
text-align: center;
|
||||
font-family: @font-family-mono;
|
||||
margin-bottom: 15px;
|
||||
color: @dark-blue;
|
||||
color: @light-blue;
|
||||
font-size: 35px;
|
||||
}
|
||||
@media (min-width: @screen-sm-min) {
|
||||
ul {
|
||||
float: right;
|
||||
margin: 33px 0;
|
||||
}
|
||||
h1 {
|
||||
float: left
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
color: @dark-gray;
|
||||
color: @dark-blue;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,9 +48,9 @@ body {
|
||||
.btn-cta {
|
||||
.transition(all @animation-duration);
|
||||
padding: 10px 50px;
|
||||
border: 2px solid @red;
|
||||
border: 2px solid @light-blue;
|
||||
font-size: 20px;
|
||||
color: @red;
|
||||
color: @light-blue;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
@@ -68,6 +59,16 @@ body {
|
||||
border-color: @dark-blue;
|
||||
color: @dark-blue;
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
border-color: @dark-blue;
|
||||
color: @dark-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
color: @red;
|
||||
border-color: @red;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@@ -76,10 +77,6 @@ body {
|
||||
.container;
|
||||
}
|
||||
|
||||
section {
|
||||
// padding: 50px 0
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
@@ -87,7 +84,7 @@ img {
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: @dark-blue;
|
||||
color: @light-blue;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
@@ -99,4 +96,9 @@ a {
|
||||
}
|
||||
::-moz-selection {
|
||||
background: @red;
|
||||
}
|
||||
|
||||
img.navimg {
|
||||
max-height: 250px;
|
||||
display: block;
|
||||
}
|
||||
@@ -48,7 +48,7 @@
|
||||
padding-bottom: 50px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: @dark-blue;
|
||||
background: @term;
|
||||
.transition(all @animation-duration ease);
|
||||
.btn-cta {
|
||||
padding: 5px 10px;
|
||||
@@ -65,9 +65,6 @@
|
||||
}
|
||||
.border-bottom-radius (5px);
|
||||
|
||||
}
|
||||
.dragged {
|
||||
background: lighten(@dark-blue, 5%)!important;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
@@ -78,9 +75,9 @@
|
||||
.border-top-radius (0);
|
||||
|
||||
.border-bottom-radius (5px);
|
||||
background: @dark-blue;
|
||||
background: @term;
|
||||
// background: url(../images/terminal.svg);
|
||||
backbground-repeat: no-repeat;
|
||||
// backbground-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@@ -136,8 +133,8 @@
|
||||
h3 {color: #fff;
|
||||
font-size: 25px;
|
||||
}
|
||||
background: @blue;
|
||||
background: @light-gray;
|
||||
.btn-cta {
|
||||
border-color: @dark-blue;
|
||||
border-color: @light-blue;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
#features {
|
||||
background: @light-gray;
|
||||
background: @dark-gray;
|
||||
text-align: center;
|
||||
h3 {
|
||||
margin-top: -20px;
|
||||
@@ -11,7 +11,7 @@
|
||||
font-size: 18px
|
||||
}
|
||||
i {
|
||||
color: @blue;
|
||||
color: @dark-blue;
|
||||
font-size: 100px;
|
||||
}
|
||||
padding:100px 0;
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
#share {
|
||||
text-align:center;
|
||||
background: @blue;
|
||||
background: @dark-blue;
|
||||
color: #fff;
|
||||
i {
|
||||
font-size: 50px;
|
||||
@@ -74,7 +74,7 @@
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
background: @light-gray;
|
||||
background: @dark-gray;
|
||||
padding: 50px 0;
|
||||
a {
|
||||
font-size: 20px;
|
||||
@@ -84,7 +84,7 @@
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
background: @dark-blue;
|
||||
background: @dark-gray;
|
||||
padding: 30px 0;
|
||||
color: #fff;
|
||||
p {
|
||||
@@ -94,7 +94,7 @@ footer {
|
||||
color: @red;
|
||||
}
|
||||
a {
|
||||
color: @light-gray;
|
||||
color: @white;
|
||||
}
|
||||
img {
|
||||
max-height: 40px;
|
||||
@@ -107,7 +107,7 @@ footer {
|
||||
text-align: center;
|
||||
i {
|
||||
font-size: 160px;
|
||||
color: @blue;
|
||||
color: @light-gray;
|
||||
}
|
||||
padding:100px 0;
|
||||
@media (min-width: @screen-sm-min) {
|
||||
|
||||
@@ -62,7 +62,7 @@ padding: 0px;
|
||||
width: 50%;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
background-color: @blue;
|
||||
background-color: @light-gray;
|
||||
border-radius: 2px;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
opacity: 0;
|
||||
@@ -82,7 +82,7 @@ padding: 0px;
|
||||
color: #fff;
|
||||
}
|
||||
input {
|
||||
background-color: @light-gray;
|
||||
background-color: @dark-gray;
|
||||
color: @text-color;
|
||||
border: 0;
|
||||
font-size: 1em;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#reviews {
|
||||
background: @light-gray;
|
||||
background: @dark-gray;
|
||||
padding: 130px 0;
|
||||
.twitter-profile {
|
||||
float: left;
|
||||
|
||||
@@ -23,10 +23,10 @@
|
||||
// The default color of control backgrounds is mostly black but with a little
|
||||
// bit of blue so it can still be seen on all-black video frames, which are common.
|
||||
// Try changing to #900
|
||||
@primary-background-color: @blue; // #2B333F default
|
||||
@primary-background-color: @light-gray; // #2B333F default
|
||||
@red-primary-background-color: red(@primary-background-color);
|
||||
@green-primary-background-color: green(@primary-background-color);
|
||||
@blue-primary-background-color: blue(@primary-background-color);
|
||||
@light-gray-primary-background-color: blue(@primary-background-color);
|
||||
|
||||
// Try changing to true
|
||||
@center-big-play-button: true; // true default
|
||||
@@ -91,20 +91,20 @@
|
||||
/* IE8 - has no alpha support */
|
||||
background-color: @primary-background-color;
|
||||
/* Opacity: 1.0 = 100%, 0.0 = 0% */
|
||||
background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7);
|
||||
background-color: rgba(@red-primary-background-color, @green-primary-background-color, @light-gray-primary-background-color, 0.7);
|
||||
}
|
||||
|
||||
// Make a slightly lighter version of the main background
|
||||
// for the slider background.
|
||||
@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%);
|
||||
@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @light-gray-primary-background-color), 33%);
|
||||
@red-slider-bg-color: red(@slider-bg-color);
|
||||
@green-slider-bg-color: green(@slider-bg-color);
|
||||
@blue-slider-bg-color: blue(@slider-bg-color);
|
||||
@light-gray-slider-bg-color: blue(@slider-bg-color);
|
||||
|
||||
/* Slider - used for Volume bar and Progress bar */
|
||||
.video-js .vjs-slider {
|
||||
background-color: @slider-bg-color;
|
||||
background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
|
||||
background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.5);
|
||||
}
|
||||
|
||||
/* The slider bar color is used for the progress bar and the volume bar
|
||||
@@ -118,18 +118,18 @@
|
||||
/* The main progress bar also has a bar that shows how much has been loaded. */
|
||||
.video-js .vjs-load-progress {
|
||||
/* For IE8 we'll lighten the color */
|
||||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%);
|
||||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color), 25%);
|
||||
/* Otherwise we'll rely on stacked opacities */
|
||||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
|
||||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.5);
|
||||
}
|
||||
|
||||
/* The load progress bar also has internal divs that represent
|
||||
smaller disconnected loaded time ranges */
|
||||
.video-js .vjs-load-progress div {
|
||||
/* For IE8 we'll lighten the color */
|
||||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%);
|
||||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color), 50%);
|
||||
/* Otherwise we'll rely on stacked opacities */
|
||||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75);
|
||||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.75);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user