mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2025-01-14 19:25:30 +00:00
Code Issues Projects Releases Wiki Activity

cover: Rearrange some CSS rules.

Browse source
This commit is contained in:
Fabien Basmaison 2021-04-28 14:48:25 +02:00
parent baaaeef4c0
commit bba60c99e9
1 changed files with 62 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
bookwyrm/static/css/bookwyrm.css
View file

@ -43,10 +43,6 @@ body {
white-space: nowrap !important; white-space: nowrap !important;
width: 0.01em !important; width: 0.01em !important;
} }
.m-0-mobile {
margin: 0 !important;
}
} }
.button.is-transparent { .button.is-transparent {
@ -282,6 +278,56 @@ body {
cursor: not-allowed; cursor: not-allowed;
} }
/* Book preview table
******************************************************************************/
.book-preview td {
vertical-align: middle;
}
@media only screen and (max-width: 768px) {
table.is-mobile,
table.is-mobile tbody {
display: block;
}
table.is-mobile tr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px solid #dbdbdb;
}
table.is-mobile td {
display: block;
box-sizing: border-box;
flex: 1 0 100%;
order: 2;
border-bottom: 0;
}
table.is-mobile td.book-preview-top-row {
order: 1;
flex-basis: auto;
}
table.is-mobile td[data-title]:not(:empty)::before {
content: attr(data-title);
display: block;
font-size: 0.75em;
font-weight: bold;
}
table.is-mobile td:empty {
padding: 0;
}
table.is-mobile th,
table.is-mobile thead {
display: none;
}
}
/* Dimensions /* Dimensions
* @todo These could be in rem. * @todo These could be in rem.
******************************************************************************/ ******************************************************************************/
@ -554,6 +600,10 @@ body {
justify-content: flex-end !important; justify-content: flex-end !important;
} }
.align.to-b-mobile {
align-items: flex-end !important;
}
.align.to-l-mobile { .align.to-l-mobile {
justify-content: flex-start !important; justify-content: flex-start !important;
} }
@ -572,6 +622,10 @@ body {
justify-content: flex-end !important; justify-content: flex-end !important;
} }
.align.to-b-tablet {
align-items: flex-end !important;
}
.align.to-l-tablet { .align.to-l-tablet {
justify-content: flex-start !important; justify-content: flex-start !important;
} }
@ -589,6 +643,10 @@ body {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.m-0-mobile {
margin: 0 !important;
}
.mr-auto-mobile { .mr-auto-mobile {
margin-right: auto !important; margin-right: auto !important;
} }
@ -629,53 +687,3 @@ body {
margin-left: 0.75rem !important; margin-left: 0.75rem !important;
} }
} }
/* Book preview table
******************************************************************************/
.book-preview td {
vertical-align: middle;
}
@media only screen and (max-width: 768px) {
table.is-mobile,
table.is-mobile tbody {
display: block;
}
table.is-mobile tr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px solid #dbdbdb;
}
table.is-mobile td {
display: block;
box-sizing: border-box;
flex: 1 0 100%;
order: 2;
border-bottom: 0;
}
table.is-mobile td.book-preview-top-row {
order: 1;
flex-basis: auto;
}
table.is-mobile td[data-title]:not(:empty)::before {
content: attr(data-title);
display: block;
font-size: 0.75em;
font-weight: bold;
}
table.is-mobile td:empty {
padding: 0;
}
table.is-mobile th,
table.is-mobile thead {
display: none;
}
}