Heimdall

Custom CSS

Cancel

/**
 * ============================================================================
 * HEIMDALL OBSIDIAN GLASS THEME
 * ============================================================================
 * A premium, modern, and dark "Glassmorphism" theme designed for Heimdall.
 * Features ultra-smooth blur effects, meticulous typographies, a redesigned
 * search bar, and distinct dynamic styling for application vs. category cards.
 * 
 * Target: Heimdall Application Dashboard
 * Font: 'Outfit' (Google Fonts)
 * ============================================================================
 */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap");

/* ============================================================================
 * 01. GLOBAL CONFIGURATION & LAYOUT
 * ============================================================================ */
#app { 
  background-position: center !important; 
  background-size: cover !important;
}

#app #sortable, #app main { 
  padding: 40px !important; 
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 25px !important; 
}

/* ============================================================================
 * 02. SEARCH BAR COMPONENT
 * ============================================================================ */
/* Base Container (Clears native artifacts) */
.searchform {
  margin: 40px auto 60px auto !important;
  padding: 0 !important;
  max-width: 650px !important;
  width: 90% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  height: 56px !important;
}

/* Glass Pill Structure */
.searchform .input-container {
  display: flex !important;
  flex: 1 !important;
  height: 100% !important;
  align-items: center !important;
  border-radius: 100px !important; 
  background: rgba(15, 15, 15, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(28px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.searchform .input-container:hover, 
.searchform .input-container:focus-within {
  background: rgba(25, 25, 25, 0.8) !important;
  border-color: rgba(230, 70, 50, 0.3) !important; 
  box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(230, 70, 50, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Engine Selector (e.g. Google) */
.searchform select {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 100px 0 0 100px !important; 
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 20px 0 25px !important;
  height: 100% !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.searchform select:hover { background: rgba(255, 255, 255, 0.1) !important; }
.searchform select option { color: #000 !important; background: #fff !important; }

/* Text Input Field */
.searchform input[type="text"],
.searchform input[type="search"] {
  flex: 1 !important;
  height: 100% !important; 
  background: rgba(255, 255, 255, 0.28) !important; /* Lighter white background */
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 0 24px !important;
}

.searchform input::placeholder {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 300 !important;
}

/* Submit Button */
.searchform button {
  background: rgba(230, 70, 50, 0.75) !important; /* Premium Vermilion */
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 100px 100px 0 !important; 
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0 30px !important;
  height: 100% !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.searchform button:hover {
  background: rgba(240, 85, 65, 0.95) !important;
  box-shadow: -4px 0 20px rgba(230, 70, 50, 0.4) !important;
}

/* ============================================================================
 * 03. APPLICATIONS CARDS (OBSIDIAN GLASS)
 * ============================================================================ */
.item {
  height: 95px !important;
  width: 270px !important;
  margin: 10px !important; 
  padding: 0 46px 0 15px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
  outline: none !important;
  
  /* Base Glass Geometry */
  background: rgba(10, 10, 10, 0.65) !important; 
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4) !important;
  
  position: relative !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  overflow: hidden !important; 
}

.item:hover {
  background: rgba(20, 20, 20, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-6px) scale(1.02) !important; 
  box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.5) !important;
}

/* App Title */
.item .title, .item .black, .black, .item strong { 
  color: #ffffff !important; 
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.02em !important;
}

/* Live Stats & Info */
.item .info,
.item .stats,
.item .tags,
.item p,
.item span:not(.title):not(.sv) {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px !important; 
  font-weight: 300 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.05em !important;
}

.item .info > *,
.item .livestats > *,
.item .stats > *,
.item ul.livestats li {
  display: inline-block !important;
  margin-right: 18px !important;
  vertical-align: top !important;
}

.item table th,
.item table td {
  padding-right: 15px !important;
  font-weight: 300 !important;
}

.item strong,
.item b,
.item .value {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  display: block; 
  margin-top: 3px !important;
}

/* App Icon Container */
.item .app-icon-container {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s ease !important;
}

.item .app-icon-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

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

/* Hide native faux icons */
.item .svg-inline--fa {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-10px) !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  transition: all 0.3s ease !important;
  opacity: 0 !important; 
}

.item:hover .svg-inline--fa {
  color: #ffffff !important;
  opacity: 1 !important; 
  transform: translateY(-50%) translateX(0) !important;
}

/* ============================================================================
 * 04. CATEGORIES & TAGS (VERMILION ACCENT)
 * ============================================================================ */
/* Targets any card linking to /tag/, plus specific fallback */
.item:has(a[href*="/tag/"]),
[data-name="Administration du NAS"] .item {
  border-left: 14px solid rgba(230, 70, 50, 0.95) !important;
  border-radius: 20px 100px 100px 20px !important; /* Match left radius to basic cards, full pill right */
  background: rgba(30, 10, 5, 0.65) !important; 
  background-image: linear-gradient(135deg, rgba(230, 70, 50, 0.25) 0%, rgba(20, 5, 5, 0.8) 100%) !important; 
  border-top: 1px solid rgba(230, 70, 50, 0.4) !important;
  border-right: 1px solid rgba(230, 70, 50, 0.25) !important;
  border-bottom: 1px solid rgba(230, 70, 50, 0.25) !important;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5) !important; 
}

/* Vermilion styling for native Heimdall right-edge half circle */
.item:has(a[href*="/tag/"])::before,
.item:has(a[href*="/tag/"])::after,
[data-name="Administration du NAS"] .item::before,
[data-name="Administration du NAS"] .item::after {
  background: rgba(230, 70, 50, 0.6) !important; 
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important; 
}

/* Tag Hover States */
.item:has(a[href*="/tag/"]):hover,
[data-name="Administration du NAS"] .item:hover {
  border-left: 18px solid rgba(240, 85, 65, 1) !important; 
  background: rgba(45, 10, 5, 0.75) !important;
  background-image: linear-gradient(135deg, rgba(250, 80, 50, 0.4) 0%, rgba(30, 10, 5, 0.9) 100%) !important;
  border-color: rgba(230, 70, 50, 0.5) !important;
  box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.6), 0 5px 25px rgba(230, 70, 50, 0.25) !important; 
}

/* Tag Custom Icon Styling */
.item:has(a[href*="/tag/"]) .app-icon-container,
[data-name="Administration du NAS"] .item .app-icon-container {
  background: rgba(230, 70, 50, 0.1) !important;
  border: 1px solid rgba(230, 70, 50, 0.25) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Tag Typography (Dynamic Tech Style) */
.item:has(a[href*="/tag/"]) .title,
[data-name="Administration du NAS"] .item .title {
  font-weight: normal !important;
  font-style: italic !important;
  color: #fff2ef !important; 
  text-shadow: 0 3px 15px rgba(230, 70, 50, 0.5), 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* ============================================================================
 * 05. SIDE CONFIGURATION MENU
 * ============================================================================ */
#config-buttons {
  position: fixed !important; 
  right: 0 !important;
  bottom: 50% !important;
  transform: translateY(50%) !important;
  border-radius: 20px 0 0 20px !important;
  background: rgba(10, 10, 10, 0.65) !important; 
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-right: none !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3) !important;
  padding: 15px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 100 !important;
}

#config-buttons a {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#config-buttons a svg {
  color: rgba(255, 255, 255, 0.6) !important;
  width: 20px !important;
  height: 20px !important;
  transition: all 0.3s ease !important;
}

#config-buttons a:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateX(-4px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

#config-buttons a:hover svg {
  color: #ffffff !important;
  transform: scale(1.15) !important;
}