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);
}
}

108
docker/views/css/components/hero.css
View File

@@ -23,8 +23,13 @@
.hero-vignette {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
background:
radial-gradient(
circle at center,
transparent 0%,
var(--color-bg-base) 120%
),
linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
z-index: 1;
}
@@ -106,8 +111,18 @@
.hero-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
linear-gradient(to top, var(--color-bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%);
background:
radial-gradient(
circle at center,
transparent 0%,
var(--color-bg-base) 120%
),
linear-gradient(
to top,
var(--color-bg-base) 10%,
rgba(9, 9, 11, 0.8) 25%,
transparent 60%
);
z-index: 1;
}
@@ -117,4 +132,87 @@
padding: 0.2rem 0.8rem;
border-radius: 6px;
border: 1px solid rgba(34, 197, 94, 0.2);
}
}
@media (max-width: 768px) {
.hero-wrapper {
height: auto;
min-height: 85vh;
}
.hero-content {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 6rem 1.5rem 3rem 1.5rem;
gap: 2rem;
}
.hero-poster-card {
width: 150px;
height: 225px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
border: 2px solid rgba(255, 255, 255, 0.15);
margin-bottom: 0.5rem;
}
.hero-text {
width: 100%;
margin-bottom: 0;
}
.hero-title {
font-size: 2.2rem;
line-height: 1.1;
margin-bottom: 0.8rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}
.hero-meta {
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
font-size: 0.9rem;
}
.hero-desc {
font-size: 1rem;
line-height: 1.5;
-webkit-line-clamp: 3;
max-width: 100%;
padding: 0 0.5rem;
}
.hero-buttons {
flex-direction: column;
width: 100%;
gap: 1rem;
}
.hero-buttons .btn-primary,
.hero-buttons .btn-blur {
width: 100%;
justify-content: center;
padding: 1rem;
}
.hero-overlay {
background:
radial-gradient(
circle at center,
transparent 0%,
var(--color-bg-base) 140%
),
linear-gradient(
to top,
var(--color-bg-base) 15%,
rgba(0, 0, 0, 0.8) 40%,
rgba(0, 0, 0, 0.6) 100%
);
}
}

114
docker/views/css/components/navbar.css
View File

@@ -8,7 +8,11 @@
align-items: center;
justify-content: space-between;
padding: 0 3rem;
background: linear-gradient(to bottom, rgba(9, 9, 11, 0.9) 0%, rgba(9, 9, 11, 0) 100%);
background: linear-gradient(
to bottom,
rgba(9, 9, 11, 0.9) 0%,
rgba(9, 9, 11, 0) 100%
);
transition: background 0.3s;
}
@@ -211,7 +215,9 @@
min-width: 260px;
display: none;
flex-direction: column;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(139, 92, 246, 0.1);
z-index: 9999;
overflow: hidden;
animation: dropdownSlide 0.2s ease-out;
@@ -415,4 +421,106 @@
.search-results::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
}
@media (max-width: 768px) {
.navbar {
padding: 0 1rem;
height: 60px;
gap: 0.5rem;
z-index: 1002;
background: rgba(9, 9, 11, 0.95);
}
.nav-brand {
min-width: auto;
font-size: 0;
}
.brand-icon {
width: 32px;
height: 32px;
}
.search-wrapper {
flex: 1;
width: auto;
}
.search-input {
padding: 0.5rem 1rem 0.5rem 2.2rem;
font-size: 0.9rem;
}
.search-icon {
left: 10px;
}
#nav-avatar {
width: 32px;
height: 32px;
}
.nav-center {
position: absolute;
top: 60px;
left: 0;
right: 0;
display: flex;
background: rgba(9, 9, 11, 0.98);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 0.5rem 1rem;
overflow-x: auto;
white-space: nowrap;
justify-content: flex-start;
gap: 0.5rem;
-ms-overflow-style: none;
scrollbar-width: none;
z-index: 1001;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-center::-webkit-scrollbar {
display: none;
}
.nav-button {
flex-shrink: 0;
padding: 0.4rem 1rem;
font-size: 0.85rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-button.active {
background: var(--color-primary);
border-color: var(--color-primary);
}
.search-results {
position: fixed;
top: 110px;
left: 0;
right: 0;
width: 100vw;
border-radius: 0;
max-height: calc(100vh - 120px);
}
.nav-dropdown {
position: fixed;
top: 70px;
right: 1rem;
left: 1rem;
width: auto;
min-width: auto;
z-index: 9999;
}
}