g6
This commit is contained in:
Turtle committed
1 parent
565c1b9911
commit
28490ce8b3
36 files changed
+587
-179
No files matched your search
@@ -0,0 +1,303 @@
|
||||
:root {
|
||||
--accent_color_fg: rgba(0, 123, 255, 1);
|
||||
--accent_color_fg_o: rgba(0, 123, 255, 0.5);
|
||||
--accent_color_bg: rgba(137, 197, 221, 1);
|
||||
--accent_color_bg_o: rgba(137, 197, 221, 0.5);
|
||||
--accent_color_bg_o2: rgba(137, 197, 221, 0.25);
|
||||
--main_color_fg: white;
|
||||
--main_color_bg: black;
|
||||
--border-radius: 10px;
|
||||
--def-shadow: 10px 20px 20px rgb(128, 128, 128, 0.5);
|
||||
--reversed_def_shadow: inset 1px 2.5px 2.5px rgb(128, 128, 128, 0.5);
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline-style: none;
|
||||
}
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
overscroll-behavior: none;
|
||||
touch-action: pan-x pan-y;
|
||||
font-size: 20px;
|
||||
}
|
||||
::selection {
|
||||
background-color: var(--accent_color_fg_o);
|
||||
color: black;
|
||||
}
|
||||
.selectable {
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
/* ----------- elements ----------- */
|
||||
|
||||
.profile {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent_color_bg);
|
||||
border: none;
|
||||
background-size: 58px 58px;
|
||||
}
|
||||
input {
|
||||
font-size: 18px;
|
||||
background: none;
|
||||
border: 1px solid black;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 4px;
|
||||
}
|
||||
select {
|
||||
border-radius: var(--border-radius);
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
button {
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.mc-xp-bar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-image: url("../imgs/xp-bar-bg.png");
|
||||
background-size: 100% 20px;
|
||||
}
|
||||
.mc-xp-bar > div {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-image: url("../imgs/xp-bar-fg.png");
|
||||
background-size: 100% 20px;
|
||||
clip-path: inset(0 100% 0 0);
|
||||
}
|
||||
|
||||
/* ----------- overlay ----------- */
|
||||
|
||||
overlay {
|
||||
display: none;
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
.overlay > div:first-child {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.2);
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
.overlay > div:last-child {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 250px;
|
||||
min-height: 150px;
|
||||
max-height: 95%;
|
||||
max-width: 95%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--accent_color_bg_o);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
.overlay > div:last-child > .close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--accent_color_bg);
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.overlay > div:last-child > .close:hover {
|
||||
box-shadow: var(--reversed_def_shadow);
|
||||
}
|
||||
|
||||
.overlay .overlay_title {
|
||||
height: 40px;
|
||||
margin-top: 4px;
|
||||
margin-right: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ----------- headerbar ----------- */
|
||||
|
||||
.header_bar_1 {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
background: var(--accent_color_bg_o);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 15px;
|
||||
box-shadow: var(--def-shadow);
|
||||
height: 75px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: 1;
|
||||
}
|
||||
.header_bar_1 > div {
|
||||
display: table-cell;
|
||||
}
|
||||
.header_bar_1 > div:nth-child(1) {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
.header_bar_1 > div:nth-child(2) {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.header_bar_1 > div:nth-child(3) {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header_bar_1_placeholder {
|
||||
height: 75px;
|
||||
}
|
||||
.header_bar_1_undocked {
|
||||
width: 96%;
|
||||
top: 2%;
|
||||
border-radius: var(--border-radius);
|
||||
animation: header_bar_1_undocked_ani 0.5s ease-in-out;
|
||||
}
|
||||
.header_bar_1_docked {
|
||||
width: 100%;
|
||||
animation: header_bar_1_docked_ani 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
content {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@keyframes header_bar_1_undocked_ani {
|
||||
from {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
to {
|
||||
width: 96%;
|
||||
top: 2%;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
@keyframes header_bar_1_docked_ani {
|
||||
from {
|
||||
width: 96%;
|
||||
top: 2%;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------- custom ----------- */
|
||||
|
||||
.add_button {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
font-size: 25px;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.add_button:hover {
|
||||
border: 2px solid grey;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.do-not-color-me {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
dropdown {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
z-index: 300;
|
||||
}
|
||||
dropdown > div:first-child {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
}
|
||||
dropdown > div > button {
|
||||
border-radius: 0;
|
||||
}
|
||||
dropdown > div:last-child {
|
||||
position: absolute;
|
||||
background: var(--accent_color_bg_o);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--border-radius);
|
||||
transform: translate(calc(-100% + 50px), 5px);
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
dropdown > div:last-child label {
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
border-bottom: 1px solid black;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
dropdown > div:last-child button {
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
border-bottom: 1px solid black;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
dropdown > div:last-child button:hover {
|
||||
background: var(--accent_color_fg_o);
|
||||
}
|
||||
dropdown > div:last-child button:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
dropdown > div:last-child button:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
Reference in new issue
Block a user