bookwyrm-mastodon/bookwyrm/static/css/format.css

164 lines
2.8 KiB
CSS
Raw Normal View History

html {
scroll-behavior: smooth;
scroll-padding-top: 20%;
}
2020-10-01 16:53:52 -04:00
/* --- --- */
2020-11-24 15:07:00 -05:00
.image {
overflow: hidden;
}
2020-10-01 16:53:52 -04:00
.navbar .logo {
max-height: 50px;
}
.card {
overflow: visible;
}
.card-header-title {
overflow: hidden;
}
2021-01-30 14:43:40 -05:00
/* --- SHELVING --- */
.shelf-option:disabled > *::after {
font-family: "icomoon";
content: "\e918";
margin-left: 0.5em;
}
2020-09-28 17:47:53 -04:00
/* --- TOGGLES --- */
.toggle-button[aria-pressed=true], .toggle-button[aria-pressed=true]:hover {
2021-01-16 22:57:20 -05:00
background-color: hsl(171, 100%, 41%);
color: white;
}
2021-01-17 13:38:34 -05:00
.hide-active[aria-pressed=true], .hide-inactive[aria-pressed=false] {
display: none;
}
2021-01-16 22:57:20 -05:00
2020-09-28 21:25:05 -04:00
.hidden {
2021-01-18 12:57:44 -05:00
display: none !important;
2020-09-28 17:47:53 -04:00
}
2020-09-28 18:57:31 -04:00
/* --- STARS --- */
.rate-stars button.icon {
background: none;
border: none;
padding: 0;
margin: 0;
display: inline;
}
.rate-stars:hover .icon:before {
content: '\e9d9';
}
.rate-stars form:hover ~ form .icon:before{
content: '\e9d7';
}
2020-09-29 00:08:42 -04:00
2020-09-29 14:00:54 -04:00
/* stars in a review form */
.form-rate-stars:hover .icon:before {
content: '\e9d9';
}
.form-rate-stars input + .icon:before {
content: '\e9d9';
}
.form-rate-stars input:checked + .icon:before {
content: '\e9d9';
}
.form-rate-stars input:checked + * ~ .icon:before {
content: '\e9d7';
}
.form-rate-stars:hover label.icon:before {
content: '\e9d9';
}
.form-rate-stars label.icon:hover:before {
content: '\e9d9';
}
.form-rate-stars label.icon:hover ~ label.icon:before{
content: '\e9d7';
}
2020-09-29 00:08:42 -04:00
/* --- BOOK COVERS --- */
2020-09-29 16:11:52 -04:00
.cover-container {
height: 250px;
2020-09-30 12:00:33 -04:00
width: max-content;
2020-12-17 15:57:56 -05:00
max-width: 250px;
2020-09-29 16:11:52 -04:00
}
2021-01-03 14:10:04 -05:00
.cover-container.is-large {
height: max-content;
2021-01-10 12:50:17 -05:00
max-width: 330px;
2021-01-03 14:10:04 -05:00
}
.cover-container.is-large img {
max-height: 500px;
2021-01-10 12:50:17 -05:00
height: auto;
}
2020-09-29 20:43:30 -04:00
.cover-container.is-medium {
2021-01-03 15:53:51 -05:00
height: 150px;
2020-09-29 20:43:30 -04:00
}
2020-11-05 11:21:00 -05:00
.cover-container.is-small {
2021-01-03 15:53:51 -05:00
height: 100px;
2020-11-05 11:21:00 -05:00
}
@media only screen and (max-width: 768px) {
.cover-container {
height: 200px;
width: max-content;
}
.cover-container.is-medium {
height: 100px;
}
}
2020-09-29 20:43:30 -04:00
.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 00:08:42 -04:00
.book-cover {
2020-09-29 17:11:55 -04:00
height: 100%;
2020-09-29 16:11:52 -04:00
object-fit: scale-down;
2020-09-29 00:08:42 -04:00
}
.no-cover {
position: relative;
2020-09-29 20:43:30 -04:00
white-space: normal;
2020-09-29 00:08:42 -04:00
}
.no-cover div {
position: absolute;
padding: 1em;
color: white;
top: 0;
left: 0;
text-align: center;
}
/* --- AVATAR --- */
.avatar {
vertical-align: middle;
display: inline;
}
2021-01-11 21:09:12 -05:00
.navbar .avatar {
max-height: none;
}
2020-09-29 17:45:04 -04:00
/* --- QUOTES --- */
.quote blockquote {
position: relative;
padding-left: 2em;
}
.quote blockquote:before, .quote blockquote:after {
font-family: 'icomoon';
position: absolute;
}
.quote blockquote:before {
2021-01-16 11:54:16 -05:00
content: "\e906";
2020-09-29 17:45:04 -04:00
top: 0;
left: 0;
}
.quote blockquote:after {
2021-01-16 11:54:16 -05:00
content: "\e905";
2020-09-29 17:45:04 -04:00
right: 0;
}