Lala, Shahd
394 lines
7.8 KiB
CSS
394 lines
7.8 KiB
CSS
@import '../../button-template.css';
|
|
|
|
.game-shell {
|
|
min-height: 100dvh;
|
|
padding: clamp(var(--size-md), 2vw, var(--size-xl));
|
|
background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-secondary-mint) 100%);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
:host-context(html[data-theme='dark']) .game-shell {
|
|
background:
|
|
radial-gradient(circle at top, rgba(185, 194, 218, 0.16) 0%, transparent 35%),
|
|
linear-gradient(180deg, #0f1f2e 0%, #17293d 52%, #0b1420 100%);
|
|
}
|
|
|
|
.game-card {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: var(--color-bg-main);
|
|
border: var(--border-width) solid var(--color-border);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: clamp(var(--size-lg), 2vw, var(--size-xl));
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
:host-context(html[data-theme='dark']) .game-shell .game-card {
|
|
background: rgba(26, 47, 71, 0.88);
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
header {
|
|
margin-bottom: var(--size-xl);
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
color: var(--color-text-primary);
|
|
margin: 0 0 var(--size-md);
|
|
font-size: var(--heading-h1);
|
|
}
|
|
|
|
.meta {
|
|
color: var(--color-text-primary);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-block;
|
|
margin-bottom: var(--size-sm);
|
|
color: var(--color-text-primary);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.back-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.top-section {
|
|
display: grid;
|
|
gap: var(--size-md);
|
|
margin-top: var(--size-sm);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.board-theme-card {
|
|
background: var(--color-bg-card);
|
|
border: var(--border-width) solid var(--color-border);
|
|
border-radius: var(--border-radius-md);
|
|
padding: var(--size-md-padding);
|
|
display: grid;
|
|
gap: var(--size-sm);
|
|
}
|
|
|
|
.board-theme-card h3 {
|
|
margin: 0;
|
|
color: var(--color-text-primary);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.board-theme-group {
|
|
display: flex;
|
|
gap: var(--size-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.board-theme-option {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--size-xs);
|
|
color: var(--color-text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.board-theme-option input {
|
|
accent-color: var(--color-primary);
|
|
}
|
|
|
|
.move-card {
|
|
padding: var(--size-lg-padding);
|
|
}
|
|
|
|
.move-card .btn {
|
|
align-self: flex-start;
|
|
width: auto;
|
|
}
|
|
|
|
.center-column {
|
|
width: 100%;
|
|
}
|
|
|
|
.board-section {
|
|
background: var(--color-bg-board);
|
|
border: var(--border-width) solid var(--color-border);
|
|
border-radius: var(--border-radius-md);
|
|
padding: clamp(var(--size-sm), 1vw, var(--size-lg));
|
|
min-height: 400px;
|
|
container-type: size;
|
|
}
|
|
|
|
:host-context(html[data-theme='dark']) .game-shell .board-section,
|
|
:host-context(html[data-theme='dark']) .game-shell .timer-card,
|
|
:host-context(html[data-theme='dark']) .game-shell .history-card,
|
|
:host-context(html[data-theme='dark']) .game-shell .export-card,
|
|
:host-context(html[data-theme='dark']) .game-shell .board-theme-card,
|
|
:host-context(html[data-theme='dark']) .game-shell .player-timer {
|
|
background: rgba(45, 74, 111, 0.72);
|
|
}
|
|
|
|
:host-context(html[data-theme='dark']) .game-shell .export-text {
|
|
background: rgba(26, 47, 71, 0.9);
|
|
}
|
|
|
|
:host-context(html[data-theme='dark']) .game-shell .game-completion-alert {
|
|
background: linear-gradient(135deg, rgba(74, 124, 124, 0.35) 0%, rgba(90, 111, 165, 0.35) 100%);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.timer-card,
|
|
.history-card,
|
|
.export-card {
|
|
background: var(--color-bg-card);
|
|
border: var(--border-width) solid var(--color-border);
|
|
border-radius: var(--border-radius-md);
|
|
padding: var(--size-lg-padding);
|
|
display: grid;
|
|
gap: var(--size-md);
|
|
}
|
|
|
|
.timer-card h2,
|
|
.history-card h2,
|
|
.export-card h2 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.history-list {
|
|
margin: 0;
|
|
padding-left: 1.1rem;
|
|
display: grid;
|
|
gap: var(--size-xs);
|
|
max-height: 180px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.history-list li {
|
|
color: var(--color-text-primary);
|
|
display: flex;
|
|
gap: var(--size-sm);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.history-number {
|
|
font-weight: 700;
|
|
min-width: 1.8rem;
|
|
}
|
|
|
|
.history-move {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.history-empty {
|
|
margin: 0;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.player-timer {
|
|
background: var(--color-bg-input);
|
|
border: var(--border-width) solid var(--color-border);
|
|
border-radius: var(--border-radius-md);
|
|
padding: var(--size-md-padding);
|
|
}
|
|
|
|
.active-timer {
|
|
box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.25);
|
|
}
|
|
|
|
.timer-label {
|
|
margin: 0;
|
|
color: var(--color-text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timer-value {
|
|
margin: var(--size-xs) 0 0;
|
|
color: var(--color-text-primary);
|
|
font-size: 1.35rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.export-mode-group {
|
|
display: flex;
|
|
gap: var(--size-lg);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.export-mode-option {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--size-sm);
|
|
color: var(--color-text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.export-mode-option input {
|
|
accent-color: var(--color-primary);
|
|
}
|
|
|
|
.export-text {
|
|
width: 100%;
|
|
min-height: 140px;
|
|
border: var(--border-width) solid var(--color-border);
|
|
border-radius: var(--border-radius-md);
|
|
background: var(--color-bg-input);
|
|
color: var(--color-text-primary);
|
|
padding: var(--size-md-padding);
|
|
resize: vertical;
|
|
}
|
|
|
|
.export-button {
|
|
width: fit-content;
|
|
border: var(--button-border);
|
|
border-radius: var(--button-radius);
|
|
background: var(--color-bg-button);
|
|
color: var(--color-text-primary);
|
|
font-weight: 700;
|
|
padding: var(--button-padding);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.export-button:hover {
|
|
background: var(--color-bg-button-hover);
|
|
color: var(--color-text-button-hover);
|
|
}
|
|
|
|
.export-note {
|
|
margin: 0;
|
|
color: var(--color-text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.alert {
|
|
border-radius: var(--border-radius-sm);
|
|
border: var(--border-width) solid var(--color-border);
|
|
}
|
|
|
|
.game-completion-alert {
|
|
background: linear-gradient(135deg, var(--color-secondary-mint, #B9DAD1) 0%, var(--color-secondary-blue, #B9C2DA) 100%);
|
|
border: 2px solid var(--color-secondary-mint, #B9DAD1) !important;
|
|
border-radius: var(--border-radius-lg) !important;
|
|
padding: var(--size-xl-padding) !important;
|
|
box-shadow: 0 8px 16px rgba(185, 218, 209, 0.3);
|
|
animation: slideIn 0.4s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.completion-title {
|
|
color: var(--color-text-primary);
|
|
font-size: 1.75rem;
|
|
margin: 0 0 var(--size-md) 0;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.completion-subtitle {
|
|
text-align: center;
|
|
color: var(--color-text-primary);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.completion-link {
|
|
color: var(--color-text-primary);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
border-bottom: 2px solid var(--color-text-primary);
|
|
transition: all 0.3s ease;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.completion-link:hover {
|
|
color: var(--color-secondary-blue);
|
|
border-bottom-color: var(--color-secondary-blue);
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.game-card {
|
|
padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
|
|
}
|
|
|
|
.board-section {
|
|
min-height: 350px;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-size: var(--heading-h1-tablet);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.game-shell {
|
|
padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
|
|
}
|
|
|
|
.game-card {
|
|
padding: clamp(var(--size-sm), 1vw, var(--size-md));
|
|
}
|
|
|
|
header {
|
|
margin-bottom: var(--size-lg);
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-size: var(--heading-h1-mobile);
|
|
}
|
|
|
|
.meta {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.top-section {
|
|
gap: var(--size-xs);
|
|
margin-bottom: var(--size-xs);
|
|
}
|
|
|
|
.board-section {
|
|
min-height: 300px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.game-shell {
|
|
padding: var(--size-sm);
|
|
}
|
|
|
|
.game-card {
|
|
padding: var(--size-sm);
|
|
border-radius: var(--border-radius-md);
|
|
}
|
|
|
|
header {
|
|
margin-bottom: var(--size-md);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--heading-h1-small);
|
|
}
|
|
|
|
.meta {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.top-section {
|
|
gap: var(--size-xs-gap);
|
|
margin-bottom: var(--size-xs);
|
|
}
|
|
|
|
.board-section {
|
|
min-height: 250px;
|
|
}
|
|
}
|