html { scroll-behavior: smooth; } body { min-height: 100vh; display: flex; flex-direction: column; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; /* inherit font, color & alignment from ancestor */ color: inherit; font: inherit; text-align: inherit; /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */ line-height: normal; /* Corrects font smoothing for webkit */ -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; /* Corrects inability to style clickable `input` types in iOS */ -webkit-appearance: none; /* Generalizes pointer cursor */ cursor: pointer; } button::-moz-focus-inner { /* Remove excess padding and border in Firefox 4+ */ border: 0; padding: 0; } /* Better accessibility for keyboard users */ *:focus-visible { outline-style: auto !important; } .image { overflow: hidden; } .navbar .logo { max-height: 50px; } .card { overflow: visible; } .card.has-border { border: 1px solid #eee; } .scroll-x { overflow: hidden; overflow-x: auto; } .modal-card { pointer-events: none; } .modal-card > * { pointer-events: all; } /* stylelint-disable no-descending-specificity */ .modal-card:focus { outline-style: auto; } .modal-card:focus:not(:focus-visible) { outline-style: initial; } .modal-card:focus-visible { outline-style: auto; } /* stylelint-enable no-descending-specificity */ .modal-card.is-fullwidth { min-width: 75% !important; } @media only screen and (min-width: 769px) { .modal-card.is-thin { width: 350px !important; } } .modal-card-body { max-height: 70vh; } .clip-text { max-height: 35em; overflow: hidden; } /** Utilities not covered by Bulma ******************************************************************************/ @media only screen and (max-width: 768px) { .is-sr-only-mobile { border: none !important; clip: rect(0, 0, 0, 0) !important; height: 0.01em !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 0.01em !important; } .m-0-mobile { margin: 0 !important; } .card-footer.is-stacked-mobile { flex-direction: column; } .card-footer.is-stacked-mobile .card-footer-item:not(:last-child) { border-bottom: 1px solid #ededed; border-right: 0; } } .button.is-transparent { background-color: transparent; } .card.is-stretchable { display: flex; flex-direction: column; height: 100%; } .card.is-stretchable .card-content { flex-grow: 1; } .preserve-whitespace p { white-space: pre-wrap !important; } .display-inline p { display: inline !important; } button .button-invisible-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1rem; box-sizing: border-box; display: flex; align-items: center; flex-direction: column; justify-content: center; background: rgba(0, 0, 0, 0.66); color: white; opacity: 0; transition: opacity 0.2s ease; } button:hover .button-invisible-overlay, button:active .button-invisible-overlay, button:focus-visible .button-invisible-overlay { opacity: 1; } /** File input styles ******************************************************************************/ input[type=file]::file-selector-button { -moz-appearance: none; -webkit-appearance: none; background-color: #fff; border-radius: 4px; border: 1px solid #dbdbdb; box-shadow: none; color: #363636; cursor: pointer; font-size: 1rem; height: 2.5em; justify-content: center; line-height: 1.5; padding-bottom: calc(0.5em - 1px); padding-left: 1em; padding-right: 1em; padding-top: calc(0.5em - 1px); text-align: center; white-space: nowrap; } input[type=file]::file-selector-button:hover { border-color: #b5b5b5; color: #363636; } /** General `details` element styles ******************************************************************************/ summary { cursor: pointer; } summary::-webkit-details-marker { display: none; } summary::marker { content: none; } .detail-pinned-button summary { position: absolute; right: 0; } .detail-pinned-button form { float: left; width: -webkit-fill-available; margin-top: 1em; } /** Details dropdown ******************************************************************************/ details.dropdown[open] summary.dropdown-trigger::before { content: ""; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } details .dropdown-menu { display: block !important; } details .dropdown-menu button { /* Fix weird Safari defaults */ box-sizing: border-box; } details.dropdown .dropdown-menu button:focus-visible, details.dropdown .dropdown-menu a:focus-visible { outline-style: auto; outline-offset: -2px; } @media only screen and (max-width: 768px) { details.dropdown[open] summary.dropdown-trigger::before { background-color: rgba(0, 0, 0, 0.5); z-index: 30; } details .dropdown-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex !important; align-items: center; justify-content: center; pointer-events: none; z-index: 100; } details .dropdown-menu > * { pointer-events: all; } } /** Shelving ******************************************************************************/ /** @todo Replace icons with SVG symbols. @see https://www.youtube.com/watch?v=9xXBYcWgCHA */ .shelf-option:disabled > *::after { font-family: "icomoon"; /* stylelint-disable font-family-no-missing-generic-family-keyword */ content: "\e919"; /* icon-check */ margin-left: 0.5em; } /** Toggles ******************************************************************************/ .toggle-button[aria-pressed=true], .toggle-button[aria-pressed=true]:hover { background-color: hsl(171, 100%, 41%); color: white; } .hide-active[aria-pressed=true], .hide-inactive[aria-pressed=false] { display: none; } .transition-x.is-hidden, .transition-y.is-hidden { display: block !important; visibility: hidden !important; height: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: auto; } .transition-x, .transition-y { transition-duration: 0.5s; transition-timing-function: ease; } .transition-x { transition-property: width, margin-left, margin-right, padding-left, padding-right; } .transition-y { transition-property: height, margin-top, margin-bottom, padding-top, padding-bottom; } @media (prefers-reduced-motion: reduce) { .transition-x, .transition-y { transition-duration: 0.001ms !important; } } /** Stars ******************************************************************************/ .stars { white-space: nowrap; } /** Stars in a review form * * Specificity makes hovering taking over checked inputs. * * \e9d9: filled star * \e9d7: empty star; * -------------------------------------------------------------------------- */ .form-rate-stars { width: max-content; } /* All stars are visually filled by default. */ .form-rate-stars .icon::before { content: '\e9d9'; /* icon-star-full */ } /* Icons directly following half star inputs are marked as half */ .form-rate-stars input.half:checked ~ .icon::before { content: '\e9d8'; /* icon-star-half */ } /* stylelint-disable no-descending-specificity */ .form-rate-stars input.half:checked + input + .icon:hover::before { content: '\e9d8' !important; /* icon-star-half */ } /* Icons directly following half check inputs that follow the checked input are emptied. */ .form-rate-stars input.half:checked + input + .icon ~ .icon::before { content: '\e9d7'; /* icon-star-empty */ } /* Icons directly following inputs that follow the checked input are emptied. */ .form-rate-stars input:checked ~ input + .icon::before { content: '\e9d7'; /* icon-star-empty */ } /* When a label is hovered, repeat the fill-all-then-empty-following pattern. */ .form-rate-stars:hover .icon.icon::before { content: '\e9d9' !important; /* icon-star-full */ } .form-rate-stars .icon:hover ~ .icon::before { content: '\e9d7' !important; /* icon-star-empty */ } /** Book covers * * - .is-cover gives the behaviour of the cover and its surrounding. (optional) * - .cover-container gives the dimensions and position (for borders, image and other elements). * - .book-cover is positioned and sized based on its container. * * To have the cover within specific dimensions, specify a width or height for * standard bulma’s named breapoints: * * `is-(w|h)-(auto|xs|s|m|l|xl|xxl)[-(mobile|tablet|desktop)]` * * The cover will be centered horizontally and vertically within those dimensions. * * When using `.column.is-N`, add `.is-w-auto` to the container so that the flex * calculations are not biased by the default `max-content`. ******************************************************************************/ .column.is-cover { flex-grow: 0 !important; } .column.is-cover, .column.is-cover + .column { flex-basis: auto !important; } .cover-container { display: flex; justify-content: center; align-items: center; position: relative; width: max-content; max-width: 100%; overflow: hidden; } /* Book cover * -------------------------------------------------------------------------- */ .book-cover { display: block; max-width: 100%; max-height: 100%; /* Useful when stretching under-sized images. */ image-rendering: optimizeQuality; image-rendering: smooth; } /* Cover caption * -------------------------------------------------------------------------- */ .no-cover .cover-caption { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0.5em; font-size: 0.75em; color: white; background-color: #002549; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1em; white-space: initial; text-align: center; } /** Avatars ******************************************************************************/ .avatar { vertical-align: middle; display: inline; } /** Statuses: Quotes * * \e906: icon-quote-open * \e905: icon-quote-close * * The `content` class on the blockquote allows to apply styles to markdown * generated HTML in the quote: https://bulma.io/documentation/elements/content/ * * ```html *
* User generated quote in markdown… ** *
— Book Title by Author
*