SHOW:
|
|
- or go back to the newest paste.
1 | @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700;800&display=swap"); | |
2 | ||
3 | #app { | |
4 | background-position: right; | |
5 | } | |
6 | #app #sortable, | |
7 | #app main { | |
8 | padding: 20px; | |
9 | } | |
10 | #config-buttons { | |
11 | bottom: 50%; | |
12 | transform: translateY(50%); | |
13 | border-top-left-radius: 10px; | |
14 | border-bottom-left-radius: 10px; | |
15 | box-shadow: rgba(255, 255, 255, 0.1) -1px 1px 1px 0, rgba(255, 255, 255, 0.1) 0 -1px 1px 0, | |
16 | rgba(0, 0, 0, 0.1) -1px 0 20px 5px; | |
17 | background-color: rgba(40, 40, 40, 0.25); | |
18 | backdrop-filter: blur(10px); | |
19 | -webkit-backdrop-filter: blur(10px); | |
20 | } | |
21 | #config-buttons a { | |
22 | background: none; | |
23 | } | |
24 | #config-buttons a svg { | |
25 | transition: all 0.1s ease-in-out; | |
26 | color: rgba(255, 255, 255, 0.5); | |
27 | } | |
28 | #config-buttons a:hover svg { | |
29 | transform: scale(1.1); | |
30 | color: rgba(255, 255, 255, 0.95); | |
31 | } | |
32 | ||
33 | .black { | |
34 | color: white !important; | |
35 | } | |
36 | ||
37 | .item { | |
38 | box-shadow: rgba(0, 0, 0, 0.05) -1px -1px 5px 0, rgba(0, 0, 0, 0.15) 0px 20px 25px -5px, | |
39 | rgba(0, 0, 0, 0.04) 0px 10px 10px -5px !important; | |
40 | border-radius: 12px; | |
41 | background-image: none; | |
42 | border: none; | |
43 | outline: none; | |
44 | height: 100px; | |
45 | width: 300px; | |
46 | margin: 1.25rem; | |
47 | padding: 1rem 55px 1rem 1rem; | |
48 | transition: all 0.25s ease-in-out; | |
49 | transition-property: transform, box-shadow, background-color; | |
50 | background-color: rgba(255, 255, 255, 0.4) !important; | |
51 | backdrop-filter: blur(10px); | |
52 | -webkit-backdrop-filter: blur(10px); | |
53 | } | |
54 | .item:after { | |
55 | height: 100px; | |
56 | opacity: 0.2; | |
57 | } | |
58 | .item:hover { | |
59 | transform: scale(1.1); | |
60 | background-color: rgba(255, 255, 255, 0.2) !important; | |
61 | box-shadow: rgba(0, 0, 0, 0.1) 0px 60px 40px -7px !important; | |
62 | } | |
63 | .item .svg-inline--fa { | |
64 | height: 100px; | |
65 | vertical-align: middle; | |
66 | opacity: 0.2; | |
67 | } | |
68 | ||
69 | @media only screen and (max-width: 750px) { | |
70 | .item { | |
71 | padding-top: 2rem; | |
72 | padding-bottom: 2rem; | |
73 | } | |
74 | #config-buttons { | |
75 | display: none; | |
76 | } | |
77 | } | |
78 | ||
79 | .details * { | |
80 | color: white !important; | |
81 | } | |
82 | .details { | |
83 | padding: 0 0.5rem; | |
84 | } | |
85 | ||
86 | .app-icon { | |
87 | filter: drop-shadow(1px 1px 2px rgba(10, 0, 20, 0.1)); | |
88 | } | |
89 | ||
90 | .livestats-container { | |
91 | margin-top: 0.5rem; | |
92 | } | |
93 | .livestats-container .livestats .title { | |
94 | margin-bottom: 3px; | |
95 | } | |
96 | .livestats-container .livestats li { | |
97 | padding-right: 1rem; | |
98 | } | |
99 | ||
100 | .livestats-container strong { | |
101 | font-weight: 500 !important; | |
102 | padding: 0 2px; | |
103 | } | |
104 | ||
105 | .details > .title { | |
106 | font-weight: 800; | |
107 | font-size: 1.3rem !important; | |
108 | letter-spacing: 1px; | |
109 | font-family: "Raleway", sans-serif; | |
110 | text-shadow: rgba(10, 0, 60, 0.25) 1px 0 5px; | |
111 | text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 2px rgba(10, 0, 60, 0.25); | |
112 | transition: all 0.25s ease-in-out; | |
113 | } | |
114 | .item:hover .details > .title { | |
115 | text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 5px rgba(10, 0, 60, 0.2); | |
116 | } | |
117 |