diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/status.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/status.scss | 135 |
1 files changed, 42 insertions, 93 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index a46fb94b2..21c28919a 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -67,7 +67,8 @@ margin: -3px 0 0; } - p, pre, blockquote { + p, + pre { margin-bottom: 20px; white-space: pre-wrap; unicode-bidi: plaintext; @@ -77,79 +78,6 @@ } } - .status__content__text, - .e-content { - overflow: hidden; - - & > ul, - & > ol { - margin-bottom: 20px; - } - - h1, h2, h3, h4, h5 { - margin-top: 20px; - margin-bottom: 20px; - } - - h1, h2 { - font-weight: 700; - font-size: 1.2em; - } - - h2 { - font-size: 1.1em; - } - - h3, h4, h5 { - font-weight: 500; - } - - blockquote { - padding-left: 10px; - border-left: 3px solid $darker-text-color; - color: $darker-text-color; - white-space: normal; - - p:last-child { - margin-bottom: 0; - } - } - - b, strong { - font-weight: 700; - } - - em, i { - font-style: italic; - } - - sub { - font-size: smaller; - vertical-align: sub; - } - - sup { - font-size: smaller; - vertical-align: super; - } - - ul, ol { - p { - margin: 0; - } - } - - ul { - margin-left: 1em; - list-style-type: disc; - } - - ol { - list-style-type: decimal; - list-style-position: inside; - } - } - a { color: $secondary-text-color; text-decoration: none; @@ -317,8 +245,13 @@ } @keyframes fade { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } } opacity: 1; @@ -381,9 +314,14 @@ right: 0; top: 0; bottom: 0; - background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); + background-image: linear-gradient( + to bottom, + rgba($base-shadow-color, 0.75), + rgba($base-shadow-color, 0.65) 24px, + rgba($base-shadow-color, 0.8) + ); pointer-events: none; - content: ""; + content: ''; } .display-name:hover .display-name__html { @@ -396,26 +334,37 @@ text-overflow: ellipsis; padding-top: 0; - &:after { - content: ""; + &::after { + content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; - background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1)); + background: linear-gradient( + rgba($ui-base-color, 0), + rgba($ui-base-color, 1) + ); pointer-events: none; } - + a:hover { text-decoration: underline; } } - &:focus > .status__content:after { - background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1)); + + &:focus > .status__content::after { + background: linear-gradient( + rgba(lighten($ui-base-color, 4%), 0), + rgba(lighten($ui-base-color, 4%), 1) + ); } - &.status-direct > .status__content:after { - background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1)); + + &.status-direct > .status__content::after { + background: linear-gradient( + rgba(lighten($ui-base-color, 8%), 0), + rgba(lighten($ui-base-color, 8%), 1) + ); } .notification__message { @@ -428,7 +377,7 @@ } .notification__message { - margin: -10px 0px 10px 0; + margin: -10px 0px 10px; a:hover { text-decoration: underline; @@ -840,7 +789,8 @@ a.status__display-name, bottom: -1px; } - a .fa, a:hover .fa { + a .fa, + a:hover .fa { color: inherit; } } @@ -858,9 +808,9 @@ a.status-card { cursor: zoom-in; display: block; text-decoration: none; - width: 100%; - height: auto; - margin: 0; + width: 100%; + height: auto; + margin: 0; } .status-card-video { @@ -1071,11 +1021,10 @@ a.status-card.compact:hover { &.unread { &::before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; - pointer-events: 0; width: 100%; height: 100%; border-left: 4px solid $highlight-text-color; |