413 lines
7 KiB
SCSS
413 lines
7 KiB
SCSS
/**
|
|
* Styles for site-skinned journal pages (entry page and reply page)
|
|
*/
|
|
|
|
|
|
/**
|
|
* Some common elements that are used in a bunch of places:
|
|
*/
|
|
|
|
.poster {
|
|
display: block;
|
|
}
|
|
|
|
.userpic a {
|
|
display: block;
|
|
line-height: 0;
|
|
}
|
|
|
|
.entry-interaction-links li,
|
|
.comment-interaction-links li,
|
|
.view-flat,
|
|
.view-threaded,
|
|
.view-top-only,
|
|
.expand_all {
|
|
&::before {
|
|
content: "(";
|
|
}
|
|
&::after {
|
|
content: ")";
|
|
}
|
|
}
|
|
|
|
ul.icon-links,
|
|
ul.text-links {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline;
|
|
|
|
li {
|
|
display: inline;
|
|
list-style: none;
|
|
margin-left: 0;
|
|
margin-right: 8px;
|
|
margin-bottom: 2px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-links img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.bottomcomment,
|
|
.entry .footer .inner,
|
|
.comment-pages {
|
|
text-align: center;
|
|
|
|
hr {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Don't add space after last element in an entry/comment. Avoids extra gaps
|
|
// if there's paragraph tags (markdown) instead of text nodes (casual HTML).
|
|
.comment-content, .entry-content {
|
|
& > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Primary item styles:
|
|
* (The primary item is always an entry on entry pages, but is sometimes a
|
|
* comment on reply pages.)
|
|
*/
|
|
|
|
.entry, .reply-page-wrapper .comment {
|
|
.header .inner {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap; // Fitting an OpenID username on mobile: always fun.
|
|
}
|
|
|
|
.userpic {
|
|
display: inline-block;
|
|
margin-right: .3rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.poster-info {
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
min-width: 0;
|
|
|
|
.datetime {
|
|
font-style: italic;
|
|
&::before {
|
|
content: "@";
|
|
}
|
|
}
|
|
}
|
|
|
|
.entry-title, .comment-title {
|
|
font-size: 1.5em;
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
@media #{$medium-up} {
|
|
.contents {
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Entry-specific styles:
|
|
*/
|
|
|
|
.entry {
|
|
.metadata ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
li {
|
|
margin-left: 0;
|
|
margin-bottom: .75em;
|
|
}
|
|
}
|
|
|
|
.metadata-label, .tag-text {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tag ul {
|
|
list-style: none;
|
|
display: inline;
|
|
margin-left: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
display: inline;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.entry-title {
|
|
display: inline-block; // security level icon displays in front of title
|
|
}
|
|
|
|
.access-filter img { // security level icon
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
@media #{$medium-up} {
|
|
.currents { // also includes tags
|
|
margin-left: 50px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
ul.entry-management-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.entry-interaction-links, .comment-pages {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.comment-pages span {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.action-box ul.pagination {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-areas: "prev pages next";
|
|
text-align: center;
|
|
margin: 0 0 0.75em 0;
|
|
|
|
.arrow {
|
|
align-self: center;
|
|
justify-self: center;
|
|
font-size: large;
|
|
margin: 0 .25em;
|
|
&.disabled {
|
|
opacity: 0.33;
|
|
padding: .0625rem .25rem .0625rem;
|
|
}
|
|
}
|
|
|
|
.arrow:first-child {
|
|
grid-area: prev;
|
|
}
|
|
|
|
.arrow:last-child {
|
|
grid-area: next;
|
|
}
|
|
|
|
li a {
|
|
padding: .0625rem .25rem .0625rem;
|
|
flex-grow: 1;
|
|
opacity: 1;
|
|
|
|
@media #{$small-only} {
|
|
padding: .125rem .5rem .125rem;
|
|
}
|
|
}
|
|
|
|
ul.pages {
|
|
grid-area: pages;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
max-width: 20rem;
|
|
|
|
@media #{$small-only} {
|
|
max-width: 10rem;
|
|
}
|
|
|
|
}
|
|
|
|
ul.pages li {
|
|
align-self: center;
|
|
margin: 0 0.1rem;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
width: 1.8rem;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Comment styles:
|
|
*/
|
|
|
|
// Don't let floated pics in a comment mess with the next comment's indent.
|
|
#comments .comment-thread {
|
|
clear: both;
|
|
}
|
|
|
|
#comments .comment { // Doesn't affect the comment on a reply page
|
|
min-width: 28em;
|
|
@media #{$small-only} {
|
|
min-width: 75vw;
|
|
}
|
|
|
|
.edittime {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
// Link text is "Thread." We want to keep this on reply pages, but on entry
|
|
// pages it's redundant; the real permalink is in the comment header, and
|
|
// there's already another "Thread" in the footer.
|
|
.footer .commentpermalink {
|
|
display: none;
|
|
}
|
|
|
|
.header {
|
|
& > .inner {
|
|
display: flex;
|
|
}
|
|
|
|
.comment-info, .userpic {
|
|
// Using "exploded" border properties so we can set the color later.
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
}
|
|
.comment-info {
|
|
border-right-width: 1px;
|
|
border-right-style: solid;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
line-height: 1.1;
|
|
|
|
input {
|
|
margin: 0;
|
|
}
|
|
|
|
@media #{$small-only} {
|
|
font-size: 0.9em;
|
|
|
|
.userpic {
|
|
// deal with tall aspect userpics
|
|
img {
|
|
height: auto;
|
|
max-width: 75px;
|
|
max-height: 75px;
|
|
object-fit: contain;
|
|
object-position: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Comment header backgrounds/borders
|
|
// Structure is:
|
|
// .comment-thread.comment-depth(odd|even)
|
|
// .dwexpcomment
|
|
// .comment-wrapper (possibly with .screened)
|
|
// .comment
|
|
// .inner
|
|
// .header (needs background-color)
|
|
// Intended behavior is:
|
|
// - Background colors alternate by depth.
|
|
// - Screened comments are special and stand out.
|
|
.comment-depth-odd > .dwexpcomment .header {
|
|
.comment-info, .userpic {
|
|
background-color: $secondary-color-alternate;
|
|
border-color: $strong-accent-color;
|
|
}
|
|
}
|
|
|
|
.comment-depth-even > .dwexpcomment .header {
|
|
.comment-info, .userpic {
|
|
background-color: $secondary-color;
|
|
border-color: $soft-accent-color;
|
|
}
|
|
}
|
|
|
|
.comment-wrapper.screened > .comment .header {
|
|
.comment-info, .userpic {
|
|
background: $screened-comment-bg;
|
|
}
|
|
}
|
|
|
|
.comment .admin-poster {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comment-content {
|
|
padding: .5em 0 .25em;
|
|
}
|
|
|
|
.comment .footer {
|
|
margin-top: .6em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.comment-info {
|
|
padding: .25em;
|
|
padding-left: .5em;
|
|
|
|
& > span, & > ul, & > div {
|
|
margin-right: .9em;
|
|
}
|
|
|
|
// width ignores inline image in some situations, so leave room for 16px
|
|
// userhead + 4px breathing room.
|
|
.poster {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.comment-title {
|
|
min-height: 1.4em; // take up as much space as a subject would.
|
|
@media #{$small-only} {
|
|
min-height: 0.6em; // except on mobile, where we can't spare the space.
|
|
}
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
.datetime, .poster-ip, .commentpermalink, .multiform-checkbox {
|
|
font-size: .8em;
|
|
}
|
|
|
|
}
|
|
|
|
// Single-line collapsed comments -- more rightward slop, but easier to track
|
|
.comment-wrapper.partial {
|
|
white-space: nowrap;
|
|
.comment-title {
|
|
font-size: 1em;
|
|
display: inline;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.poster {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Reply page tweaks:
|
|
*/
|
|
|
|
.reply-page-wrapper {
|
|
div.readlink {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.comment .reply, // reply action link
|
|
.entry .footer {
|
|
display: none;
|
|
}
|
|
}
|