/* Theme presets */ /* See also data-bs-theme attribute in tag */ :root { --background-color: #e6f7fc; --nav-bg-color: #71c9fc; --heading-color: #1d1d1d; --text-color: #1e1e1e; --border-color: #1d1d1d; --accent-color: #1d1d1d; --font-family: sans-serif; } /* Bootstrap overrides and customizations */ /* See also @media at EOF */ html { scroll-behavior: smooth; } body { margin: 0; padding: 0; padding-top: 65px; font-family: var(--font-family); background-color: var(--background-color); color: var(--text-color); } #container { text-align: center; margin-top: 80px; max-width: 700px; } .navbar { background-color: var(--nav-bg-color); } .navbar-brand img { height: 30px; margin-left: 10px; margin-right: 10px; } .navbar-brand, .navbar-nav .nav-link { color: var(--accent-color) !important; font-size: 1.2em; } .accordion-button { background-color: var(--nav-bg-color); color: var(--accent-color); border: none; } .accordion-button:focus { box-shadow: none !important; } .accordion-button:not(.collapsed) { background-color: var(--nav-bg-color); color: var(--accent-color); } .accordion-body { background-color: var(--background-color); color: var(--text-color); border-top: 1px solid var(--border-color); } .navbar-toggler:focus, .navbar-toggler:focus-visible, .btn-close:focus, .btn-close:focus-visible { outline: none !important; box-shadow: none !important; } .offcanvas.offcanvas-top { height: 100vh !important; max-height: 100vh !important; top: 0 !important; } .offcanvas.offcanvas-top, .offcanvas-header, .offcanvas-body, .accordion-body { background-color: var(--background-color) !important; color: var(--text-color) !important; } .accordion-button::after { content: ""; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231e1e1e' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 1 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1em; width: 1em; height: 1em; margin-left: auto; transition: transform .2s ease-in-out; } .accordion-button[aria-expanded='true']::after { transform: rotate(-180deg); } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e1e1e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); transform: rotate(-180deg) } .btn-primary { background-color: var(--nav-bg-color) !important; border-color: var(--nav-bg-color) !important; color: var(--accent-color) !important; } .btn-secondary { background-color: var(--background-color) !important; border-color: var(--nav-bg-color) !important; color: var(--accent-color) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--heading-color) !important; border-color: var(--heading-color) !important; color: var(--background-color) !important; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background-color: var(--heading-color) !important; border-color: var(--heading-color) !important; color: var(--background-color) !important; } .about-footer { text-align: center; margin-top: 20px; font-size: 0.9em; } .about-footer img { display: block; margin: 0 auto 10px auto; max-width: 100px; height: auto; } .about-footer p { margin: 0; } /* PWA styles */ table td, table th { vertical-align: middle; } .edit-form .row { display: flex; align-items: center; } .edit-form .form-control { padding-top: 0.5rem; padding-bottom: 0.5rem; } .edit-form .form-label { margin-bottom: 0; line-height: 2; } .unsaved-file-label { font-style: italic; } .file-handler-hidden, .toolbox-hidden { display: none !important; } /* Media customizations */ @media screen and (max-width: 600px) { body { padding-top: 55px; } .navbar-brand img { height: 25px; } .btn-primary:hover { background-color: var(--nav-bg-color) !important; border-color: var(--nav-bg-color) !important; color: var(--accent-color) !important; } .btn-secondary:hover { background-color: var(--background-color) !important; border-color: var(--nav-bg-color) !important; color: var(--accent-color) !important; } }