Viele neue Features
This commit is contained in:
@@ -133,6 +133,11 @@ h3 {
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.login-layout {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
@@ -155,6 +160,34 @@ input[type="file"] {
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
margin: -0.2rem 0 0.1rem;
|
||||
color: rgba(31, 31, 31, 0.72);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
#extra-file-inputs {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.extra-file-input {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.upload-count {
|
||||
margin: 0.2rem 0 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.upload-file-list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
color: rgba(31, 31, 31, 0.82);
|
||||
max-height: 9rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
@@ -186,19 +219,199 @@ input[type="file"] {
|
||||
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 0.8rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gallery-card {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(39, 66, 53, 0.12);
|
||||
border-radius: 14px;
|
||||
padding: 0.6rem;
|
||||
box-shadow: 0 6px 20px rgba(39, 66, 53, 0.08);
|
||||
}
|
||||
|
||||
.gallery-media {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gallery-item figcaption {
|
||||
margin-top: 0.55rem;
|
||||
margin-bottom: 0.55rem;
|
||||
}
|
||||
|
||||
.gallery-delete-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #8a2f2f;
|
||||
}
|
||||
|
||||
.gallery-delete-btn {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
right: 0.4rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.85);
|
||||
background: rgba(138, 47, 47, 0.92);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.gallery-delete-btn svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.gallery-delete-btn:hover {
|
||||
background: #7b2727;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1200;
|
||||
display: none;
|
||||
place-items: center;
|
||||
background: rgba(0, 0, 0, 0.88);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.lightbox.is-open {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.lightbox-image {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: min(92vw, 1200px);
|
||||
max-height: 86vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.lightbox-close,
|
||||
.lightbox-download,
|
||||
.lightbox-nav {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(20, 20, 20, 0.6);
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lightbox-close,
|
||||
.lightbox-download {
|
||||
top: 1rem;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
right: 1rem;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lightbox-counter {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.35rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(20, 20, 20, 0.6);
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lightbox-download {
|
||||
right: 4rem;
|
||||
}
|
||||
|
||||
.lightbox-download svg {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.lightbox-nav {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
opacity: 1;
|
||||
transition: opacity 420ms ease, background-color 220ms ease;
|
||||
}
|
||||
|
||||
.lightbox-prev {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.lightbox-next {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.lightbox-controls-hidden .lightbox-nav {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition-delay: 120ms;
|
||||
}
|
||||
|
||||
.lightbox-close:hover,
|
||||
.lightbox-download:hover,
|
||||
.lightbox-nav:hover {
|
||||
background: rgba(20, 20, 20, 0.82);
|
||||
}
|
||||
|
||||
.lightbox-image.is-fading {
|
||||
animation: lightbox-fade 220ms ease;
|
||||
}
|
||||
|
||||
@keyframes lightbox-fade {
|
||||
from {
|
||||
opacity: 0.6;
|
||||
transform: scale(0.985);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
@@ -283,3 +496,25 @@ input[type="file"] {
|
||||
background-position: center 24%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.login-layout {
|
||||
grid-template-columns: minmax(0, 1.25fr) minmax(360px, 560px);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.login-layout .card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.login-layout .hero {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-layout .form-card {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user