aboutsummaryrefslogtreecommitdiff
path: root/static/bv/bracket.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/bv/bracket.css')
-rw-r--r--static/bv/bracket.css1286
1 files changed, 0 insertions, 1286 deletions
diff --git a/static/bv/bracket.css b/static/bv/bracket.css
deleted file mode 100644
index ab0285f..0000000
--- a/static/bv/bracket.css
+++ /dev/null
@@ -1,1286 +0,0 @@
-/* ===================
- Root Variables and Resets
- =================== */
- :root {
- --main-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
- --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
- --highlight-color: #fefcbf;
- }
-
- *, *::before, *::after {
- box-sizing: border-box;
- }
-
- /* ===================
- Container Structure
- =================== */
- .puzzle-container {
- width: 100%;
- margin: 0 auto;
- border: 1px solid #e2e8f0;
- border-radius: 0.5rem;
- background: white;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
- padding: 0;
- display: flex;
- flex-direction: column;
- }
-
- @media (min-width: 640px) {
- .puzzle-container {
- max-width: 42rem;
- }
- }
-
- /* ===================
- Header Styles
- =================== */
- /* Header Base Styles */
- .puzzle-header {
- background: white;
- border-bottom: 1px solid #e2e8f0;
- box-sizing: border-box;
- padding: 0.6rem;
- position: relative; /* Desktop default */
- text-align: center;
- z-index: 10;
- }
-
- /* Mobile-specific header styles */
- @media (max-width: 640px) {
- .puzzle-header {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 1000;
- padding: max(0.4rem, env(safe-area-inset-top));
- }
- }
-
- /* Header title */
- .puzzle-header h1 {
- margin: 0 0 0.5rem 0;
- text-align: center;
- font-size: clamp(2rem, 8vw, 3rem);
- cursor: pointer;
- font-family: var(--main-font);
- font-variant: small-caps;
- color: #1a202c;
- font-weight: 600;
- }
-
- @media (max-width: 640px) {
- .puzzle-header h1 {
- margin: 0;
- font-size: clamp(1.8rem, 7vw, 2.8rem);
- }
- }
-
- /* Help button */
- .help-icon {
- background: none;
- border: 2px solid #333;
- border-radius: 50%;
- width: 2.4rem;
- height: 2.4rem;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- font-weight: bold;
- font-size: 1.2rem;
- color: #333;
- }
-
- .puzzle-header .help-button {
- position: absolute;
- top: 10px;
- right: 20px;
- background: none;
- border: 2px solid #333;
- border-radius: 50%;
- width: 2.4rem;
- height: 2.4rem;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- font-weight: bold;
- font-size: 1.2rem;
- color: #333;
- }
-
- @media (max-width: 640px) {
- .puzzle-header .help-button {
- right: 10px;
- }
- }
-
- /* Text bubble for help button */
-.help-button.new-player-highlight::after {
- content: "try the tutorial!";
- position: absolute;
- top: 42px;
- right: -10px;
- background-color: #333;
- color: white;
- padding: 6px 10px;
- border-radius: 6px;
- font-size: 14px;
- font-weight: normal;
- white-space: nowrap;
- z-index: 10;
- filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
- /*animation: fade-in-out 3s infinite;*/
-}
-
-/* Triangle pointer for the bubble */
-.help-button.new-player-highlight::before {
- content: "";
- position: absolute;
- top: 35px;
- right: 10px;
- width: 0;
- height: 0;
- border-left: 8px solid transparent;
- border-right: 8px solid transparent;
- border-bottom: 8px solid #333;
- z-index: 10;
- /*animation: fade-in-out 3s infinite;*/
-
-}
-
-/* Animation for the bubble to fade in and out */
-@keyframes fade-in-out {
- 0%, 100% { opacity: 0.7; }
- 50% { opacity: 1; }
-}
-
-/* Keep the pulsing animation for the button itself */
-.help-button.new-player-highlight {
- border-color: rgb(0, 0, 0);
- color: rgb(0, 0, 0);
- animation: pulse 1s infinite;
-}
-
- /* Optional: Pulse animation to draw attention */
- @keyframes pulse {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.10); }
- 100% { transform: scale(1); }
- }
-
- /* Help button */
- .puzzle-header .info-button {
- position: absolute;
- top: 10px;
- left: 20px;
- background: none;
- border: 2px solid #333;
- border-radius: 50%;
- width: 2.4rem;
- height: 2.4rem;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- font-weight: bold;
- font-size: 1.2rem;
- font-family: menlo;
- color: #333;
- }
-
- /* Style for the unseen info button */
- .info-button.unseen-info {
- border-color: #000000; /* Red border */
- color: #ef4444; /* Red text */
- /*animation: pulse 1s infinite; Optional: add a subtle pulse animation */
- }
-
- /* Optional: Pulse animation to draw attention */
- @keyframes pulse {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.10); }
- 100% { transform: scale(1); }
- }
-
- @media (max-width: 640px) {
- .puzzle-header .info-button {
- left: 10px;
- }
- }
-
- /* Navigation container */
- .puzzle-header .nav-container {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 1rem;
- }
-
- /* Navigation buttons */
- .puzzle-header .nav-button {
- padding: 4px 12px;
- border: none;
- border-radius: 4px;
- background: none;
- cursor: pointer;
- font-weight: bold;
- font-size: 1.5rem;
- color: #333;
- }
-
- .puzzle-header .nav-button:disabled {
- opacity: 0.3;
- cursor: default;
- }
-
- /* Puzzle date */
- .puzzle-header .puzzle-date {
- margin: 0;
- font-size: 20px;
- font-weight: 600;
- font-family: var(--main-font);
- font-variant: small-caps;
- color: #1a202c;
- }
-
- /* ===================
- Main Content Area
- =================== */
- /* New rules for loading state */
-
- .loading {
- text-align: center;
- padding: 2rem;
- }
-
- .puzzle-content {
- padding: 1rem;
- display: flex;
- flex-direction: column;
- gap: 0rem;
- width: 100%;
- }
-
- /* ===================
- Puzzle Display
- =================== */
- .puzzle-display {
- width: 100%;
- min-height: 40vh;
- max-height: 60vh;
- background: #f1f5f9;
- border-radius: 0.5rem;
- padding: 1.5rem;
- font-family: var(--mono-font);
- font-size: 24px;
- line-height: 1.5;
- overflow-y: auto;
- word-break: keep-all;
- overflow-wrap: break-word;
- hyphens: none;
- transition: all 0.3s ease;
- }
-
- .puzzle-display.completed {
- min-height: auto;
- max-height: none;
- height: auto;
- }
-
- .blank-line {
- display: inline-block;
- border-bottom: .15rem solid currentColor;
- line-height: 1;
- position: relative;
- top: .2rem; /* Move line down slightly */
- padding: 0 2px;
- margin: 0 1px;
- }
-
- @media (max-width: 640px) {
- .blank-line {
- border-bottom: .1rem solid currentColor;
- }
- }
-
- /* ===================
- Active Clue & Mark Styles
- =================== */
- .active-clue {
- background-color: rgba(255, 255, 0, 0.2);
- border-radius: 3px;
- padding: 2px 4px;
- margin: -2px -4px;
- transition: background-color 0.3s ease;
- cursor: pointer;
- }
-
- .active-clue:hover {
- background-color: rgba(255, 255, 0, 0.3);
- }
-
- mark.solved {
- background-color: rgba(0, 255, 0, 0.2);
- border-radius: 3px;
- padding: 2px 4px;
- margin: -2px -4px;
- }
-
- mark {
- background-color: transparent;
- color: inherit;
- }
-
- /* ===================
- Input Styles
- =================== */
- .input-container {
- width: 100%;
- margin: 10px 0 0 0;
- position: relative;
- }
-
- .answer-input {
- width: 100%;
- padding: 16px;
- height: 60px;
- font-size: 16px !important;
- border: 1px solid #e2e8f0;
- border-radius: 6px;
- margin-bottom: 0px;
- box-sizing: border-box;
- font-family: var(--mono-font);
- }
-
- /* ===================
- Message Styles
- =================== */
- .message {
- padding: 0.5rem;
- margin: 0.5rem 0;
- border-radius: 0.375rem;
- text-align: center;
- font-family: var(--mono-font);
- display: none;
- }
-
- .message.success {
- background-color: #c6f6d5;
- color: #1a202c;
- overflow-wrap: anywhere;
- font-size: 1.2rem;
- display: block;
- padding: 20px;
- line-height: 2rem;
- }
-
-
- .message.success .completion-link {
- color: #2563eb;
- text-decoration: underline;
- }
-
- .message.error {
- background-color: #fee2e2;
- color: #1a202c;
- overflow-wrap: anywhere;
- font-size: 1.2rem;
- display: block;
- padding: 20px;
- line-height: 2rem;
- }
-
- /* ===================
- Completion Message
- =================== */
- .completion-message {
- margin: 0.5rem 0;
- padding: 0rem;
- border-radius: 0.375rem;
- text-align: center;
- font-family: var(--mono-font);
- font-size: 1.2rem;
- line-height: 1.5;
- }
-
- /* ===================
- Solved Expressions
- =================== */
- .solved-expressions {
- margin-top: 0rem;
- }
-
- .solved-expressions h3 {
- font-size: 1.2rem;
- font-weight: 500;
- margin-bottom: 0.75rem;
- font-family: var(--main-font);
- color: #1a202c;
- }
-
- .expression-item {
- background: #f1f5f9;
- padding: 0.75rem;
- border-radius: 0.375rem;
- margin-bottom: 0.5rem;
- font-size: 1.2rem;
- font-family: var(--mono-font);
- line-height: 1.5;
- }
-
- .expression-item .solution {
- font-weight: 600;
- color: #1a202c;
- }
-
-
- /* ===================
- Stats & Completion
- =================== */
- .stats-content {
- margin-top: 0rem;
- }
-
- .stat-items {
- margin: 0.5rem 0;
- }
-
- .stat-item {
- background: #f1f5f9;
- padding: 0.75rem;
- border-radius: 0.375rem;
- margin-bottom: 0.5rem;
- font-size: 1rem;
- line-height: 1.5;
- font-family: var(--main-font);
- }
-
- /* ===================
- Share Button Styles
- =================== */
- .share-buttons {
- margin-top: 1rem;
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- }
-
- .share-button {
- width: 100%;
- padding: 0.75rem;
- font-size: 1rem;
- font-family: var(--main-font);
- background: #1a202c;
- color: white;
- border: none;
- border-radius: 0.375rem;
- cursor: pointer;
- }
-
- .share-button.reset {
- background-color: #ff4444;
- }
-
- .share-button:hover {
- background: #2d3748;
- }
-
- .share-message {
- font-family: var(--main-font);
- color: #1a202c;
- text-align: center;
- padding: 0.5rem;
- margin-top: 0.5rem;
- background: var(--highlight-color);
- border-radius: 0.375rem;
- }
-
- /* ===================
- Rank Display
- =================== */
- .rank-display {
- font-family: var(--mono-font);
- position: relative;
- overflow: hidden;
- padding: 1rem;
- text-align: center;
- font-size: 1.2em;
- font-weight: 500;
- border-radius: 0.375rem;
- margin: 0rem 0rem 1rem 0rem;
- border: 1px solid rgba(255,255,255,0.4);
- box-shadow: 0 2px 4px rgba(0,0,0,0.05);
- cursor: pointer;
- transition: transform 0.2s;
- user-select: none;
- }
-
- .rank-display:active {
- transform: scale(0.95);
- }
- .rank-display .next-rank {
- font-size: 0.8em;
- font-weight: normal;
- }
-
- .rank-display .share-hint {
- font-size: 0.7em;
- margin-top: 0.5em;
- color: #666;
- }
-
- /* Rank gradients */
- .rank-display[data-rank="Tourist"] { background: linear-gradient(135deg, #f0fdf4 0%, #6ee7b7 100%); }
- .rank-display[data-rank="Commuter"] { background: linear-gradient(135deg, #fff7ed 0%, #fbd38d 100%); }
- .rank-display[data-rank="Resident"] { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%); }
- .rank-display[data-rank="Council Member"] { background: linear-gradient(135deg, #fafaf9 0%, #d6d3d1 100%); }
- .rank-display[data-rank="Chief of Police"] { background: linear-gradient(135deg, #f0f9ff 0%, #93c5fd 100%); }
- .rank-display[data-rank="Mayor"] { background: linear-gradient(135deg, #fff1f2 0%, #fda4af 100%); }
- .rank-display[data-rank="Power Broker"] { background: linear-gradient(135deg, #fefce8 0%, #92400e 100%); }
- .rank-display[data-rank="Kingmaker"] { background: linear-gradient(135deg, #fffbeb 0%, #fcd34d 100%); }
- .rank-display[data-rank="Puppet Master"] { background: linear-gradient(135deg, #faf5ff 0%, #d8b4fe 100%); }
-
- /* ===================
- Shimmer Animation
- =================== */
- @keyframes shimmer {
- 0% { transform: translateX(-150%) rotate(45deg); }
- 100% { transform: translateX(150%) rotate(45deg); }
- }
-
- .rank-display::after {
- content: '';
- position: absolute;
- top: -50%;
- left: -100%;
- width: 300%;
- height: 200%;
- background: linear-gradient(
- to bottom right,
- rgba(255,255,255,0) 0%,
- rgba(255,255,255,0.3) 50%,
- rgba(255,255,255,0) 100%
- );
- transform: rotate(45deg);
- animation: shimmer 4s infinite linear;
- pointer-events: none;
- }
-
- /* ===================
- Mobile Styles
- =================== */
- @media (max-width: 640px) {
- body {
- margin: 0;
- padding: 0;
- height: 100vh;
- font-size: 14px;
- overflow: hidden;
- }
-
- .message.success {
- background-color: #c6f6d5;
- color: #1a202c;
- overflow-wrap: anywhere;
- font-size: 1rem;
- display: block;
- padding: 10px;
- line-height: 1.4rem;
- margin-top: 0.2rem;
- }
-
- .message.error {
- background-color: #fee2e2;
- color: #1a202c;
- overflow-wrap: anywhere;
- font-size: 1rem;
- display: block;
- padding: 10px;
- line-height: 1.4rem;
- margin-top: 0.2rem;
- }
-
-
-
- /* Mobile container setup */
- .puzzle-container {
- height: 100vh;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- }
-
- /* Mobile content area */
- .puzzle-content {
- position: absolute;
- top: 85px;
- left: 0;
- right: 0;
- bottom: 0;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- padding: 0;
- gap: 0rem;
- }
-
- @font-face {
- font-family: 'CustomMono';
- /* Use ui-monospace for every character except underscore */
- src: local("ui-monospace");
- /* All Unicode except underscore (U+005F) */
- unicode-range: U+0000-005E, U+0060-10FFFF;
- }
-
- @font-face {
- font-family: 'CustomMono';
- /* Use Menlo for underscore only */
- src: local("Menlo");
- unicode-range: U+005F;
- }
-
- .puzzle-display {
- height: auto;
- padding: 0.5rem 1rem 1rem 1rem;
- margin: 0;
- font-size: 1.2rem;
- background: #f1f5f9;
- padding-bottom: 200px;
- font-family: ui-monospace, "SF Mono", "Roboto Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
- }
-
- .puzzle-display.completed {
- padding-bottom: 1rem !important;
- }
-
-
- .rank-display {
- margin: 0rem 0.5rem 1rem 0.5rem;
- }
-
-
- /* Mobile input container */
- .input-container {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- background: white;
- z-index: 10;
- width: 100%;
- border-top: 1px solid #e2e8f0;
- box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
- padding: 0.5rem calc(0.5rem + env(safe-area-inset-left)) calc(0.5rem + env(safe-area-inset-bottom)) calc(0.5rem + env(safe-area-inset-right));
- box-sizing: border-box;
- }
-
- .custom-input {
- border: 1px solid #e2e8f0;
- padding: 0.63rem;
- border-radius: 6px;
- margin-bottom: 0.125rem;
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
- font-size: 1.2rem;
- min-height: 2.4rem;
- background: white;
- width: 100%;
- color: #000;
- }
-
- .placeholder {
- color: #9ca3af;
- }
-
- /* Mobile keyboard */
- .custom-keyboard {
- width: 100%;
- padding: .25rem 0 0 0;
- box-sizing: border-box;
- background-color: white;
- touch-action: none;
- }
-
- .keyboard-row {
- display: grid;
- grid-template-columns: repeat(10, 1fr);
- gap: 0.02rem;
- margin-bottom: 0.125rem;
- justify-content: center;
- width: 100%;
- }
-
- .keyboard-key {
- height: 3.3rem;
- min-height: 2.2rem;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0.2rem;
- margin: 0.1rem 0.15rem 0.1rem 0.15rem;
- cursor: pointer;
- color: black;
- background-color:rgb(233, 233, 233);
- box-sizing: border-box;
- touch-action: manipulation;
- text-align: center;
- font-size: 1.125rem;
- font-weight: 600;
- border: 1px solid rgb(200, 200, 200);
- user-select: none;
- -webkit-tap-highlight-color: transparent;
- -webkit-appearance: none !important;
- appearance: none !important;
- border-radius: 4px !important;
- outline: none !important;
- -webkit-tap-highlight-color: transparent !important;
- transition: background-color 0.1s ease-out,
- transform 0.1s ease-out;
- -webkit-user-select: none;
- user-select: none;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- .keyboard-key:active {
- background-color: #94a3b8;
- transform: translateY(2px);
- }
-
- .stat-item {
- background: #f1f5f9;
- padding: 0.75rem;
- border-radius: 0.375rem;
- margin-bottom: 0.5rem;
- font-size: 1rem;
- line-height: 1.5;
- }
-
- /* Hide desktop elements */
- .bottom-controls,
- .reset-button,
- .solved-expressions,
- .keystroke-stats,
- .share-button.copy {
- display: none;
- }
-
- /* Mobile completion state */
- .puzzle-container.completed .puzzle-content {
- position: static;
- height: auto;
- overflow: visible;
- margin-top: 85px;
- padding: 1rem;
- }
-
- .puzzle-container.completed {
- position: static;
- height: auto;
- min-height: 100vh;
- overflow-y: auto;
- }
-
- .puzzle-display.completed .input-container {
- display: none;
- }
-
- .puzzle-container.completed .solved-expressions,
- .puzzle-container.completed .keystroke-stats {
- display: block;
- margin: 1rem;
- }
-
- .keystroke-stats {
- margin-top: 0rem;
- }
- }
-
- /* ===================
- iOS-specific Styles
- =================== */
- @supports (-webkit-touch-callout: none) {
- .keyboard-key:active {
- background-color: #94a3b8 !important;
- transform: translateY(2px) !important;
- }
- }
-
- /* ===================
- Score Bar
- =================== */
-
- .score-bar {
- margin: 1.5rem 0;
- text-align: center;
- font-size: 1.1rem;
- font-family: var(--mono-font), monospace;
- border: 2px dashed #aaa;
- padding: 1rem;
- border-radius: 0.5rem;
- background-color: rgba(255, 255, 255, 0.5);
- }
-
- .score-value {
- font-weight: bold;
- margin-bottom: 0rem;
- }
-
- .progress-bar {
- font-size: 1.5rem;
- letter-spacing: 0.1rem;
- line-height: 1.5;
- }
-
- /* Mobile adjustments */
- @media (max-width: 640px) {
- .score-bar {
- margin: 1rem 0;
- font-size: 1rem;
- padding: 0.75rem;
- }
-
- .progress-bar {
- font-size: 1.2rem;
- }
- }
-
- /* Submit button and input wrapper */
- .input-submit-wrapper {
- display: flex;
- gap: 0.5rem;
- width: 100%;
- }
-
- .submit-answer {
- padding: 0 1.5rem;
- height: 60px;
- background-color: #2563eb;
- color: white;
- border: none;
- border-radius: 0.375rem;
- cursor: pointer;
- font-weight: 500;
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
- white-space: nowrap;
- font-size: 1rem;
- }
-
- .submit-answer:hover {
- background-color: #1d4ed8;
- }
-
- .submit-answer:active {
- background-color: #1e40af;
- transform: scale(0.98);
- }
-
- .mobile-submit-button {
- background-color: #2563eb !important;
- color: white !important;
- font-size: 1rem !important;
- font-weight: 500 !important;
- }
-
-/* Date Picker Styles */
-.puzzle-date {
- cursor: pointer;
- position: relative;
- display: inline-flex;
- align-items: center;
- transition: color 0.2s ease;
- padding: 4px; /* Larger tap target */
- border-radius: 4px;
- user-select: none;
- -webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove default mobile tap highlight */
- touch-action: manipulation; /* Optimize for touch */
-}
-
-.puzzle-date:hover {
- color: #4299e1;
- background-color: rgba(66, 153, 225, 0.1);
-}
-
-.puzzle-date:active {
- transform: scale(0.98);
-}
-
-.puzzle-date::after {
- content: "\23F7"; /* dropdown arrow maybe */
- display: inline-block;
- margin-left: 0.5rem;
- font-size: 0.8em;
- opacity: 0.7;
-}
-
-/* Visible hint on mobile */
-@media (max-width: 640px) {
- .puzzle-date {
- padding: 5px 8px;
- border: none !important; /* Explicitly remove any border */
- }
-
- .puzzle-date::after {
- font-size: 1em;
- margin-left: 8px;
- }
-}
-
-.date-picker-container {
- font-family: var(--main-font);
- border-radius: 0.5rem;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
- border: 1px solid rgba(0, 0, 0, 0.1);
- background-color: white;
- animation: fadeIn 0.2s ease;
- box-sizing: border-box;
- overflow: hidden; /* Ensure nothing bleeds outside the container */
- padding: 1rem !important; /* Force padding */
-}
-
-@keyframes fadeIn {
- from { opacity: 0; transform: translateY(-10px) translateX(-50%); }
- to { opacity: 1; transform: translateY(0) translateX(-50%); }
-}
-
-.month-nav {
- width: 30px;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- transition: background-color 0.2s;
-}
-
-.month-nav:hover {
- background-color: #f0f0f0;
-}
-
-.weekdays {
- font-size: 0.85rem;
- color: #4a5568;
- padding-bottom: 0.5rem;
-}
-
-.calendar-grid {
- font-size: 0.95rem;
-}
-
-.date-cell {
- transition: transform 0.1s ease, box-shadow 0.1s ease;
- user-select: none;
- aspect-ratio: 1;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.date-cell.has-puzzle:hover:not([disabled="true"]) {
- transform: translateY(-2px);
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.date-cell.has-puzzle:active:not([disabled="true"]) {
- transform: translateY(0);
-}
-
-.date-cell.has-puzzle[data-status="complete"] {
- position: relative;
-}
-
-.date-cell.has-puzzle[data-status="complete"]::after {
- content: "\2713";
- position: absolute;
- top: 0;
- right: 2px;
- font-size: 8px;
- color: #22543d;
-}
-
-.date-cell.has-puzzle[data-status="started"] {
- position: relative;
-}
-
-.date-cell.has-puzzle[data-status="started"]::after {
- content: "\2022\2022\2022";
- position: absolute;
- bottom: 1px;
- left: 50%;
- transform: translateX(-50%);
- font-size: 8px;
- line-height: 1;
- color: #744210;
-}
-
-.empty-day {
- aspect-ratio: 1;
-}
-
-/* Mobile styles */
-/* Fix for the date picker right column padding issue on mobile */
-
-/* Balanced fix for date picker columns on mobile */
-
-/* Robust fix for date picker edge issues on mobile */
-
-@media (max-width: 640px) {
- /* Force container to be smaller than viewport width and centered */
- .date-picker-container {
- width: 85vw !important; /* Reduced from 90vw to ensure space */
- max-width: 300px !important; /* Smaller max-width */
- left: 50% !important;
- transform: translateX(-50%) !important;
- margin-left: 0 !important;
- margin-right: 0 !important;
- padding: 0.75rem !important; /* Slightly reduced padding */
- box-sizing: border-box !important;
- border-radius: 0.5rem !important;
- overflow: hidden !important; /* Force content to stay within bounds */
- }
-
- /* Force grid to be contained */
- .calendar-grid {
- display: grid !important;
- grid-template-columns: repeat(7, 1fr) !important;
- gap: 3px !important; /* Reduced gap */
- width: 100% !important;
- max-width: 100% !important; /* Ensure it can't exceed container */
- overflow: visible !important; /* Allow cell content to be visible */
- padding: 0 !important;
- margin: 0 !important;
- }
-
- /* Ensure weekday headers don't overflow */
- .weekdays {
- display: grid !important;
- grid-template-columns: repeat(7, 1fr) !important;
- gap: 3px !important;
- width: 100% !important;
- max-width: 100% !important;
- padding: 0 !important;
- margin: 0 0 8px 0 !important;
- }
-
- /* Make date cells slightly smaller */
- .date-cell {
- width: 100% !important;
- height: auto !important;
- min-height: 30px !important;
- display: flex !important;
- align-items: center !important;
- justify-content: center !important;
- padding: 0.2rem 0 !important;
- font-size: 0.85rem !important; /* Slightly smaller text */
- margin: 0 !important;
- box-sizing: border-box !important;
- }
-
- /* Explicitly set column sizes */
- .calendar-grid > div, .weekdays > div {
- width: 100% !important;
- box-sizing: border-box !important;
- }
-
- /* Additional safeguard for month selector */
- .date-picker-header {
- padding: 0 !important;
- margin-bottom: 0.75rem !important;
- }
-}
-
-/* iOS Toggle Switch */
-.toggle-container {
- margin: 1em 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.toggle-labels {
- display: flex;
- flex-direction: column;
-}
-
-.toggle-title {
- font-weight: 500;
- margin-bottom: 0.3em;
-}
-
-.toggle-description {
- font-size: 0.8em;
- color: #666;
- line-height: 1.2;
-}
-
-.toggle-switch {
- position: relative;
- display: inline-block;
- width: 50px;
- height: 28px;
- flex-shrink: 0;
- margin-left: 12px;
-}
-
-.toggle-switch input {
- opacity: 0;
- width: 0;
- height: 0;
-}
-
-.toggle-slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #ccc;
- transition: .4s;
- border-radius: 34px;
-}
-
-.toggle-slider:before {
- position: absolute;
- content: "";
- height: 24px;
- width: 24px;
- left: 2px;
- bottom: 2px;
- background-color: white;
- transition: .3s;
- border-radius: 50%;
- box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-}
-
-input:checked + .toggle-slider {
- background-color: #2563eb;
-}
-
-input:checked + .toggle-slider:before {
- transform: translateX(22px);
-}
-
-/* Mode labels */
-.mode-indicator {
- margin-top: 0.8em;
- font-size: 0.9em;
- color: #555;
- text-align: center;
-}
-
-.mode-name {
- font-weight: 600;
- color: #2563eb;
-}
-
-/* Modal Styles */
-.announcement-modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 2000;
- display: flex;
- align-items: center;
- justify-content: center;
- opacity: 0;
- transition: opacity 0.3s ease;
- pointer-events: none;
-}
-
-.announcement-modal-overlay.visible {
- opacity: 1;
- pointer-events: auto;
-}
-
-.announcement-modal {
- background-color: white;
- border-radius: 0.5rem;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
- width: 90%;
- max-width: 500px;
- max-height: 90vh;
- overflow-y: auto;
- padding: 1.5rem;
- position: relative;
- transform: translateY(-20px);
- transition: transform 0.3s ease;
-}
-
-.announcement-modal-overlay.visible .announcement-modal {
- transform: translateY(0);
-}
-
-.announcement-modal-title {
- font-size: 1.5rem;
- font-weight: 600;
- margin-bottom: 1rem;
- color: #1a202c;
- text-align: center;
- font-family: var(--main-font);
-}
-
-.announcement-modal-content {
- font-size: 1rem;
- line-height: 1.5;
- color: #4a5568;
- margin-bottom: 1.5rem;
- font-family: var(--main-font);
-}
-
-.announcement-modal-button {
- display: block;
- width: 100%;
- padding: 0.75rem;
- background-color: #2563eb;
- color: white;
- border: none;
- border-radius: 0.375rem;
- font-size: 1rem;
- font-weight: 500;
- cursor: pointer;
- text-align: center;
- transition: background-color 0.2s;
- font-family: var(--main-font);
-}
-
-.announcement-modal-button:hover {
- background-color: #1d4ed8;
-}
-
-.announcement-modal-button:active {
- background-color: #1e40af;
- transform: scale(0.98);
-}
-
-/* Add more space between list items */
-.announcement-modal-content li {
- margin-bottom: 0.75rem;
-}
-
-/* Remove extra margin from the last list item */
-.announcement-modal-content li:last-child {
- margin-bottom: 0;
-}
-
-@media (max-width: 640px) {
- .announcement-modal {
- width: 85%;
- padding: 1rem;
- }
-
- .announcement-modal-title {
- font-size: 1.25rem;
- }
-
- .announcement-modal-content {
- font-size: 0.95rem;
- }
-}
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-05 04:14:54 +0000