many improvements
This commit is contained in:
265
css/tweaks.css
265
css/tweaks.css
@@ -1,80 +1,231 @@
|
||||
/* ============ Base / Vars ============ */
|
||||
@font-face {
|
||||
font-family: 'Comfortaa';
|
||||
font-family: "Comfortaa";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(../fonts/comfortaa.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
src: url(../webfonts/comfortaa.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||
U+FEFF, U+FFFD;
|
||||
}
|
||||
:root {
|
||||
--wl-card-radius: 0.75rem;
|
||||
}
|
||||
body {
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
|
||||
Arial, "Comfortaa", sans-serif;
|
||||
}
|
||||
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
/* Utility */
|
||||
.object-fit-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
.object-fit-contain {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
/* ============ Cards ============ */
|
||||
.card {
|
||||
border-radius: var(--wl-card-radius);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.b-example-divider {
|
||||
height: 3rem;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border: solid rgba(0, 0, 0, .15);
|
||||
border-width: 1px 0;
|
||||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
||||
.card .ratio {
|
||||
--bs-aspect-ratio: 56.25%; /* 16:9 Bildfläche */
|
||||
border-top-left-radius: var(--wl-card-radius);
|
||||
border-top-right-radius: var(--wl-card-radius);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.bi {
|
||||
vertical-align: -.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
width: 100%;
|
||||
height: 15vw;
|
||||
object-fit: scale-down;
|
||||
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
min-height: 9rem;
|
||||
}
|
||||
|
||||
/* Titelzeile */
|
||||
.card-title-row {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.card-title-row .card-title,
|
||||
.card-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.qty-pill {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1;
|
||||
border-radius: 999px;
|
||||
background: var(--bs-gray-200);
|
||||
color: var(--bs-gray-800);
|
||||
}
|
||||
|
||||
/* Beschreibung (2 Zeilen Ellipsis) */
|
||||
.card-text {
|
||||
min-height: 3em;
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-height: 2.6em;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
text-overflow: ellipsis;
|
||||
/* Status rechts */
|
||||
.status-right .fs-6 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
.card .text-end small,
|
||||
.card .text-end .badge {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Header Controls */
|
||||
.navbar-brand svg {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.navbar .form-control#sortby {
|
||||
min-width: 10.5rem;
|
||||
}
|
||||
|
||||
/* Demo-/Bootstrap-Beispielkram killen */
|
||||
.bd-placeholder-img,
|
||||
.bd-placeholder-img-lg,
|
||||
.b-example-divider,
|
||||
.b-example-vr,
|
||||
.nav-scroller,
|
||||
.nav-scroller .nav {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ============ Admin-Icons (schwebend) ============ */
|
||||
/* schwebende Admin-Icons sichtbar machen */
|
||||
.wl-card {
|
||||
position: relative;
|
||||
} /* hast du schon */
|
||||
.wl-card .admin-actions {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(2px);
|
||||
border-radius: 999px;
|
||||
padding: 0.125rem;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
/* beim Hovern (oder Tastaturfokus) einblenden */
|
||||
.wl-card:hover .admin-actions {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* --- Admin-Icon oben rechts bleibt kompakt --- */
|
||||
.wl-card .btn-icon {
|
||||
box-sizing: border-box;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* ============ Untere Aktionsleiste ============ */
|
||||
.btn-group-pills {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Idle: klein und fix 40px */
|
||||
.btn-group-pills > .btn.btn-pill {
|
||||
flex: 0 0 40px !important;
|
||||
min-width: 40px; /* falls Bootstrap-Mindestbreiten reinfunken */
|
||||
}
|
||||
|
||||
/* Hover/Fokus/Aktiv: darf wachsen */
|
||||
.btn-group-pills > .btn.btn-pill:hover,
|
||||
.btn-group-pills > .btn.btn-pill:focus,
|
||||
.btn-group-pills > .btn.btn-pill:active {
|
||||
flex: 0 1 16rem !important; /* überschreibt die Idle-Regel */
|
||||
width: auto !important; /* falls irgendwo width:40px gewinnt */
|
||||
padding: 0.5rem 0.8rem; /* „aufklappen“ */
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Text mit aufklappen */
|
||||
.btn-pill:hover span,
|
||||
.btn-pill:focus span,
|
||||
.btn-pill:active span {
|
||||
width: auto;
|
||||
opacity: 1;
|
||||
margin-left: 0.35rem;
|
||||
}
|
||||
|
||||
/* kompakter Grundzustand: NUR Icon, super schmal */
|
||||
.btn-pill {
|
||||
box-sizing: border-box; /* Breite inkl. Padding & Border */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-basis: 40px;
|
||||
padding: 0;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.btn-pill i { font-size: 1rem; line-height: 1; margin: 0 .5rem; }
|
||||
.btn-pill span {
|
||||
width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0;
|
||||
transition: width .18s ease, opacity .18s ease, margin-left .18s ease;
|
||||
}
|
||||
|
||||
/* Hover: Button wächst, Text klappt auf */
|
||||
.btn-pill:hover {
|
||||
width: auto;
|
||||
flex: 0 1 16rem;
|
||||
padding: .5rem .8rem;
|
||||
/* Keine Ausrichtung hier setzen – die Utility-Klasse bleibt wirksam */
|
||||
}
|
||||
.btn-pill:hover span { width: auto; opacity: 1; margin-left: .35rem; }
|
||||
|
||||
/* Fokus sichtbar (zugänglich) */
|
||||
.btn-pill:focus-visible {
|
||||
outline: 2px solid rgba(13, 110, 253, 0.5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ============ Responsive Tweaks ============ */
|
||||
@media (max-width: 575.98px) {
|
||||
.card-body {
|
||||
min-height: unset;
|
||||
}
|
||||
.btn-group-pills {
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.btn-pill {
|
||||
width: 38px;
|
||||
flex-basis: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user