forked from oswalpalash/start
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
96 lines (93 loc) · 3.76 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
@charset "utf-8";
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
text-transform: lowercase;
justify-content: center;
font-family: monospace;
align-items: center;
overflow: hidden;
font-size: 18px;
display: flex;
height: 100vh;
color: #aaa;
padding: 0;
margin: 0;
}
ul.box {
background-color: rgba(0, 0, 0, .5);
list-style: none;
display: block;
width: 45%;
padding: 0;
margin: 0;
}
ul.subMenu {
list-style: none;
display: none;
width: 100%;
padding: 0;
margin: 0;
}
a {
-webkit-transition: all .15s;
transition: all .15s;
text-decoration: none;
display: block;
outline: none;
padding: 15px;
color: #fff;
}
a:after {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all .15s;
transition: all .15s;
content: "→";
opacity: 0;
}
a:hover:after, a.active:after {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: all .15s;
transition: all .15s;
padding-left: 6px;
opacity: 1;
}
p {
padding: 15px;
margin: 0;
}
span { color: #aaa; }
.left { float: left; }
.clear { clear: both; }
.right { float: right; }
.center { text-align: center; }
div.right, div.left { width: 50%; }
body.bg1 { background: linear-gradient(to right bottom, #2F2727, #1a82f7); }
body.bg2 { background: linear-gradient(to right bottom, #282175, #8ea77b); }
body.bg3 { background: linear-gradient(to right bottom, #1F1C2C, #928DAB); }
body.bg4 { background: linear-gradient(to right bottom, #ec7972, #7879c7); }
body.bg5 { background: linear-gradient(to right bottom, #c71d37, #1d63e6); }
body.bg6 { background: linear-gradient(to right bottom, #2bdcfe, #a807b1); }
body.bg7 { background: linear-gradient(to right bottom, #6111bc, #7c90ad); }
body.bg8 { background: linear-gradient(to right bottom, #348F50, #56B4D3); }
body.bg9 { background: linear-gradient(to right bottom, #7db1c2, #315d90); }
body.bg10{ background: linear-gradient(to right bottom, #cf353b, #29a39a); }
body.bg11{ background: linear-gradient(to right bottom, #6b64be, #e0c87d); }
body.bg12{ background: linear-gradient(to right bottom, #3d72b4, #525252); }
body.bg13{ background: linear-gradient(to right bottom, #517fa4, #243949); }
body.bg14{ background: linear-gradient(to right bottom, #FFA17F, #00223E); }
body.bg15{ background: linear-gradient(to right bottom, #360033, #0b8793); }
ul > li:hover > a#parent1, a.tab1, a.tab1:hover, a#parent1:hover, a#parent1.active { background-color: #336666; }
ul > li:hover > a#parent2, a.tab2, a.tab2:hover, a#parent2:hover, a#parent2.active { background-color: #663333; }
ul > li:hover > a#parent3, a.tab3, a.tab3:hover, a#parent3:hover, a#parent3.active { background-color: #336633; }
ul > li:hover > a#parent4, a.tab4, a.tab4:hover, a#parent4:hover, a#parent4.active { background-color: #663366; }
ul > li:hover > a#parent5, a.tab5, a.tab5:hover, a#parent5:hover, a#parent5.active { background-color: #84AED0; }
.tab5 img{margin-right:8px;}
ul > li:hover > a#parent6, a.tab6, a.tab6:hover, a#parent6:hover, a#parent6.active { background-color: #666633; }
a#parent1:after, a#parent2:after, a#parent3:after, a#parent4:after, a#parent5:after, a#parent6:after { content: "↓"; }
a#parent1.active:after, a#parent2.active:after, a#parent3.active:after, a#parent4.active:after, a#parent5.active:after, a#parent6.active:after { content: "↑"; }
ul > li:hover > a#parent1, ul > li:hover > a#parent2, ul > li:hover > a#parent3, ul > li:hover > a#parent4, ul > li:hover > a#parent5, ul > li:hover > a#parent6, a:hover, a.active { opacity: 1; }
a#parent5.active .right, a.tab5 span.right { color: #fff !important; }
@media (max-width: 768px) { ul.box { width: 70%; } }