ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Docker server has responsiveness now

Browse Source
This commit is contained in:
itsskaiya
2025-12-17 13:00:15 -05:00
parent 1a01d29f19
commit c11a1eed35
14 changed files with 2465 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
docker/views/css/components/anilist-modal.css
View File

@@ -1,7 +1,7 @@
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
z-index: 2000;
display: flex;
@@ -12,14 +12,14 @@
.modal-content {
background: var(--color-bg-amoled);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
max-width: 900px;
width: 95%;
padding: 0;
position: relative;
animation: modalSlideUp 0.3s ease;
box-shadow: 0 20px 50px rgba(0,0,0,0.8);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
max-height: 90vh;
display: flex;
flex-direction: column;
@@ -40,8 +40,8 @@
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
width: 36px;
height: 36px;
@@ -66,7 +66,7 @@
padding: 1.5rem 2rem 0.5rem;
margin-bottom: 0;
color: var(--color-text-primary);
border-bottom: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.modal-body {
@@ -112,7 +112,7 @@
.form-input {
background: var(--color-bg-field);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-text-primary);
padding: 0.8rem 1rem;
border-radius: 8px;
@@ -154,7 +154,7 @@
.form-checkbox {
width: 18px;
height: 18px;
border: 1px solid rgba(255,255,255,0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
background: var(--color-bg-base);
border-radius: 4px;
cursor: pointer;
@@ -171,7 +171,7 @@
}
.form-checkbox:checked::after {
content: '✓';
content: "✓";
position: absolute;
top: 50%;
left: 50%;
@@ -187,21 +187,25 @@
justify-content: flex-end;
flex-shrink: 0;
padding: 1rem 2rem;
border-top: 1px solid rgba(255,255,255,0.05);
border-top: 1px solid rgba(255, 255, 255, 0.05);
background: var(--color-bg-amoled);
position: sticky;
bottom: 0;
z-index: 10;
}
.btn-primary, .btn-secondary, .btn-danger {
.btn-primary,
.btn-secondary,
.btn-danger {
padding: 0.8rem 1.5rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
transition:
transform 0.2s,
background 0.2s;
flex: none;
}
@@ -215,13 +219,13 @@
}
.btn-secondary {
background: rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.15);
background: rgba(255, 255, 255, 0.15);
}
.btn-danger {
@@ -243,26 +247,89 @@
opacity: 1;
}
@media (max-width: 900px) {
@media (max-width: 600px) {
.modal-content {
max-width: 95%;
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
display: flex;
flex-direction: column;
}
.modal-title {
font-size: 1.4rem;
padding: 1rem;
padding-right: 3rem;
}
.modal-close {
top: 0.8rem;
right: 0.8rem;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.08);
}
.modal-body {
padding: 0 1rem;
}
.modal-fields-grid {
grid-template-columns: repeat(2, 1fr);
display: flex;
flex-direction: column;
gap: 1.2rem;
padding: 1rem 0;
}
.form-group.notes-group {
grid-column: 1 / -1;
.form-group,
.form-group.notes-group,
.form-group.checkbox-group,
.form-group.full-width {
grid-column: auto;
width: 100%;
}
.form-group.checkbox-group {
grid-column: 1 / -1;
align-self: auto;
.date-group {
flex-direction: column;
gap: 1rem;
}
.notes-textarea {
min-height: 120px;
}
.modal-actions {
padding: 1rem 1.5rem;
flex-direction: column;
gap: 0.8rem;
padding: 1rem;
background: var(--color-bg-elevated);
}
.modal-title, .modal-body {
padding-left: 1.5rem;
padding-right: 1.5rem;
.btn-primary,
.btn-secondary,
.btn-danger {
width: 100%;
padding: 1rem;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
}
.btn-primary {
order: 1;
}
.btn-secondary {
order: 2;
}
.btn-danger {
order: 3;
margin-top: 0.5rem;
background: rgba(239, 68, 68, 0.2);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.3);
}
}