MediaWiki:FairyGodm.css - Revision history

Noorisei at 12:27, 2 January 2026

2026-01-02T12:27:12Z

Noorisei at 00:28, 8 December 2025

2025-12-08T00:28:56Z

← Older revision		Revision as of 20:28, 7 December 2025
Line 47:		Line 47:
	gap: 24px;		gap: 24px;
	margin-top: 24px;		margin-top: 24px;
			}

			/* Quando dentro das nested tabs, ocupar a largura total da grade */
			.tab-content .nested-content .hair-dyes-grid {
			grid-column: 1 / -1;
			width: 100%;
	}		}

Line 93:		Line 99:

	.dye-items {		.dye-items {
	display: ~~grid;~~		display: block;
	~~grid-template-columns: repeat(2, 1fr);~~
	~~gap: 24px~~;
	}		}

	.dye-item {		.dye-item, .quest-section {
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 110:		Line 114:
	}		}

	.dye-item:hover {		.dye-item:hover, .quest-section:hover {
	background: #fff0f6;		background: #fff0f6;
	}		}
Line 179:		Line 183:
	display: block;		display: block;
	margin: 0 auto;		margin: 0 auto;
			}

			/* Grid layout for quest sections inside nested tabs (apenas quando ativo) */
			.tab-content.active .nested-content.active {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 24px;
	}		}

Line 362:		Line 373:
	transform: translateY(-1px);		transform: translateY(-1px);
	}		}
			/* Ensure quest sections stack to one column on tablet */
			.tab-content.active .nested-content.active { grid-template-columns: 1fr; min-width: 0; }
	}		}

Line 401:		Line 414:
	transform: none;		transform: none;
	}		}
			/* Mobile: single column and allow shrinking */
			.tab-content.active .nested-content.active { grid-template-columns: 1fr; min-width: 0; }

	@keyframes fadeIn {		@keyframes fadeIn {
Line 599:		Line 614:
	color: white;		color: white;
	}		}

			.fashion-badge {
			display: inline-flex;
			align-items: center;
			padding: 4px 10px;
			background: linear-gradient(135deg, #ff6b9d, #ff8c6b);
			color: #ffffff;
			border-radius: 999px;
			font-weight: 700;
			font-size: 0.8rem;
			text-transform: uppercase;
			letter-spacing: 0.02em;
			box-shadow: 0 4px 12px rgba(255, 107, 157, 0.35);
			border: 1px solid rgba(255, 107, 157, 0.35);
			}

			html[data-theme="dark"] .fashion-badge {
			background: linear-gradient(135deg, #274c77, #1b2b41);
			color: #ffffff;
			border: 1px solid rgba(123, 187, 255, 0.35);
			box-shadow: 0 4px 12px rgba(123, 187, 255, 0.28);
			}

	html[data-theme="dark"] .container { color: #cfe6ff }		html[data-theme="dark"] .container { color: #cfe6ff }
	html[data-theme="dark"] .header { background: linear-gradient(135deg, #274c77, #1b2b41); color: #ffffff; box-shadow: 0 4px 20px rgba(123,187,255,.22) }		html[data-theme="dark"] .header { background: linear-gradient(135deg, #274c77, #1b2b41); color: #ffffff; box-shadow: 0 4px 20px rgba(123,187,255,.22) }
Line 606:		Line 644:
	html[data-theme="dark"] .exchange-icon { background: linear-gradient(135deg, #274c77, #1b2b41); color: #ffffff }		html[data-theme="dark"] .exchange-icon { background: linear-gradient(135deg, #274c77, #1b2b41); color: #ffffff }
	html[data-theme="dark"] .card-title { color: #cfe6ff }		html[data-theme="dark"] .card-title { color: #cfe6ff }
	html[data-theme="dark"] .dye-item { background: #101625; color: #cfe6ff }		html[data-theme="dark"] .dye-item, html[data-theme="dark"] .quest-section { background: #101625; color: #cfe6ff }
	html[data-theme="dark"] .dye-item:hover { background: rgba(61,97,146,.22) }		html[data-theme="dark"] .dye-item:hover, html[data-theme="dark"] .quest-section:hover { background: rgba(61,97,146,.22) }
	html[data-theme="dark"] .dye-name { color: #cfe6ff }		html[data-theme="dark"] .dye-name { color: #cfe6ff }
	html[data-theme="dark"] .dye-preview { color: #a8c6e8 }		html[data-theme="dark"] .dye-preview { color: #a8c6e8 }

Noorisei at 15:35, 3 December 2025

2025-12-03T15:35:49Z

@@ Line 1: / Line 1: @@
 /* Header Section */
@@ Line 593: / Line 599: @@
    color: white;
+}

Noorisei: Created page with " /* Header Section */ .header { text-align: center; margin-bottom: 32px; padding: 32px; background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%); border-radius: 20px; box-shadow: 0 4px 20px rgba(255, 107, 157, 0.3); color: white; } .header h1 { font-size: 3rem; margin-bottom: 16px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .header p { font-size: 1.2rem; opacity: 0.95; max-width: 800px; margin: 0 auto; } .npc..."

2025-10-21T20:42:40Z

Created page with " Header Section: .header { text-align: center; margin-bottom: 32px; padding: 32px; background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%); border-radius: 20px; box-shadow: 0 4px 20px rgba(255, 107, 157, 0.3); color: white; } .header h1 { font-size: 3rem; margin-bottom: 16px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .header p { font-size: 1.2rem; opacity: 0.95; max-width: 800px; margin: 0 auto; } .npc..."

New page

/* Header Section */
.header {
text-align: center;
margin-bottom: 32px;
padding: 32px;
background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%);
border-radius: 20px;
box-shadow: 0 4px 20px rgba(255, 107, 157, 0.3);
color: white;
}

.header h1 {
font-size: 3rem;
margin-bottom: 16px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.header p {
font-size: 1.2rem;
opacity: 0.95;
max-width: 800px;
margin: 0 auto;
}

.npc-info {
background: #ffffff;
padding: 24px;
border-radius: 14px;
margin: 24px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border-left: 4px solid #ff6b9d;
}

/* Hair Dye Cards */
.hair-dyes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 24px;
}

.hair-dye-card {
background: #ffffff;
border-radius: 14px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: 0.3s ease;
border: 1px solid #f0f0f0;
}

.hair-dye-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3);
border-color: rgba(255, 107, 157, 0.2);
}

.card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 2px solid #ffd9e9;
}

.exchange-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 0.8rem;
}

.card-title {
font-size: 1.1rem;
font-weight: 600;
color: #2d2d2d;
}

.dye-items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}

.dye-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px;
background: #fafafa;
border-radius: 10px;
transition: 0.15s ease;
text-align: center;
}

.dye-item:hover {
background: #fff0f6;
}

.dye-info {
flex: 1;
}

.dye-name {
font-weight: 500;
color: #2d2d2d;
margin-bottom: 2px;
}

.dye-preview {
font-size: 0.9rem;
color: #666666;
}

.class-header {
text-align: center;
margin-bottom: 24px;
padding: 24px;
background: rgba(255, 107, 157, 0.15);
border-radius: 14px;
border: 1px solid rgba(255, 107, 157, 0.2);
}

.class-title {
font-size: 2rem;
color: #ff6b9d;
margin-bottom: 8px;
}

.class-description {
color: #666666;
font-style: italic;
}

/* Image Container Styles - Adapted from ImageContainer.css */
.image-container {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #ffeef7 100%);
border: 1px solid rgba(255, 107, 157, 0.15);
border-radius: 12px;
padding: 15px;
margin-bottom: 12px;
box-shadow: 0 2px 10px rgba(255, 107, 157, 0.06);
text-align: center;
font-size: 0.9em;
line-height: 1.4;
max-width: 100%;
overflow: hidden;
}

.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 8px;
}

.dye-preview img {
max-width: 150px;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: block;
margin: 0 auto;
}

/* ========================================
TABS SYSTEM
======================================== */

.tab-content {
display: none;
background: rgba(255,255,255,0.98);
border-radius: 20px;
border: 2px solid rgba(255, 111, 163, 0.18);
box-shadow: 0 6px 24px rgba(255, 79, 145, 0.18);
padding: 30px 20px;
}

.tab-content.active {
margin: 0 auto;
max-width: 1000px;
width: 90%;
background: white;
border-radius: 16px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
padding: 20px 40px;
box-sizing: border-box;
display: block;
animation: fadeIn .35s ease;
}

.nav-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px 8px;
padding: 12px 20px;
list-style: none;
border-bottom: none;
justify-content: center;
margin-bottom: 12px;
}

.nav-tab {
background: white;
border: 2px solid rgba(255, 111, 163, 0.18);
border-radius: 14px;
border-color: rgba(255, 107, 157, 0.5);
padding: 12px 20px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
color: #666;
text-decoration: none;
display: inline-block;
}

.nav-tab:hover {
background: rgba(255, 111, 163, 0.08);
border-color: rgba(255, 111, 163, 0.7);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 111, 163, 0.15);
}

.nav-tab.active {
background: linear-gradient(135deg, #ff4f91, #d02f72);
border-color: rgba(255, 107, 157, 0.9);
color: white;
box-shadow: 0 4px 12px rgba(255, 111, 163, 0.3);
position: relative;
animation: floatUpDown 2.5s ease-in-out infinite;
}

.nav-tab .short-text {
display: none;
}

.nav-tab .full-text {
display: inline;
}

.tab-footer {
display: flex;
justify-content: center;
}

/* ========================================
TABS RESPONSIVE DESIGN
======================================== */

/* Desktop médio: 992px - 1199px */
@media (max-width: 1199px) {
.tab-content {
padding: 25px 18px;
border-radius: 18px;
}

.tab-content.active {
padding: 18px 35px;
border-radius: 14px;
}

.nav-tabs {
padding: 10px 18px;
gap: 6px 6px;
margin-bottom: 10px;
}

.nav-tab {
padding: 10px 18px;
border-radius: 12px;
font-size: 0.9rem;
}

.nav-tab.active {
padding: 10px 18px;
}
}

/* Desktop pequeno: 768px - 991px */
@media (max-width: 991px) {
.tab-content {
padding: 20px 15px;
border-radius: 16px;
}

.tab-content.active {
padding: 15px 30px;
border-radius: 12px;
width: 95%;
}

.nav-tabs {
padding: 8px 15px;
gap: 5px 5px;
margin-bottom: 8px;
}

.nav-tab {
padding: 8px 15px;
border-radius: 10px;
font-size: 0.85rem;
}

.nav-tab.active {
padding: 8px 15px;
}
}

/* Tablet: 576px - 767px */
@media (max-width: 767px) {
.tab-content {
padding: 18px 12px;
border-radius: 14px;
}

.tab-content.active {
padding: 12px 25px;
border-radius: 10px;
width: 98%;
}

.nav-tabs {
padding: 6px 12px;
gap: 4px 4px;
margin-bottom: 6px;
flex-direction: column;
align-items: center;
}

.nav-tab {
padding: 6px 12px;
border-radius: 8px;
font-size: 0.8rem;
width: 100%;
text-align: center;
max-width: 200px;
}

.nav-tab.active {
padding: 6px 12px;
}

.nav-tab:hover {
transform: translateY(-1px);
}
}

/* Mobile: até 575px */
@media (max-width: 575px) {
.tab-content {
padding: 15px 10px;
border-radius: 12px;
}

.tab-content.active {
padding: 10px 20px;
border-radius: 8px;
width: 100%;
}

.nav-tabs {
padding: 4px 10px;
gap: 3px 3px;
margin-bottom: 4px;
flex-direction: column;
align-items: center;
}

.nav-tab {
padding: 5px 10px;
border-radius: 6px;
font-size: 0.75rem;
width: 100%;
text-align: center;
max-width: 180px;
}

.nav-tab.active {
padding: 5px 10px;
}

.nav-tab:hover {
transform: none;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}

/* Special styling for Paula class */
.paula-note {
background: #fff0f6;
border: 1px solid #ffb3cf;
border-radius: 10px;
padding: 16px;
margin-top: 16px;
color: #666666;
font-style: italic;
}

/* ========================================
TRICKSTER ONLINE CLASS COLORS
======================================== */

/* Bunny - Rosa/Pink */
.nav-tab[data-tab="bunny"] {
background: linear-gradient(135deg, #ff6b6b, #a01e1e);
border-color: rgba(255, 0, 0, 0.7);
color: white;
}

.nav-tab[data-tab="bunny"]:hover {
background: linear-gradient(135deg, #84cbe7, #169ecc);
border-color: rgba(255, 0, 0, 0.9);
color: white;
}

.nav-tab[data-tab="bunny"].active {
background: linear-gradient(135deg, #84cbe7, #169ecc);
border-color: rgba(255, 0, 0, 0.9);
color: white;
}

/* Buffalo - Marrom/Brown */
.nav-tab[data-tab="buffalo"] {
background: linear-gradient(135deg, #ff6b6b, #a01e1e);
border-color: rgba(255, 0, 0, 0.7);
color: white;
}

.nav-tab[data-tab="buffalo"]:hover {
background: linear-gradient(135deg, #ac5a34, #ff2a2a);
border-color: rgba(255, 0, 0, 0.9);
color: white;
}

.nav-tab[data-tab="buffalo"].active {
background: linear-gradient(135deg, #ac5a34, #ff2a2a);
border-color: rgba(255, 0, 0, 0.9);
color: white;
}

/* Paula - Azul claro/Light Blue */
.nav-tab[data-tab="paula"] {
background: linear-gradient(135deg, #ff6b6b, #a01e1e);
border-color: rgba(255, 0, 0, 0.7);
color: #333;
}

.nav-tab[data-tab="paula"]:hover {
background: linear-gradient(135deg, #f8f8f8, #d4d4d4);
border-color: rgba(255, 0, 0, 0.9);
color: #333;
}

.nav-tab[data-tab="paula"].active {
background: linear-gradient(135deg, #f8f8f8, #d4d4d4);
border-color: rgba(255, 0, 0, 0.9);
color: #333;
}

/* Sheep - Branco/White */
.nav-tab[data-tab="sheep"] {
background: linear-gradient(135deg, #414fcc, #2532a5);
border-color: rgba(38, 0, 255, 0.7);
color: #333;
}

.nav-tab[data-tab="sheep"]:hover {
background: linear-gradient(135deg, #ff7bbd, #ff54a9);
border-color: rgba(38, 0, 255, 0.9);
color: #333;
}

.nav-tab[data-tab="sheep"].active {
background: linear-gradient(135deg, #ff7bbd, #ff54a9);
border-color: rgba(38, 0, 255, 0.9);
color: #333;
}

/* Dragon - Vermelho/Red */
.nav-tab[data-tab="dragon"] {
background: linear-gradient(135deg, #414fcc, #2532a5);
border-color: rgba(38, 0, 255, 0.7);
color: white;
}

.nav-tab[data-tab="dragon"]:hover {
background: linear-gradient(135deg, #8c2bfc, #6107c9);
border-color: rgba(38, 0, 255, 0.9);
color: white;
}

.nav-tab[data-tab="dragon"].active {
background: linear-gradient(135deg, #8c2bfc, #6107c9);
border-color: rgba(38, 0, 255, 0.9);
color: white;
}

/* Fox - Laranja/Orange */
.nav-tab[data-tab="fox"] {
background: linear-gradient(135deg, #9370DB, #BA55D3);
border-color: rgba(212, 0, 255, 0.7);
color: white;
}

.nav-tab[data-tab="fox"]:hover {
background: linear-gradient(135deg, #ad56ff, #cd07ff);
border-color: rgba(212, 0, 255, 0.9);
color: white;
}

.nav-tab[data-tab="fox"].active {
background: linear-gradient(135deg, #ad56ff, #cd07ff);
border-color: rgba(212, 0, 255, 0.9);
color: white;
}

/* Lion - Dourado/Gold */
.nav-tab[data-tab="lion"] {
background: linear-gradient(135deg, #9370DB, #BA55D3);
border-color: rgba(212, 0, 255, 0.7);
color: #333;
}

.nav-tab[data-tab="lion"]:hover {
background: linear-gradient(135deg, #f3cd23, #d3a201);
border-color: rgba(212, 0, 255, 0.9);
color: #333;
}

.nav-tab[data-tab="lion"].active {
background: linear-gradient(135deg, #f3cd23, #d3a201);
border-color: rgba(212, 0, 255, 0.9);
color: #333;
}

/* Cat - Roxo/Purple */
.nav-tab[data-tab="cat"] {
background: linear-gradient(135deg, #FF8C00, #FFA500);
border-color: rgba(255, 136, 0, 0.7);
color: white;
}

.nav-tab[data-tab="cat"]:hover {
background: linear-gradient(135deg, #ffd727, #f3bb02);
border-color: rgba(255, 136, 0, 0.9);
color: white;
}

.nav-tab[data-tab="cat"].active {
background: linear-gradient(135deg, #ffd727, #f3bb02);
border-color: rgba(255, 136, 0, 0.9);
color: white;
}

/* Raccoon - Cinza/Gray */
.nav-tab[data-tab="raccoon"] {
background: linear-gradient(135deg, #FF8C00, #FFA500);
border-color: rgba(255, 136, 0, 0.7);
color: white;
}

.nav-tab[data-tab="raccoon"]:hover {
background: linear-gradient(135deg, #c77931, #884302);
border-color: rgba(255, 136, 0, 0.9);
color: white;
}

.nav-tab[data-tab="raccoon"].active {
background: linear-gradient(135deg, #c77931, #884302);
border-color: rgba(255, 136, 0, 0.9);
color: white;
}