bookwyrm/fedireads/static/format.css

/* some colors that are okay: #247BA0 #70C1B2 #B2DBBF #F3FFBD #FF1654 */

/* general override */
* {
    margin: 0;
    padding: 0;
    line-height: 1.3em;
    font-family: sans-serif;
}
html {
    background-color: #FFF;
    color: black;
}

a {
    color: #247BA0;
}

h1 {
    font-weight: normal;
    font-size: 1.5rem;
}
h2 {
    font-weight: normal;
    font-size: 1rem;
    padding: 0.5rem 0.2rem;
    margin-bottom: 1rem;
    border-bottom: 3px solid #B2DBBF;
}

h2 .edit-link {
    text-decoration: none;
    font-size: 0.9em;
    float: right;
}
h2 .edit-link .icon {
    font-size: 1.2em;
}
h3 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5em;
}
h3 small {
    font-weight: normal;
}

section {
    margin-bottom: 1em;
}


/* fixed display top bar */
body {
    padding-top: 90px;
}
#top-bar {
    overflow: visible;
    padding: 0.5rem;
    border-bottom: 3px solid #247BA0;
    margin-bottom: 1em;
    width: 100%;
    background-color: #FFF;
    position: fixed;
    top: 0;
    height: 47px;
    z-index: 2;
}

/* --- header bar content */
#branding {
    flex-grow: 0;
}
#menu {
    list-style: none;
    text-align: center;
    margin-top: 1.5rem;
    flex-grow: 2;
    font-size: 0.9em;
}
#menu li {
    display: inline-block;
    padding: 0 0.5em;
    text-transform: uppercase;
}
#menu a {
    color: #555;
    text-decoration: none;
    font-size: 0.9em;
}

#actions {
    margin-top: 1em;
}
#actions > * {
    display: inline-block;
}
#actions > *:last-child {
    margin-left: 0.5em;
}

#notifications .icon {
    font-size: 1.1rem;
}
#notifications a {
    color: black;
    text-decoration: none;
    position: relative;
    top: 0.2rem;
}
#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;
}
.notification {
    margin-bottom: 1em;
    padding: 1em 0;
    background-color: #EEE;
}
.notification.unread {
    background-color: #DDD;
}

#search button {
    border: none;
    background: none;
}

#main, header {
    margin: 0 auto;
    max-width: 55rem;
    padding-right: 1em;
}

/* pulldown */
.pulldown-container {
    position: relative;
    display: inline;
}

.pulldown {
    display: none;
    position: absolute;
    list-style: none;
    background: white;
    padding: 1em;
    right: 0;
    font-size: 0.9rem;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    width: max-content;
    text-align: left;
    z-index: 1;
}

.pulldown-container:hover .pulldown {
    display: block;
}

.pulldown li a {
    display: block;
    margin-bottom: 0.5em;
    text-decoration: none;
    padding: 0.3em 0.8em
}

div.pulldown-button {
    background-color: #eee;
    border-radius: 0.3em;
    color: #247BA0;
    width: max-content;
    margin: 0 auto;
    white-space: nowrap;
}
.post div.pulldown-button {
    border: 2px solid #247BA0;
}

.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;
}

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;
}

.pulldown button:hover, .pulldown li:hover {
    background-color: #ddd;
}

/* content area */
.content-container {
    margin: 1rem;
}
.content-container > * {
    padding-left: 1em;
    padding-right: 1em;
}

#feed {
    display: flex;
    flex-direction: column;
    padding-top: 70px;
    position: relative;
    z-index: 0;
    margin-top: -2em;
}

/* row component */
.row {
    display: flex;
    flex-direction: row;
}
.row > * {
    flex-grow: 1;
    width: min-content;
    margin-right: 1em;
}
.row > *:last-child {
    margin-right: 0;
}
.row.shrink > * {
    flex-grow: 0;
    width: max-content;
}
.row.wrap {
    flex-wrap: wrap;
}

.column {
    display: flex;
    flex-direction: column;
}
.column > * {
    margin-bottom: 1em;
}


/* discover books page grid of covers */
.book-grid .book-cover {
    height: 176px;
    width: auto;
    margin: 0 auto;
}
.book-grid .no-cover {
    width: 115px;
}
.book-grid > * {
    margin-bottom: 2em;
}

/* special case forms */
.review-form label {
    display: block;
}
.review-form textarea {
    width: 30rem;
    height: 10rem;
}
.review-form.quote-form textarea#id_content {
    height: 4rem;
}



.follow-requests .row {
    margin-bottom: 0.5em;
}
.follow-requests .row > *:first-child {
    width: 20em;
}


.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;
}


.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;
}

/* general form stuff */
input, button {
    padding: 0.2em 0.5em;
}
button, input[type="submit"] {
    cursor: pointer;
    width: max-content;
}
.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;
    color: #247BA0;
}
.post button.secondary {
    border: 2px solid #247BA0;
}

button.warning {
    background-color: #FF1654;
}

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;
}


/* star ratings */
.stars {
    letter-spacing: -0.15em;
    display: inline-block;
}
.rate-stars .icon {
    cursor: pointer;
    color: goldenrod;
}
.rate-stars label.icon {
    color: black;
}
.rate-stars form {
    display: inline;
    width: min-content;
}
.rate-stars button.icon {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: inline;
}
.cover-container .stars {
    display: block;
    text-align: center;
}
.rate-stars:hover .icon:before {
    content: '\e9d9';
}
.rate-stars form:hover ~ form .icon:before{
    content: '\e9d7';
}

.review-form .rate-stars:hover .icon:before {
    content: '\e9d9';
}
.review-form .rate-stars label {
    display: inline;
}
.review-form .rate-stars input + .icon:before {
    content: '\e9d9';
}
.review-form .rate-stars input:checked + .icon:before {
    content: '\e9d9';
}
.review-form .rate-stars input:checked + * ~ .icon:before {
    content: '\e9d7';
}
.review-form .rate-stars:hover label.icon:before {
    content: '\e9d9';
}
.review-form .rate-stars label.icon:hover:before {
     content: '\e9d9';
 }
.review-form .rate-stars label.icon:hover ~ label.icon:before{
    content: '\e9d7';
}
.review-form .rate-stars input[type="radio"] {
    display: none;
}

/* re-usable tab styles */
.tabs {
    display: flex;
    flex-direction: row;
    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;
}
.tabs .tab.active {
    background-color: #FF1654;
}
.tabs.secondary .tab.active {
    background-color: #247BA0;
}
.tab.active a {
    color: black;
}


.user-pic {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    vertical-align: top;
    position: relative;
    bottom: 0.35em;
}
.user-pic.large {
    width: 5em;
    height: 5em;
}


.user-profile .row > * {
    flex-grow: 0;
}
.user-profile .row > *:last-child {
    flex-grow: 1;
    margin-left: 2em;
}

/* general book display */
.book-preview {
    overflow: hidden;
    z-index: 1;
    text-align: center;
}
.book-preview.grid {
    float: left;
}

.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;
}

.no-cover {
    position: relative;
}
.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;
}


dl {
    font-size: 0.9em;
    margin-top: 0.5em;
}
dt {
    float: left;
    margin-right: 0.5em;
}
dd {
    margin-bottom: 0.25em;
}


.all-shelves {
    display: flex;
    flex-direction: row;
    margin-left: 0;
    position: relative;
    z-index: 1;
    overflow-y: auto;
}
.all-shelves h2 {
    white-space: nowrap;
}
.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;
}

.covers-shelf {
    display: flex;
    flex-direction: row;
}
.covers-shelf .cover-container {
    margin-right: 1em;
    font-size: 0.9em;
    overflow: unset;
    width: min-content;
}
.covers-shelf .cover-container:last-child {
    margin-right: 0;
}
.covers-shelf .book-cover:hover {
    cursor: pointer;
    box-shadow: #F3FFBD 0em 0em 1em 1em;
}
.covers-shelf .book-cover {
    height: 11rem;
    width: auto;
    margin: 0;
}

.close {
    float: right;
    cursor: pointer;
    padding: 1rem;
}

.all-shelves input[type='radio'] {
    display: none;
}
.compose-popout input[type="radio"] {
    display: none;
}
.compose-suggestion {
    display: none;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    padding-bottom: 1em;
    margin-top: 2em;
}
input:checked ~ .compose-suggestion {
    display: block;
}
.compose .book-preview {
    background-color: #EEE;
    padding: 1em;
}
.compose button {
    margin: 0;
}
.compose .stars {
    text-align: left;
}

.tag {
    display: inline-block;
    padding: 0.2em;
    border-radius: 0.2em;
    background-color: #EEE;
}
.tag form {
    display: inline;
}
.tag a {
    text-decoration: none;
}

blockquote {
    white-space: pre-line;
}
blockquote .icon-quote-open, blockquote .icon-quote-close, .quote blockquote:before, .quote blockquote:after {
    font-size: 2rem;
    margin-right: 0.5rem;
    color: #888;
}
blockquote .icon-quote-open {
    float: left;
}

.quote {
    margin-bottom: 2em;
    position: relative;
}
.quote blockquote {
    background-color: white;
    margin: 1em;
    padding: 1em;
}
.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;
}

.interaction {
    background-color: #B2DBBF;
    border-radius: 0 0 0.5em 0.5em;
    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;
}
.interaction .active button .icon {
    color: #FF1654;
}
.interaction textarea {
    height: 2em;
    width: 23em;
    float: left;
    padding: 0.25em;
    margin-right: 0.5em;
}
.interaction textarea:valid, .interaction textarea:focus {
    height: 4em;
}

.hidden {
    display: none;
}

table {
    border-collapse: collapse;
    margin: 1em;
}
tr {
    vertical-align: top;
}

tr:nth-child(even) {
    background-color: #EEE;
}

th {
    font-weight: bold;
}
th, td {
    padding: 1em;
    text-align: left;
}

.errorlist {
    list-style: none;
    font-size: 0.8em;
    color: #FF1654;
}

/* status css */
.time-ago {
    float: right;
    display: block;
    text-align: right;
}
.post {
    background-color: #EFEFEF;
    padding-top: 1em;
    padding-bottom: 1em;
}
.post h2, .compose-suggestion h2 {
    position: relative;
    right: 2em;
    border: none;
}
.post .time-ago {
    position: relative;
    left: 2em;
}
.post .user-pic, .compose-suggestion .user-pic {
    right: 0.25em;
}
.post h2 .subhead {
    display: block;
    margin-left: 2em;
}
.post .subhead .time-ago {
    display: none;
}

/* status page with replies */
.comment-thread .reply h2 {
    background: none;
}
.comment-thread .post {
    margin-left: 4em;
    border-left: 2px solid #247BA0;
}
.comment-thread .post.depth-1 {
    margin-left: 0;
    border: none;
}
.comment-thread .post.depth-2 {
    margin-left: 1em;
}
.comment-thread .post.depth-3 {
    margin-left: 2em;
}
.comment-thread .post.depth-4 {
    margin-left: 3em;
}

/* pagination */
.pagination a {
    text-decoration: none;
}
.pagination .next {
    text-align: right;
}

/* special one-off "delete all data" banner */
#warning {
    background-color: #FF1654;
    text-align: center;
}