Heimdall

Angepasstes CSS

Abbrechen

/* ================================
Heimdall Custom CSS (fin3st)
Mobile + Desktop
Einfach in “Custom CSS” einfügen
================================ */

/* –––– Theme-Variablen –––– /
:root{
–bg: #0f1115;
–bg-soft: #141821;
–panel: #171b24;
–panel-2: #1c2230;
–text: #e8ecf1;
–muted: #a8b0bf;
–accent: #4da3ff;       / Haupt-Akzent (Glow) /
–accent-2: #7cffd9;     / Zweit-Akzent */
–radius: 14px;
–radius-sm: 10px;
–shadow: 0 10px 30px rgba(0,0,0,.35);
–ring: 0 0 0 1px rgba(77,163,255,.22), 0 0 35px rgba(77,163,255,.18);
}

/* System Dark-Mode respektieren (falls Heimdall hell ist) */
@media (prefers-color-scheme: dark){
body{ background: var(–bg) !important; color: var(–text) !important; }
}

/* –––– Grundlayout / Hintergrund –––– */
html, body{
background: radial-gradient(1200px 800px at 20% -10%, rgba(77,163,255,.08), transparent 40%),
radial-gradient(1000px 700px at 110% 10%, rgba(124,255,217,.06), transparent 46%),
var(–bg) !important;
}

.container, .section, .content{
color: var(–text);
}

/* –––– Kopfbereich / Suche –––– */
input[type=“search”], .search input, .searchbar input{
background: var(–panel) !important;
border: 1px solid rgba(255,255,255,.06) !important;
border-radius: var(–radius) !important;
color: var(–text) !important;
box-shadow: none !important;
transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}
input[type=“search”]:focus, .search input:focus, .searchbar input:focus{
border-color: rgba(77,163,255,.45) !important;
box-shadow: var(–ring) !important;
}

/* –––– Kategorien / Überschriften –––– */
h1, h2, h3, .title, .subtitle, .category-title{
color: var(–text) !important;
letter-spacing: .2px;
}
.category-title{
display:flex; align-items:center; gap:.6rem;
margin: 1.2rem 0 .6rem;
font-weight: 700;
}
.category-title::after{
content:””;
flex:1;
height: 1px;
background: linear-gradient(90deg, rgba(77,163,255,.35), transparent);
margin-left:.4rem;
}

/* –––– Grid: Kachel-Container –––– /
/ Heimdall nutzt je nach Version unterschiedliche Klassen.
Wir stylen mehrere gängige Selektoren robust. */
.items, .applications, .tiles, .grid, .cards{
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 14px;
align-items: stretch;
}

/* –––– Kacheln / Karten –––– */
.item, .application, .tile, .card.app, .card{
background: linear-gradient(180deg, var(–panel-2), var(–panel)) !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: var(–radius) !important;
box-shadow: var(–shadow) !important;
overflow: hidden;
transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
position: relative;
}

/* Innenabstände (versch. DOM-Strukturen abdecken) */
.item .content, .application .content, .tile .content, .card .card-content, .app .content{
padding: 14px 14px 12px 14px !important;
}

/* Icon-Zone (rund, leichtes Glow) */
.item .icon, .application .icon, .tile .icon, .card .icon, .app .icon{
width: 52px; height: 52px; min-width:52px;
border-radius: 50%;
background: rgba(255,255,255,.06);
display:flex; align-items:center; justify-content:center;
margin-bottom:.65rem;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.35);
overflow:hidden;
}
.item .icon img, .application .icon img, .tile .icon img, .card .icon img, .app .icon img{
width: 60%; height: 60%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

/* Titel + Untertitel */
.item .title, .application .name, .tile .title, .card .title, .app .title{
color: var(–text) !important;
font-weight: 700; font-size: 0.98rem;
line-height: 1.2;
margin: .2rem 0 .1rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item .subtitle, .application .subtitle, .tile .subtitle, .app .subtitle, .meta, .description{
color: var(–muted) !important;
font-size: .86rem; line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Buttons/Links in Karten */
.item a.button, .application a.button, .tile a.button, .card a.button,
.item .actions a, .application .actions a, .tile .actions a{
background: linear-gradient(180deg, rgba(77,163,255,.18), rgba(77,163,255,.12));
border: 1px solid rgba(77,163,255,.35);
color: #dff0ff !important;
border-radius: var(–radius-sm);
padding: .45rem .7rem;
font-weight: 600;
transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.item a.button:hover, .application a.button:hover, .tile a.button:hover{
border-color: rgba(124,255,217,.55);
box-shadow: 0 0 0 1px rgba(124,255,217,.35), 0 0 22px rgba(124,255,217,.18);
}

/* Hover/Active Effekte */
.item:hover, .application:hover, .tile:hover, .card.app:hover, .card:hover{
transform: translateY(-2px);
border-color: rgba(77,163,255,.38) !important;
box-shadow: var(–shadow), 0 0 0 1px rgba(77,163,255,.18), 0 12px 45px rgba(77,163,255,.10) !important;
filter: saturate(1.06);
}
.item:active, .application:active, .tile:active, .card:active{
transform: translateY(0);
}

/* Fokus-Ring für Accessibility */
.item:focus-within, .application:focus-within, .tile:focus-within, .card:focus-within{
outline: none;
box-shadow: var(–ring) !important;
}

/* Kleine Status-Badge (optional: Favorit, Neu, …) */
.item .badge, .application .badge, .tile .badge{
position:absolute; top:10px; right:10px;
background: linear-gradient(180deg, rgba(124,255,217,.22), rgba(124,255,217,.12));
color:#dffff4; border:1px solid rgba(124,255,217,.4);
padding:.18rem .45rem; border-radius: 999px; font-size:.72rem; font-weight:700;
letter-spacing:.3px;
}

/* –––– Kompakter Modus (optional über Body-Klasse aktivierbar) –––– /
/ Füge in “Custom CSS” zusätzlich body.compact hinzu, wenn du sehr viele Kacheln willst */
body.compact .items, body.compact .applications, body.compact .tiles, body.compact .grid, body.compact .cards{
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
body.compact .item .icon, body.compact .application .icon, body.compact .tile .icon{
width: 44px; height: 44px;
}
body.compact .item .title, body.compact .application .name, body.compact .tile .title{
font-size: .92rem;
}

/* –––– Footer / Kleinteile –––– */
.footer, footer, .copyright{
color: var(–muted) !important;
opacity:.85;
}

/* ========= Responsive ========= */

/* — Tablets (≤ 1024px) — */
@media (max-width: 1024px){
.items, .applications, .tiles, .grid, .cards{
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
}
}

/* — Smartphones (≤ 768px) — /
@media (max-width: 768px){
.items, .applications, .tiles, .grid, .cards{
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
/ Wenn du lieber 1-Spalte auf sehr kleinen Geräten willst, schalte unten an /
/ grid-template-columns: 1fr !important; */

/* Mobile: mehr Touch-Fläche, etwas größere Schrift */
.item .title, .application .name, .tile .title{ font-size: 1rem; }
.item .subtitle, .application .subtitle, .tile .subtitle{ font-size: .9rem; }
.item .icon, .application .icon, .tile .icon{ width: 56px; height: 56px; }
.category-title{ margin-top: .9rem; }
}

/* — Winzige Geräte (≤ 380px) — */
@media (max-width: 380px){
.items, .applications, .tiles, .grid, .cards{
grid-template-columns: 1fr !important;
}
}

/* –––– Tooltip/Title Overflow Fix –––– */
.item [title], .application [title], .tile [title]{
overflow-wrap:anywhere;
}

/* –––– Link-Farben global dezent –––– */
a{ color: var(–accent); }
a:hover{ color: var(–accent-2); }

/* ===== Ende ===== */