update score css
This commit is contained in:
parent
f8eaaf20e3
commit
1840280d23
139
style.css
139
style.css
@ -56,6 +56,18 @@ h1 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.scores {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 auto 0 24px;
|
||||
}
|
||||
|
||||
.score-display span {
|
||||
color: var(--accent-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@ -266,7 +278,6 @@ h1 {
|
||||
50% { transform: translateY(-12px); }
|
||||
}
|
||||
|
||||
/* ADDED: Styles for the new modal */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@ -322,27 +333,21 @@ h1 {
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
border: 3px solid transparent;
|
||||
transition: border-color 0.2s ease, transform 0.2s ease;
|
||||
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.back-option .card-face--back { border: none; }
|
||||
.back-option.active, .back-option:hover { border-color: var(--glow); }
|
||||
/* Highlight the selected card back */
|
||||
|
||||
|
||||
.back-option.active {
|
||||
border: 3px solid var(--glow);
|
||||
box-shadow: 0 0 14px 4px var(--glow);
|
||||
transform: scale(1.08);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Still allow hover effect, but don't override active */
|
||||
.back-option:hover {
|
||||
border-color: var(--glow);
|
||||
box-shadow: 0 0 10px 2px var(--glow);
|
||||
transform: scale(1.05);
|
||||
z-index: 1;
|
||||
}
|
||||
.back-option.active {
|
||||
border-color: var(--glow);
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 0 12px 2px var(--glow);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* --- CSS Card Backs --- */
|
||||
@ -367,97 +372,53 @@ body.card-back-nordic .card .card-face--back,
|
||||
.back-option.card-back-nordic .card-face--back {
|
||||
background-color: #2b2d42; background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 1px), linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 1px); background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; border-color: #1e1f2e;
|
||||
}
|
||||
|
||||
body.card-back-midnight .card .card-face--back,
|
||||
.back-option.card-back-midnight .card-face--back {
|
||||
background-color: #121212;
|
||||
background-image:
|
||||
linear-gradient(#ffffff20 1px, transparent 1px),
|
||||
linear-gradient(90deg, #ffffff20 1px, transparent 1px);
|
||||
background-size: 22px 22px;
|
||||
border-color: #1e1e1e;
|
||||
background-color: #121212; background-image: linear-gradient(#ffffff20 1px, transparent 1px), linear-gradient(90deg, #ffffff20 1px, transparent 1px); background-size: 22px 22px; border-color: #1e1e1e;
|
||||
}
|
||||
|
||||
body.card-back-diamond .card .card-face--back,
|
||||
.back-option.card-back-diamond .card-face--back {
|
||||
background-color: #f8f8f8;
|
||||
background-image:
|
||||
linear-gradient(45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #ddd 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #ddd 75%);
|
||||
background-size: 28px 28px;
|
||||
background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
|
||||
border-color: #c2c2c2;
|
||||
background-color: #f8f8f8; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); background-size: 28px 28px; background-position: 0 0, 0 14px, 14px -14px, -14px 0px; border-color: #c2c2c2;
|
||||
}
|
||||
|
||||
body.card-back-royal .card .card-face--back,
|
||||
.back-option.card-back-royal .card-face--back {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
#224488,
|
||||
#224488 12px,
|
||||
#2c5ab0 12px,
|
||||
#2c5ab0 24px
|
||||
);
|
||||
border-color: #1b3561;
|
||||
background: repeating-linear-gradient(45deg, #224488, #224488 12px, #2c5ab0 12px, #2c5ab0 24px); border-color: #1b3561;
|
||||
}
|
||||
|
||||
body.card-back-fade .card .card-face--back,
|
||||
.back-option.card-back-fade .card-face--back {
|
||||
background: linear-gradient(160deg, #2c3e50, #34495e, #2c3e50);
|
||||
border: 1px solid #1a242f;
|
||||
}
|
||||
|
||||
body.card-back-midnight .card .card-face--back,
|
||||
.back-option.card-back-midnight .card-face--back {
|
||||
background-color: #121212;
|
||||
background-image:
|
||||
linear-gradient(#ffffff20 1px, transparent 1px),
|
||||
linear-gradient(90deg, #ffffff20 1px, transparent 1px);
|
||||
background-size: 22px 22px;
|
||||
border-color: #1e1e1e;
|
||||
}
|
||||
|
||||
body.card-back-diamond .card .card-face--back,
|
||||
.back-option.card-back-diamond .card-face--back {
|
||||
background-color: #f8f8f8;
|
||||
background-image:
|
||||
linear-gradient(45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #ddd 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #ddd 75%);
|
||||
background-size: 28px 28px;
|
||||
background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
|
||||
border-color: #c2c2c2;
|
||||
}
|
||||
|
||||
body.card-back-royal .card .card-face--back,
|
||||
.back-option.card-back-royal .card-face--back {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
#224488,
|
||||
#224488 12px,
|
||||
#2c5ab0 12px,
|
||||
#2c5ab0 24px
|
||||
);
|
||||
border-color: #1b3561;
|
||||
}
|
||||
|
||||
body.card-back-fade .card .card-face--back,
|
||||
.back-option.card-back-fade .card-face--back {
|
||||
background: linear-gradient(160deg, #2c3e50, #34495e, #2c3e50);
|
||||
border: 1px solid #1a242f;
|
||||
background: linear-gradient(160deg, #2c3e50, #34495e, #2c3e50); border: 1px solid #1a242f;
|
||||
}
|
||||
|
||||
/* =================================== */
|
||||
/* ======= RESPONSIVE STYLES ======= */
|
||||
/* =================================== */
|
||||
|
||||
/* For Mobile Top Bar (anything below 768px wide) */
|
||||
@media (max-width: 768px) {
|
||||
.topbar {
|
||||
justify-content: center; /* Center the items that wrap */
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.topbar h1 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 8px; /* Add space below title */
|
||||
}
|
||||
.scores {
|
||||
order: 3; /* Move scores below controls */
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin: 8px 0 0 0; /* Center it with top margin */
|
||||
}
|
||||
.controls {
|
||||
order: 2; /* Keep controls above scores */
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* For Mobile Screens (anything below 600px wide) */
|
||||
@media (max-width: 600px) {
|
||||
.foundations {
|
||||
/* This brings the four foundation piles closer together */
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
@ -465,7 +426,6 @@ body.card-back-fade .card .card-face--back,
|
||||
/* For Tablets (screens 768px and wider) */
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
/* Increase the minimum card size for tablets */
|
||||
--card-width: max(7vmin, 75px);
|
||||
}
|
||||
}
|
||||
@ -473,9 +433,6 @@ body.card-back-fade .card .card-face--back,
|
||||
/* For Laptops & Desktops (screens 1024px and wider) */
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
/* Further increase the minimum card size for large screens */
|
||||
--card-width: max(7.5vmin, 90px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user