@ -0,0 +1,656 @@ | |||
.status__content { | |||
//reset | |||
overflow: initial; | |||
padding-top: inherit; | |||
//glitch | |||
position: relative; | |||
margin: 10px 0; | |||
padding: 0 12px; | |||
font-size: 15px; | |||
line-height: 20px; | |||
color: $primary-text-color; | |||
word-wrap: break-word; | |||
font-weight: 400; | |||
overflow: visible; | |||
white-space: pre-wrap; | |||
padding-top: 5px; | |||
} | |||
.status-check-box { | |||
.status__content { | |||
color: #3a3a3a; | |||
a { | |||
color: #005aa9; | |||
} | |||
} | |||
} | |||
.status__content__spoiler { | |||
background: lighten($ui-base-color, 30%); | |||
&:hover { | |||
background: lighten($ui-base-color, 33%); | |||
text-decoration: none; | |||
} | |||
} | |||
.status__content__text { | |||
display: none; | |||
&.status__content__spoiler--visible { | |||
display: block; | |||
} | |||
} | |||
.status__content__spoiler-link { | |||
//reset | |||
background: initial; | |||
border: initial; | |||
padding: initial; | |||
//glitch | |||
background: lighten($ui-base-color, 30%); | |||
border: none; | |||
padding: 0 5px; | |||
vertical-align: bottom; | |||
&:hover { | |||
background: lighten($ui-base-color, 33%); | |||
text-decoration: none; | |||
} | |||
.status__content__spoiler-icon { | |||
display: inline-block; | |||
margin: 0 0 0 5px; | |||
border-left: 1px solid currentColor; | |||
padding: 0 0 0 4px; | |||
font-size: 16px; | |||
vertical-align: -2px; | |||
} | |||
} | |||
.status__prepend-icon-wrapper { | |||
//reset | |||
left: initial; | |||
position: initial; | |||
//glitch | |||
float: left; | |||
margin: 0 10px 0 -58px; | |||
width: 48px; | |||
text-align: right; | |||
} | |||
.notif-cleaning { | |||
.status, .notification-follow { | |||
padding-right: ($dismiss-overlay-width + 0.5rem); | |||
} | |||
} | |||
.notification-follow { | |||
position: relative; | |||
// same like Status | |||
border-bottom: 1px solid lighten($ui-base-color, 8%); | |||
.account { | |||
border-bottom: 0 none; | |||
} | |||
} | |||
.status { | |||
//reset | |||
padding-left: initial; | |||
//glitch | |||
padding: 8px 10px; | |||
position: relative; | |||
height: auto; | |||
min-height: 48px; | |||
border-bottom: 1px solid lighten($ui-base-color, 8%); | |||
cursor: default; | |||
&.collapsed { | |||
background-position: center; | |||
background-size: cover; | |||
user-select: none; | |||
&.has-background::before { | |||
display: block; | |||
position: absolute; | |||
left: 0; | |||
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)); | |||
content: ""; | |||
} | |||
.display-name:hover .display-name__html { | |||
text-decoration: none; | |||
} | |||
.status__content { | |||
height: 20px; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
a:hover { | |||
text-decoration: none; | |||
} | |||
} | |||
} | |||
.notification__message { | |||
margin: -10px -10px 10px; | |||
} | |||
} | |||
.status__relative-time { | |||
//reset | |||
float: initial; | |||
//glitch | |||
display: inline-block; | |||
margin-left: auto; | |||
padding-left: 18px; | |||
width: 120px; | |||
color: $ui-base-lighter-color; | |||
font-size: 14px; | |||
text-align: right; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | |||
.status__display-name { | |||
margin: 0 auto 0 0; | |||
color: $ui-base-lighter-color; | |||
overflow: hidden; | |||
} | |||
.status__info { | |||
display: flex; | |||
margin: 2px 0 5px; | |||
font-size: 15px; | |||
line-height: 24px; | |||
} | |||
.status__info__icons { | |||
flex: none; | |||
position: relative; | |||
color: lighten($ui-base-color, 26%); | |||
.status__visibility-icon { | |||
padding-left: 6px; | |||
} | |||
} | |||
.status__prepend { | |||
//reset | |||
margin-left: initial; | |||
padding: initial; | |||
padding-bottom: initial; | |||
//glitch | |||
margin: -10px -10px 10px; | |||
color: $ui-base-lighter-color; | |||
padding: 8px 10px 0 68px; | |||
font-size: 14px; | |||
position: relative; | |||
} | |||
.account { | |||
color: inherit; | |||
text-decoration: none; | |||
&.small { | |||
border: none; | |||
padding: 0; | |||
& > .account__avatar-wrapper { margin: 0 8px 0 0 } | |||
& > .display-name { | |||
height: 24px; | |||
line-height: 24px; | |||
} | |||
} | |||
} | |||
.account__avatar-wrapper { | |||
//reset | |||
margin-left: initial; | |||
margin-right: initial; | |||
//glitch | |||
margin: 6px 16px 6px 6px; | |||
} | |||
.account__header__wrapper { | |||
flex: 0 0 auto; | |||
background: lighten($ui-base-color, 4%); | |||
} | |||
.account__header { | |||
.account__avatar { | |||
@include avatar-radius(); | |||
@include avatar-size(90px); | |||
display: block; | |||
margin: 0 auto 10px; | |||
overflow: hidden; | |||
} | |||
} | |||
.status__avatar { | |||
//reset | |||
left: initial; | |||
position: initial; | |||
top: initial; | |||
//glitch | |||
flex: none; | |||
margin: 0 10px 0 0; | |||
height: 48px; | |||
width: 48px; | |||
} | |||
.display-name { | |||
display: block; | |||
padding: 6px 0; | |||
max-width: 100%; | |||
height: 36px; | |||
overflow: hidden; | |||
strong { | |||
display: block; | |||
height: 18px; | |||
font-size: 16px; | |||
font-weight: 500; | |||
line-height: 18px; | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
} | |||
span { | |||
display: block; | |||
height: 18px; | |||
font-size: 15px; | |||
line-height: 18px; | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
} | |||
&:hover { | |||
strong { | |||
text-decoration: underline; | |||
} | |||
} | |||
&.inline { | |||
padding: 0; | |||
height: 18px; | |||
font-size: 15px; | |||
line-height: 18px; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
strong { | |||
display: inline; | |||
height: auto; | |||
font-size: inherit; | |||
line-height: inherit; | |||
} | |||
span { | |||
display: inline; | |||
height: auto; | |||
font-size: inherit; | |||
line-height: inherit; | |||
} | |||
} | |||
} | |||
.column { | |||
width: 330px; | |||
position: relative; | |||
box-sizing: border-box; | |||
display: flex; | |||
flex-direction: column; | |||
overflow: hidden; | |||
.wide & { | |||
flex: auto; | |||
min-width: 330px; | |||
max-width: 400px; | |||
} | |||
> .scrollable { | |||
background: $ui-base-color; | |||
} | |||
} | |||
.column-header__button { | |||
// glitch - added focus ring for keyboard navigation | |||
&:focus { | |||
text-shadow: 0 0 4px darken($ui-highlight-color, 5%); | |||
} | |||
} | |||
.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { | |||
border-top: 1px solid $ui-base-color; | |||
} | |||
.notification__dismiss-overlay { | |||
overflow: hidden; | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
bottom: -1px; | |||
padding-left: 15px; // space for the box shadow to be visible | |||
z-index: 999; | |||
align-items: center; | |||
justify-content: flex-end; | |||
cursor: pointer; | |||
display: flex; | |||
.wrappy { | |||
width: $dismiss-overlay-width; | |||
align-self: stretch; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
background: lighten($ui-base-color, 8%); | |||
border-left: 1px solid lighten($ui-base-color, 20%); | |||
box-shadow: 0 0 5px black; | |||
border-bottom: 1px solid $ui-base-color; | |||
} | |||
.ckbox { | |||
border: 2px solid $ui-primary-color; | |||
border-radius: 2px; | |||
width: 30px; | |||
height: 30px; | |||
font-size: 20px; | |||
color: $ui-primary-color; | |||
text-shadow: 0 0 5px black; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
&:focus { | |||
outline: 0 !important; | |||
.ckbox { | |||
box-shadow: 0 0 1px 1px $ui-highlight-color; | |||
} | |||
} | |||
} | |||
.column-header__notif-cleaning-buttons { | |||
display: flex; | |||
align-items: stretch; | |||
justify-content: space-around; | |||
button { | |||
@extend .column-header__button; | |||
background: transparent; | |||
text-align: center; | |||
padding: 10px 0; | |||
white-space: pre-wrap; | |||
} | |||
b { | |||
font-weight: bold; | |||
} | |||
} | |||
// The notifs drawer with no padding to have more space for the buttons | |||
.column-header__collapsible-inner.nopad-drawer { | |||
padding: 0; | |||
} | |||
.column-header__collapsible { | |||
// notif cleaning drawer | |||
&.ncd { | |||
transition: none; | |||
&.collapsed { | |||
max-height: 0; | |||
opacity: 0.7; | |||
} | |||
} | |||
} | |||
.media-spoiler { | |||
.status__content > & { | |||
margin-top: 15px; // Add margin when used bare for NSFW video player | |||
} | |||
@include fullwidth-gallery; | |||
} | |||
.sensitive-info { | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
position: absolute; | |||
top: 4px; | |||
left: 4px; | |||
z-index: 100; | |||
} | |||
.sensitive-marker { | |||
margin: 0 3px; | |||
border-radius: 2px; | |||
padding: 2px 6px; | |||
color: rgba($primary-text-color, 0.8); | |||
background: rgba($base-overlay-background, 0.5); | |||
font-size: 12px; | |||
line-height: 15px; | |||
text-transform: uppercase; | |||
opacity: .9; | |||
transition: opacity .1s ease; | |||
.media-gallery:hover & { opacity: 1 } | |||
} | |||
.boost-modal, | |||
.favourite-modal, | |||
.confirmation-modal, | |||
.report-modal, | |||
.actions-modal, | |||
.mute-modal { | |||
background: lighten($ui-secondary-color, 8%); | |||
color: $ui-base-color; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
max-width: 90vw; | |||
width: 480px; | |||
position: relative; | |||
flex-direction: column; | |||
.status__display-name { | |||
//reset | |||
display: initial; | |||
max-width: initial; | |||
padding-right: initial; | |||
//glitch | |||
display: flex; | |||
} | |||
} | |||
.boost-modal__container, | |||
.favourite-modal__container { | |||
overflow-x: scroll; | |||
padding: 10px; | |||
.status { | |||
user-select: text; | |||
border-bottom: 0; | |||
} | |||
} | |||
.boost-modal__action-bar, | |||
.favourite-modal__action-bar, | |||
.confirmation-modal__action-bar, | |||
.mute-modal__action-bar, | |||
.report-modal__action-bar { | |||
display: flex; | |||
justify-content: space-between; | |||
background: $ui-secondary-color; | |||
padding: 10px; | |||
line-height: 36px; | |||
& > div { | |||
flex: 1 1 auto; | |||
text-align: right; | |||
color: lighten($ui-base-color, 33%); | |||
padding-right: 10px; | |||
} | |||
.button { | |||
flex: 0 0 auto; | |||
} | |||
} | |||
.boost-modal__status-header, | |||
.favourite-modal__status-header { | |||
font-size: 15px; | |||
} | |||
.boost-modal__status-time, | |||
.favourite-modal__status-time { | |||
float: right; | |||
font-size: 14px; | |||
} | |||
.actions-modal { | |||
strong { | |||
display: block; | |||
font-weight: 500; | |||
} | |||
} | |||
.media-gallery { | |||
box-sizing: border-box; | |||
margin-top: 8px; | |||
overflow: hidden; | |||
position: relative; | |||
background: $base-shadow-color; | |||
width: 100%; | |||
.detailed-status & { | |||
margin-left: -12px; | |||
width: calc(100% + 24px); | |||
height: 250px; | |||
} | |||
@include fullwidth-gallery; | |||
} | |||
.media-gallery__item-thumbnail { | |||
cursor: zoom-in; | |||
display: block; | |||
text-decoration: none; | |||
height: 100%; | |||
line-height: 0; | |||
&, | |||
img { | |||
//reset | |||
height: initial; | |||
object-fit: initial; | |||
//glitch | |||
width: 100%; | |||
object-fit: contain; | |||
&:not(.letterbox) { | |||
height: 100%; | |||
object-fit: cover; | |||
} | |||
} | |||
} | |||
.media-gallery__gifv { | |||
display: flex; | |||
justify-content: center; | |||
} | |||
.media-gallery__item-gifv-thumbnail { | |||
//reset | |||
object-fit: initial; | |||
top: initial; | |||
transform: initial; | |||
width: initial; | |||
z-index: initial; | |||
//glitch | |||
cursor: zoom-in; | |||
height: 100%; | |||
width: 100%; | |||
position: relative; | |||
z-index: 1; | |||
object-fit: contain; | |||
&:not(.letterbox) { | |||
height: 100%; | |||
object-fit: cover; | |||
} | |||
} | |||
.status__video-player { | |||
//reset | |||
background: initial; | |||
//glitch | |||
display: flex; | |||
align-items: center; | |||
background: $base-shadow-color; | |||
box-sizing: border-box; | |||
cursor: default; /* May not be needed */ | |||
margin-top: 8px; | |||
overflow: hidden; | |||
position: relative; | |||
@include fullwidth-gallery; | |||
} | |||
.status__video-player-video { | |||
position: relative; | |||
width: 100%; | |||
z-index: 1; | |||
&:not(.letterbox) { | |||
height: 100%; | |||
object-fit: cover; | |||
} | |||
} | |||
.video-player { | |||
//reset | |||
border-radius: initial; | |||
//glitch | |||
.detailed-status & { | |||
margin-left: -12px; | |||
width: calc(100% + 24px); | |||
height: 250px; | |||
} | |||
@include fullwidth-gallery; | |||
video { | |||
object-fit: cover; | |||
position: relative; | |||
} | |||
} | |||
.media-spoiler-video { | |||
background-size: cover; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
cursor: pointer; | |||
margin-top: 8px; | |||
position: relative; | |||
width: 100%; | |||
@include fullwidth-gallery; | |||
border: 0; | |||
display: block; | |||
} |
@ -0,0 +1,52 @@ | |||
.account__metadata { | |||
width: 100%; | |||
font-size: 15px; | |||
line-height: 20px; | |||
overflow: hidden; | |||
border-collapse: collapse; | |||
a { | |||
text-decoration: none; | |||
&:hover{ | |||
text-decoration: underline; | |||
} | |||
} | |||
tr { | |||
border-top: 1px solid lighten($ui-base-color, 8%); | |||
text-align: center; | |||
} | |||
th, td { | |||
padding: 14px 20px; | |||
vertical-align: middle; | |||
& > div { | |||
max-height: 40px; | |||
overflow-y: auto; | |||
white-space: pre-wrap; | |||
text-overflow: ellipsis; | |||
} | |||
} | |||
th { | |||
color: $ui-primary-color; | |||
background: lighten($ui-base-color, 13%); | |||
max-width: 120px; | |||
a { | |||
color: $primary-text-color; | |||
} | |||
} | |||
td { | |||
flex: auto; | |||
color: $primary-text-color; | |||
background: $ui-base-color; | |||
a { | |||
color: $ui-highlight-color; | |||
} | |||
} | |||
} |
@ -0,0 +1,43 @@ | |||
.metadata { | |||
$meta-table-border: lighten($ui-base-color, 8%); | |||
border-collapse: collapse; | |||
padding: 0; | |||
margin: 15px -15px -15px -15px; | |||
border: 0 none; | |||
border-top: 1px solid $meta-table-border; | |||
border-bottom: 1px solid $meta-table-border; | |||
td, th { | |||
padding: 15px; | |||
border: 0 none; | |||
border-bottom: 1px solid $meta-table-border; | |||
vertical-align: middle; | |||
} | |||
tr:last-child { | |||
td, th { | |||
border-bottom: 0 none; | |||
} | |||
} | |||
td { | |||
color: $ui-primary-color; | |||
text-align: center; | |||
width:100%; | |||
padding-left: 0; | |||
} | |||
th { | |||
padding-left: 15px; | |||
font-weight: bold; | |||
text-align: center; | |||
width: 94px; | |||
color: $ui-secondary-color; | |||
background: darken($ui-base-color, 8%); | |||
} | |||
a { | |||
color: $classic-highlight-color; | |||
} | |||
} |
@ -0,0 +1,20 @@ | |||
.modal-layout { | |||
background: $ui-base-color url('~images/wave-modal.png') repeat-x bottom fixed; | |||
display: flex; | |||
flex-direction: column; | |||
height: 100vh; | |||
padding: 0; | |||
} | |||
.modal-layout__mastodon { | |||
display: flex; | |||
flex: 1; | |||
flex-direction: column; | |||
justify-content: flex-end; | |||
> * { | |||
flex: 1; | |||
max-height: 235px; | |||
background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; | |||
} | |||
} |