refactor: refresh
This commit is contained in:
231
src/index.css
231
src/index.css
@ -20,7 +20,7 @@ body {
|
||||
--primary: #f838d9;
|
||||
--secondary: #34d2fe;
|
||||
--zap: #ff8d2b;
|
||||
--text-danger: #ff563f;
|
||||
--success: green;
|
||||
--surface: #222;
|
||||
--border: #171717;
|
||||
--border-2: #393939;
|
||||
@ -29,7 +29,18 @@ body {
|
||||
--gradient-orange: linear-gradient(270deg, #ff5b27 0%, rgba(255, 182, 39, 0.99) 100%);
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.btn-border {
|
||||
border: 1px solid transparent;
|
||||
color: inherit;
|
||||
background: linear-gradient(black, black) padding-box, linear-gradient(94.73deg, #2bd9ff 0%, #f838d9 100%) border-box;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.btn-border:hover {
|
||||
background: linear-gradient(black, black) padding-box, linear-gradient(94.73deg, #14b4d8 0%, #ba179f 100%) border-box;
|
||||
}
|
||||
|
||||
@media screen(xl) {
|
||||
:root {
|
||||
--gap-l: 24px;
|
||||
--gap-m: 16px;
|
||||
@ -66,225 +77,18 @@ a {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 4px 8px;
|
||||
border-radius: 9px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.w-max {
|
||||
width: stretch;
|
||||
width: -webkit-fill-available;
|
||||
width: -moz-available;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 16px;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.btn-border {
|
||||
border: 1px solid transparent;
|
||||
color: inherit;
|
||||
background: linear-gradient(black, black) padding-box, linear-gradient(94.73deg, #2bd9ff 0%, #f838d9 100%) border-box;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.btn-border:hover {
|
||||
background: linear-gradient(black, black) padding-box, linear-gradient(94.73deg, #14b4d8 0%, #ba179f 100%) border-box;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #fff;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: white;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #ff563f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea,
|
||||
input[type="datetime-local"],
|
||||
input[type="password"],
|
||||
input[type="number"] {
|
||||
font-family: inherit;
|
||||
border: unset;
|
||||
background-color: unset;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input[type="number"],
|
||||
select {
|
||||
font-family: inherit;
|
||||
border: unset;
|
||||
background-color: #262626;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #333;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:after {
|
||||
content: " ";
|
||||
position: relative;
|
||||
left: 40%;
|
||||
top: 20%;
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
border: solid #fff;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(50deg);
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.plain-paper {
|
||||
background: #171717;
|
||||
border-radius: 16px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
div.paper {
|
||||
background: #171717;
|
||||
border-radius: 16px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
@apply bg-layer-2 w-full font-medium px-4 py-2 rounded-xl;
|
||||
}
|
||||
|
||||
.scroll-lock {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #ff563f;
|
||||
}
|
||||
|
||||
.border-warning {
|
||||
border: 1px solid #ff563f;
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
z-index: 2;
|
||||
background-color: #171717;
|
||||
border-radius: 24px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 500px;
|
||||
max-width: 90vw;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.dialog-content .header-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.dialog-content .content-inner {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dialog-content .username,
|
||||
.dialog-content .username input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dialog-content div.paper {
|
||||
background: #262626;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dialog-content h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
.dialog-content h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.dialog-content small {
|
||||
display: block;
|
||||
color: #868686;
|
||||
margin: 6px;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
.ctx-menu {
|
||||
@ -354,7 +158,8 @@ div.paper {
|
||||
|
||||
.full-page-height .live-chat {
|
||||
padding: 24px 16px 8px 24px;
|
||||
border: 1px solid #171717;
|
||||
border: 1px solid;
|
||||
@apply border-layer-2;
|
||||
border-radius: 24px;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user