@font-face { font-family: 'Fira Code'; src: url('/font/FiraCode-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; } * { word-wrap: break-word; font-family: 'Fira Code' ; } /* Default (dark) theme variables */ [data-theme="dark"] { --background: #121212; --surface-bg: #1e1e1e; --accent: #e63946; --primary: #ffb703; --secondary: #8ecae6; --link: #ffd166; --link-hover: #ffb703; --text: #f0f0f0; --muted-text: #a0a0a0; --card-bg: #1f1f1f; --card-shadow: rgba(0, 0, 0, 0.6); --transition: 0.3s ease; --chartcolor: rgba(255, 255, 255, 0.1); } /* Light theme overrides (add data-theme="light" on or ) */ [data-theme="light"] { --background: #f5f5f5; --surface-bg: #ffffff; --accent: #d00000; --primary: #0077b6; --secondary: #0096c7; --link: #0077b6; --link-hover: #005f87; --text: #121212; --muted-text: #555555; --card-bg: #ffffff; --card-shadow: rgba(0, 0, 0, 0.1); --chartcolor: rgba(0, 0, 0, 0.1); } :root[data-theme="light"] .darkicon { display:none; } :root[data-theme="dark"] .lighticon { display:none; } /* Global styles */ body { background-color: var(--background); color: var(--text); margin: 0; padding: 0; min-height: 100vh; line-height: 1.6; transition: background-color var(--transition), color var(--transition); } #submit-btn,.input, .button{ text-decoration: none; font-size: 15px; margin-top: 0.75rem; margin-bottom: 0.75rem; } .table .button{ margin-top: 0rem; margin-bottom: 0rem; } /* Link styling */ a { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color var(--transition); } a:hover { color: var(--link-hover); } a:focus { outline: 2px dashed var(--secondary); outline-offset: 2px; } /* Layout containers */ .container { display: grid; margin: 2vh; gap: 1rem; } .center { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; padding: 2rem; margin-top: 3em; } /* Cards and items */ .item { margin: 10px; background-color: var(--accent); color: var(--text); padding: 0.6em 1em; font-weight: 600; text-align: center; border-radius: 1.25rem; box-shadow: 0 4px 12px var(--card-shadow); transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); text-decoration: none; } .item:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--card-shadow); filter: brightness(1.1); } /* Settings containers */ .settings-container-top, .settings-container,.dropdown[open] { background-color: var(--surface-bg); box-shadow: 0 8px 32px var(--card-shadow); border-radius: 2rem; font-size: 1.25rem; margin: 1.5rem 0; animation: fadeIn 0.6s ease both; } .settings-container-top, .settings-container { display: flex; flex-direction: column; justify-content: center; width: 100vw; max-width: 88vw; padding: 2rem; overflow: auto; scrollbar-gutter: stable; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Forms and inputs */ .form { display: flex; flex-direction: column; align-items: center; width: 100%; } .input, .ta { background-color: var(--card-bg); transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); color: var(--text); width: 80%; max-width: 600px; padding: 0.75em; border-radius: 0.75rem; text-align: left; border: 2px solid var(--muted-text); } /* Hover effect for .input (use on buttons or inputs) */ .input:hover { background-color: var(--surface-bg); border-color: var(--primary); box-shadow: 0 0 8px var(--primary); cursor: pointer; } .input:focus, .ta:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 8px var(--primary); } .button { background-color: var(--accent); color: var(--text); padding: 0.5em 1em; border: none; border-radius: 0.5rem; cursor: pointer; transition: background-color var(--transition), transform var(--transition); } .button:hover { background-color: var(--primary); } .button:hover{ transform: translateY(-2px);} #submit-btn { background-color: var(--accent); color: var(--text); padding: 0.75em 1.5em; border: none; border-radius: 1rem; cursor: pointer; transition: transform var(--transition), background-color var(--transition); } #submit-btn:hover { transform: translateY(-2px); background-color: var(--primary); } /* Tables */ table { border-collapse: collapse; width: 80vw; font-size: 1rem; background-color: var(--card-bg); box-shadow: 0 4px 16px var(--card-shadow); border-radius: 1rem; overflow: hidden; animation: fadeInTable 0.8s ease both; } @keyframes fadeInTable { from { opacity: 0; } to { opacity: 1; } } th, td { padding: 0.5em; text-align: left; border-bottom: 1px solid var(--muted-text); } th { background-color: var(--accent); color: var(--text); } tbody tr:nth-child(even) { background-color: var(--surface-bg); } tr:hover { background-color: var(--link-hover); } /* Suggestion cards */ .suggestions-container { display: flex; flex-direction: column; gap: 1.5em; width: 90%; margin: 2em auto; } .suggestion-card { background-color: var(--card-bg); border-radius: 1rem; padding: 1.5em; box-shadow: 0 6px 16px var(--card-shadow); color: var(--text); transition: transform var(--transition), box-shadow var(--transition); } .suggestion-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px var(--card-shadow); } .card-header .name { font-size: 1.75rem; font-weight: 700; color: var(--primary); } .card-header .created-at { font-size: 0.85rem; color: var(--muted-text); } .card-details, .card-description, .card-reason, .card-status { margin: 0.75em 0; font-size: 1rem; color: var(--text); } .card-actions button { padding: 0.5em 1em; font-size: 0.95rem; border: none; border-radius: 0.75rem; cursor: pointer; transition: transform var(--transition), background-color var(--transition); } .card-actions .push { background-color: var(--secondary); color: var(--background); } .card-actions .edit { background-color: #06d6a0; color: var(--background); } .card-actions .deny { background-color: var(--accent); color: var(--text); } .card-actions button:hover { transform: translateY(-2px); } /* Feature grid */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 2rem auto; padding: 0 1rem; max-width: 1200px; } .feature-card { color: var(--primary); background-color:var(--accent); border-radius: 1.5rem; padding: 2rem; text-align: center; box-shadow: 0 6px 18px var(--card-shadow); transition: transform var(--transition), box-shadow var(--transition); text-decoration: none; cursor: pointer; } .feature-card h3 { font-size: 1.75rem; margin-bottom: 0.5rem; } .feature-card p { font-size: 1rem; margin-bottom: 1rem; } .feature-card a { color: var(--link); position: relative; } .feature-card a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 50%; background-color: var(--link-hover); transition: width var(--transition), left var(--transition); } .feature-card a:hover::after { width: 100%; left: 0; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px var(--card-shadow); } .feature-card.disabled { opacity: 0.5; cursor: not-allowed; } .feature-card.disabled::before { font-size: 1.25rem; } /* Footer */ .footer { background-color: var(--surface-bg); color: var(--muted-text); text-align: center; padding: 1rem 0; font-size: 0.9rem; } /* Responsive tweaks */ @media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .container { grid-template-columns: repeat(3, 1fr); margin: 0 5vw; } .item { width: auto; } } /* Reduced-motion support */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Modern navbar styling matching the theme variables and dark/light toggling */ /* Global resets */ * { box-sizing: border-box; } html, body { overflow-x: hidden; margin: 0; padding: 0; } /* Hide the native checkbox */ #nav-check { margin-top: 0px !important; display: none; } /* Base Navbar */ .nav { height: 3em; width: 100%; background-color: var(--accent); box-shadow: 0 2px 4px var(--card-shadow); position: fixed; top: 0px; z-index: 1000; display: flex; align-items: center; padding: 0 1rem; animation: fadeDown var(--transition) both; } @keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Brand / Title */ .nav-header { display: flex; align-items: center; cursor: pointer; } .nav-title { font-size: 1.5rem; color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } /* Nav Links */ .nav-links { margin-left: auto; display: flex; align-items: center; } .nav-links > a { padding: 0.75rem 1rem; text-decoration: none; color: var(--text); font-size: 1rem; transition: background-color var(--transition), color var(--transition); border-radius: 0.5rem; } .nav-links > a:hover, .nav-links > a:focus { background-color: rgba(255, 255, 255, 0.1); color: var(--primary); outline: none; } /* Hamburger Button (mobile) */ .nav-btn { display: none; } .nav-btn > label { display: none; padding: 0.75rem; } .nav-btn > label,.nav-theme-btn > svg { cursor: pointer; border-radius: 0.5rem; transition: background-color var(--transition); fill: var(--text); } .nav-btn > label:hover,.nav-theme-btn > svg:hover { background-color: rgba(255, 255, 255, 0.1); } .nav-btn span { display: block; width: 25px; height: 2px; background-color: var(--text); margin: 4px 0; transition: transform var(--transition), opacity var(--transition); } /* Responsive: mobile toggle */ @media (max-width: 768px) { .archbox,.archbox-center { flex-direction: column; } .nav { padding-left: 1rem; } .nav-btn,.nav-theme-btn { display: block; position: absolute; display: flex; align-items: center; } .nav-btn { right: 0; top: 0; height: 100%; } .nav-theme-btn { right: 3.5em; } .nav-btn > label { display: block; } .nav-links { position: absolute; top: 3em; left: 0; width: 100vw; background-color: var(--surface-bg); flex-direction: column; align-items: flex-start; overflow: hidden; max-height: 0; transition: max-height var(--transition) ease-in; } .nav-links > a { width: 100%; color: var(--text); } /* Toggle checked */ #nav-check:checked ~ .nav-links { max-height: calc(100vh - 50px); } /* Animate hamburger to X on open */ #nav-check:checked + .nav-header + .nav-btn label span:nth-child(1) { transform: translateY(6px) rotate(45deg); } #nav-check:checked + .nav-header + .nav-btn label span:nth-child(2) { opacity: 0; } #nav-check:checked + .nav-header + .nav-btn label span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .nav, .nav-links { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .qvhtile,.qvhtilesmall { align-content: center; text-align: center; text-transform: capitalize; text-decoration: underline; } .qvhtile { font-size: 30px; } .qvhtilesmall { margin-top: -1.5rem; font-size: 20px; } .nav-theme-btn { height: 70%; } .nav-theme-btn svg { height: 100%; } .archbox,.archbox-center { display: flex; overflow: hidden; } .archbox-center { justify-content: center; } .archlogo,.archinfo{ display: block; } .archlogo { margin-right: 2em; } .spoiler { background-color: var(--muted-text); }