|
|
| Line 1: |
Line 1: |
| /* Main Header Box - Minimalist and No Background */
| | <!-- |
| .tg-mainpage-header {
| | Template:MainHeader |
| /* REMOVED: Background is removed, now transparent */
| | -------------------- |
| background: none;
| | Header component of the main page |
| /* Vertical padding sets the distance of elements from the top of the page */
| | --> |
| padding: 4rem 2rem;
| | <div class="tg-mainpage-header"><!-- |
| /* Default text color set for light theme */
| | --><div class="tg-mainpage-content"><!-- |
| color: #222222;
| |
| text-align: center;
| |
| user-select: none;
| |
| transition: background-color 0.3s ease;
| |
| }
| |
|
| |
|
| /* Content Area */
| | --><div class="tg-mainpage-header-wordmark">Slay the Spire 2 Wiki</div><!-- |
| .tg-mainpage-content {
| |
| max-width: 900px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
|
| /* Wiki Wordmark */
| | --><div class="tg-mainpage-header-tagline"> |
| .tg-mainpage-header-wordmark {
| | The definitive community-driven guide to relics, cards, and ascension strategies. |
| font-family: 'Inter', sans-serif;
| | </div><!-- |
| font-weight: 800;
| |
| font-size: 3.5rem;
| |
| margin-bottom: 0.5rem;
| |
| /* ADJUSTED: Text color changed to be dark for light backgrounds */
| |
| color: #1a1a1a;
| |
| /* REMOVED: Shadow effect is unnecessary in light theme */
| |
| text-shadow: none;
| |
| }
| |
|
| |
|
| /* Tagline */
| | --><div |
| .tg-mainpage-header-tagline {
| | class="tg-mainpage-header-search citizen-search-trigger" |
| font-family: 'Inter', sans-serif;
| | role="button" |
| font-size: 1.1rem;
| | tabindex="0" |
| /* ADJUSTED: Text color changed to a standard gray */
| | aria-label="Open search" |
| color: #555555;
| | id="tg-mainpage-search-trigger" |
| margin-bottom: 2rem;
| | > |
| font-weight: 400;
| | Search |
| }
| | </div><!-- |
|
| |
|
| /* Search Button - Size Reduced */
| | --></div><!-- |
| .tg-mainpage-header-search {
| | --></div><!-- |
| font-family: 'Inter', sans-serif;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 0.5rem;
| |
| background-color: #FF5733; /* Orange accent color is kept */
| |
| color: #ffffff;
| |
| font-weight: 600;
| |
| /* REDUCED: Font size and inner padding decreased */
| |
| font-size: 0.9rem;
| |
| padding: 0.6rem 1.5rem;
| |
| border-radius: 9999px;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| border: none;
| |
| transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
| |
| /* ADJUSTED: Shadow adapted for a light background */
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
| |
| }
| |
|
| |
|
| /* Button Interactions */
| | --><templatestyles src="Template:MainHeader/styles.css"/><!-- |
| .tg-mainpage-header-search:hover,
| |
| .tg-mainpage-header-search:focus { | |
| background-color: #ff6f4e;
| |
| transform: scale(1.05); /* Scale effect is kept */
| |
| outline: none;
| |
| /* ADJUSTED: More prominent shadow suitable for light theme */
| |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
| |
| }
| |
|
| |
|
| .tg-mainpage-header-search:active {
| | --><noinclude> |
| background-color: #e64a2e;
| | {{/doc}} |
| transform: scale(1);
| | </noinclude> |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
| |
| }
| |
| | |
| /* Search Icon */
| |
| .home-header__searchIcon {
| |
| display: inline-block;
| |
| width: 16px;
| |
| height: 16px;
| |
| mask-image: url('/w/images/a/a5/WikimediaUI-Search.svg');
| |
| mask-repeat: no-repeat;
| |
| mask-size: contain;
| |
| background-color: currentColor;
| |
| }
| |
| | |
| | |
| /* --- DARK MODE (Activates if user's system is in dark mode) --- */
| |
| @media (prefers-color-scheme: dark) {
| |
| /* In dark mode, there will also be no background, only text colors will change */
| |
| .tg-mainpage-header-wordmark {
| |
| color: #ffffff;
| |
| /* Let's bring back the glow effect in dark mode */
| |
| text-shadow: 0 0 12px rgba(255, 87, 51, 0.25);
| |
| }
| |
| | |
| .tg-mainpage-header-tagline {
| |
| color: #a0a0a0;
| |
| }
| |
|
| |
| .tg-mainpage-header-search {
| |
| /* Let's update the button's shadow to an orange glow for dark mode */
| |
| box-shadow: 0 4px 15px rgba(255, 87, 51, 0.2);
| |
| }
| |
| | |
| .tg-mainpage-header-search:hover,
| |
| .tg-mainpage-header-search:focus {
| |
| box-shadow: 0 6px 20px rgba(255, 87, 51, 0.4);
| |
| }
| |
| | |
| .tg-mainpage-header-search:active {
| |
| box-shadow: 0 4px 15px rgba(255, 87, 51, 0.2);
| |
| }
| |
| }
| |
