/*
* Frontend styles for GAG Stock plugin
* Modern glassmorphism design with responsive layout
*/
:root {
--gag-primary: #4F46E5;
--gag-secondary: #06B6D4;
--gag-success: #10B981;
--gag-warning: #F59E0B;
--gag-error: #EF4444;
--gag-dark: #1F2937;
--gag-light: #F9FAFB;
--gag-glass-bg: rgba(255, 255, 255, 0.1);
--gag-glass-border: rgba(255, 255, 255, 0.2);
--gag-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
--gag-radius: 12px;
--gag-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Base styles */
.gag-stock-grid,
.gag-stock-tabs,
.gag-stock-list,
.gag-stock-compact,
.gag-weather-widget {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 1rem 0;
position: relative;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Loading states */
.gag-updating {
position: relative;
opacity: 0.7;
pointer-events: none;
}
.gag-updating::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
border: 2px solid var(--gag-primary);
border-radius: 50%;
border-top-color: transparent;
animation: gag-spin 0.8s linear infinite;
z-index: 10;
}
@keyframes gag-spin {
to { transform: rotate(360deg); }
}
/* Grid Layout */
.gag-stock-grid {
background: var(--gag-glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--gag-glass-border);
border-radius: var(--gag-radius);
padding: 1.5rem;
box-shadow: var(--gag-shadow);
}
.gag-category-section {
margin-bottom: 2rem;
}
.gag-category-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--gag-dark);
margin: 0 0 1rem 0;
text-transform: capitalize;
display: flex;
align-items: center;
gap: 0.5rem;
}
.gag-category-title::before {
content: '';
width: 4px;
height: 20px;
background: linear-gradient(135deg, var(--gag-primary), var(--gag-secondary));
border-radius: 2px;
}
.gag-items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.gag-stock-grid[data-columns="1"] .gag-items-grid { grid-template-columns: 1fr; }
.gag-stock-grid[data-columns="2"] .gag-items-grid { grid-template-columns: repeat(2, 1fr); }
.gag-stock-grid[data-columns="3"] .gag-items-grid { grid-template-columns: repeat(3, 1fr); }
.gag-stock-grid[data-columns="4"] .gag-items-grid { grid-template-columns: repeat(4, 1fr); }
.gag-stock-grid[data-columns="5"] .gag-items-grid { grid-template-columns: repeat(5, 1fr); }
.gag-stock-grid[data-columns="6"] .gag-items-grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 768px) {
.gag-items-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.gag-stock-grid[data-columns="3"] .gag-items-grid,
.gag-stock-grid[data-columns="4"] .gag-items-grid,
.gag-stock-grid[data-columns="5"] .gag-items-grid,
.gag-stock-grid[data-columns="6"] .gag-items-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Item Cards */
.gag-item {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--gag-radius);
padding: 1rem;
text-align: center;
transition: var(--gag-transition);
position: relative;
overflow: hidden;
}
.gag-item:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
border-color: var(--gag-primary);
}
.gag-item-image {
margin-bottom: 0.75rem;
display: flex;
justify-content: center;
align-items: center;
height: 64px;
}
.gag-item-image img {
max-width: 64px;
max-height: 64px;
border-radius: 8px;
transition: var(--gag-transition);
}
.gag-item:hover .gag-item-image img {
transform: scale(1.1);
}
.gag-item-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--gag-dark);
margin: 0 0 0.5rem 0;
line-height: 1.3;
}
.gag-item-quantity {
font-size: 1rem;
color: #6B7280;
font-weight: 600;
background: rgba(107, 114, 128, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 6px;
display: inline-block;
margin-bottom: 0.5rem;
}
/* Tabs Layout */
.gag-stock-tabs {
background: var(--gag-glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--gag-glass-border);
border-radius: var(--gag-radius);
overflow: hidden;
box-shadow: var(--gag-shadow);
}
.gag-tabs-nav {
display: flex;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
overflow: hidden;
margin: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
width: calc(100% - 2rem);
box-sizing: border-box;
}
.gag-tab-btn {
background: transparent;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
padding: 1rem 1.5rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: 500;
font-size: 0.875rem;
color: #6B7280;
white-space: nowrap;
position: relative;
flex: 1;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
}
.gag-tab-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--gag-dark);
}
.gag-tab-btn:last-child {
border-right: none;
}
.gag-tab-btn.active {
background: rgba(255, 255, 255, 0.9);
color: var(--gag-dark);
font-weight: 600;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.gag-tab-btn.active::after {
display: none;
}
.gag-tab-icon {
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.gag-tab-count {
background: rgba(107, 114, 128, 0.2);
padding: 0.125rem 0.375rem;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
margin-left: 0.25rem;
}
.gag-tab-btn.active .gag-tab-count {
background: var(--gag-primary);
color: white;
}
.gag-tabs-content {
padding: 1.5rem;
}
.gag-tab-panel {
display: none;
}
.gag-tab-panel.active {
display: block;
animation: gag-fade-in 0.3s ease-out;
}
@keyframes gag-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* List Layout */
.gag-stock-list {
background: var(--gag-glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--gag-glass-border);
border-radius: var(--gag-radius);
padding: 1.5rem;
box-shadow: var(--gag-shadow);
}
.gag-items-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.gag-item-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
transition: var(--gag-transition);
}
.gag-item-row:hover {
background: rgba(255, 255, 255, 0.8);
transform: translateX(4px);
}
.gag-item-row .gag-item-image {
margin: 0;
height: auto;
flex-shrink: 0;
}
.gag-item-row .gag-item-info {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
}
.gag-item-row .gag-item-name {
margin: 0;
font-size: 0.875rem;
}
.gag-item-row .gag-item-quantity {
margin: 0;
}
/* Compact Layout */
.gag-stock-compact {
background: var(--gag-glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--gag-glass-border);
border-radius: var(--gag-radius);
padding: 1rem;
box-shadow: var(--gag-shadow);
font-size: 0.875rem;
line-height: 1.6;
}
.gag-compact-category {
margin-bottom: 0.75rem;
}
.gag-compact-category:last-child {
margin-bottom: 0;
}
.gag-compact-category strong {
color: var(--gag-primary);
font-weight: 600;
}
/* Old weather styles removed - using new professional design */
/* Old weather widget styles removed - using new professional card design */
/* Error Messages */
.gag-error {
background: #FEF2F2;
border: 1px solid #FECACA;
color: #DC2626;
padding: 1rem;
border-radius: var(--gag-radius);
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.gag-error::before {
content: 'âš ï¸';
font-size: 1.25rem;
}
/* Single Item Display */
.gag-single-item {
background: var(--gag-glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--gag-glass-border);
border-radius: var(--gag-radius);
padding: 1.5rem;
box-shadow: var(--gag-shadow);
display: flex;
align-items: center;
gap: 1rem;
max-width: 400px;
}
.gag-single-item .gag-item-image {
margin: 0;
height: auto;
}
.gag-single-item .gag-item-info {
flex: 1;
}
/* Responsive Design */
@media (max-width: 640px) {
.gag-stock-grid,
.gag-stock-tabs,
.gag-stock-list,
.gag-stock-compact,
.gag-weather-widget {
margin: 0.5rem 0;
padding: 1rem;
}
.gag-tabs-nav {
margin: 0.5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.gag-tab-btn {
padding: 0.75rem 1rem;
font-size: 0.8rem;
min-width: fit-content;
flex-shrink: 0;
}
.gag-item-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.gag-item-row .gag-item-info {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.gag-weather-current {
flex-direction: column;
gap: 0.75rem;
}
.gag-single-item {
flex-direction: column;
text-align: center;
}
}
/* Refresh Timing Display */
.gag-timing-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.gag-timing-card {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 1rem;
backdrop-filter: blur(10px);
transition: all 0.2s ease;
}
.gag-timing-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.gag-timing-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.gag-timing-icon {
font-size: 1.125rem;
opacity: 0.8;
}
.gag-timing-title {
font-size: 0.75rem;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.025em;
margin: 0;
}
.gag-timing-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--gag-dark);
margin: 0;
}
.gag-timing-countdown {
color: var(--gag-primary);
font-weight: 700;
}
.gag-timing-countdown.gag-refreshing {
color: var(--gag-warning);
animation: gag-pulse 1.5s ease-in-out infinite;
}
/* No Image Placeholder */
.gag-no-image-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: rgba(107, 114, 128, 0.1);
border: 1px solid rgba(107, 114, 128, 0.2);
border-radius: 8px;
padding: 0.5rem;
transition: all 0.2s ease;
}
.gag-no-image-placeholder:hover {
background: rgba(107, 114, 128, 0.15);
border-color: rgba(107, 114, 128, 0.3);
}
.gag-no-image-icon {
font-size: 1.25rem;
margin-bottom: 0.25rem;
opacity: 0.7;
}
.gag-no-image-text {
font-size: 0.625rem;
color: #6B7280;
text-align: center;
line-height: 1.2;
font-weight: 500;
}
/* Theme Toggle Button */
.gag-theme-toggle {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 100;
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 0.5rem;
backdrop-filter: blur(10px);
transition: all 0.2s ease;
}
.gag-theme-toggle:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.gag-theme-toggle-btn {
background: none;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all 0.2s ease;
color: #6B7280;
}
.gag-theme-toggle-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.gag-theme-toggle-btn.active {
background: var(--gag-primary);
color: white;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}
/* Beautiful Dark Mode Theme */
.gag-theme-dark {
--gag-dark: #FFFFFF;
--gag-light: #0F172A;
--gag-glass-bg: rgba(15, 23, 42, 0.95);
--gag-glass-border: rgba(79, 70, 229, 0.3);
--gag-primary: #6366F1;
--gag-secondary: #8B5CF6;
--gag-success: #10B981;
--gag-warning: #F59E0B;
--gag-error: #EF4444;
}
/* Dark Mode Container Styles */
.gag-theme-dark .gag-stock-grid,
.gag-theme-dark .gag-stock-tabs,
.gag-theme-dark .gag-stock-list {
background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
border: 1px solid rgba(79, 70, 229, 0.2);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}
/* Dark Mode Tab Navigation */
.gag-theme-dark .gag-tabs-nav {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(79, 70, 229, 0.3);
backdrop-filter: blur(20px);
}
.gag-theme-dark .gag-tab-btn {
color: #CBD5E1;
border-right-color: rgba(79, 70, 229, 0.2);
}
.gag-theme-dark .gag-tab-btn:hover {
background: rgba(79, 70, 229, 0.1);
color: #FFFFFF;
}
.gag-theme-dark .gag-tab-btn.active {
background: linear-gradient(135deg, #6366F1, #8B5CF6);
color: #FFFFFF;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
}
.gag-theme-dark .gag-tab-count {
background: rgba(30, 41, 59, 0.8);
color: #94A3B8;
}
.gag-theme-dark .gag-tab-btn.active .gag-tab-count {
background: rgba(255, 255, 255, 0.2);
color: #FFFFFF;
}
/* Dark Mode Item Cards */
.gag-theme-dark .gag-item {
background: linear-gradient(145deg, #1E293B 0%, #334155 100%);
border: 1px solid rgba(79, 70, 229, 0.2);
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(99, 102, 241, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.gag-theme-dark .gag-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
transition: left 0.5s ease;
}
.gag-theme-dark .gag-item:hover {
background: linear-gradient(145deg, #334155 0%, #475569 100%);
border-color: rgba(99, 102, 241, 0.4);
box-shadow:
0 20px 40px -8px rgba(99, 102, 241, 0.3),
0 0 0 1px rgba(99, 102, 241, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
transform: translateY(-2px) scale(1.02);
}
.gag-theme-dark .gag-item:hover::before {
left: 100%;
}
.gag-theme-dark .gag-item-name {
color: #FFFFFF;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.gag-theme-dark .gag-item-quantity {
color: #6366F1;
font-weight: 700;
text-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}
/* Dark Mode Timing Cards */
.gag-theme-dark .gag-timing-card {
background: linear-gradient(145deg, #1E293B 0%, #334155 100%);
border: 1px solid rgba(79, 70, 229, 0.3);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.gag-theme-dark .gag-timing-card:hover {
border-color: rgba(99, 102, 241, 0.5);
box-shadow: 0 12px 35px rgba(99, 102, 241, 0.2);
}
.gag-theme-dark .gag-timing-title {
color: #94A3B8;
}
.gag-theme-dark .gag-timing-value {
color: #FFFFFF;
}
/* Dark Mode Weather Cards */
.gag-theme-dark .gag-weather-card {
background: linear-gradient(145deg, #1E293B 0%, #334155 100%);
border: 1px solid rgba(79, 70, 229, 0.3);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.gag-theme-dark .gag-weather-header h3 {
color: #FFFFFF;
}
.gag-theme-dark .gag-weather-content {
color: #CBD5E1;
}
.gag-theme-dark .gag-current-weather-type {
color: #FFFFFF;
}
.gag-theme-dark .gag-weather-updated {
color: #64748B;
}
/* Dark Mode Theme Toggle */
.gag-theme-dark .gag-theme-toggle {
background: rgba(30, 41, 59, 0.9);
border: 1px solid rgba(79, 70, 229, 0.3);
backdrop-filter: blur(20px);
}
.gag-theme-dark .gag-theme-toggle-btn {
color: #94A3B8;
}
.gag-theme-dark .gag-theme-toggle-btn.active {
background: linear-gradient(135deg, #6366F1, #8B5CF6);
color: #FFFFFF;
}
/* Dark Mode No Image Placeholder */
.gag-theme-dark .gag-no-image-placeholder {
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(79, 70, 229, 0.2);
}
.gag-theme-dark .gag-no-image-text {
color: #94A3B8;
}
.gag-theme-light {
--gag-dark: #1F2937;
--gag-light: #F9FAFB;
--gag-glass-bg: rgba(255, 255, 255, 0.1);
--gag-glass-border: rgba(255, 255, 255, 0.2);
}
/* Beautiful System Dark Mode Support */
@media (prefers-color-scheme: dark) {
.gag-theme-system {
--gag-dark: #FFFFFF;
--gag-light: #0F172A;
--gag-glass-bg: rgba(15, 23, 42, 0.95);
--gag-glass-border: rgba(79, 70, 229, 0.3);
--gag-primary: #6366F1;
--gag-secondary: #8B5CF6;
}
.gag-theme-system .gag-stock-grid,
.gag-theme-system .gag-stock-tabs,
.gag-theme-system .gag-stock-list {
background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
border: 1px solid rgba(79, 70, 229, 0.2);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}
.gag-theme-system .gag-tabs-nav {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(79, 70, 229, 0.3);
backdrop-filter: blur(20px);
}
.gag-theme-system .gag-tab-btn {
color: #CBD5E1;
border-right-color: rgba(79, 70, 229, 0.2);
}
.gag-theme-system .gag-tab-btn:hover {
background: rgba(79, 70, 229, 0.1);
color: #FFFFFF;
}
.gag-theme-system .gag-tab-btn.active {
background: linear-gradient(135deg, #6366F1, #8B5CF6);
color: #FFFFFF;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
}
.gag-theme-system .gag-item {
background: linear-gradient(145deg, #1E293B 0%, #334155 100%);
border: 1px solid rgba(79, 70, 229, 0.2);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}
.gag-theme-system .gag-item:hover {
background: linear-gradient(145deg, #334155 0%, #475569 100%);
border-color: rgba(99, 102, 241, 0.4);
box-shadow: 0 20px 40px -8px rgba(99, 102, 241, 0.3);
transform: translateY(-2px);
}
.gag-theme-system .gag-item-name {
color: #FFFFFF;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.gag-theme-system .gag-item-quantity {
color: #6366F1;
font-weight: 700;
text-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}
.gag-theme-system .gag-timing-card,
.gag-theme-system .gag-weather-card {
background: linear-gradient(145deg, #1E293B 0%, #334155 100%);
border: 1px solid rgba(79, 70, 229, 0.3);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.gag-theme-system .gag-timing-title {
color: #94A3B8;
}
.gag-theme-system .gag-timing-value,
.gag-theme-system .gag-weather-header h3,
.gag-theme-system .gag-current-weather-type {
color: #FFFFFF;
}
.gag-theme-system .gag-weather-content {
color: #CBD5E1;
}
}
/* Print styles */
@media print {
.gag-stock-grid,
.gag-stock-tabs,
.gag-stock-list,
.gag-stock-compact {
background: white !important;
border: 1px solid #ccc !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.gag-item,
.gag-item-row {
break-inside: avoid;
}
.gag-weather-widget {
background: #f0f0f0 !important;
color: black !important;
}
}
/* Ultra-Compact Weather Section */
.gag-weather-section {
margin: 1rem 0;
}
.gag-weather-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.gag-weather-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.gag-weather-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.gag-weather-header {
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.25rem;
}
.gag-weather-icon {
font-size: 0.875rem;
display: inline-block;
}
.gag-weather-header h3 {
margin: 0;
font-size: 0.625rem;
font-weight: 600;
color: #374151;
letter-spacing: 0.025em;
text-transform: uppercase;
}
.gag-weather-content {
color: #374151;
}
/* Current Weather Styling */
.gag-current-weather-type {
font-size: 0.75rem;
font-weight: 600;
color: #111827;
margin: 0;
line-height: 1.2;
}
.gag-weather-updated {
font-size: 0.5rem;
color: #6b7280;
font-weight: 400;
margin-top: 0.125rem;
}
/* Weather History Styling */
.gag-weather-history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.125rem 0;
font-size: 0.625rem;
line-height: 1.2;
}
.gag-weather-history-item:last-child {
padding-bottom: 0;
}
.gag-weather-history-main {
display: flex;
align-items: center;
gap: 0.25rem;
flex: 1;
}
.gag-weather-history-icon {
font-size: 0.625rem;
display: inline-block;
width: 0.75rem;
text-align: center;
}
.gag-weather-history-type {
font-size: 0.625rem;
font-weight: 500;
color: #111827;
}
.gag-weather-history-details {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.5rem;
color: #6b7280;
text-align: right;
}
.gag-weather-duration {
font-weight: 500;
}
.gag-weather-time {
font-weight: 400;
}
/* Responsive Weather Design */
@media (max-width: 768px) {
.gag-weather-grid {
grid-template-columns: 1fr;
gap: 0.375rem;
}
.gag-weather-card {
padding: 0.375rem;
}
.gag-weather-header h3 {
font-size: 0.5rem;
}
.gag-current-weather-type {
font-size: 0.625rem;
}
}
@media (max-width: 480px) {
.gag-weather-section {
margin: 0.375rem 0;
}
.gag-weather-grid {
gap: 0.25rem;
}
.gag-weather-card {
padding: 0.25rem;
}
.gag-weather-header {
gap: 0.25rem;
margin-bottom: 0.125rem;
}
.gag-weather-icon {
font-size: 0.75rem;
}
.gag-weather-header h3 {
font-size: 0.5rem;
}
.gag-current-weather-type {
font-size: 0.625rem;
}
.gag-weather-updated {
font-size: 0.5rem;
}
.gag-weather-history-item {
padding: 0.0625rem 0;
}
}
/* Weather Print Styles */
@media print {
.gag-weather-section {
background: white !important;
color: black !important;
}
.gag-weather-card {
background: #f8f9fa !important;
border: 1px solid #dee2e6 !important;
box-shadow: none !important;
backdrop-filter: none !important;
page-break-inside: avoid;
}
.gag-weather-header h3,
.gag-current-weather-type,
.gag-weather-history-type {
color: black !important;
}
.gag-weather-updated,
.gag-weather-history-details {
color: #6c757d !important;
}
}