Made minimal dark version

This commit is contained in:
root
2020-07-18 00:00:42 +00:00
parent 96e06a2276
commit 7c6c0dc20f
37 changed files with 7009 additions and 26009 deletions

View File

@@ -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;
}
}

View File

@@ -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;
}

View File

@@ -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;
}
}

View File

@@ -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) {

View File

@@ -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;

View File

@@ -1,5 +1,5 @@
#reviews {
background: @light-gray;
background: @dark-gray;
padding: 130px 0;
.twitter-profile {
float: left;

View File

@@ -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);
}