moviewyrm/bookwyrm/static/css/bookwyrm.css

227 lines
4 KiB
CSS
Raw Normal View History

html {
scroll-behavior: smooth;
scroll-padding-top: 20%;
}
2020-10-01 20:53:52 +00:00
/* --- --- */
2020-11-24 20:07:00 +00:00
.image {
overflow: hidden;
}
2020-10-01 20:53:52 +00:00
.navbar .logo {
max-height: 50px;
}
.card {
overflow: visible;
}
2021-03-26 17:32:42 +00:00
.scroll-x {
overflow: hidden;
overflow-x: auto;
}
2021-03-31 20:56:26 +00:00
.modal-card.is-fullwidth {
min-width: 75% !important;
}
/* --- "disabled" for non-buttons --- */
.is-disabled {
background-color: #dbdbdb;
border-color: #dbdbdb;
box-shadow: none;
color: #7a7a7a;
2021-04-03 18:59:14 +00:00
opacity: 0.5;
cursor: not-allowed;
}
2021-01-30 19:43:40 +00:00
/* --- SHELVING --- */
/** @todo Replace icons with SVG symbols.
@see https://www.youtube.com/watch?v=9xXBYcWgCHA */
2021-01-30 19:43:40 +00:00
.shelf-option:disabled > *::after {
font-family: "icomoon"; /* stylelint-disable font-family-no-missing-generic-family-keyword */
2021-01-30 19:43:40 +00:00
content: "\e918";
margin-left: 0.5em;
}
2020-09-28 21:47:53 +00:00
/* --- TOGGLES --- */
.toggle-button[aria-pressed=true],
.toggle-button[aria-pressed=true]:hover {
2021-01-17 03:57:20 +00:00
background-color: hsl(171, 100%, 41%);
color: white;
}
.hide-active[aria-pressed=true],
.hide-inactive[aria-pressed=false] {
display: none;
}
2021-01-17 03:57:20 +00:00
2020-09-29 01:25:05 +00:00
.hidden {
2021-01-18 17:57:44 +00:00
display: none !important;
2020-09-28 21:47:53 +00:00
}
.hidden.transition-y,
.hidden.transition-x {
display: block !important;
visibility: hidden !important;
height: 0;
width: 0;
margin: 0;
padding: 0;
}
.transition-y {
transition-property: height, margin-top, margin-bottom, padding-top, padding-bottom;
transition-duration: 0.5s;
transition-timing-function: ease;
}
.transition-x {
transition-property: width, margin-left, margin-right, padding-left, padding-right;
transition-duration: 0.5s;
transition-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
.transition-x,
.transition-y {
transition-duration: 0.001ms !important;
}
}
2020-09-28 21:47:53 +00:00
/** Stars in a review form
*
* Specificity makes hovering taking over checked inputs.
*
* \e9d9: filled star
* \e9d7: empty star;
******************************************************************************/
.form-rate-stars {
width: max-content;
2020-09-29 18:00:54 +00:00
}
/* All stars are visually filled by default. */
.form-rate-stars .icon::before {
2020-09-29 18:00:54 +00:00
content: '\e9d9';
}
/* Icons directly following inputs that follow the checked input are emptied. */
.form-rate-stars input:checked ~ input + .icon::before {
2020-09-29 18:00:54 +00:00
content: '\e9d7';
}
/* When a label is hovered, repeat the fill-all-then-empty-following pattern. */
.form-rate-stars:hover .icon.icon::before {
2021-03-04 18:27:03 +00:00
content: '\e9d9';
}
.form-rate-stars .icon:hover ~ .icon::before {
2020-09-29 18:00:54 +00:00
content: '\e9d7';
}
2020-09-29 04:08:42 +00:00
/* --- BOOK COVERS --- */
2020-09-29 20:11:52 +00:00
.cover-container {
height: 250px;
2020-09-30 16:00:33 +00:00
width: max-content;
2020-12-17 20:57:56 +00:00
max-width: 250px;
2020-09-29 20:11:52 +00:00
}
2021-01-03 19:10:04 +00:00
.cover-container.is-large {
height: max-content;
2021-01-10 17:50:17 +00:00
max-width: 330px;
2021-01-03 19:10:04 +00:00
}
.cover-container.is-large img {
max-height: 500px;
2021-01-10 17:50:17 +00:00
height: auto;
}
2020-09-30 00:43:30 +00:00
.cover-container.is-medium {
2021-01-03 20:53:51 +00:00
height: 150px;
2020-09-30 00:43:30 +00:00
}
2020-11-05 16:21:00 +00:00
.cover-container.is-small {
2021-01-03 20:53:51 +00:00
height: 100px;
2020-11-05 16:21:00 +00:00
}
2020-11-05 16:21:00 +00:00
@media only screen and (max-width: 768px) {
.cover-container {
height: 200px;
width: max-content;
}
2020-11-05 16:21:00 +00:00
.cover-container.is-medium {
height: 100px;
}
}
2020-09-29 04:08:42 +00:00
.book-cover {
2020-09-29 21:11:55 +00:00
height: 100%;
2020-09-29 20:11:52 +00:00
object-fit: scale-down;
2020-09-29 04:08:42 +00:00
}
2020-09-29 04:08:42 +00:00
.no-cover {
position: relative;
2020-09-30 00:43:30 +00:00
white-space: normal;
2020-09-29 04:08:42 +00:00
}
2020-09-29 04:08:42 +00:00
.no-cover div {
position: absolute;
padding: 1em;
color: white;
top: 0;
left: 0;
text-align: center;
}
.cover-container.is-medium .no-cover div {
font-size: 0.9em;
padding: 0.3em;
}
.cover-container.is-small .no-cover div {
font-size: 0.7em;
padding: 0.1em;
}
2020-09-29 04:08:42 +00:00
/* --- AVATAR --- */
.avatar {
vertical-align: middle;
display: inline;
}
.is-32x32 {
min-width: 32px;
min-height: 32px;
2021-01-12 02:09:12 +00:00
}
.is-96x96 {
min-width: 96px;
min-height: 96px;
}
2020-09-29 21:45:04 +00:00
/* --- QUOTES --- */
.quote blockquote {
position: relative;
padding-left: 2em;
}
.quote blockquote::before,
.quote blockquote::after {
2020-09-29 21:45:04 +00:00
font-family: 'icomoon';
position: absolute;
}
.quote blockquote::before {
2021-01-16 16:54:16 +00:00
content: "\e906";
2020-09-29 21:45:04 +00:00
top: 0;
left: 0;
}
.quote blockquote::after {
2021-01-16 16:54:16 +00:00
content: "\e905";
2020-09-29 21:45:04 +00:00
right: 0;
}