162 lines
3.4 KiB
CSS
162 lines
3.4 KiB
CSS
/* Modernes Styling für Foto-Freigabe (Deutsch)
|
|
Datei: module/photo_approve/photo_approve.css
|
|
*/
|
|
|
|
.pa-container h2{
|
|
font-family: "Helvetica Neue", Arial, sans-serif;
|
|
font-size: 1.6rem;
|
|
color: #1b2632;
|
|
margin: 12px 0 18px 0;
|
|
}
|
|
|
|
.pa-grid{
|
|
display: grid;
|
|
/* Fewer columns so each card is significantly wider (~70% wider than 3-column layout) */
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 18px;
|
|
padding: 6px;
|
|
}
|
|
|
|
|
|
.pa-card{
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid #e6e6e6;
|
|
transition: transform .18s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 260px;
|
|
}
|
|
|
|
/* .pa-card:hover{
|
|
transform: translateY(-4px);
|
|
} */
|
|
|
|
|
|
/* If the template outputs a raw <img> as child of the card, make it behave like a compact avatar */
|
|
.pa-card > img{
|
|
height: 110px;
|
|
width: auto;
|
|
max-width: 78%;
|
|
object-fit: cover;
|
|
display: block;
|
|
margin: 14px auto 6px auto;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
/* keep a compatible image wrapper rule in case markup changes */
|
|
.pa-card .img-wrap{
|
|
height: 110px;
|
|
background: #f7f8fa;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.pa-card .img-wrap img{ max-height:100%; width:auto; border-radius:10px; }
|
|
|
|
.meta{
|
|
padding: 12px 14px 6px 14px;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.meta .username{
|
|
font-weight: 600;
|
|
color: #122230;
|
|
margin-bottom: 6px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.meta .created{
|
|
font-size: 0.85rem;
|
|
color: #6f7b86;
|
|
}
|
|
|
|
|
|
.pa-actions{
|
|
padding: 12px;
|
|
display:flex;
|
|
gap:12px;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
}
|
|
|
|
/* Make each form take equal space so buttons align perfectly */
|
|
.pa-actions form{ flex: 1 1 0; }
|
|
.pa-actions form:first-child{ margin-right:6px; }
|
|
.pa-actions form:last-child{ margin-left:6px; }
|
|
.pa-actions button.ui{ width:100%; }
|
|
|
|
/* Buttons (leicht angepasste Farben) */
|
|
|
|
button.ui{
|
|
/* Increase button size ~70%: larger padding and slightly larger font */
|
|
padding: 10px 30px;
|
|
font-size: 1.05rem;
|
|
border-radius: 8px;
|
|
font-weight: 700;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
letter-spacing: .2px;
|
|
transition: transform .12s ease, opacity .12s ease;
|
|
}
|
|
|
|
button.ui:active{ transform: translateY(1px); }
|
|
|
|
button.ui.positive{
|
|
background: #28a745;
|
|
color: #ffffff;
|
|
}
|
|
|
|
button.ui.positive:hover{ opacity: 0.95; transform: translateY(-2px); }
|
|
|
|
button.ui.negative{
|
|
background: #e00304;
|
|
color: #ffffff;
|
|
}
|
|
|
|
button.ui.negative:hover{ opacity: 0.95; transform: translateY(-2px); }
|
|
|
|
/* Meldungen */
|
|
.successbox{
|
|
padding:10px 12px;
|
|
background: #f3fff6;
|
|
border: 1px solid #28a745;
|
|
color: #0f4e2b;
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.errorbox{
|
|
padding:10px 12px;
|
|
background: #fff6f6;
|
|
border: 1px solid #e00304;
|
|
color: #5a2220;
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.pa-actions form {
|
|
padding: 0px;
|
|
}
|
|
|
|
/* Responsive Grid */
|
|
@media (max-width: 1200px){ .pa-grid{ grid-template-columns: repeat(3,1fr); } }
|
|
@media (max-width: 992px){ .pa-grid{ grid-template-columns: repeat(2,1fr); } }
|
|
@media (max-width: 700px){ .pa-grid{ grid-template-columns: repeat(2,1fr); }
|
|
.pa-card > img, .pa-card .img-wrap{ height: 90px; }
|
|
}
|
|
@media (max-width: 420px){ .pa-grid{ grid-template-columns: 1fr; } }
|
|
|
|
/* Kleinere Hilfsanpassungen */
|
|
.pa-container{ padding: 6px 8px; }
|
|
|
|
/* Verkleinere Buttons auf sehr kleinen Bildschirmen */
|
|
@media (max-width:420px){ button.ui{ padding:6px 10px; font-size:0.95rem; }
|
|
.pa-actions{ gap:8px; }
|
|
}
|