Heimdall

public Switch User

Custom CSS

Cancel

/* ============================================================
   HEIMDALL — THÈME MODERNE v3
   Coller dans : Settings > Custom CSS
   ============================================================ */

/* --- GOOGLE FONTS ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* --- VARIABLES --------------------------------------------- */
:root {
  --glass-bg:     rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-hover:  rgba(255, 255, 255, 0.13);
  --accent:       #6C63FF;
  --accent-glow:  rgba(108, 99, 255, 0.35);
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-muted:   rgba(255, 255, 255, 0.55);
  --radius-card:  18px;
  --radius-btn:   12px;
  --blur:         blur(18px) saturate(160%);
  --transition:   all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   FOND & BODY
   ============================================================ */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  /* Pour une image de fond, décommente et adapte :
     background-image: url('https://ton-image.com/bg.jpg');
     background-size: cover; background-position: center; */
  background: linear-gradient(135deg, #0d0d1a 0%, #111827 50%, #0d1117 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Texture points subtile */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   HEADER / LOGO
   ============================================================ */
.appheader {
  background: transparent !important;
  border-bottom: none !important;
  padding-top: 2.5rem !important;
}

.logo {
  filter: brightness(1.2) drop-shadow(0 0 18px var(--accent-glow)) !important;
}

/* ============================================================
   BARRE DE RECHERCHE
   ============================================================ */
#search-form,
form[action*="search"] {
  margin: 1.5rem auto 2rem !important;
  max-width: 520px;
}

.homesearch,
.homesearch input,
#search,
input[type="search"],
input[name="q"] {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 50px !important;
  color: #111111 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 13px 22px !important;
  width: 100% !important;
  transition: var(--transition) !important;
  outline: none !important;
  box-shadow: none !important;
}

.homesearch:focus,
#search:focus,
input[type="search"]:focus,
input[name="q"]:focus {
  border-color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  color: #111111 !important;
}

.homesearch::placeholder,
#search::placeholder,
input[type="search"]::placeholder {
  color: #666666 !important;
}

/* Combobox Tiles / moteur de recherche */
#searchprovider,
.homesearch ~ select,
form[action*="search"] select,
select#searchprovider {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 50px !important;
  color: #111111 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  outline: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#searchprovider option,
select#searchprovider option {
  background: #1a1b2e !important;
  color: #ffffff !important;
}

/* ============================================================
   FLÈCHE "→ Accéder" — MASQUÉE
   classe SVG FontAwesome : fa-arrow-alt-to-right
   ============================================================ */
.fa-arrow-alt-to-right,
svg.fa-arrow-alt-to-right,
.svg-inline--fa.fa-arrow-alt-to-right,
.appLink,
a.appLink,
.item a::after,
.app-card a::after,
ul.sortable > li a::after,
ul.sortable > li .appLink {
  display: none !important;
}

/* ============================================================
   TUILES (app cards)
   ============================================================ */
.item,
.app-card,
.sortable-item {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-card) !important;
  transition: var(--transition) !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
}

.item:hover,
.app-card:hover,
.sortable-item:hover {
  background: var(--glass-hover) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--glass-border) !important;
}

/* Trait accent en haut au hover */
.item::before,
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #a78bfa);
  opacity: 0;
  transition: var(--transition);
}

.item:hover::before,
.app-card:hover::before {
  opacity: 1;
}

/* Lien dans la tuile */
.item a,
.app-card a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.4rem 1rem !important;
  text-decoration: none !important;
  color: var(--text-primary) !important;
  height: 100% !important;
}

/* Icône / logo */
.item .icon,
.app-card .icon,
.item img,
.app-card img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  transition: var(--transition) !important;
}

.item:hover .icon,
.app-card:hover .icon,
.item:hover img,
.app-card:hover img {
  transform: scale(1.1) !important;
}

/* Nom de l'appli */
.item .title,
.app-card .title,
.item span,
.app-card span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
}