-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
113 lines (100 loc) · 2.11 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/* Theme Overides */
:root {
font-family: "Inter", "Roboto", sans-serif;
/* --animation-duration: ; */
/* --background-alt: ; */
--background-body: rgba(30, 30, 30, 100%);
--background: rgba(30, 30, 30, 100%);
/* --border: ; */
/* --button-hover: ; */
/* --code: ; */
--focus: rgba(255, 20, 20, 15%);
/* --form-placeholder: ; */
/* --form-text: ; */
/* --highlight: ; */
/* --links: ; */
/* --scrollbar-thumb-hover: ; */
/* --scrollbar-thumb: ; */
/* --select-arrow: ; */
/* --selection: ; */
/* --text-bright: ; */
/* --text-main: ; */
/* --text-muted: ; */
/* --variable: ; */
--character-height: 5rem;
}
/* Custom Styles */
body {
max-width: 95.75rem;
}
.nav-list {
padding: 0rem;
}
.nav-list li {
display: inline;
list-style-type: none;
margin: 0rem;
padding: 0rem;
}
.tier-heading {
margin: 0.5rem;
}
.tier-section {
display: flex;
flex-wrap: wrap;
min-height: calc(var(--character-height) + 0.375rem);
padding: 0rem;
margin: 0rem 0.195rem 0rem 0.195rem;
transition: all 150ms ease-in-out;
}
.tier-section--over {
padding: 0rem;
background-color: var(--focus);
}
.dragging {
/* Do something when the character image is being dragged */
}
.character-img-wrapper {
position: relative;
border: 0.0625rem solid var(--text-main);
max-height: var(--character-height);
margin: 0.125rem;
z-index: 1;
background: rgb(55, 0, 0, 15%);
box-shadow: 0rem 0rem 0.125rem red;
overflow: hidden;
}
.character-img-wrapper::before {
max-height: var(--character-height);
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(
circle,
rgba(55, 0, 0, 1) 0%,
rgba(103, 0, 0, 1) 45%,
rgba(148, 6, 6, 1) 70%,
rgba(255, 20, 20, 1) 100%
);
z-index: -1;
transition: all 200ms ease-out;
opacity: 0;
}
.character-img-wrapper:hover::before {
box-shadow: 0rem 0rem 0.625rem red;
opacity: 1;
}
.character-img {
display: block;
transition: all 100ms ease-out;
height: var(--character-height);
}
.character-img:hover {
transform: scale(1.15);
}
.svg {
color: var(--text-main);
}