forked from MrAlpha786/getstarted
-
-
Notifications
You must be signed in to change notification settings - Fork 3
/
colors-dracula.css
113 lines (95 loc) · 2.44 KB
/
colors-dracula.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/* Dracula Colors */
:root {
/* GLOBAL COLORS */
--bg: #282a36;
--fg: #f8f8f2;
--secondaryBg: rgba(68, 71, 90, 0.95);
--black: #282a36;
--blue: rgb(98, 114, 164);
--cyan: #8be9fd;
--green: #50fa7b;
--orange: #ffb86c;
--purple: #9580ff;
--red: #ff5555;
--white: #f8f8f2;
--yellow: #f1fa8c;
}
/* Colors */
.tab.active[data-tab^="tab"] {
font-weight: 700;
}
.tab.active[data-tab*="1"],
.content[data-tab*="1"] a:hover,
.tab[data-tab*="1"]:hover {
background-color: var(--blue);
color: var(--white);
/* FIX FOR DRACULA-EST THEME */
}
.tab.active[data-tab*="2"],
.content[data-tab*="2"] a:hover,
.tab[data-tab*="2"]:hover {
background-color: var(--green);
color: var(--black);
/* FIX FOR DRACULA-EST THEME */
}
.tab.active[data-tab*="3"],
.content[data-tab*="3"] a:hover,
.tab[data-tab*="3"]:hover {
background-color: var(--yellow);
color: var(--black);
/* FIX FOR DRACULA-EST THEME */
}
.tab.active[data-tab*="4"],
.content[data-tab*="4"] a:hover,
.tab[data-tab*="4"]:hover {
background-color: var(--red);
color: var(--white);
/* FIX FOR DRACULA-EST THEME */
}
.tab.active[data-tab*="5"],
.content[data-tab*="5"] a:hover,
.tab[data-tab*="5"]:hover {
background-color: var(--purple);
color: var(--black);
/* FIX FOR DRACULA-EST THEME */
}
/* FIX FOR DRACULA-EST THEME */
.tab.active[data-tab*="1"] a:hover {
color: var(--black);
}
.tab.active[data-tab*="2"] a:hover {
color: var(--black);
}
.tab.active[data-tab*="3"] a:hover {
color: var(--black);
}
/* Screens larger than a average phone */
@media screen and (min-width: 800px) {
#tab-container {
background-color: transparent !important;
}
.tab[data-tab*="1"] {
background: var(--blue) !important;
color: var(--white) !important;
/* FIX FOR DRACULA-EST THEME */
}
.tab[data-tab*="2"] {
background: var(--green) !important;
color: var(--black) !important;
/* FIX FOR DRACULA-EST THEME */
}
.tab[data-tab*="3"] {
background: var(--yellow) !important;
color: var(--black) !important;
/* FIX FOR DRACULA-EST THEME */
}
.tab[data-tab*="4"] {
background: var(--red) !important;
color: var(--white) !important;
/* FIX FOR DRACULA-EST THEME */
}
.tab[data-tab*="5"] {
background: var(--purple) !important;
color: var(--black) !important;
/* FIX FOR DRACULA-EST THEME */
}