Update style.css
This commit is contained in:
Justin
GitHub
parent
db764be44e
commit
b7416f5e0a
442
static/style.css
442
static/style.css
@ -103,6 +103,18 @@ header {
|
||||
background-color: black;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.set-btn:focus,
|
||||
.fa-chevron-right:focus,
|
||||
.fa-chevron-left:focus,
|
||||
.fa-chevron-up:focus,
|
||||
.fa-chevron-down:focus,
|
||||
.fa-minus:focus,
|
||||
.update-btn:focus,
|
||||
.save-btn:focus {
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.row-2 {
|
||||
border-bottom: 2px solid white;
|
||||
padding-bottom: 30px;
|
||||
@ -121,6 +133,12 @@ header {
|
||||
height: 370px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.features-div-two ul {
|
||||
padding:0.8rem;
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
.display-features-list {
|
||||
list-style-type: none;
|
||||
}
|
||||
@ -383,5 +401,429 @@ li.active {
|
||||
}
|
||||
|
||||
|
||||
.main-div {
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.main-div2::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
||||
box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
||||
z-index: -1;
|
||||
-webkit-animation-name: gradient-shadow;
|
||||
animation-name: gradient-shadow;
|
||||
-webkit-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
.main-div3::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
-webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
||||
box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
||||
z-index: -1;
|
||||
-webkit-animation-name: half-yellow-shadow;
|
||||
animation-name: half-yellow-shadow;
|
||||
-webkit-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
-webkit-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
}
|
||||
|
||||
.main-div3::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
-webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
||||
box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
||||
z-index: -1;
|
||||
-webkit-animation-name: half-cyan-shadow;
|
||||
animation-name: half-cyan-shadow;
|
||||
-webkit-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
-webkit-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
padding: 20px;
|
||||
background-color: #060C1F;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes yellow-shadow {
|
||||
0% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
25% {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
75% {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes yellow-shadow {
|
||||
0% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
25% {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
75% {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes cyan-shadow {
|
||||
0% {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
25% {
|
||||
right: 0;
|
||||
bottom: 50%;
|
||||
}
|
||||
50% {
|
||||
right: 50%;
|
||||
bottom: 50%;
|
||||
}
|
||||
75% {
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
}
|
||||
100% {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cyan-shadow {
|
||||
0% {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
25% {
|
||||
right: 0;
|
||||
bottom: 50%;
|
||||
}
|
||||
50% {
|
||||
right: 50%;
|
||||
bottom: 50%;
|
||||
}
|
||||
75% {
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
}
|
||||
100% {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gradient-shadow {
|
||||
0% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
||||
box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
||||
}
|
||||
20% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
||||
box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
||||
}
|
||||
40% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
|
||||
box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
|
||||
}
|
||||
60% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
||||
box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
||||
}
|
||||
80% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
|
||||
box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
|
||||
}
|
||||
100% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
||||
box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-shadow {
|
||||
0% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
||||
box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
||||
}
|
||||
20% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
||||
box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
||||
}
|
||||
40% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
|
||||
box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
|
||||
}
|
||||
60% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
||||
box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
||||
}
|
||||
80% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
|
||||
box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
|
||||
}
|
||||
100% {
|
||||
-webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
||||
box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes half-yellow-shadow {
|
||||
0% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
16.66% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
32.32% {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
49.98% {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
66.64% {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
83.3% {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes half-yellow-shadow {
|
||||
0% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
16.66% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
32.32% {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
49.98% {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
66.64% {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
83.3% {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes half-cyan-shadow {
|
||||
0% {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
16.66% {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
32.32% {
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
49.98% {
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
66.64% {
|
||||
bottom: 50%;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
83.3% {
|
||||
bottom: 50%;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes half-cyan-shadow {
|
||||
0% {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
16.66% {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
32.32% {
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
49.98% {
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
66.64% {
|
||||
bottom: 50%;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
83.3% {
|
||||
bottom: 50%;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user