bookwyrm/fedireads/static/format.css

812 lines
13 KiB
CSS
Raw Normal View History

2020-01-29 01:23:38 +00:00
/* some colors that are okay: #247BA0 #70C1B2 #B2DBBF #F3FFBD #FF1654 */
2020-04-02 02:38:07 +00:00
/* general override */
2020-01-25 23:25:19 +00:00
* {
margin: 0;
padding: 0;
line-height: 1.3em;
2020-01-29 01:23:38 +00:00
font-family: sans-serif;
2020-02-15 05:45:13 +00:00
}
2020-02-19 21:42:45 +00:00
html {
background-color: #FFF;
2020-02-19 21:42:45 +00:00
color: black;
}
a {
2020-03-15 21:15:36 +00:00
color: #247BA0;
2020-02-19 21:42:45 +00:00
}
2020-01-29 01:23:38 +00:00
h1 {
2020-04-02 02:38:07 +00:00
font-weight: normal;
2020-01-29 20:53:12 +00:00
font-size: 1.5rem;
2020-01-29 01:23:38 +00:00
}
h2 {
2020-04-02 02:38:07 +00:00
font-weight: normal;
2020-01-29 01:23:38 +00:00
font-size: 1rem;
padding: 0.5rem 0.2rem;
margin-bottom: 1rem;
2020-03-16 23:10:59 +00:00
border-bottom: 3px solid #B2DBBF;
2020-01-29 01:23:38 +00:00
}
2020-04-02 02:38:07 +00:00
h2 .edit-link {
text-decoration: none;
font-size: 0.9em;
float: right;
}
h2 .edit-link .icon {
font-size: 1.2em;
}
2020-03-30 00:02:17 +00:00
h3 {
font-size: 1rem;
font-weight: bold;
2020-04-02 02:38:07 +00:00
margin-bottom: 0.5em;
2020-03-30 00:02:17 +00:00
}
h3 small {
font-weight: normal;
}
2020-04-02 02:38:07 +00:00
/* fixed display top bar */
body {
padding-top: 90px;
}
2020-01-29 20:53:12 +00:00
#top-bar {
2020-03-15 21:15:36 +00:00
overflow: visible;
2020-01-29 20:53:12 +00:00
padding: 0.5rem;
2020-03-15 21:15:36 +00:00
border-bottom: 3px solid #247BA0;
margin-bottom: 1em;
width: 100%;
background-color: #FFF;
position: fixed;
top: 0;
height: 47px;
2020-03-21 19:32:44 +00:00
z-index: 2;
2020-01-29 01:39:07 +00:00
}
2020-04-02 02:38:07 +00:00
/* --- header bar content */
#branding {
flex-grow: 0;
}
#menu {
list-style: none;
2020-02-20 02:12:44 +00:00
text-align: center;
2020-04-02 02:38:07 +00:00
margin-top: 1.5rem;
flex-grow: 2;
font-size: 0.9em;
2020-02-20 02:12:44 +00:00
}
2020-04-02 02:38:07 +00:00
#menu li {
display: inline-block;
padding: 0 0.5em;
text-transform: uppercase;
}
#menu a {
color: #555;
2020-03-15 21:15:36 +00:00
text-decoration: none;
2020-04-02 02:38:07 +00:00
font-size: 0.9em;
2020-03-15 21:15:36 +00:00
}
2020-04-02 02:38:07 +00:00
2020-03-15 21:15:36 +00:00
#actions {
margin-top: 1em;
}
#actions > * {
display: inline-block;
2020-01-29 01:39:07 +00:00
}
2020-03-16 23:10:59 +00:00
#actions > *:last-child {
margin-left: 0.5em;
}
2020-03-15 21:15:36 +00:00
#notifications .icon {
font-size: 1.1rem;
2020-01-29 01:39:07 +00:00
}
2020-03-15 21:15:36 +00:00
#notifications a {
2020-01-29 08:05:58 +00:00
color: black;
2020-03-15 21:15:36 +00:00
text-decoration: none;
position: relative;
top: 0.2rem;
2020-01-29 08:05:58 +00:00
}
2020-03-15 21:15:36 +00:00
#notifications .count {
background-color: #FF1654;
color: white;
font-size: 0.85rem;
border-radius: 50%;
display: block;
position: absolute;
text-align: center;
top: -0.65rem;
right: -0.5rem;
height: 1rem;
width: 1rem;
2020-01-25 23:25:19 +00:00
}
2020-03-17 01:05:49 +00:00
.notification {
margin-bottom: 1em;
padding: 1em 0;
background-color: #EEE;
}
.notification.unread {
background-color: #DDD;
}
2020-03-15 21:15:36 +00:00
#search button {
border: none;
2020-03-22 16:30:08 +00:00
background: none;
2020-03-15 21:15:36 +00:00
}
#main, header {
2020-01-29 20:53:12 +00:00
margin: 0 auto;
2020-03-15 21:15:36 +00:00
max-width: 55rem;
padding-right: 1em;
}
2020-01-29 09:25:56 +00:00
/* pulldown */
2020-03-15 21:15:36 +00:00
.pulldown-container {
position: relative;
display: inline;
2020-03-15 21:15:36 +00:00
}
2020-03-15 21:15:36 +00:00
.pulldown {
display: none;
position: absolute;
list-style: none;
background: white;
padding: 1em;
right: 0;
2020-04-11 18:12:42 +00:00
font-size: 0.9rem;
2020-03-15 21:15:36 +00:00
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
width: max-content;
text-align: left;
z-index: 1;
2020-03-15 21:15:36 +00:00
}
2020-03-15 21:15:36 +00:00
.pulldown-container:hover .pulldown {
display: block;
}
2020-04-11 18:12:42 +00:00
.pulldown li a {
2020-04-09 21:39:12 +00:00
display: block;
2020-03-15 22:42:52 +00:00
margin-bottom: 0.5em;
2020-04-11 18:12:42 +00:00
text-decoration: none;
padding: 0.3em 0.8em
2020-03-15 22:42:52 +00:00
}
2020-03-15 21:15:36 +00:00
div.pulldown-button {
background-color: #eee;
border: 2px solid #247BA0;
border-radius: 0.3em;
color: #247BA0;
width: max-content;
margin: 0 auto;
white-space: nowrap;
}
.pulldown-button form {
display: inline;
}
div.pulldown-button button {
display: inline;
border: none;
border-radius: 0;
background-color: inherit;
color: #247BA0;
}
div.pulldown-button .pulldown-toggle {
padding-right: 0;
padding-left: 0;
position: relative;
left: -0.5em;
}
2020-04-09 21:39:12 +00:00
ul.pulldown button {
display: block;
text-align: left;
width: 100%;
border: none;
border-radius: 0;
background-color: white;
color: #247BA0;
}
.pulldown button[disabled] {
color: #aaa;
}
.pulldown button[disabled]:hover {
background-color: white;
}
2020-04-11 18:12:42 +00:00
.pulldown button:hover, .pulldown li:hover {
background-color: #ddd;
}
2020-04-02 02:38:07 +00:00
/* content area */
.content-container {
margin: 1rem;
}
.content-container > * {
padding-left: 1em;
padding-right: 1em;
}
2020-03-15 21:15:36 +00:00
#feed {
2020-01-29 09:25:56 +00:00
display: flex;
flex-direction: column;
2020-03-15 21:15:36 +00:00
padding-top: 70px;
position: relative;
2020-03-21 19:32:44 +00:00
z-index: 0;
2020-04-05 01:59:42 +00:00
margin-top: -2em;
2020-01-27 01:55:02 +00:00
}
2020-04-02 02:38:07 +00:00
/* row component */
2020-03-15 21:15:36 +00:00
.row {
display: flex;
flex-direction: row;
}
.row > * {
flex-grow: 1;
width: min-content;
2020-03-16 23:10:59 +00:00
margin-right: 1em;
}
.row > *:last-child {
margin-right: 0;
}
.row.shrink > * {
flex-grow: 0;
width: max-content;
}
2020-03-17 00:45:34 +00:00
.row.wrap {
flex-wrap: wrap;
}
2020-04-02 02:38:07 +00:00
.column {
display: flex;
flex-direction: column;
}
.column > * {
margin-bottom: 1em;
}
/* discover books page grid of covers */
2020-03-17 00:45:34 +00:00
.book-grid .book-cover {
height: 11em;
width: auto;
}
.book-grid > * {
margin-bottom: 2em;
}
2020-03-16 23:10:59 +00:00
2020-04-02 02:38:07 +00:00
/* special case forms */
.review-form label {
display: block;
}
.review-form textarea {
width: 30rem;
height: 10rem;
}
2020-04-08 16:40:47 +00:00
.review-form.quote-form textarea#id_content {
height: 4rem;
}
2020-04-02 02:38:07 +00:00
2020-03-16 23:10:59 +00:00
.follow-requests .row {
margin-bottom: 0.5em;
}
.follow-requests .row > *:first-child {
2020-03-17 01:05:49 +00:00
width: 20em;
2020-03-15 21:15:36 +00:00
}
2020-04-02 02:38:07 +00:00
2020-03-15 21:15:36 +00:00
.login form {
margin-top: 1em;
}
.login form p {
display: flex;
flex-direction: row;
padding: 0.5em 0;
}
.login form label {
width: 0;
flex-grow: 1;
display: inline-block;
}
2020-03-30 00:02:17 +00:00
.book-form textarea {
display: block;
width: 100%;
font-size: 0.9em;
}
.book-form label {
display: inline-block;
width: 8rem;
vertical-align: top;
}
.book-form .row label {
width: max-content;
}
2020-04-02 02:38:07 +00:00
/* general form stuff */
input, button {
padding: 0.2em 0.5em;
2020-03-30 00:02:17 +00:00
}
2020-04-02 02:38:07 +00:00
button, input[type="submit"] {
cursor: pointer;
width: max-content;
2020-03-30 00:02:17 +00:00
}
2020-03-15 21:15:36 +00:00
.content-container button {
border: none;
background-color: #247BA0;
color: white;
padding: 0.3em 0.8em;
font-size: 0.9em;
border-radius: 0.3em;
}
button.secondary {
background-color: #EEE;
border: 2px solid #247BA0;
color: #247BA0;
}
2020-03-16 23:10:59 +00:00
button.warning {
background-color: #FF1654;
2020-01-29 20:53:12 +00:00
}
2020-04-02 02:38:07 +00:00
form input {
flex-grow: 1;
}
form div {
margin-bottom: 1em;
}
textarea {
padding: 0.5em;
}
/* icons */
a .icon {
color: black;
text-decoration: none;
}
button .icon {
font-size: 1.1rem;
vertical-align: sub;
}
.hidden-text {
height: 0;
width: 0;
position: absolute;
overflow: hidden;
}
2020-04-03 19:43:49 +00:00
/* star ratings */
.stars {
letter-spacing: -0.15em;
display: inline-block;
}
.rate-stars .icon {
cursor: pointer;
2020-04-03 23:47:47 +00:00
color: goldenrod;
2020-04-03 19:43:49 +00:00
}
.rate-stars label.icon {
color: black;
}
2020-04-03 19:43:49 +00:00
.rate-stars form {
display: inline;
width: min-content;
}
2020-04-03 23:19:11 +00:00
.rate-stars button.icon {
2020-04-03 19:43:49 +00:00
background: none;
border: none;
padding: 0;
margin: 0;
2020-04-04 18:52:35 +00:00
display: inline;
}
.cover-container .stars {
display: block;
text-align: center;
2020-04-03 23:47:47 +00:00
}
.rate-stars:hover .icon:before {
content: '\e9d9';
}
.rate-stars form:hover ~ form .icon:before{
content: '\e9d7';
2020-04-03 19:43:49 +00:00
}
2020-04-03 23:25:04 +00:00
.review-form .rate-stars:hover .icon:before {
2020-04-03 19:43:49 +00:00
content: '\e9d9';
}
2020-04-03 23:25:04 +00:00
.review-form .rate-stars label {
2020-04-03 23:19:11 +00:00
display: inline;
}
2020-04-03 23:25:04 +00:00
.review-form .rate-stars input + .icon:before {
2020-04-03 23:19:11 +00:00
content: '\e9d9';
}
2020-04-03 23:25:04 +00:00
.review-form .rate-stars input:checked + .icon:before {
2020-04-03 23:19:11 +00:00
content: '\e9d9';
}
2020-04-03 23:25:04 +00:00
.review-form .rate-stars input:checked + * ~ .icon:before {
2020-04-03 23:19:11 +00:00
content: '\e9d7';
}
2020-04-03 23:25:04 +00:00
.review-form .rate-stars:hover label.icon:before {
2020-04-03 23:19:11 +00:00
content: '\e9d9';
}
2020-04-03 23:25:04 +00:00
.review-form .rate-stars label.icon:hover:before {
2020-04-03 23:19:11 +00:00
content: '\e9d9';
}
2020-04-03 23:25:04 +00:00
.review-form .rate-stars label.icon:hover ~ label.icon:before{
2020-04-03 23:19:11 +00:00
content: '\e9d7';
}
2020-04-03 23:25:04 +00:00
.review-form .rate-stars input[type="radio"] {
2020-04-03 23:19:11 +00:00
display: none;
}
2020-04-02 02:38:07 +00:00
/* re-usable tab styles */
.tabs {
display: flex;
flex-direction: row;
2020-03-15 21:15:36 +00:00
border-bottom: 3px solid #FF1654;
padding-left: 1em;
}
.tabs.secondary {
border-bottom: 3px solid #247BA0;
}
.tab {
padding: 0.5em 1em;
border-radius: 0.25em 0.25em 0 0;
}
.secondary .tab {
padding: 0.25em 0.5em;
}
2020-03-15 21:15:36 +00:00
.tabs .tab.active {
background-color: #FF1654;
}
2020-03-15 21:15:36 +00:00
.tabs.secondary .tab.active {
background-color: #247BA0;
}
.tab.active a {
color: black;
}
2020-04-02 02:38:07 +00:00
2020-01-25 23:25:19 +00:00
.user-pic {
2020-04-01 21:55:32 +00:00
width: 2em;
height: 2em;
2020-01-25 23:25:19 +00:00
border-radius: 50%;
2020-01-29 23:10:32 +00:00
vertical-align: top;
position: relative;
2020-03-15 21:15:36 +00:00
bottom: 0.35em;
}
2020-03-16 23:10:59 +00:00
.user-pic.large {
width: 5em;
height: 5em;
}
2020-04-02 02:38:07 +00:00
2020-03-16 23:10:59 +00:00
.user-profile .row > * {
flex-grow: 0;
}
.user-profile .row > *:last-child {
flex-grow: 1;
2020-04-02 02:38:07 +00:00
margin-left: 2em;
2020-03-16 23:10:59 +00:00
}
2020-03-15 21:15:36 +00:00
2020-04-02 02:38:07 +00:00
/* general book display */
2020-01-25 23:25:19 +00:00
.book-preview {
2020-03-15 21:15:36 +00:00
overflow: hidden;
2020-03-21 19:32:44 +00:00
z-index: 1;
2020-01-25 23:25:19 +00:00
}
2020-04-02 02:38:07 +00:00
.book-preview.grid {
2020-01-25 23:25:19 +00:00
float: left;
}
2020-04-02 02:38:07 +00:00
.cover-container {
flex-grow: 0;
}
.cover-container button {
display: block;
margin: 0 auto;
}
.book-cover {
width: 180px;
height: auto;
}
.book-cover.small {
width: 50px;
height: auto;
2020-02-21 17:15:20 +00:00
}
2020-04-02 02:38:07 +00:00
.no-cover {
position: relative;
2020-03-15 21:15:36 +00:00
}
2020-04-02 02:38:07 +00:00
.no-cover div {
position: absolute;
padding: 1em;
color: white;
top: 0;
left: 0;
text-align: center;
}
.no-cover .title {
text-transform: uppercase;
margin-bottom: 1em;
2020-01-29 08:05:58 +00:00
}
2020-04-03 19:43:49 +00:00
dl {
font-size: 0.9em;
margin-top: 0.5em;
}
dt {
float: left;
margin-right: 0.5em;
}
dd {
margin-bottom: 0.25em;
}
2020-03-15 21:15:36 +00:00
.all-shelves {
display: flex;
flex-direction: row;
margin-left: 0;
2020-04-05 01:59:42 +00:00
position: relative;
z-index: 1;
2020-04-06 16:34:09 +00:00
overflow-y: auto;
2020-03-15 21:15:36 +00:00
}
.all-shelves h2 {
white-space: nowrap;
}
2020-03-15 21:15:36 +00:00
.all-shelves > div {
flex-grow: 0;
}
.all-shelves > div:last-child {
padding-right: 0;
flex-grow: 1;
}
.all-shelves > div > * {
padding: 0;
}
.all-shelves > div:first-child > * {
padding-left: 1em;
}
2020-03-16 23:10:59 +00:00
2020-03-15 21:15:36 +00:00
.covers-shelf {
display: flex;
flex-direction: row;
}
2020-04-02 02:38:07 +00:00
.covers-shelf .cover-container {
2020-03-15 21:15:36 +00:00
margin-right: 1em;
font-size: 0.9em;
overflow: unset;
width: min-content;
}
2020-04-02 02:38:07 +00:00
.covers-shelf .cover-container:last-child {
2020-03-15 21:15:36 +00:00
margin-right: 0;
2020-01-29 20:53:12 +00:00
}
2020-04-06 00:08:47 +00:00
.covers-shelf .book-cover:hover {
2020-03-15 21:15:36 +00:00
cursor: pointer;
box-shadow: #F3FFBD 0em 0em 1em 1em;
}
2020-03-15 22:41:23 +00:00
.covers-shelf .book-cover {
2020-03-15 21:15:36 +00:00
height: 11rem;
width: auto;
margin: 0;
}
2020-04-11 18:07:11 +00:00
.covers-shelf button, .covers-shelf .pulldown-button {
2020-04-02 02:38:07 +00:00
border: none;
}
2020-03-15 21:15:36 +00:00
.close {
float: right;
cursor: pointer;
2020-01-29 01:23:38 +00:00
padding: 1rem;
2020-01-25 23:25:19 +00:00
}
2020-04-05 01:59:42 +00:00
.all-shelves input[type='radio'] {
display: none;
}
.compose-popout input[type="radio"] {
display: none;
}
2020-03-15 21:15:36 +00:00
.compose-suggestion {
display: none;
2020-04-08 17:49:20 +00:00
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
padding-bottom: 1em;
margin-top: 2em;
2020-03-15 21:15:36 +00:00
}
2020-04-05 01:59:42 +00:00
input:checked ~ .compose-suggestion {
2020-03-15 21:15:36 +00:00
display: block;
}
.compose-suggestion .book-preview {
background-color: #EEE;
padding: 1em;
}
2020-04-05 01:59:42 +00:00
.compose-suggestion button {
margin: 0;
}
.compose-suggestion .stars {
text-align: left;
}
2020-03-15 21:15:36 +00:00
2020-02-21 06:19:19 +00:00
.tag {
display: inline-block;
padding: 0.2em;
border-radius: 0.2em;
2020-04-04 20:12:15 +00:00
background-color: #EEE;
2020-02-21 06:19:19 +00:00
}
.tag form {
display: inline;
}
2020-04-04 20:12:15 +00:00
.tag a {
text-decoration: none;
}
2020-02-21 06:19:19 +00:00
2020-01-29 09:25:56 +00:00
blockquote {
2020-03-16 23:10:59 +00:00
white-space: pre-line;
}
2020-04-12 04:49:06 +00:00
blockquote .icon-quote-open, blockquote .icon-quote-close, .quote blockquote:before, .quote blockquote:after {
2020-03-16 23:10:59 +00:00
font-size: 2rem;
margin-right: 0.5rem;
color: #888;
2020-01-29 09:25:56 +00:00
}
2020-04-12 04:49:06 +00:00
blockquote .icon-quote-open {
2020-04-08 16:40:47 +00:00
float: left;
}
2020-04-12 04:49:06 +00:00
2020-04-08 16:40:47 +00:00
.quote {
margin-bottom: 2em;
position: relative;
}
.quote blockquote {
background-color: white;
margin: 1em;
padding: 1em;
}
2020-04-12 04:49:06 +00:00
.quote blockquote:before, .quote blockquote:after {
font-family: 'icomoon';
position: absolute;
}
.quote blockquote:before {
content: "\e904";
top: 0;
left: 0;
}
.quote blockquote:after {
content: "\e903";
bottom: 1em;
right: 0;
}
2020-01-29 20:53:12 +00:00
.interaction {
2020-03-15 21:15:36 +00:00
background-color: #B2DBBF;
border-radius: 0 0 0.5em 0.5em;
2020-03-15 22:25:43 +00:00
display: flex;
flex-direction: row;
padding: 0.5em;
}
.interaction > * {
margin-right: 0.5em;
}
.interaction button:hover {
box-shadow: #247BA0 0em 0em 1em 0em;
color: #247BA0;
}
.interaction button {
background: white;
height: 2em;
min-width: 3em;
padding: 0;
color: #888;
}
2020-03-16 01:12:45 +00:00
.interaction .active button .icon {
2020-03-15 22:25:43 +00:00
color: #FF1654;
2020-01-29 20:53:12 +00:00
}
2020-02-21 23:39:25 +00:00
.interaction textarea {
height: 2em;
2020-03-15 22:25:43 +00:00
width: 23em;
float: left;
padding: 0.25em;
margin-right: 0.5em;
}
.interaction textarea:valid, .interaction textarea:focus {
height: 4em;
2020-02-21 23:39:25 +00:00
}
.hidden {
display: none;
}
2020-01-29 23:10:32 +00:00
table {
border-collapse: collapse;
margin: 1em;
}
tr {
vertical-align: top;
}
tr:nth-child(even) {
2020-03-17 00:29:37 +00:00
background-color: #EEE;
2020-01-29 23:10:32 +00:00
}
th {
font-weight: bold;
}
th, td {
padding: 1em;
text-align: left;
}
2020-02-11 05:49:18 +00:00
.errorlist {
list-style: none;
font-size: 0.8em;
color: #FF1654;
}
2020-04-02 02:38:07 +00:00
/* status css */
.time-ago {
float: right;
display: block;
text-align: right;
}
.post {
2020-03-15 21:15:36 +00:00
background-color: #EFEFEF;
padding-top: 1em;
padding-bottom: 1em;
}
.post h2, .compose-suggestion h2 {
position: relative;
right: 2em;
2020-03-16 23:10:59 +00:00
border: none;
2020-03-15 21:15:36 +00:00
}
2020-03-15 22:25:43 +00:00
.post .time-ago {
position: relative;
left: 2em;
}
2020-03-15 21:15:36 +00:00
.post .user-pic, .compose-suggestion .user-pic {
right: 0.25em;
}
2020-04-01 21:55:32 +00:00
.post h2 .subhead {
display: block;
margin-left: 2em;
}
.post .subhead .time-ago {
display: none;
}
2020-04-02 02:38:07 +00:00
/* status page with replies */
.comment-thread .reply h2 {
background: none;
}
2020-03-15 21:15:36 +00:00
.comment-thread .post {
margin-left: 4em;
border-left: 2px solid #247BA0;
}
2020-03-15 21:15:36 +00:00
.comment-thread .post.depth-1 {
margin-left: 0;
border: none;
}
2020-03-15 21:15:36 +00:00
.comment-thread .post.depth-2 {
margin-left: 1em;
}
2020-03-15 21:15:36 +00:00
.comment-thread .post.depth-3 {
margin-left: 2em;
}
2020-03-15 21:15:36 +00:00
.comment-thread .post.depth-4 {
margin-left: 3em;
}
2020-03-10 20:31:57 +00:00
2020-04-02 02:38:07 +00:00
/* pagination */
2020-04-01 22:36:35 +00:00
.pagination a {
text-decoration: none;
}
.pagination .next {
text-align: right;
}
2020-04-02 02:38:07 +00:00
/* special one-off "delete all data" banner */
#warning {
background-color: #FF1654;
text-align: center;
}