diff options
Diffstat (limited to 'static/bv/bracket.css')
| -rw-r--r-- | static/bv/bracket.css | 1286 |
1 files changed, 1286 insertions, 0 deletions
diff --git a/static/bv/bracket.css b/static/bv/bracket.css new file mode 100644 index 0000000..ab0285f --- /dev/null +++ b/static/bv/bracket.css @@ -0,0 +1,1286 @@ +/* =================== + 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; + } +} |