AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 82 Pull requests 20 Projects Releases 1 Wiki Activity

writing mode: easy CSS search and replace

Browse source
This commit is contained in:
Yhëhtozr 2022-12-17 18:50:11 +09:00
parent 9bf310d509
commit 5e00780e29
116 changed files with 1419 additions and 1261 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
src/App.scss
View file

@ -2,7 +2,7 @@
@import './_variables.scss';
:root {
--navbar-height: 3.5rem;
--navbar-block-size: 3.5rem;
--post-line-height: 1.4;
}
@ -126,7 +126,7 @@ nav {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--topBarShadow);
box-sizing: border-box;
height: var(--navbar-height);
block-size: var(--navbar-block-size);
position: fixed;
}
@ -135,7 +135,7 @@ nav {
}
.column.-scrollable {
top: var(--navbar-height);
inset-block-start: var(--navbar-block-size);
position: sticky;
}
@ -150,11 +150,11 @@ nav {
.app-bg-wrapper {
position: fixed;
height: 100%;
top: var(--navbar-height);
block-size: 100%;
inset-block-start: var(--navbar-block-size);
z-index: -1000;
left: 0;
right: -20px;
inset-inline-start: 0;
inset-inline-end: -20px;
background-size: cover;
background-repeat: no-repeat;
background-color: var(--wallpaper);
@ -185,11 +185,12 @@ nav {
grid-template-areas: "sidebar content";
grid-template-rows: 1fr;
box-sizing: border-box;
margin: 0 auto;
margin-block: 0;
margin-inline: auto;
align-content: flex-start;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
min-block-size: 100vb;
overflow-x: clip;
.column {
@ -200,13 +201,15 @@ nav {
box-sizing: border-box;
grid-row-start: 1;
grid-row-end: 1;
margin: 0 calc(var(--___columnMargin) / 2);
padding: calc(var(--___columnMargin)) 0;
margin-block: 0;
margin-inline: calc(var(--___columnMargin) / 2);
padding-block: calc(var(--___columnMargin));
padding-inline: 0;
row-gap: var(--___columnMargin);
align-content: start;
&:not(.-scrollable) {
margin-top: var(--navbar-height);
margin-block-start: var(--navbar-block-size);
}
&:hover {
@ -214,46 +217,46 @@ nav {
}
&.-full-height {
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
margin-block-end: 0;
padding-block-start: 0;
padding-block-end: 0;
}
&.-scrollable {
--___paddingIncrease: calc(var(--columnGap) / 2);
position: sticky;
top: var(--navbar-height);
max-height: calc(100vh - var(--navbar-height));
inset-block-start: var(--navbar-block-size);
max-block-size: calc(100vb - var(--navbar-block-size));
overflow-y: auto;
overflow-x: hidden;
margin-left: calc(var(--___paddingIncrease) * -1);
padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
margin-inline-start: calc(var(--___paddingIncrease) * -1);
padding-inline-start: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
// On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
// might implement old style of hiding scrollbars later if there's demand
@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
&:not(.-show-scrollbar) {
scrollbar-width: none;
margin-right: calc(var(--___paddingIncrease) * -1);
padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
margin-inline-end: calc(var(--___paddingIncrease) * -1);
padding-inline-end: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
&::-webkit-scrollbar {
display: block;
width: 0;
inline-size: 0;
}
}
}
.panel-heading.-sticky {
top: calc(var(--columnGap) / -1);
inset-block-start: calc(var(--columnGap) / -1);
}
}
}
&.-has-new-post-button {
.column {
padding-bottom: 10rem;
padding-block-end: 10rem;
}
}
@ -261,7 +264,7 @@ nav {
.column {
.panel-heading.-sticky {
position: relative;
top: 0;
inset-block-start: 0;
}
}
}
@ -289,16 +292,16 @@ nav {
}
&.-mobile {
grid-template-columns: 100vw;
grid-template-columns: 100vi;
grid-template-areas: "content";
padding: 0;
.column {
margin-left: 0;
margin-right: 0;
padding-top: 0;
margin-top: var(--navbar-height);
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block-start: 0;
margin-block-start: var(--navbar-block-size);
margin-block-end: 0;
}
.panel-heading,
@ -306,8 +309,8 @@ nav {
.panel-heading::before,
.panel,
.panel::after {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-start-start-radius: 0;
border-start-end-radius: 0;
}
#sidebar,
@ -435,7 +438,7 @@ nav {
}
&.-fullwidth {
width: 100%;
inline-size: 100%;
}
&.-hover-highlight {
@ -453,7 +456,7 @@ textarea,
border-radius: 0;
background: none;
box-shadow: none;
height: unset;
block-size: unset;
}
--_padding: 0.5em;
@ -476,7 +479,8 @@ textarea,
position: relative;
line-height: 2;
hyphens: none;
padding: 0 var(--_padding);
padding-block: 0;
padding-inline: var(--_padding);
&:disabled,
&[disabled=disabled],
@ -515,12 +519,12 @@ textarea,
display: inline-block;
content: '';
transition: box-shadow 200ms;
width: 1.1em;
height: 1.1em;
inline-size: 1.1em;
block-size: 1.1em;
border-radius: 100%; // Radio buttons should always be circle
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
margin-right: 0.5em;
margin-inline-end: 0.5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top;
@ -554,13 +558,13 @@ textarea,
display: inline-block;
content: '✓';
transition: color 200ms;
width: 1.1em;
height: 1.1em;
inline-size: 1.1em;
block-size: 1.1em;
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
margin-right: 0.5em;
margin-inline-end: 0.5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top;
@ -573,7 +577,7 @@ textarea,
}
}
&.resize-height {
&.resize-block-size {
resize: vertical;
}
}
@ -603,7 +607,7 @@ option {
.btn-block {
display: block;
width: 100%;
inline-size: 100%;
}
.btn-group {
@ -616,13 +620,13 @@ option {
flex: 1 1 auto;
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-start-start-radius: 0;
border-end-start-radius: 0;
}
}
}
@ -641,10 +645,11 @@ option {
box-sizing: border-box;
display: inline-block;
border-radius: 99px;
max-width: 10em;
min-width: 1.7em;
height: 1.3em;
padding: 0.15em 0.15em;
max-inline-size: 10em;
min-inline-size: 1.7em;
block-size: 1.3em;
padding-block: 0.15em;
padding-inline: 0.15em;
vertical-align: middle;
font-weight: normal;
font-style: normal;
@ -664,8 +669,10 @@ option {
}
.alert {
margin: 0 0.35em;
padding: 0 0.25em;
margin-block: 0;
margin-inline: 0.35em;
padding-block: 0;
padding-inline: 0.25em;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
@ -726,13 +733,13 @@ option {
}
.notice-dismissible {
padding-right: 4rem;
padding-inline-end: 4rem;
position: relative;
.dismiss {
position: absolute;
top: 0;
right: 0;
inset-block-start: 0;
inset-inline-end: 0;
padding: 0.5em;
color: inherit;
}
@ -746,7 +753,8 @@ option {
.fa-old-padding {
&.svg-inline--fa {
padding: 0 0.3em;
padding-block: 0;
padding-inline: 0.3em;
}
}
@ -759,13 +767,14 @@ option {
a {
display: inline-block;
padding: 1em 0;
width: 100%;
padding-block: 1em;
padding-inline: 0;
inline-size: 100%;
}
}
.btn.button-default {
min-height: 2em;
min-block-size: 2em;
}
.new-status-notification {

8
src/components/account_actions/account_actions.vue
View file

@ -110,9 +110,11 @@
@import '../../_variables.scss';
.AccountActions {
.ellipsis-button {
width: 2.5em;
margin: -0.5em 0;
padding: 0.5em 0;
inline-size: 2.5em;
margin-block: -0.5em;
margin-inline: 0;
padding-block: 0.5em;
padding-inline: 0;
text-align: center;
&:not(:hover) .icon {

10
src/components/announcement/announcement.vue
View file

@ -102,14 +102,14 @@
@import "../../variables";
.announcement {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-block-end-width: 1px;
border-block-end-style: solid;
border-block-end-color: var(--border, $fallback--border);
border-radius: 0;
padding: var(--status-margin, $status-margin);
.heading, .body {
margin-bottom: var(--status-margin, $status-margin);
margin-block-end: var(--status-margin, $status-margin);
}
.footer {
@ -129,7 +129,7 @@
.btn {
flex: 1;
margin: 1em;
max-width: 10em;
max-inline-size: 10em;
}
}
}

4
src/components/announcement_editor/announcement_editor.vue
View file

@ -47,12 +47,12 @@
flex-direction: column;
.announcement-metadata {
margin-top: 0.5em;
margin-block-start: 0.5em;
}
.post-textarea {
resize: vertical;
height: 10em;
block-size: 10em;
overflow: none;
box-sizing: content-box;
}

4
src/components/announcements_page/announcements_page.vue
View file

@ -68,11 +68,11 @@
padding: var(--status-margin, $status-margin);
.heading, .body {
margin-bottom: var(--status-margin, $status-margin);
margin-block-end: var(--status-margin, $status-margin);
}
.post-button {
min-width: 10em;
min-inline-size: 10em;
}
}
}

5
src/components/async_component_error/async_component_error.vue
View file

@ -31,12 +31,13 @@ export default {
<style lang="scss">
.async-component-error {
display: flex;
height: 100%;
block-size: 100%;
align-items: center;
justify-content: center;
.btn {
margin: .5em;
padding: .5em 2em;
padding-block: .5em;
padding-inline: 2em;
}
}
</style>

76
src/components/attachment/attachment.scss
View file

@ -6,7 +6,7 @@
position: relative;
align-self: flex-start;
line-height: 0;
height: 100%;
block-size: 100%;
border-style: solid;
border-width: 1px;
border-radius: $fallback--attachmentRadius;
@ -16,7 +16,7 @@
.attachment-wrapper {
flex: 1 1 auto;
height: 200px;
block-size: 200px;
position: relative;
overflow: hidden;
}
@ -24,9 +24,9 @@
.description-container {
flex: 0 1 0;
display: flex;
padding-top: 0.5em;
padding-block-start: 0.5em;
z-index: 1;
max-height: 50%;
max-block-size: 50%;
p {
flex: 1;
@ -42,10 +42,10 @@
&.-static {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding-top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
padding-block-start: 0;
background: var(--popover);
box-shadow: var(--popupShadow);
}
@ -53,15 +53,15 @@
.description-field {
flex: 1;
min-width: 0;
min-inline-size: 0;
box-sizing: content-box;
overflow: hidden;
transition: min-height 200ms 100ms;
transition: min-block-size 200ms 100ms;
padding-bottom: var(--_padding);
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
padding-block-end: var(--_padding);
block-size: calc(var(--post-line-height) * 1em);
min-block-size: calc(var(--post-line-height) * 1em);
resize: none;
&.scrollable-form {
@ -77,14 +77,14 @@
& .oembed-container {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
}
.image-container {
.image {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
}
}
@ -92,8 +92,8 @@
& .video-container {
& .flash,
& video {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
align-self: center;
}
@ -104,8 +104,8 @@
align-items: flex-end;
audio {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
}
}
@ -114,15 +114,15 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 0.5em;
padding-block-start: 0.5em;
}
.play-icon {
position: absolute;
font-size: 64px;
top: calc(50% - 32px);
left: calc(50% - 32px);
inset-block-start: calc(50% - 32px);
inset-inline-start: calc(50% - 32px);
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
@ -134,10 +134,10 @@
.attachment-buttons {
display: flex;
position: absolute;
right: 0;
top: 0;
margin-top: 0.5em;
margin-right: 0.5em;
inset-inline-end: 0;
inset-block-start: 0;
margin-block-start: 0.5em;
margin-inline-end: 0.5em;
z-index: 1;
.attachment-button {
@ -145,9 +145,9 @@
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center;
width: 2em;
height: 2em;
margin-left: 0.5em;
inline-size: 2em;
block-size: 2em;
margin-inline-start: 0.5em;
font-size: 1.25em;
// TODO: theming? hard to theme with unknown background image color
background: rgba(230, 230, 230, 0.7);
@ -165,12 +165,12 @@
.oembed-container {
line-height: 1.2em;
flex: 1 0 100%;
width: 100%;
margin-right: 15px;
inline-size: 100%;
margin-inline-end: 15px;
display: flex;
img {
width: 100%;
inline-size: 100%;
}
.image {
@ -178,7 +178,7 @@
img {
border: 0px;
border-radius: 5px;
height: 100%;
block-size: 100%;
object-fit: cover;
}
}
@ -221,7 +221,7 @@
color: var(--postLink, $fallback--link);
overflow: hidden;
white-space: nowrap;
height: auto;
block-size: auto;
line-height: 1.5;
&:not(.-editable) {
@ -242,7 +242,7 @@
.description-container {
flex: 1;
padding-left: 0.5em;
padding-inline-start: 0.5em;
}
.attachment-buttons {
@ -253,7 +253,7 @@
a {
display: inline-block;
max-width: 100%;
max-inline-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
}

14
src/components/autosuggest/autosuggest.vue
View file

@ -31,15 +31,15 @@
&-input {
display: block;
width: 100%;
inline-size: 100%;
}
&-results {
position: absolute;
left: 0;
top: 100%;
right: 0;
max-height: 400px;
inset-inline-start: 0;
inset-block-start: 100%;
inset-inline-end: 0;
max-block-size: 400px;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
border-style: solid;
@ -48,8 +48,8 @@
border-color: var(--border, $fallback--border);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-top-left-radius: 0;
border-top-right-radius: 0;
border-start-start-radius: 0;
border-start-end-radius: 0;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--panelShadow);
overflow-y: auto;

11
src/components/avatar_list/avatar_list.vue
View file

@ -26,20 +26,21 @@
// For hiding overflowing elements
flex-wrap: wrap;
height: 24px;
block-size: 24px;
.avatars-item {
margin: 0 0 5px 5px;
margin-block: 0 5px;
margin-inline: 5px 0;
&:first-child {
padding-left: 5px;
padding-inline-start: 5px;
}
.avatar-small {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
height: 24px;
width: 24px;
block-size: 24px;
inline-size: 24px;
}
}
}

19
src/components/basic_user_card/basic_user_card.vue
View file

@ -51,20 +51,21 @@
display: flex;
flex: 1 0;
margin: 0;
padding: 0.6em 1em;
padding-block: 0.6em;
padding-inline: 1em;
&-collapsed-content {
margin-left: 0.7em;
text-align: left;
margin-inline-start: 0.7em;
text-align: start;
flex: 1;
min-width: 0;
min-inline-size: 0;
}
&-user-name {
img {
object-fit: contain;
height: 16px;
width: 16px;
block-size: 16px;
inline-size: 16px;
vertical-align: middle;
}
}
@ -72,7 +73,7 @@
&-user-name-value,
&-screen-name {
display: inline-block;
max-width: 100%;
max-inline-size: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -80,8 +81,8 @@
&-expanded-content {
flex: 1;
margin-left: 0.7em;
min-width: 0;
margin-inline-start: 0.7em;
min-inline-size: 0;
}
}
</style>

6
src/components/block_card/block_card.vue
View file

@ -35,10 +35,10 @@
<style lang="scss">
.block-card-content-container {
margin-top: 0.5em;
text-align: right;
margin-block-start: 0.5em;
text-align: end;
button {
width: 10em;
inline-size: 10em;
}
}
</style>

14
src/components/checkbox/checkbox.vue
View file

@ -37,22 +37,22 @@ export default {
.checkbox {
position: relative;
display: inline-block;
min-height: 1.2em;
min-block-size: 1.2em;
&-indicator {
position: relative;
padding-left: 1.2em;
padding-inline-start: 1.2em;
}
&-indicator::before {
position: absolute;
right: 0;
top: 0;
inset-inline-end: 0;
inset-block-start: 0;
display: block;
content: '✓';
transition: color 200ms;
width: 1.1em;
height: 1.1em;
inline-size: 1.1em;
block-size: 1.1em;
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0px 0px 2px black inset;
@ -96,7 +96,7 @@ export default {
}
& > span {
margin-left: .5em;
margin-inline-start: .5em;
}
}
</style>

27
src/components/color_input/color_input.scss
View file

@ -6,9 +6,10 @@
&-field.input {
display: inline-flex;
flex: 0 0 0;
max-width: 9em;
max-inline-size: 9em;
align-items: stretch;
padding: .2em 8px;
padding-block: .2em;
padding-inline: 8px;
input {
background: none;
@ -20,23 +21,23 @@
&.textColor {
flex: 1 0 3em;
min-width: 3em;
min-inline-size: 3em;
padding: 0;
}
&.nativeColor {
flex: 0 0 2em;
min-width: 2em;
min-inline-size: 2em;
align-self: center;
height: 2em;
block-size: 2em;
}
}
.computedIndicator,
.transparentIndicator {
flex: 0 0 2em;
min-width: 2em;
min-inline-size: 2em;
align-self: center;
height: 100%;
block-size: 100%;
}
.transparentIndicator {
// forgot to install counter-strike source, ooops
@ -47,16 +48,16 @@
content: '';
background-color: #000000;
position: absolute;
height: 50%;
width: 50%;
block-size: 50%;
inline-size: 50%;
}
&::after {
top: 0;
left: 0;
inset-block-start: 0;
inset-inline-start: 0;
}
&::before {
bottom: 0;
right: 0;
inset-block-end: 0;
inset-inline-end: 0;
}
}
}

2
src/components/color_input/color_input.vue
View file

@ -112,7 +112,7 @@ export default {
<style lang="scss">
.color-control {
input.text-input {
max-width: 7em;
max-inline-size: 7em;
flex: 1;
}
}

8
src/components/contrast_ratio/contrast_ratio.vue
View file

@ -88,17 +88,17 @@ export default {
display: flex;
justify-content: flex-end;
margin-top: -4px;
margin-bottom: 5px;
margin-block-start: -4px;
margin-block-end: 5px;
.label {
margin-right: 1em;
margin-inline-end: 1em;
}
.rating {
display: inline-block;
text-align: center;
margin-left: 0.5em;
margin-inline-start: 0.5em;
}
}
</style>

52
src/components/conversation/conversation.vue
View file

@ -205,9 +205,9 @@
.conversation-dive-to-top-level-box {
padding: var(--status-margin, $status-margin);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-block-end-width: 1px;
border-block-end-style: solid;
border-block-end-color: var(--border, $fallback--border);
border-radius: 0;
/* Make the button stretch along the whole row */
display: flex;
@ -216,8 +216,8 @@
}
.thread-ancestors {
margin-left: var(--status-margin, $status-margin);
border-left: 2px solid var(--border, $fallback--border);
margin-inline-start: var(--status-margin, $status-margin);
border-inline-start: 2px solid var(--border, $fallback--border);
}
.thread-ancestor.-faded .StatusContent {
@ -227,10 +227,10 @@
}
.thread-ancestor-dive-box {
padding-left: var(--status-margin, $status-margin);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
padding-inline-start: var(--status-margin, $status-margin);
border-block-end-width: 1px;
border-block-end-style: solid;
border-block-end-color: var(--border, $fallback--border);
border-radius: 0;
/* Make the button stretch along the whole row */
&, &-inner {
@ -244,9 +244,9 @@
}
.conversation-status {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-block-end-width: 1px;
border-block-end-style: solid;
border-block-end-color: var(--border, $fallback--border);
border-radius: 0;
}
@ -255,24 +255,30 @@
.thread-ancestor:last-child .thread-ancestor-dive-box,
&:last-child .conversation-status,
&.-expanded .thread-tree .conversation-status {
border-bottom: none;
border-block-end: none;
}
.thread-ancestors + .thread-tree > .conversation-status {
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--border, $fallback--border);
border-block-start-width: 1px;
border-block-start-style: solid;
border-block-start-color: var(--border, $fallback--border);
}
/* expanded conversation in timeline */
&.status-fadein.-expanded .thread-body {
border-left-width: 4px;
border-left-style: solid;
border-left-color: $fallback--cRed;
border-left-color: var(--cRed, $fallback--cRed);
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
border-bottom: 1px solid var(--border, $fallback--border);
border-inline-start-width: 4px;
border-inline-start-style: solid;
border-inline-start-color: $fallback--cRed;
border-inline-start-color: var(--cRed, $fallback--cRed);
border-start-start-radius: 0;
border-start-end-radius: 0;
border-end-start-radius: $fallback--panelRadius;
border-end-end-radius: $fallback--panelRadius;
border-start-start-radius: 0;
border-start-end-radius: 0;
border-end-start-radius: var(--panelRadius, $fallback--panelRadius);
border-end-end-radius: var(--panelRadius, $fallback--panelRadius);
border-block-end: 1px solid var(--border, $fallback--border);
}
&.-expanded.status-fadein {

41
src/components/desktop_nav/desktop_nav.scss
View file

@ -1,7 +1,7 @@
@import '../../_variables.scss';
.DesktopNav {
width: 100%;
inline-size: 100%;
input {
color: var(--inputTopbarText, var(--inputText));
@ -13,13 +13,14 @@
.inner-nav {
display: grid;
grid-template-rows: var(--navbar-height);
grid-template-rows: var(--navbar-block-size);
grid-template-columns: 2fr auto 2fr;
grid-template-areas: "nav-left logo actions";
box-sizing: border-box;
padding: 0 1.2em;
padding-block: 0;
padding-inline: 1.2em;
margin: auto;
max-width: 1110px;
max-inline-size: 1110px;
}
&.-logoLeft .inner-nav {
@ -71,27 +72,27 @@
background-color: $fallback--fg;
background-color: var(--topBarText, $fallback--fg);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
}
img {
display: inline-block;
height: var(--navbar-height);
block-size: var(--navbar-block-size);
}
}
.nav-icon {
margin-left: 0.2em;
width: 2em;
height: 100%;
margin-inline-start: 0.2em;
inline-size: 2em;
block-size: 100%;
text-align: center;
&.router-link-active {
font-size: 1.2em;
margin-top: 0.05em;
margin-block-start: 0.05em;
.svg-inline--fa {
font-weight: bolder;
@ -109,12 +110,12 @@
.-wide {
.nav-icon {
margin-left: 0.7em;
margin-inline-start: 0.7em;
}
}
.left {
padding-left: 5px;
padding-inline-start: 5px;
display: flex;
}
@ -122,9 +123,9 @@
grid-area: nav-left;
.favicon {
height: 28px;
block-size: 28px;
vertical-align: middle;
padding-right: 5px;
padding-inline-end: 5px;
}
}
@ -134,15 +135,15 @@
.item {
flex: 1;
line-height: var(--navbar-height);
height: var(--navbar-height);
line-height: var(--navbar-block-size);
block-size: var(--navbar-block-size);
overflow: hidden;
display: flex;
flex-wrap: wrap;
&.right {
justify-content: flex-end;
text-align: right;
text-align: end;
}
}
}

35
src/components/dialog_modal/dialog_modal.vue
View file

@ -30,31 +30,32 @@
// TODO: unify with other modals.
.dark-overlay {
&::before {
bottom: 0;
inset-block-end: 0;
content: " ";
display: block;
cursor: default;
left: 0;
inset-inline-start: 0;
position: fixed;
right: 0;
top: 0;
inset-inline-end: 0;
inset-block-start: 0;
background: rgba(27,31,35,.5);
z-index: 2000;
}
}
.dialog-modal.panel {
top: 0;
left: 50%;
max-height: 80vh;
max-width: 90vw;
margin: 15vh auto;
inset-block-start: 0;
inset-inline-start: 50%;
max-block-size: 80vb;
max-inline-size: 90vi;
margin-block: 15vb;
margin-inline: auto;
position: fixed;
transform: translateX(-50%);
z-index: 2001;
cursor: default;
display: block;
width: max-content;
inline-size: max-content;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
@ -66,7 +67,8 @@
.dialog-modal-content {
margin: 0;
padding: 1rem 1rem;
padding-block: 1rem;
padding-inline: 1rem;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
white-space: normal;
@ -74,17 +76,18 @@
.dialog-modal-footer {
margin: 0;
padding: .5em .5em;
padding-block: .5em;
padding-inline: .5em;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
border-top: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border);
border-block-start: 1px solid $fallback--border;
border-block-start: 1px solid var(--border, $fallback--border);
display: flex;
justify-content: flex-end;
button {
width: auto;
margin-left: .5rem;
inline-size: auto;
margin-inline-start: .5rem;
}
}
}

9
src/components/domain_mute_card/domain_mute_card.vue
View file

@ -34,20 +34,21 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6em 1em 0.6em 0;
padding-block: 0.6em 0.6em;
padding-inline: 0 1em;
&-domain {
margin-right: 1em;
margin-inline-end: 1em;
overflow: hidden;
text-overflow: ellipsis;
}
button {
width: 10em;
inline-size: 10em;
}
.autosuggest-results & {
padding-left: 1em;
padding-inline-start: 1em;
}
}
</style>

12
src/components/edit_status_modal/edit_status_modal.vue
View file

@ -28,17 +28,17 @@
}
.edit-form-modal-panel {
flex-shrink: 0;
margin-top: 25%;
margin-bottom: 2em;
width: 100%;
max-width: 700px;
margin-block-start: 25%;
margin-block-end: 2em;
inline-size: 100%;
max-inline-size: 700px;
@media (orientation: landscape) {
margin-top: 8%;
margin-block-start: 8%;
}
.form-bottom-left {
max-width: 6.5em;
max-inline-size: 6.5em;
.emoji-icon {
justify-content: right;

38
src/components/emoji_input/emoji_input.vue
View file

@ -70,14 +70,15 @@
position: relative;
&.with-picker input {
padding-right: 30px;
padding-inline-end: 30px;
}
.emoji-picker-icon {
position: absolute;
top: 0;
right: 0;
margin: .2em .25em;
inset-block-start: 0;
inset-inline-end: 0;
margin-block: .2em;
margin-inline: .25em;
font-size: 1.3em;
cursor: pointer;
line-height: 24px;
@ -90,7 +91,7 @@
.emoji-picker-panel {
position: absolute;
z-index: 20;
margin-top: 2px;
margin-block-start: 2px;
&.hide {
display: none
@ -101,19 +102,20 @@
&-panel {
position: absolute;
z-index: 20;
margin-top: 2px;
margin-block-start: 2px;
&.hide {
display: none
}
&-body {
margin: 0 0.5em 0 0.5em;
margin-block: 0 0;
margin-inline: 0.5em 0.5em;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow: var(--popupShadow);
min-width: 75%;
min-inline-size: 75%;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
@ -130,22 +132,23 @@
&-item {
display: flex;
cursor: pointer;
padding: 0.2em 0.4em;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
height: 32px;
padding-block: 0.2em;
padding-inline: 0.4em;
border-block-end: 1px solid rgba(0, 0, 0, 0.4);
block-size: 32px;
.image {
width: 32px;
height: 32px;
inline-size: 32px;
block-size: 32px;
line-height: 32px;
text-align: center;
font-size: 32px;
margin-right: 4px;
margin-inline-end: 4px;
img {
width: 32px;
height: 32px;
inline-size: 32px;
block-size: 32px;
object-fit: contain;
}
}
@ -154,7 +157,8 @@
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0.1em 0 0.2em;
margin-block: 0 0;
margin-inline: 0.2em 0.1em;
.displayText {
line-height: 1.5;

74
src/components/emoji_picker/emoji_picker.scss
View file

@ -2,21 +2,21 @@
.Notification {
.emoji-picker {
min-width: 160%;
width: 150%;
min-inline-size: 160%;
inline-size: 150%;
overflow: hidden;
left: -70%;
max-width: 100%;
inset-inline-start: -70%;
max-inline-size: 100%;
@media (min-width: 800px) and (max-width: 1300px) {
left: -50%;
min-width: 50%;
max-width: 130%;
inset-inline-start: -50%;
min-inline-size: 50%;
max-inline-size: 130%;
}
@media (max-width: 800px) {
left: -10%;
min-width: 50%;
max-width: 130%;
inset-inline-start: -10%;
min-inline-size: 50%;
max-inline-size: 130%;
}
}
}
@ -24,9 +24,10 @@
display: flex;
flex-direction: column;
position: absolute;
right: 0;
left: 0;
margin: 0 !important;
inset-inline-end: 0;
inset-inline-start: 0;
margin-block: 0;
margin-inline: !important;
z-index: 100;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
@ -50,20 +51,21 @@
}
.keep-open-label {
padding: 0 7px;
padding-block: 0;
padding-inline: 7px;
display: flex;
}
.heading {
margin-top: 10px;
height: 4.8em;
margin-block-start: 10px;
block-size: 4.8em;
}
.content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0px;
min-block-size: 0px;
}
.emoji-tabs {
@ -71,14 +73,14 @@
}
.emoji-groups {
min-height: 200px;
min-block-size: 200px;
}
.additional-tabs {
border-left: 1px solid;
border-left-color: $fallback--icon;
border-left-color: var(--icon, $fallback--icon);
padding-left: 7px;
border-inline-start: 1px solid;
border-inline-start-color: $fallback--icon;
border-inline-start-color: var(--icon, $fallback--icon);
padding-inline-start: 7px;
flex: 0 0 auto;
}
@ -89,7 +91,7 @@
flex-wrap: nowrap;
overflow: auto;
width: 100%;
inline-size: 100%;
white-space: nowrap;
@ -98,14 +100,14 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
inline-size: 32px;
block-size: 32px;
padding: .4em;
cursor: pointer;
img {
max-width: 100%;
max-height: 100%;
max-inline-size: 100%;
max-block-size: 100%;
object-fit: contain;
}
@ -119,7 +121,7 @@
}
&.active {
border-bottom: 4px solid;
border-block-end: 4px solid;
svg {
color: $fallback--lightText;
@ -142,7 +144,7 @@
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
min-block-size: 0;
&.hidden {
opacity: 0;
@ -158,7 +160,7 @@
flex: 0 0 auto;
input {
width: 100%;
inline-size: 100%;
}
}
@ -189,12 +191,12 @@
display: flex;
align-items: center;
flex-wrap: wrap;
padding-left: 5px;
padding-inline-start: 5px;
justify-content: left;
&-title {
font-size: 0.85em;
width: 100%;
inline-size: 100%;
margin: 0;
&.disabled {
@ -204,8 +206,8 @@
}
&-item {
width: 32px;
height: 32px;
inline-size: 32px;
block-size: 32px;
box-sizing: border-box;
display: flex;
font-size: 32px;
@ -217,8 +219,8 @@
img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
max-inline-size: 100%;
max-block-size: 100%;
}
}

24
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -47,7 +47,7 @@
.emoji-reactions {
display: flex;
margin-top: 0.25em;
margin-block-start: 0.25em;
flex-wrap: wrap;
}
@ -56,16 +56,17 @@
}
.emoji-reaction {
padding: 0 0.5em;
margin-right: 0.5em;
margin-top: 0.5em;
padding-block: 0;
padding-inline: 0.5em;
margin-inline-end: 0.5em;
margin-block-start: 0.5em;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
.reaction-emoji {
width: 2.55em !important;
margin-right: 0.25em;
inline-size: 2.55em !important;
margin-inline-end: 0.25em;
}
&:focus {
outline: none;
@ -81,9 +82,10 @@
}
.emoji-reaction-expand {
padding: 0 0.5em;
margin-right: 0.5em;
margin-top: 0.5em;
padding-block: 0;
padding-inline: 0.5em;
margin-inline-end: 0.5em;
margin-block-start: 0.5em;
display: flex;
align-items: center;
justify-content: center;
@ -94,8 +96,8 @@
.button-default.picked-reaction {
border: 1px solid var(--accent, $fallback--link);
margin-left: -1px; // offset the border, can't use inset shadows either
margin-right: calc(0.5em - 1px);
margin-inline-start: -1px; // offset the border, can't use inset shadows either
margin-inline-end: calc(0.5em - 1px);
}
</style>

2
src/components/extra_buttons/extra_buttons.vue
View file

@ -213,7 +213,7 @@
.ExtraButtons {
/* override of popover internal stuff */
.popover-trigger-button {
width: auto;
inline-size: auto;
}
.popover-trigger {

3
src/components/favorite_button/favorite_button.vue
View file

@ -45,7 +45,8 @@
> :first-child {
padding: 10px;
margin: -10px -8px -10px -10px;
margin-block: -10px -10px;
margin-inline: -10px -8px;
}
.action-counter {

14
src/components/flash/flash.vue
View file

@ -45,18 +45,18 @@
@import '../../_variables.scss';
.Flash {
display: inline-block;
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
position: relative;
.player {
height: 100%;
width: 100%;
block-size: 100%;
inline-size: 100%;
}
.placeholder {
height: 100%;
width: 100%;
block-size: 100%;
inline-size: 100%;
display: flex;
align-items: center;
justify-content: center;
@ -65,7 +65,7 @@
}
.hider {
top: 0;
inset-block-start: 0;
}
.label {

13
src/components/follow_card/follow_card.vue
View file

@ -46,15 +46,16 @@
}
&-button {
margin-top: 0.5em;
padding: 0 1.5em;
margin-left: 1em;
margin-block-start: 0.5em;
padding-block: 0;
padding-inline: 1.5em;
margin-inline-start: 1em;
}
&-follow-button {
margin-top: 0.5em;
margin-left: auto;
width: 10em;
margin-block-start: 0.5em;
margin-inline-start: auto;
inline-size: 10em;
}
}
</style>

10
src/components/follow_request_card/follow_request_card.vue
View file

@ -47,14 +47,14 @@
flex-direction: row;
flex-wrap: wrap;
button {
margin-top: 0.5em;
margin-right: 0.5em;
margin-block-start: 0.5em;
margin-inline-end: 0.5em;
flex: 1 1;
max-width: 12em;
min-width: 8em;
max-inline-size: 12em;
min-inline-size: 8em;
&:last-child {
margin-right: 0;
margin-inline-end: 0;
}
}
}

10
src/components/font_control/font_control.vue
View file

@ -53,17 +53,17 @@
@import '../../_variables.scss';
.font-control {
input.custom-font {
min-width: 10em;
min-inline-size: 10em;
}
&.custom {
/* TODO Should make proper joiners... */
.font-switcher {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.custom-font {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-start-start-radius: 0;
border-end-start-radius: 0;
}
}
}

32
src/components/gallery/gallery.vue
View file

@ -96,18 +96,18 @@
.gallery-row {
position: relative;
height: 0;
width: 100%;
block-size: 0;
inline-size: 100%;
flex-grow: 1;
&:not(:first-child) {
margin-top: 0.5em;
margin-block-start: 0.5em;
}
}
&.-long {
.gallery-rows {
max-height: 25em;
max-block-size: 25em;
overflow: hidden;
mask:
linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
@ -135,14 +135,15 @@
line-height: 2;
button {
padding: 0 2em;
padding-block: 0;
padding-inline: 2em;
}
}
.gallery-row {
&.-grid,
&.-minimal {
height: auto;
block-size: auto;
.gallery-row-inner {
position: relative;
}
@ -151,18 +152,18 @@
.gallery-row-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: stretch;
&.-grid {
width: 100%;
height: auto;
inline-size: 100%;
block-size: auto;
position: relative;
display: grid;
grid-column-gap: 0.5em;
@ -176,12 +177,13 @@
}
.gallery-item {
margin: 0 0.5em 0 0;
margin-block: 0 0;
margin-inline: 0 0.5em;
flex-grow: 1;
height: 100%;
block-size: 100%;
box-sizing: border-box;
// to make failed images a bit more noticeable on chromium
min-width: 2em;
min-inline-size: 2em;
&:last-child {
margin: 0;
}

14
src/components/global_notice_list/global_notice_list.vue
View file

@ -29,8 +29,8 @@
.global-notice-list {
position: fixed;
top: 50px;
width: 100%;
inset-block-start: 50px;
inline-size: 100%;
pointer-events: none;
z-index: 1001;
display: flex;
@ -40,12 +40,12 @@
.global-notice {
pointer-events: auto;
text-align: center;
width: 40em;
max-width: calc(100% - 3em);
inline-size: 40em;
max-inline-size: calc(100% - 3em);
display: flex;
padding-left: 1.5em;
padding-inline-start: 1.5em;
line-height: 2;
margin-bottom: 0.5em;
margin-block-end: 0.5em;
.notice-message {
flex: 1 1 100%;
@ -87,7 +87,7 @@
}
.close-notice {
padding-right: 0.2em;
padding-inline-end: 0.2em;
.svg-inline--fa:hover {
opacity: 0.6;
}

6
src/components/image_cropper/image_cropper.vue
View file

@ -60,15 +60,15 @@
img {
display: block;
max-width: 100%;
max-inline-size: 100%;
}
}
&-buttons-wrapper {
margin-top: 10px;
margin-block-start: 10px;
button {
margin-top: 5px;
margin-block-start: 5px;
}
}
}

20
src/components/link-preview/link-preview.vue
View file

@ -40,15 +40,15 @@
flex-direction: row;
cursor: pointer;
overflow: hidden;
margin-top: 0.5em;
margin-block-start: 0.5em;
.card-image {
flex-shrink: 0;
width: 120px;
max-width: 25%;
inline-size: 120px;
max-inline-size: 25%;
img {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
@ -56,7 +56,7 @@
}
.card-content {
max-height: 100%;
max-block-size: 100%;
margin: 0.5em;
display: flex;
flex-direction: column;
@ -67,18 +67,20 @@
}
.card-description {
margin: 0.5em 0 0 0;
margin-block: 0.5em 0;
margin-inline: 0 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
line-height: 1.2em;
// cap description at 3 lines, the 1px is to clean up some stray pixels
// TODO: fancier fade-out at the bottom to show off that it's too long?
max-height: calc(1.2em * 3 - 1px);
max-block-size: calc(1.2em * 3 - 1px);
}
.nsfw-alert {
margin: 2em 0;
margin-block: 2em;
margin-inline: 0;
}
color: $fallback--text;

6
src/components/list/list.vue
View file

@ -39,9 +39,9 @@ export default {
.list {
&-item:not(:last-child) {
border-bottom: 1px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
border-block-end: 1px solid;
border-block-end-color: $fallback--border;
border-block-end-color: var(--border, $fallback--border);
}
&-empty-content {

13
src/components/list_edit/list_edit.vue
View file

@ -72,19 +72,20 @@
.list-edit {
.input-wrap {
display: flex;
margin: 0.7em 0.5em 0.7em 0.5em;
margin-block: 0.7em 0.7em;
margin-inline: 0.5em 0.5em;
input {
width: 100%;
inline-size: 100%;
}
}
.search-icon {
margin-right: 0.3em;
margin-inline-end: 0.3em;
}
.member-list {
padding-bottom: 0.7rem;
padding-block-end: 0.7rem;
}
.basic-user-card:hover,
@ -96,9 +97,9 @@
.go-back-button {
text-align: center;
line-height: 1;
height: 100%;
block-size: 100%;
align-self: start;
width: var(--__panel-heading-height-inner);
inline-size: var(--__panel-heading-block-size-inner);
}
.btn {

8
src/components/list_new/list_new.vue
View file

@ -67,11 +67,11 @@
.list-new {
.search-icon {
margin-right: 0.3em;
margin-inline-end: 0.3em;
}
.member-list {
padding-bottom: 0.7rem;
padding-block-end: 0.7rem;
}
.basic-user-card:hover,
@ -83,9 +83,9 @@
.go-back-button {
text-align: center;
line-height: 1;
height: 100%;
block-size: 100%;
align-self: start;
width: var(--__panel-heading-height-inner);
inline-size: var(--__panel-heading-block-size-inner);
}
.btn {

7
src/components/list_user_search/list_user_search.vue
View file

@ -31,15 +31,16 @@
.input-wrap {
display: flex;
margin: 0.7em 0.5em 0.7em 0.5em;
margin-block: 0.7em 0.7em;
margin-inline: 0.5em 0.5em;
input {
width: 100%;
inline-size: 100%;
}
}
.search-icon {
margin-right: 0.3em;
margin-inline-end: 0.3em;
}
</style>

16
src/components/local_bubble_panel/local_bubble_panel.scss
View file

@ -2,20 +2,20 @@
margin: 1em;
table {
width:100%;
text-align: left;
padding-left:10px;
padding-bottom:20px;
inline-size:100%;
text-align: start;
padding-inline-start:10px;
padding-block-end:20px;
th, td {
width: 180px;
max-width: 360px;
inline-size: 180px;
max-inline-size: 360px;
overflow: hidden;
vertical-align: text-top;
vertical-align: text-block-start;
}
th+th, td+td {
width: auto;
inline-size: auto;
}
}
}

13
src/components/login_form/login_form.vue
View file

@ -101,8 +101,8 @@
padding: 0.6em;
.btn {
min-height: 2em;
width: 10em;
min-block-size: 2em;
inline-size: 10em;
}
.register {
@ -110,7 +110,7 @@
}
.login-bottom {
margin-top: 1.0em;
margin-block-start: 1.0em;
display: flex;
flex-direction: row;
align-items: center;
@ -120,17 +120,18 @@
.form-group {
display: flex;
flex-direction: column;
padding: 0.3em 0.5em 0.6em;
padding-block: 0.3em 0.6em;
padding-inline: 0.5em;
line-height:24px;
}
.form-bottom {
display: flex;
padding: 0.5em;
height: 32px;
block-size: 32px;
button {
width: 10em;
inline-size: 10em;
}
p {

77
src/components/media_modal/media_modal.vue
View file

@ -74,7 +74,7 @@
>
<FAIcon
class="button-icon arrow-icon"
icon="chevron-right"
icon="chevron-inline-end"
/>
</button>
<button
@ -115,9 +115,9 @@
<script src="./media_modal.js"></script>
<style lang="scss">
$modal-view-button-icon-height: 3em;
$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
$modal-view-button-icon-width: 3em;
$modal-view-button-icon-block-size: 3em;
$modal-view-button-icon-half-block-size: calc(#{$modal-view-button-icon-block-size} / 2);
$modal-view-button-icon-block-size: 3em;
$modal-view-button-icon-margin: 0.5em;
.modal-view.media-modal-view {
@ -156,16 +156,16 @@ $modal-view-button-icon-margin: 0.5em;
overflow: hidden;
align-items: center;
flex-direction: column;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
max-inline-size: 100%;
max-block-size: 100%;
inline-size: 100%;
block-size: 100%;
flex-grow: 1;
justify-content: center;
&-inner {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
@ -178,24 +178,25 @@ $modal-view-button-icon-margin: 0.5em;
.counter {
/* Hardcoded since background is also hardcoded */
color: white;
margin-top: 1em;
margin-block-start: 1em;
text-shadow: 0 0 10px black, 0 0 10px black;
padding: 0.2em 2em;
padding-block: 0.2em;
padding-inline: 2em;
}
.description {
flex: 0 0 auto;
overflow-y: auto;
min-height: 1em;
max-width: 500px;
max-height: 9.5em;
min-block-size: 1em;
max-inline-size: 500px;
max-block-size: 9.5em;
word-break: break-word;
white-space: pre-line;
}
.modal-image {
max-width: 100%;
max-height: 100%;
max-inline-size: 100%;
max-block-size: 100%;
image-orientation: from-image; // NOTE: only FF supports this
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
@ -205,8 +206,8 @@ $modal-view-button-icon-margin: 0.5em;
}
.loading-spinner {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
position: absolute;
pointer-events: none;
display: flex;
@ -228,15 +229,15 @@ $modal-view-button-icon-margin: 0.5em;
overflow: visible;
cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
height: $modal-view-button-icon-height;
width: $modal-view-button-icon-width;
block-size: $modal-view-button-icon-block-size;
inline-size: $modal-view-button-icon-block-size;
.button-icon {
position: absolute;
height: $modal-view-button-icon-height;
width: $modal-view-button-icon-width;
block-size: $modal-view-button-icon-block-size;
inline-size: $modal-view-button-icon-block-size;
font-size: 1rem;
line-height: $modal-view-button-icon-height;
line-height: $modal-view-button-icon-block-size;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
@ -246,42 +247,42 @@ $modal-view-button-icon-margin: 0.5em;
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: $modal-view-button-icon-half-height;
width: $modal-view-button-icon-width;
height: $modal-view-button-icon-height;
inset-block-start: 50%;
margin-block-start: $modal-view-button-icon-half-block-size;
inline-size: $modal-view-button-icon-block-size;
block-size: $modal-view-button-icon-block-size;
.arrow-icon {
position: absolute;
top: 0;
line-height: $modal-view-button-icon-height;
inset-block-start: 0;
line-height: $modal-view-button-icon-block-size;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
&--prev {
left: 0;
inset-inline-start: 0;
.arrow-icon {
left: $modal-view-button-icon-margin;
inset-inline-start: $modal-view-button-icon-margin;
}
}
&--next {
right: 0;
inset-inline-end: 0;
.arrow-icon {
right: $modal-view-button-icon-margin;
inset-inline-end: $modal-view-button-icon-margin;
}
}
}
.modal-view-button-hide {
position: absolute;
top: 0;
right: 0;
inset-block-start: 0;
inset-inline-end: 0;
.button-icon {
top: $modal-view-button-icon-margin;
right: $modal-view-button-icon-margin;
inset-block-start: $modal-view-button-icon-margin;
inset-inline-end: $modal-view-button-icon-margin;
}
}
}

17
src/components/mention_link/mention_link.scss
View file

@ -15,11 +15,11 @@
.mention-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
width: 1.5em;
height: 1.5em;
inline-size: 1.5em;
block-size: 1.5em;
vertical-align: middle;
user-select: none;
margin-right: 0.2em;
margin-inline-end: 0.2em;
}
.full {
@ -27,14 +27,14 @@
display: inline-block;
pointer-events: none;
opacity: 0;
top: 100%;
left: 0;
height: 100%;
inset-block-start: 100%;
inset-inline-start: 0;
block-size: 100%;
word-wrap: normal;
white-space: nowrap;
transition: opacity 0.2s ease;
z-index: 1;
margin-top: 0.25em;
margin-block-start: 0.25em;
padding: 0.5em;
user-select: all;
}
@ -66,7 +66,8 @@
opacity: 0.8;
display: inline-block;
line-height: 1;
padding: 0 0.1em;
padding-block: 0;
padding-inline: 0.1em;
vertical-align: -25%;
margin: 0;
}

2
src/components/mentions_line/mentions_line.scss
View file

@ -6,7 +6,7 @@
}
.showMoreLess {
margin-left: 0.5em;
margin-inline-start: 0.5em;
white-space: normal;
color: var(--link);
}

44
src/components/mobile_nav/mobile_nav.vue
View file

@ -99,10 +99,10 @@
.MobileNav {
.mobile-nav {
display: grid;
line-height: var(--navbar-height);
line-height: var(--navbar-block-size);
grid-template-rows: 50px;
grid-template-columns: 2fr auto;
width: 100%;
inline-size: 100%;
box-sizing: border-box;
a {
color: var(--topBarLink, $fallback--link);
@ -110,7 +110,7 @@
}
.mobile-inner-nav {
width: 100%;
inline-size: 100%;
display: flex;
align-items: center;
}
@ -118,13 +118,15 @@
.mobile-nav-button {
display: inline-block;
text-align: center;
padding: 0 1em;
padding-block: 0;
padding-inline: 1em;
position: relative;
cursor: pointer;
}
.site-name {
padding: 0 .3em;
padding-block: 0;
padding-inline: .3em;
display: inline-block;
}
@ -135,24 +137,24 @@
.alert-dot {
border-radius: 100%;
height: 8px;
width: 8px;
block-size: 8px;
inline-size: 8px;
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
inset-inline-start: calc(50% - 4px);
inset-block-start: calc(50% - 4px);
margin-inline-start: 6px;
margin-block-start: -6px;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
}
.mobile-notifications-drawer {
width: 100%;
height: 100vh;
inline-size: 100%;
block-size: 100vb;
overflow-x: hidden;
position: fixed;
top: 0;
left: 0;
inset-block-start: 0;
inset-inline-start: 0;
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
box-shadow: var(--panelShadow);
transition-property: transform;
@ -172,8 +174,8 @@
align-items: center;
justify-content: space-between;
z-index: 1;
width: 100%;
height: 50px;
inline-size: 100%;
block-size: 50px;
line-height: 50px;
position: absolute;
color: var(--topBarText);
@ -184,14 +186,14 @@
.title {
font-size: 1.3em;
margin-left: 0.6em;
margin-inline-start: 0.6em;
}
}
.mobile-notifications {
margin-top: 50px;
width: 100vw;
height: calc(100vh - var(--navbar-height));
margin-block-start: 50px;
inline-size: 100vi;
block-size: calc(100vb - var(--navbar-block-size));
overflow-x: hidden;
overflow-y: scroll;

8
src/components/mobile_post_status_button/mobile_post_status_button.vue
View file

@ -16,12 +16,12 @@
.MobilePostButton {
&.button-default {
width: 5em;
height: 5em;
inline-size: 5em;
block-size: 5em;
border-radius: 100%;
position: fixed;
bottom: 1.5em;
right: 1.5em;
inset-block-end: 1.5em;
inset-inline-end: 1.5em;
// TODO: this needs its own color, it has to stand out enough and link color
// is not very optimal for this particular use.
background-color: $fallback--fg;

18
src/components/mod_modal/mod_modal.scss
View file

@ -6,13 +6,13 @@
.mod-modal-panel {
/* Explanation:
* Modal is positioned vertically centered.
* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
* 100vb - 100% = Distance between modal's top+bottom boundaries and screen
* (100vb - 100%) / 2 = Distance between bottom (or top) boundary and screen
* + 100% - we move modal completely off-screen, it's top boundary touches
* bottom of the screen
* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
*/
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
transform: translateY(calc(((100vb - 100%) / 2 + 100%) - 50px));
@media all and (max-width: 800px) {
/* For mobile, the modal takes 100% of the available screen.
@ -28,17 +28,17 @@
transition: transform;
transition-timing-function: ease-in-out;
transition-duration: 300ms;
width: 1000px;
max-width: 90vw;
height: 90vh;
inline-size: 1000px;
max-inline-size: 90vi;
block-size: 90vb;
@media all and (max-width: 800px) {
max-width: 100vw;
height: 100%;
max-inline-size: 100vi;
block-size: 100%;
}
.panel-body {
height: inherit;
block-size: inherit;
}
}
}

15
src/components/mod_modal/mod_modal_content.scss
View file

@ -1,21 +1,22 @@
@import 'src/_variables.scss';
.mod_tab-switcher {
height: 100%;
block-size: 100%;
.content {
margin: 1em 1em 1.4em;
margin-block: 1em 1.4em;
margin-inline: 1em;
> div {
margin-bottom: .5em;
margin-block-end: .5em;
&:last-child {
margin-bottom: 0;
margin-block-end: 0;
}
}
textarea {
width: 100%;
max-width: 100%;
height: 100px;
inline-size: 100%;
max-inline-size: 100%;
block-size: 100px;
}
}
}

27
src/components/mod_modal/tabs/reports_tab/reports_tab.scss
View file

@ -6,8 +6,8 @@
}
& > :not(:last-child) {
border-bottom: 1px solid;
border-bottom-color: var(--border, #222);
border-block-end: 1px solid;
border-block-end-color: var(--border, #222);
}
.report-content {
@ -15,12 +15,12 @@
}
.report-author {
padding-top: 0.5em;
padding-block-start: 0.5em;
}
.small-avatar {
height: 25px;
width: 25px;
padding-right: 0.4em;
block-size: 25px;
inline-size: 25px;
padding-inline-end: 0.4em;
vertical-align: middle;
}
@ -46,11 +46,11 @@
.note-header {
display: flex;
justify-content: space-between;
padding-bottom: 0.5em;
padding-block-end: 0.5em;
}
button {
margin-left: 0.5em;
margin-inline-start: 0.5em;
}
}
@ -60,10 +60,11 @@
}
button {
min-height: 2em;
min-width: 10em;
padding: 0 2em;
margin-top: 0.5em;
min-block-size: 2em;
min-inline-size: 10em;
padding-block: 0;
padding-inline: 2em;
margin-block-start: 0.5em;
}
}
}
@ -71,7 +72,7 @@
.panel-footer {
display: flex;
& > * {
margin-right: 0.5em;
margin-inline-end: 0.5em;
}
}
}

8
src/components/modal/modal.vue
View file

@ -37,10 +37,10 @@ export default {
.modal-view {
z-index: 2000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
display: flex;
justify-content: center;
align-items: center;

4
src/components/moderation_tools/moderation_tools.vue
View file

@ -166,11 +166,11 @@
@import '../../_variables.scss';
.moderation-tools-popover {
height: 100%;
block-size: 100%;
z-index: 999;
.trigger {
display: flex !important;
height: 100%;
block-size: 100%;
}
}

16
src/components/mrf_transparency_panel/mrf_transparency_panel.scss
View file

@ -2,20 +2,20 @@
margin: 1em;
table {
width:100%;
text-align: left;
padding-left:10px;
padding-bottom:20px;
inline-size:100%;
text-align: start;
padding-inline-start:10px;
padding-block-end:20px;
th, td {
width: 180px;
max-width: 360px;
inline-size: 180px;
max-inline-size: 360px;
overflow: hidden;
vertical-align: text-top;
vertical-align: text-block-start;
}
th+th, td+td {
width: auto;
inline-size: auto;
}
}
}

6
src/components/mute_card/mute_card.vue
View file

@ -35,10 +35,10 @@
<style lang="scss">
.mute-card-content-container {
margin-top: 0.5em;
text-align: right;
margin-block-start: 0.5em;
text-align: end;
button {
width: 10em;
inline-size: 10em;
}
}
</style>

38
src/components/nav_panel/nav_panel.vue
View file

@ -121,23 +121,23 @@
li {
position: relative;
border-bottom: 1px solid;
border-block-end: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
padding: 0;
&:first-child .menu-item {
border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
border-start-end-radius: $fallback--panelRadius;
border-start-end-radius: var(--panelRadius, $fallback--panelRadius);
border-start-start-radius: $fallback--panelRadius;
border-start-start-radius: var(--panelRadius, $fallback--panelRadius);
}
&:last-child .menu-item {
border-bottom-right-radius: $fallback--panelRadius;
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
border-end-end-radius: $fallback--panelRadius;
border-end-end-radius: var(--panelRadius, $fallback--panelRadius);
border-end-start-radius: $fallback--panelRadius;
border-end-start-radius: var(--panelRadius, $fallback--panelRadius);
}
}
@ -148,10 +148,11 @@
.menu-item {
display: block;
box-sizing: border-box;
height: 3.5em;
block-size: 3.5em;
line-height: 3.5em;
padding: 0 1em;
width: 100%;
padding-block: 0;
padding-inline: 1em;
inline-size: 100%;
color: $fallback--link;
color: var(--link, $fallback--link);
@ -184,15 +185,16 @@
}
.timelines-chevron {
margin-left: 0.8em;
margin-inline-start: 0.8em;
font-size: 1.1em;
}
.timelines-background {
padding: 0 0 0 0.6em;
padding-block: 0 0;
padding-inline: 0.6em 0;
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
border-top: 1px solid;
border-block-start: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
@ -203,13 +205,13 @@
}
.fa-scale-110 {
margin-right: 0.8em;
margin-inline-end: 0.8em;
}
.badge {
position: absolute;
right: 0.6rem;
top: 1.25em;
inset-inline-end: 0.6rem;
inset-block-start: 1.25em;
}
}
</style>

18
src/components/notification/notification.scss
View file

@ -1,7 +1,7 @@
@import '../../_variables.scss';
.notification-reaction-emoji {
width: 40px;
inline-size: 40px;
display: inline-flex;
vertical-align: middle;
flex-direction: column;
@ -9,7 +9,7 @@
// TODO Copypaste from Status, should unify it somehow
.Notification {
border-bottom: 1px solid;
border-block-end: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
word-wrap: break-word;
@ -23,8 +23,9 @@
}
&.-muted {
padding: 0.25em 0.6em;
height: 1.2em;
padding-block: 0.25em;
padding-inline: 0.6em;
block-size: 1.2em;
line-height: 1.2em;
text-overflow: ellipsis;
overflow: hidden;
@ -48,7 +49,7 @@
.status-username {
font-weight: normal;
flex: 0 1 auto;
margin-right: 0.2em;
margin-inline-end: 0.2em;
font-size: smaller;
}
@ -58,7 +59,7 @@
.mute-words {
flex: 1 0 5em;
margin-left: 0.2em;
margin-inline-start: 0.2em;
&::before {
content: ' ';
@ -67,13 +68,14 @@
.unmute {
flex: 0 0 auto;
margin-left: auto;
margin-inline-start: auto;
display: block;
}
}
.type-icon {
margin: 0 0.1em;
margin-block: 0;
margin-inline: 0.1em;
}
&.-type--repeat .type-icon {

4
src/components/notifications/notification_filters.vue
View file

@ -117,8 +117,8 @@ export default {
> button {
line-height: 100%;
height: 100%;
width: var(--__panel-heading-height-inner);
block-size: 100%;
inline-size: var(--__panel-heading-block-size-inner);
text-align: center;
svg {

50
src/components/notifications/notifications.scss
View file

@ -3,7 +3,7 @@
.Notifications {
&:not(.minimal) {
// a bit of a hack to allow scrolling below notifications
padding-bottom: 15em;
padding-block-end: 15em;
}
.loadmore-error {
@ -16,10 +16,10 @@
.notification-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
inset-block-start: 0;
inset-inline-end: 0;
inset-inline-start: 0;
inset-block-end: 0;
pointer-events: none;
}
@ -44,7 +44,7 @@
}
&:last-child .Notification {
border-bottom: none;
border-block-end: none;
}
.non-mention {
@ -52,11 +52,11 @@
flex: 1;
flex-wrap: nowrap;
padding: 0.6em;
min-width: 0;
min-inline-size: 0;
.avatar-container {
width: 32px;
height: 32px;
inline-size: 32px;
block-size: 32px;
}
--link: var(--faintLink);
@ -78,14 +78,15 @@
}
.follow-text, .move-text {
padding: 0.5em 0;
padding-block: 0.5em;
padding-inline: 0;
overflow-wrap: break-word;
display: flex;
justify-content: space-between;
.follow-name {
display: block;
max-width: 100%;
max-inline-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -101,14 +102,14 @@
white-space: nowrap;
}
.notification-right {
.notification-inline-end {
flex: 1;
padding-left: 0.8em;
min-width: 0;
padding-inline-start: 0.8em;
min-inline-size: 0;
.timeago {
min-width: 3em;
text-align: right;
min-inline-size: 3em;
text-align: end;
}
}
@ -117,12 +118,12 @@
}
.notification-details {
min-width: 0;
min-inline-size: 0;
word-wrap: break-word;
line-height: var(--post-line-height);
position: relative;
overflow: hidden;
width: 100%;
inline-size: 100%;
flex: 1 1 0;
display: flex;
flex-wrap: nowrap;
@ -136,23 +137,24 @@
.username {
font-weight: bolder;
max-width: 100%;
max-inline-size: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
.timeago {
margin-right: 0.2em;
margin-inline-end: 0.2em;
}
.status-content {
margin: 0;
max-height: 300px;
max-block-size: 300px;
}
h1 {
word-break: break-all;
margin: 0 0 0.3em;
margin-block: 0 0.3em;
margin-inline: 0;
padding: 0;
font-size: 1em;
line-height: 1.5;
@ -164,8 +166,8 @@
p {
margin: 0;
margin-top: 0;
margin-bottom: 0.3em;
margin-block-start: 0;
margin-block-end: 0.3em;
}
}
}

2
src/components/panel_loading/panel_loading.vue
View file

@ -27,7 +27,7 @@ export default {}
.panel-loading {
display: flex;
height: 100%;
block-size: 100%;
align-items: center;
justify-content: center;
font-size: 2em;

19
src/components/password_reset/password_reset.vue
View file

@ -89,19 +89,20 @@
display: flex;
flex: 1 0;
flex-direction: column;
margin-top: 0.6em;
max-width: 18rem;
margin-block-start: 0.6em;
max-inline-size: 18rem;
> * {
min-width: 0;
min-inline-size: 0;
}
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 1em;
padding: 0.3em 0;
margin-block-end: 1em;
padding-block: 0.3em;
padding-inline: 0;
line-height: 1.85em;
}
@ -114,16 +115,18 @@
.alert {
padding: 0.5em;
margin: 0.3em 0 1em;
margin-block: 0.3em 1em;
margin-inline: 0;
}
.password-reset-required {
background-color: var(--alertError, $fallback--alertError);
padding: 10px 0;
padding-block: 10px;
padding-inline: 0;
}
.notice-dismissible {
padding-right: 2rem;
padding-inline-end: 2rem;
}
.dismiss {

30
src/components/poll/poll.vue
View file

@ -25,7 +25,7 @@
</div>
<div
class="result-fill"
:style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
:style="{ 'block-size': `${percentageForOption(option.votes_count)}%` }"
/>
</div>
<div
@ -96,13 +96,15 @@
.votes {
display: flex;
flex-direction: column;
margin: 0 0 0.5em;
margin-block: 0 0.5em;
margin-inline: 0;
}
.poll-option {
margin: 0.75em 0.5em;
margin-block: 0.75em;
margin-inline: 0.5em;
}
.option-result {
height: 100%;
block-size: 100%;
display: flex;
flex-direction: row;
position: relative;
@ -112,16 +114,17 @@
.option-result-label {
display: flex;
align-items: center;
padding: 0.1em 0.25em;
padding-block: 0.1em;
padding-inline: 0.25em;
z-index: 1;
word-break: break-word;
}
.result-percentage {
width: 3.5em;
inline-size: 3.5em;
flex-shrink: 0;
}
.result-fill {
height: 100%;
block-size: 100%;
position: absolute;
color: $fallback--text;
color: var(--pollText, $fallback--text);
@ -129,16 +132,16 @@
background-color: var(--poll, $fallback--lightBg);
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
top: 0;
left: 0;
transition: width 0.5s;
inset-block-start: 0;
inset-inline-start: 0;
transition: block-size 0.5s;
}
.option-vote {
display: flex;
align-items: center;
}
input {
width: 3.5em;
inline-size: 3.5em;
}
.footer {
display: flex;
@ -148,8 +151,9 @@
cursor: progress;
}
.poll-vote-button {
padding: 0 0.5em;
margin-right: 0.5em;
padding-block: 0;
padding-inline: 0.5em;
margin-inline-end: 0.5em;
}
}
</style>

31
src/components/poll/poll_form.vue
View file

@ -100,49 +100,50 @@
.poll-form {
display: flex;
flex-direction: column;
padding: 0 0.5em 0.5em;
padding-block: 0 0.5em;
padding-inline: 0.5em;
.add-option {
align-self: flex-start;
padding-top: 0.25em;
padding-left: 0.1em;
padding-block-start: 0.25em;
padding-inline-start: 0.1em;
}
.poll-option {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.25em;
margin-block-end: 0.25em;
}
.input-container {
width: 100%;
inline-size: 100%;
input {
// Hack: dodge the floating X icon
padding-right: 2.5em;
width: 100%;
padding-inline-end: 2.5em;
inline-size: 100%;
}
}
.delete-option {
// Hack: Move the icon over the input box
width: 1.5em;
margin-left: -1.5em;
inline-size: 1.5em;
margin-inline-start: -1.5em;
z-index: 1;
}
.poll-type-expiry {
margin-top: 0.5em;
margin-block-start: 0.5em;
display: flex;
width: 100%;
inline-size: 100%;
}
.poll-type {
margin-right: 0.75em;
margin-inline-end: 0.75em;
flex: 1 1 60%;
.poll-type-select {
padding-right: 0.75em;
padding-inline-end: 0.75em;
}
}
@ -150,8 +151,8 @@
display: flex;
.expiry-amount {
width: 3em;
text-align: right;
inline-size: 3em;
text-align: end;
}
}
}

47
src/components/popover/popover.vue
View file

@ -39,7 +39,7 @@
.popover {
z-index: 500;
position: absolute;
min-width: 0;
min-inline-size: 0;
}
.popover-default {
@ -48,10 +48,10 @@
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
z-index: 3;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--panelShadow);
@ -75,27 +75,30 @@
.dropdown-menu {
display: block;
padding: .5rem 0;
padding-block: .5rem;
padding-inline: 0;
font-size: 1em;
text-align: left;
text-align: start;
list-style: none;
max-width: 100vw;
max-inline-size: 100vi;
z-index: 200;
white-space: nowrap;
.dropdown-divider {
height: 0;
margin: .5rem 0;
block-size: 0;
margin-block: .5rem;
margin-inline: 0;
overflow: hidden;
border-top: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border);
border-block-start: 1px solid $fallback--border;
border-block-start: 1px solid var(--border, $fallback--border);
}
.dropdown-item {
line-height: 21px;
overflow: hidden;
display: block;
padding: 0.5em 0.75em;
padding-block: 0.5em;
padding-inline: 0.75em;
clear: both;
font-weight: 400;
text-align: inherit;
@ -104,16 +107,16 @@
border-radius: 0px;
background-color: transparent;
box-shadow: none;
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
box-sizing: border-box;
--btnText: var(--popoverText, $fallback--text);
&-icon {
svg {
width: 22px;
margin-right: 0.75rem;
inline-size: 22px;
margin-inline-end: 0.75rem;
color: var(--menuPopoverIcon, $fallback--icon)
}
}
@ -136,10 +139,10 @@
.menu-checkbox {
display: inline-block;
vertical-align: middle;
min-width: 22px;
max-width: 22px;
min-height: 22px;
max-height: 22px;
min-inline-size: 22px;
max-inline-size: 22px;
min-block-size: 22px;
max-block-size: 22px;
line-height: 22px;
text-align: center;
border-radius: 0px;
@ -147,7 +150,7 @@
background-color: var(--input, $fallback--fg);
box-shadow: 0px 0px 2px black inset;
box-shadow: var(--inputShadow);
margin-right: 0.75em;
margin-inline-end: 0.75em;
&.menu-checkbox-checked::after {
font-size: 1.25em;

69
src/components/post_status_form/post_status_form.vue
View file

@ -230,7 +230,7 @@
/>
<div
ref="bottom"
class="form-bottom"
class="form-block-end"
>
<div class="form-bottom-left">
<media-upload
@ -346,17 +346,17 @@
position: relative;
.attachments {
margin-bottom: 0.5em;
margin-block-end: 0.5em;
}
.form-bottom {
.form-block-end {
display: flex;
justify-content: space-between;
padding: 0.5em;
height: 2.5em;
block-size: 2.5em;
button {
width: 10em;
inline-size: 10em;
}
p {
@ -366,17 +366,17 @@
}
}
.form-bottom-left {
.form-block-end-left {
display: flex;
flex: 1;
padding-right: 7px;
margin-right: 7px;
max-width: 10em;
padding-inline-end: 7px;
margin-inline-end: 7px;
max-inline-size: 10em;
}
.preview-heading {
display: flex;
padding-left: 0.5em;
padding-inline-start: 0.5em;
}
.preview-toggle {
@ -388,14 +388,14 @@
text-decoration: underline;
}
svg, i {
margin-left: 0.2em;
margin-inline-start: 0.2em;
font-size: 0.8em;
transform: rotate(90deg);
}
}
.preview-container {
margin-bottom: 1em;
margin-block-end: 1em;
}
.preview-error {
@ -423,17 +423,17 @@
.visibility-tray {
display: flex;
justify-content: space-between;
padding-top: 5px;
padding-block-start: 5px;
align-items: baseline;
}
.visibility-notice.edit-warning {
> :first-child {
margin-top: 0;
margin-block-start: 0;
}
> :last-child {
margin-bottom: 0;
margin-block-end: 0;
}
}
@ -441,7 +441,8 @@
font-size: 1.85em;
line-height: 1.1;
flex: 1;
padding: 0 0.1em;
padding-block: 0;
padding-inline: 0.1em;
display: flex;
align-items: center;
@ -488,29 +489,29 @@
}
.media-upload-wrapper {
margin-right: .2em;
margin-bottom: .5em;
width: 18em;
margin-inline-end: .2em;
margin-block-end: .5em;
inline-size: 18em;
img, video {
object-fit: contain;
max-height: 10em;
max-block-size: 10em;
}
.video {
max-height: 10em;
max-block-size: 10em;
}
input {
flex: 1;
width: 100%;
inline-size: 100%;
}
}
.status-input-wrapper {
display: flex;
position: relative;
width: 100%;
inline-size: 100%;
flex-direction: column;
}
@ -528,7 +529,8 @@
.form-group {
display: flex;
flex-direction: column;
padding: 0.25em 0.5em 0.5em;
padding-block: 0.25em 0.5em;
padding-inline: 0.5em;
line-height: 1.85;
}
@ -536,12 +538,12 @@
// TODO: make a resizable textarea component?
box-sizing: content-box; // needed for easier computation of dynamic size
overflow: hidden;
transition: min-height 200ms 100ms;
transition: min-block-size 200ms 100ms;
// stock padding + 1 line of text (for counter)
padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
padding-block-end: calc(var(--_padding) + var(--post-line-height) * 1em);
// two lines of text
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
block-size: calc(var(--post-line-height) * 1em);
min-block-size: calc(var(--post-line-height) * 1em);
resize: none;
&.scrollable-form {
@ -555,10 +557,11 @@
.character-counter {
position: absolute;
bottom: 0;
right: 0;
inset-block-end: 0;
inset-inline-end: 0;
padding: 0;
margin: 0 0.5em;
margin-block: 0;
margin-inline: 0.5em;
&.error {
color: $fallback--cRed;
@ -582,8 +585,8 @@
.drop-indicator {
position: absolute;
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
font-size: 5em;
display: flex;
align-items: center;

10
src/components/post_status_modal/post_status_modal.vue
View file

@ -27,13 +27,13 @@
.post-form-modal-panel {
flex-shrink: 0;
margin-top: 25%;
margin-bottom: 2em;
width: 100%;
max-width: 700px;
margin-block-start: 25%;
margin-block-end: 2em;
inline-size: 100%;
max-inline-size: 700px;
@media (orientation: landscape) {
margin-top: 8%;
margin-block-start: 8%;
}
}
</style>

3
src/components/quote_button/quote_button.vue
View file

@ -27,7 +27,8 @@
> :first-child {
padding: 10px;
margin: -10px -8px -10px -10px;
margin-block: -10px -10px;
margin-inline: -10px -8px;
}
.action-counter {

20
src/components/quote_card/quote_card.vue
View file

@ -21,15 +21,15 @@
flex-direction: column;
cursor: pointer;
overflow: hidden;
margin-top: 0.5em;
margin-block-start: 0.5em;
.card-image {
flex-shrink: 0;
width: 120px;
max-width: 25%;
inline-size: 120px;
max-inline-size: 25%;
img {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
@ -37,7 +37,7 @@
}
.card-content {
max-height: 100%;
max-block-size: 100%;
margin: 0.5em;
display: flex;
flex-direction: column;
@ -48,18 +48,20 @@
}
.card-description {
margin: 0.5em 0 0 0;
margin-block: 0.5em 0;
margin-inline: 0 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
line-height: 1.2em;
// cap description at 3 lines, the 1px is to clean up some stray pixels
// TODO: fancier fade-out at the bottom to show off that it's too long?
max-height: calc(1.2em * 3 - 1px);
max-block-size: calc(1.2em * 3 - 1px);
}
.nsfw-alert {
margin: 2em 0;
margin-block: 2em;
margin-inline: 0;
}
color: $fallback--text;

14
src/components/react_button/react_button.vue
View file

@ -34,7 +34,7 @@
@import '../../_variables.scss';
.custom-reaction {
width: 30px !important;
inline-size: 30px !important;
}
.ReactButton {
@ -48,15 +48,15 @@
}
.reaction-picker-divider {
height: 1px;
width: 100%;
block-size: 1px;
inline-size: 100%;
margin: 0.5em;
background-color: var(--border, $fallback--border);
}
.reaction-picker {
width: 10em;
height: 9em;
inline-size: 10em;
block-size: 9em;
font-size: 1.5em;
overflow-y: scroll;
display: flex;
@ -91,7 +91,7 @@
/* override of popover internal stuff */
.popover-trigger-button {
width: auto;
inline-size: auto;
}
.popover-trigger {
@ -106,7 +106,7 @@
.popover {
transform: translateX(-64px) translateY(5px);
min-width: 70%;
min-inline-size: 70%;
}
}

28
src/components/registration/registration.vue
View file

@ -286,7 +286,7 @@ $validations-cRed: #f04124;
flex-direction: row;
> * {
min-width: 0;
min-inline-size: 0;
}
}
@ -296,23 +296,24 @@ $validations-cRed: #f04124;
}
.text-fields {
margin-top: 0.6em;
margin-block-start: 0.6em;
flex: 1 0;
display: flex;
flex-direction: column;
}
textarea {
min-height: 100px;
min-block-size: 100px;
resize: vertical;
}
.form-group {
display: flex;
flex-direction: column;
padding: 0.3em 0;
padding-block: 0.3em;
padding-inline: 0;
line-height: 2;
margin-bottom: 1em;
margin-block-end: 1em;
}
.form-group--error {
@ -327,8 +328,8 @@ $validations-cRed: #f04124;
}
.form-error {
margin-top: -0.7em;
text-align: left;
margin-block-start: -0.7em;
text-align: start;
span {
font-size: 0.85em;
@ -337,8 +338,9 @@ $validations-cRed: #f04124;
.form-error ul {
list-style: none;
padding: 0 0 0 5px;
margin-top: 0;
padding-block: 0 0;
padding-inline: 5px 0;
margin-block-start: 0;
li::before {
content: "• ";
@ -351,13 +353,13 @@ $validations-cRed: #f04124;
}
.captcha {
max-width: 350px;
margin-bottom: 0.4em;
max-inline-size: 350px;
margin-block-end: 0.4em;
}
.btn {
margin-top: 0.6em;
height: 2em;
margin-block-start: 0.6em;
block-size: 2em;
}
.error {

6
src/components/remote_follow/remote_follow.vue
View file

@ -28,11 +28,11 @@
<style lang="scss">
.remote-follow {
max-width: 220px;
max-inline-size: 220px;
.remote-button {
width: 100%;
min-height: 2em;
inline-size: 100%;
min-block-size: 2em;
}
}
</style>

3
src/components/reply_button/reply_button.vue
View file

@ -44,7 +44,8 @@
> :first-child {
padding: 10px;
margin: -10px -8px -10px -10px;
margin-block: -10px -10px;
margin-inline: -10px -8px;
}
.action-counter {

3
src/components/retweet_button/retweet_button.vue
View file

@ -64,7 +64,8 @@
> :first-child {
padding: 10px;
margin: -10px -8px -10px -10px;
margin-block: -10px -10px;
margin-inline: -10px -8px;
}
.action-counter {

29
src/components/rich_content/rich_content.scss
View file

@ -1,6 +1,7 @@
.RichContent {
blockquote {
margin: 0.2em 0 0.2em 2em;
margin-block: 0.2em 0.2em;
margin-inline: 2em 0;
font-style: italic;
}
@ -17,31 +18,37 @@
}
p {
margin: 0 0 1em 0;
margin-block: 0 1em;
margin-inline: 0 0;
}
p:last-child {
margin: 0 0 0 0;
margin-block: 0 0;
margin-inline: 0 0;
}
h1 {
font-size: 1.1em;
line-height: 1.2em;
margin: 1.4em 0;
margin-block: 1.4em;
margin-inline: 0;
}
h2 {
font-size: 1.1em;
margin: 1em 0;
margin-block: 1em;
margin-inline: 0;
}
h3 {
font-size: 1em;
margin: 1.2em 0;
margin-block: 1.2em;
margin-inline: 0;
}
h4 {
margin: 1.1em 0;
margin-block: 1.1em;
margin-inline: 0;
}
.img {
@ -50,14 +57,14 @@
.emoji {
display: inline-block;
width: var(--emoji-size, 32px);
height: var(--emoji-size, 32px);
inline-size: var(--emoji-size, 32px);
block-size: var(--emoji-size, 32px);
}
.img,
video {
max-width: 100%;
max-height: 400px;
max-inline-size: 100%;
max-block-size: 400px;
vertical-align: middle;
object-fit: contain;
}

6
src/components/scope_selector/scope_selector.vue
View file

@ -81,10 +81,10 @@
.scope {
display: inline-block;
cursor: pointer;
min-width: 1.3em;
min-height: 1.3em;
min-inline-size: 1.3em;
min-block-size: 1.3em;
text-align: center;
margin-right: 0.4em;
margin-inline-end: 0.4em;
&.selected svg {
color: $fallback--lightText;

8
src/components/search/search.vue
View file

@ -149,7 +149,7 @@
.search-result {
box-sizing: border-box;
border-bottom: 1px solid;
border-block-end: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
@ -169,7 +169,7 @@
justify-content: center;
.search-input {
width: 100%;
inline-size: 100%;
line-height: 1.125rem;
font-size: 1rem;
padding: 0.5rem;
@ -177,7 +177,7 @@
}
.search-button {
margin-left: 0.5em;
margin-inline-start: 0.5em;
}
}
@ -200,7 +200,7 @@
.count {
flex: 0 0 auto;
width: 2rem;
inline-size: 2rem;
font-size: 1.5rem;
line-height: 2.25rem;
font-weight: 500;

8
src/components/search_bar/search_bar.vue
View file

@ -63,21 +63,21 @@
justify-content: flex-end;
&.-expanded {
width: 100%;
inline-size: 100%;
}
.search-bar-input,
.search-button {
height: 29px;
block-size: 29px;
}
.search-bar-input {
flex: 1 0 auto;
margin-left: 0.5em;
margin-inline-start: 0.5em;
}
.cancel-search {
height: 50px;
block-size: 50px;
}
.cancel-icon {

17
src/components/select/select.vue
View file

@ -36,23 +36,24 @@ label.Select {
color: $fallback--text;
color: var(--inputText, --text, $fallback--text);
margin: 0;
padding: 0 2em 0 .2em;
padding-block: 0 0;
padding-inline: .2em 2em;
font-family: sans-serif;
font-family: var(--inputFont, sans-serif);
font-size: 1em;
width: 100%;
inline-size: 100%;
z-index: 1;
height: 2em;
block-size: 2em;
line-height: 16px;
}
.select-down-icon {
position: absolute;
top: 0;
bottom: 0;
right: 5px;
height: 100%;
width: 0.875em;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-end: 5px;
block-size: 100%;
inline-size: 0.875em;
color: $fallback--text;
color: var(--inputText, $fallback--text);
line-height: 2;

14
src/components/selectable_list/selectable_list.vue
View file

@ -59,7 +59,7 @@
align-items: center;
> * {
min-width: 0;
min-inline-size: 0;
}
}
@ -76,10 +76,11 @@
&-header {
display: flex;
align-items: center;
padding: 0.6em 0;
border-bottom: 2px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
padding-block: 0.6em;
padding-inline: 0;
border-block-end: 2px solid;
border-block-end-color: $fallback--border;
border-block-end-color: var(--border, $fallback--border);
&-actions {
flex: 1;
@ -87,7 +88,8 @@
}
&-checkbox-wrapper {
padding: 0 10px;
padding-block: 0;
padding-inline: 10px;
flex: none;
}
}

5
src/components/settings_modal/helpers/modified_indicator.vue
View file

@ -43,8 +43,9 @@ export default {
position: relative;
.modified-tooltip {
margin: 0.5em 1em;
min-width: 10em;
margin-block: 0.5em;
margin-inline: 1em;
min-inline-size: 10em;
text-align: center;
}
}

5
src/components/settings_modal/helpers/server_side_indicator.vue
View file

@ -43,8 +43,9 @@ export default {
position: relative;
.serverside-tooltip {
margin: 0.5em 1em;
min-width: 10em;
margin-block: 0.5em;
margin-inline: 1em;
min-inline-size: 10em;
text-align: center;
}
}

37
src/components/settings_modal/settings_modal.scss
View file

@ -5,12 +5,12 @@
.setting-list,
.option-list {
list-style-type: none;
padding-left: 2em;
padding-inline-start: 2em;
li {
margin-bottom: 0.5em;
margin-block-end: 0.5em;
}
.suboptions {
margin-top: 0.3em
margin-block-start: 0.3em
}
}
@ -18,13 +18,13 @@
.settings-modal-panel {
/* Explanation:
* Modal is positioned vertically centered.
* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
* 100vb - 100% = Distance between modal's top+bottom boundaries and screen
* (100vb - 100%) / 2 = Distance between bottom (or top) boundary and screen
* + 100% - we move modal completely off-screen, it's top boundary touches
* bottom of the screen
* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
*/
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
transform: translateY(calc(((100vb - 100%) / 2 + 100%) - 50px));
@media all and (max-width: 800px) {
/* For mobile, the modal takes 100% of the available screen.
@ -40,23 +40,24 @@
transition: transform;
transition-timing-function: ease-in-out;
transition-duration: 300ms;
width: 1000px;
max-width: 90vw;
height: 90vh;
inline-size: 1000px;
max-inline-size: 90vi;
block-size: 90vb;
@media all and (max-width: 800px) {
max-width: 100vw;
height: 100%;
max-inline-size: 100vi;
block-size: 100%;
}
>.panel-body {
height: 100%;
block-size: 100%;
overflow-y: hidden;
.btn {
min-height: 2em;
min-width: 10em;
padding: 0 2em;
min-block-size: 2em;
min-inline-size: 10em;
padding-block: 0;
padding-inline: 2em;
}
}
}
@ -64,7 +65,7 @@
.settings-footer {
display: flex;
>* {
margin-right: 0.5em;
margin-inline-end: 0.5em;
}
.extra-content {
@ -74,8 +75,8 @@
.logout-button {
position: absolute;
right: 20px;
padding-right: 10px;
inset-inline-end: 20px;
padding-inline-end: 10px;
@media all and (max-width: 800px) {
display: none;

31
src/components/settings_modal/settings_modal_content.scss
View file

@ -1,18 +1,19 @@
@import 'src/_variables.scss';
.settings_tab-switcher {
height: 100%;
block-size: 100%;
.setting-item {
border-bottom: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
border-block-end: 2px solid var(--fg, $fallback--fg);
margin-block: 1em 1.4em;
margin-inline: 1em;
padding-block-end: 1.4em;
> div,
> label {
display: block;
margin-bottom: .5em;
margin-block-end: .5em;
&:last-child {
margin-bottom: 0;
margin-block-end: 0;
}
}
@ -21,24 +22,24 @@
.option-list {
margin: 0;
padding-left: .5em;
padding-inline-start: .5em;
}
}
&:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 1em;
border-block-end: none;
padding-block-end: 0;
margin-block-end: 1em;
}
select {
min-width: 10em;
min-inline-size: 10em;
}
textarea {
width: 100%;
max-width: 100%;
height: 100px;
inline-size: 100%;
max-inline-size: 100%;
block-size: 100px;
}
.unavailable,
@ -48,7 +49,7 @@
}
.number-input {
max-width: 6em;
max-inline-size: 6em;
}
}
}

2
src/components/settings_modal/tabs/filtering_tab.vue
View file

@ -76,7 +76,7 @@
<textarea
id="muteWords"
v-model="muteWordsString"
class="resize-height"
class="resize-block-size"
/>
<div>{{ $t('settings.filtering_explanation') }}</div>
</li>

6
src/components/settings_modal/tabs/general_tab.vue
View file

@ -612,11 +612,11 @@
<script src="./general_tab.js"></script>
<style lang="scss">
.settings-profile {
margin-bottom: 1em;
margin-block-end: 1em;
}
#settings-profile-new-name {
margin-left: 1em;
margin-right: 1em;
margin-inline-start: 1em;
margin-inline-end: 1em;
}
</style>

15
src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
View file

@ -1,18 +1,19 @@
.mutes-and-blocks-tab {
height: 100%;
block-size: 100%;
.usersearch-wrapper {
padding: 1em;
}
.bulk-actions {
text-align: right;
padding: 0 1em;
min-height: 2em;
text-align: end;
padding-block: 0;
padding-inline: 1em;
min-block-size: 2em;
}
.bulk-action-button {
width: 10em
inline-size: 10em
}
.domain-mute-form {
@ -23,7 +24,7 @@
.domain-mute-button {
align-self: flex-end;
margin-top: 1em;
width: 10em
margin-block-start: 1em;
inline-size: 10em
}
}

64
src/components/settings_modal/tabs/profile_tab.scss
View file

@ -5,25 +5,25 @@
}
.expire-posts-days {
margin-left: 1em;
margin-inline-start: 1em;
}
.visibility-tray {
padding-top: 5px;
padding-block-start: 5px;
}
input[type=file] {
padding: 5px;
height: auto;
block-size: auto;
}
.banner-background-preview {
max-width: 100%;
width: 300px;
max-inline-size: 100%;
inline-size: 300px;
position: relative;
img {
width: 100%;
inline-size: 100%;
}
}
@ -33,33 +33,33 @@
}
.name-changer {
width: 100%;
inline-size: 100%;
}
.current-avatar-container {
position: relative;
width: 150px;
height: 150px;
inline-size: 150px;
block-size: 150px;
}
.current-avatar {
display: block;
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
}
.reset-button {
position: absolute;
top: 0.2em;
right: 0.2em;
inset-block-start: 0.2em;
inset-inline-end: 0.2em;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
background-color: rgba(0, 0, 0, 0.6);
opacity: 0.7;
width: 1.5em;
height: 1.5em;
inline-size: 1.5em;
block-size: 1.5em;
text-align: center;
line-height: 1.5em;
font-size: 1.5em;
@ -75,14 +75,14 @@
}
.oauth-tokens {
width: 100%;
inline-size: 100%;
th {
text-align: left;
text-align: start;
}
.actions {
text-align: right;
text-align: end;
}
}
@ -91,12 +91,13 @@
}
&-bulk-actions {
text-align: right;
padding: 0 1em;
min-height: 2em;
text-align: end;
padding-block: 0;
padding-inline: 1em;
min-block-size: 2em;
button {
width: 10em;
inline-size: 10em;
}
}
@ -107,13 +108,13 @@
button {
align-self: flex-end;
margin-top: 1em;
width: 10em;
margin-block-start: 1em;
inline-size: 10em;
}
}
.setting-subitem {
margin-left: 1.75em;
margin-inline-start: 1.75em;
}
.profile-fields {
@ -121,15 +122,18 @@
& > .emoji-input {
flex: 1 1 auto;
margin: 0 0.2em 0.5em;
min-width: 0;
margin-block: 0 0.5em;
margin-inline: 0.2em;
min-inline-size: 0;
}
.delete-field {
width: 20px;
inline-size: 20px;
align-self: center;
margin: 0 0.2em 0.5em;
padding: 0 0.5em;
margin-block: 0 0.5em;
margin-inline: 0.2em;
padding-block: 0;
padding-inline: 0.5em;
}
}
}

2
src/components/settings_modal/tabs/profile_tab.vue
View file

@ -22,7 +22,7 @@
>
<textarea
v-model="newBio"
class="bio resize-height"
class="bio resize-block-size"
/>
</EmojiInput>
<p v-if="role === 'admin' || role === 'moderator'">

6
src/components/settings_modal/tabs/security_tab/mfa.vue
View file

@ -157,14 +157,14 @@
flex-wrap: wrap;
.qr-code {
flex: 1;
padding-right: 10px;
padding-inline-end: 10px;
}
.verify { flex: 1; }
.error { margin: 4px 0 0 0; }
.confirm-otp-actions {
button {
width: 15em;
margin-top: 5px;
inline-size: 15em;
margin-block-start: 5px;
}
}

8
src/components/settings_modal/tabs/theme_tab/preview.vue
View file

@ -140,9 +140,9 @@ export default {}
}
.underlay-preview {
position: absolute;
top: 0;
bottom: 0;
left: 10px;
right: 10px;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 10px;
inset-inline-end: 10px;
}
</style>

115
src/components/settings_modal/tabs/theme_tab/theme_tab.scss
View file

@ -1,24 +1,24 @@
@import 'src/_variables.scss';
.theme-tab {
padding-bottom: 2em;
padding-block-end: 2em;
.theme-warning {
display: flex;
align-items: baseline;
margin-bottom: .5em;
margin-block-end: .5em;
.buttons {
.btn {
margin-bottom: .5em;
margin-block-end: .5em;
}
}
}
.preset-switcher {
margin-right: 1em;
margin-inline-end: 1em;
}
.style-control {
display: flex;
align-items: baseline;
margin-bottom: 5px;
margin-block-end: 5px;
.label {
flex: 1;
@ -39,17 +39,17 @@
}
input, select {
min-width: 3em;
min-inline-size: 3em;
margin: 0;
flex: 0;
&[type=number] {
min-width: 5em;
min-inline-size: 5em;
}
&[type=range] {
flex: 1;
min-width: 3em;
min-inline-size: 3em;
align-self: flex-start;
}
}
@ -75,7 +75,7 @@
.color-container{
> h4 {
width: 99%;
inline-size: 99%;
}
flex-wrap: wrap;
justify-content: space-between;
@ -86,21 +86,22 @@
.shadow-container,
.radius-container,
.presets-container {
margin: 1em 1em 0;
margin-block: 1em 0;
margin-inline: 1em;
}
.tab-header {
display: flex;
justify-content: space-between;
align-items: baseline;
width: 100%;
min-height: 30px;
margin-bottom: 1em;
inline-size: 100%;
min-block-size: 30px;
margin-block-end: 1em;
p {
flex: 1;
margin: 0;
margin-right: .5em;
margin-inline-end: .5em;
}
}
@ -109,21 +110,22 @@
flex-direction: column;
.btn {
min-width: 1px;
min-inline-size: 1px;
flex: 0 auto;
padding: 0 1em;
margin-bottom: .5em;
padding-block: 0;
padding-inline: 1em;
margin-block-end: .5em;
}
}
.shadow-selector {
.override {
flex: 1;
margin-left: .5em;
margin-inline-start: .5em;
}
.select-container {
margin-top: -4px;
margin-bottom: -3px;
margin-block-start: -4px;
margin-block-end: -3px;
}
}
@ -136,7 +138,7 @@
.presets,
.import-export {
margin-bottom: .5em;
margin-block-end: .5em;
}
.import-export {
@ -144,26 +146,28 @@
}
.override {
margin-left: .5em;
margin-inline-start: .5em;
}
}
.save-load-options {
flex-wrap: wrap;
margin-top: .5em;
margin-block-start: .5em;
justify-content: center;
.keep-option {
margin: 0 .5em .5em;
min-width: 25%;
margin-block: 0 .5em;
margin-inline: .5em;
min-inline-size: 25%;
}
}
.preview-container {
border-top: 1px dashed;
border-bottom: 1px dashed;
border-block-start: 1px dashed;
border-block-end: 1px dashed;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
margin: 1em 0;
margin-block: 1em;
margin-inline: 0;
padding: 1em;
background-color: var(--wallpaper);
background-image: var(--body-background-image);
@ -179,22 +183,22 @@
flex: 1;
h4 {
margin-bottom: .25em;
margin-block-end: .25em;
}
.icons {
margin-top: .5em;
margin-block-start: .5em;
display: flex;
i {
margin-right: 1em;
margin-inline-end: 1em;
}
}
}
}
.after-post {
margin-top: 1em;
margin-block-start: 1em;
display: flex;
align-items: center;
}
@ -204,15 +208,15 @@
color: black;
font-family: sans-serif;
text-align: center;
margin-right: 1em;
margin-inline-end: 1em;
}
.avatar-alt {
flex: 0 auto;
margin-left: 28px;
margin-inline-start: 28px;
font-size: 12px;
min-width: 20px;
min-height: 20px;
min-inline-size: 20px;
min-block-size: 20px;
line-height: 20px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@ -220,8 +224,8 @@
.avatar {
flex: 0 auto;
width: 48px;
height: 48px;
inline-size: 48px;
block-size: 48px;
font-size: 14px;
line-height: 48px;
}
@ -233,38 +237,39 @@
.checkbox {
display: inline-flex;
align-items: baseline;
margin-right: 1em;
margin-inline-end: 1em;
flex: 1;
}
}
.separator {
margin: 1em;
border-bottom: 1px solid;
border-block-end: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
.btn {
min-width: 3em;
min-inline-size: 3em;
}
}
}
.radius-item,
.color-item {
min-width: 20em;
margin: 5px 6px 0 0;
min-inline-size: 20em;
margin-block: 5px 0;
margin-inline: 0 6px;
display:flex;
flex-direction: column;
flex: 1 1 0;
&.wide {
min-width: 60%
min-inline-size: 60%
}
&:not(.wide):nth-child(2n+1) {
margin-right: 7px;
margin-inline-end: 7px;
}
@ -289,20 +294,20 @@
.theme-color-cl,
.theme-radius-in,
.theme-color-in {
margin-left: 4px;
margin-inline-start: 4px;
}
.theme-radius-in {
min-width: 1em;
min-inline-size: 1em;
}
.theme-radius-in {
max-width: 7em;
max-inline-size: 7em;
flex: 1;
}
.theme-radius-lb{
max-width: 50em;
max-inline-size: 50em;
}
.theme-preview-content {
@ -310,23 +315,23 @@
}
.btn {
margin-left: .25em;
margin-right: .25em;
margin-inline-start: .25em;
margin-inline-end: .25em;
}
}
.extra-content {
.apply-container {
padding-left: 15vw;
padding-inline-start: 15vi;
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-grow: 1;
.btn {
flex-grow: 1;
min-height: 2em;
min-width: 0;
max-width: 10em;
min-block-size: 2em;
min-inline-size: 0;
max-inline-size: 10em;
padding: 0;
}
}

33
src/components/shadow_control/shadow_control.vue
View file

@ -223,11 +223,12 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1em;
margin-block-end: 1em;
.shadow-preview-container,
.shadow-tweak {
margin: 5px 6px 0 0;
margin-block: 5px 0;
margin-inline: 0 6px;
}
.shadow-preview-container {
flex: 0;
@ -237,8 +238,8 @@
$side: 15em;
input[type=number] {
width: 5em;
min-width: 2em;
inline-size: 5em;
min-inline-size: 2em;
}
.x-shift-control,
.y-shift-control {
@ -258,15 +259,15 @@
.x-shift-control .wrap,
input[type=range] {
margin: 0;
width: $side;
height: 2em;
inline-size: $side;
block-size: 2em;
}
.y-shift-control {
flex-direction: column;
align-items: flex-end;
.wrap {
width: 2em;
height: $side;
inline-size: 2em;
block-size: $side;
}
input[type=range] {
transform-origin: 1em 1em;
@ -291,8 +292,8 @@
border-radius: var(--inputRadius, $fallback--inputRadius);
.preview-block {
width: 33%;
height: 33%;
inline-size: 33%;
block-size: 33%;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
border-radius: $fallback--panelRadius;
@ -303,7 +304,7 @@
.shadow-tweak {
flex: 1;
min-width: 280px;
min-inline-size: 280px;
.id-control {
align-items: stretch;
@ -313,13 +314,15 @@
}
.shadow-switcher, .btn {
min-width: 1px;
margin-right: 5px;
min-inline-size: 1px;
margin-inline-end: 5px;
}
.btn {
padding: 0 .4em;
margin: 0 .1em;
padding-block: 0;
padding-inline: .4em;
margin-block: 0;
margin-inline: .1em;
}
}
}

39
src/components/side_drawer/side_drawer.vue
View file

@ -226,10 +226,10 @@
.side-drawer-container {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 100%;
display: flex;
align-items: stretch;
transition-duration: 0s;
@ -246,10 +246,10 @@
}
.side-drawer-darken {
top: 0;
left: 0;
width: 100vw;
height: 100vh;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100vi;
block-size: 100vb;
position: fixed;
z-index: -1;
transition: 0.35s;
@ -270,10 +270,12 @@
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition: 0.35s;
transition-property: transform;
margin: 0 0 0 -100px;
padding: 0 0 1em 100px;
width: 80%;
max-width: 20em;
margin-block: 0 0;
margin-inline: -100px 0;
padding-block: 0 1em;
padding-inline: 100px 0;
inline-size: 80%;
max-inline-size: 20em;
flex: 0 0 80%;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--panelShadow);
@ -287,7 +289,7 @@
--icon: var(--popoverIcon, $fallback--icon);
.badge {
margin-left: 10px;
margin-inline-start: 10px;
}
}
@ -298,8 +300,8 @@
img {
flex: none;
height: 50px;
margin-right: 0.85em;
block-size: 50px;
margin-inline-end: 0.85em;
}
span {
@ -331,7 +333,7 @@
margin: 0;
padding: 0;
border-bottom: 1px solid;
border-block-end: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
@ -346,9 +348,10 @@
a, button {
box-sizing: border-box;
display: block;
height: 3em;
block-size: 3em;
line-height: 3em;
padding: 0 0.7em;
padding-block: 0;
padding-inline: 0.7em;
&:hover {
background-color: $fallback--lightBg;

6
src/components/staff_panel/staff_panel.vue
View file

@ -29,11 +29,11 @@
<style lang="scss">
.staff-group {
padding-left: 1em;
padding-top: 1em;
padding-inline-start: 1em;
padding-block-start: 1em;
.basic-user-card {
padding-left: 0;
padding-inline-start: 0;
}
}

136
src/components/status/status.scss
View file

@ -1,7 +1,7 @@
@import "../../_variables.scss";
.Status {
min-width: 0;
min-inline-size: 0;
white-space: normal;
word-wrap: break-word;
word-break: break-word;
@ -33,7 +33,8 @@
display: flex;
.deleted-text {
margin: 0.5em 0;
margin-block: 0.5em;
margin-inline: 0;
align-items: center;
}
}
@ -47,16 +48,17 @@
}
> * {
min-width: 0;
min-inline-size: 0;
}
&.-repeat {
padding-top: 0;
padding-block-start: 0;
}
}
.pin {
padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0;
padding-block: var(--status-margin, $status-margin) 0;
padding-inline: var(--status-margin, $status-margin);
display: flex;
align-items: center;
justify-content: flex-end;
@ -72,25 +74,25 @@
}
.left-side {
margin-right: var(--status-margin, $status-margin);
margin-inline-end: var(--status-margin, $status-margin);
}
.right-side {
flex: 1;
min-width: 0;
min-inline-size: 0;
}
.usercard {
margin-bottom: var(--status-margin, $status-margin);
margin-block-end: var(--status-margin, $status-margin);
}
.status-username {
white-space: nowrap;
overflow: hidden;
max-width: 85%;
max-inline-size: 85%;
font-weight: bold;
flex-shrink: 1;
margin-right: 0.4em;
margin-inline-end: 0.4em;
text-overflow: ellipsis;
--_still_image-label-scale: 0.25;
@ -98,13 +100,13 @@
}
.status-favicon {
height: 18px;
width: 18px;
margin-right: 0.4em;
block-size: 18px;
inline-size: 18px;
margin-inline-end: 0.4em;
}
.status-heading {
margin-bottom: 0.5em;
margin-block-end: 0.5em;
.emoji {
--emoji-size: 16px;
@ -123,17 +125,17 @@
}
.account-name {
min-width: 1.6em;
margin-right: 0.4em;
min-inline-size: 1.6em;
margin-inline-end: 0.4em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 0;
}
.heading-left {
.heading-inline-start {
display: flex;
min-width: 0;
min-inline-size: 0;
flex-wrap: wrap;
img {
@ -145,14 +147,14 @@
}
}
.heading-right {
.heading-inline-end {
display: flex;
flex-shrink: 0;
.button-unstyled {
padding: 5px;
margin: -5px;
height: min-content;
block-size: min-content;
&:hover svg {
color: $fallback--lightText;
@ -161,7 +163,7 @@
}
.svg-inline--fa {
margin-left: 0.25em;
margin-inline-start: 0.25em;
}
}
@ -171,7 +173,7 @@
}
.timeago {
margin-right: 0.2em;
margin-inline-end: 0.2em;
}
& .heading-reply-row,
@ -179,22 +181,22 @@
position: relative;
align-content: baseline;
font-size: 0.85em;
margin-top: 0.2em;
margin-block-start: 0.2em;
line-height: 130%;
max-width: 100%;
max-inline-size: 100%;
align-items: stretch;
}
& .reply-to-popover,
& .reply-to-no-popover,
& .mentions {
min-width: 0;
margin-right: 0.4em;
min-inline-size: 0;
margin-inline-end: 0.4em;
flex-shrink: 0;
}
.reply-glued-label {
margin-right: 0.5em;
margin-inline-end: 0.5em;
}
.reply-to-popover {
@ -202,9 +204,9 @@
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
border-bottom: 1px solid var(--faint);
inset-block-end: 0;
inline-size: 100%;
border-block-end: 1px solid var(--faint);
pointer-events: none;
}
@ -217,9 +219,9 @@
content: "";
display: block;
position: absolute;
top: 50%;
width: 100%;
border-bottom: 1px solid var(--faint);
inset-block-start: 50%;
inline-size: 100%;
border-block-end: 1px solid var(--faint);
pointer-events: none;
}
}
@ -244,23 +246,24 @@
}
.replies {
margin-top: 0.25em;
margin-block-start: 0.25em;
line-height: 1.3;
font-size: 0.85em;
display: flex;
flex-wrap: wrap;
& > * {
margin-right: 0.4em;
margin-inline-end: 0.4em;
}
}
.reply-link {
height: 17px;
block-size: 17px;
}
.repeat-info {
padding: 0.4em var(--status-margin, $status-margin);
padding-block: 0.4em;
padding-inline: var(--status-margin, $status-margin);
.repeat-icon {
color: $fallback--cGreen;
@ -270,18 +273,18 @@
.repeater-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
margin-left: 28px;
width: 20px;
height: 20px;
margin-inline-start: 28px;
inline-size: 20px;
block-size: 20px;
}
.repeater-name {
text-overflow: ellipsis;
margin-right: 0;
margin-inline-end: 0;
.emoji {
width: 14px;
height: 14px;
inline-size: 14px;
block-size: 14px;
vertical-align: middle;
object-fit: contain;
}
@ -304,21 +307,22 @@
.status-actions {
position: relative;
width: 100%;
inline-size: 100%;
display: flex;
flex-wrap: wrap;
justify-content: left;
margin-top: var(--status-margin, $status-margin);
margin-block-start: var(--status-margin, $status-margin);
> * {
min-width: fit-content;
min-inline-size: fit-content;
flex: 1;
}
}
.muted {
padding: 0.25em 0.6em;
height: 1.2em;
padding-block: 0.25em;
padding-inline: 0.6em;
block-size: 1.2em;
line-height: 1.2em;
text-overflow: ellipsis;
overflow: hidden;
@ -342,7 +346,7 @@
.status-username {
font-weight: normal;
flex: 0 1 auto;
margin-right: 0.2em;
margin-inline-end: 0.2em;
font-size: smaller;
}
@ -352,7 +356,7 @@
.mute-words {
flex: 1 0 5em;
margin-left: 0.2em;
margin-inline-start: 0.2em;
&::before {
content: " ";
@ -361,14 +365,14 @@
.unmute {
flex: 0 0 auto;
margin-left: auto;
margin-inline-start: auto;
display: block;
}
}
.reply-form {
padding-top: 0;
padding-bottom: 0;
padding-block-start: 0;
padding-block-end: 0;
}
.reply-body {
@ -376,8 +380,8 @@
}
.quote-form {
padding-top: 0;
padding-bottom: 0;
padding-block-start: 0;
padding-block-end: 0;
}
.quote-body {
@ -385,11 +389,11 @@
}
.favs-repeated-users {
margin-top: var(--status-margin, $status-margin);
margin-block-start: var(--status-margin, $status-margin);
}
.stats {
width: 100%;
inline-size: 100%;
display: flex;
line-height: 1em;
}
@ -404,15 +408,15 @@
&::before {
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 0;
block-size: 100%;
inline-size: 1px;
inset-inline-start: 0;
background-color: var(--faint, $fallback--faint);
}
}
.stat-count {
margin-right: var(--status-margin, $status-margin);
margin-inline-end: var(--status-margin, $status-margin);
user-select: none;
.stat-title {
@ -435,18 +439,18 @@
@media all and (max-width: 800px) {
.repeater-avatar {
margin-left: 20px;
margin-inline-start: 20px;
}
.post-avatar {
width: 40px;
height: 40px;
inline-size: 40px;
block-size: 40px;
// TODO define those other way somehow?
// stylelint-disable rscss/class-format
&.-compact {
width: 32px;
height: 32px;
inline-size: 32px;
block-size: 32px;
}
}
}

4
src/components/status/status.vue
View file

@ -148,7 +148,7 @@
class="status-heading"
>
<div class="heading-name-row">
<div class="heading-left">
<div class="heading-inline-start">
<h4
v-if="status.user.name_html"
class="status-username"
@ -267,7 +267,7 @@
v-if="!isPreview"
:status-id="status.parent_visible && status.in_reply_to_status_id"
class="reply-to-popover"
style="min-width: 0"
style="min-inline-size: 0"
:class="{ '-strikethrough': !status.parent_visible }"
>
<button

48
src/components/status_body/status_body.scss
View file

@ -7,7 +7,7 @@
.translation {
border: 1px solid var(--accent, $fallback--link);
border-radius: var(--panelRadius, $fallback--panelRadius);
margin-top: 1em;
margin-block-start: 1em;
padding: 0.5em;
}
.emoji {
@ -22,27 +22,27 @@
._mfm_x2_ {
.emoji {
width: 100px;
height: 100px;
inline-size: 100px;
block-size: 100px;
}
}
._mfm_x3_ {
.emoji {
width: 150px;
height: 150px;
inline-size: 150px;
block-size: 150px;
}
}
._mfm_x4_ {
.emoji {
width: 200px;
height: 200px;
inline-size: 200px;
block-size: 200px;
}
}
.attachments {
margin-top: 0.5em;
margin-block-start: 0.5em;
}
& .text,
@ -57,7 +57,7 @@
.summary {
display: block;
font-style: italic;
padding-bottom: 0.5em;
padding-block-end: 0.5em;
}
.text {
@ -68,12 +68,12 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 1.4em;
block-size: 1.4em;
}
}
.summary-wrapper {
margin-bottom: 0.5em;
margin-block-end: 0.5em;
border-style: solid;
border-width: 0 0 1px 0;
border-color: var(--border, $fallback--border);
@ -83,7 +83,7 @@
position: relative;
.summary {
max-height: 2em;
max-block-size: 2em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -98,13 +98,13 @@
&.-tall-status {
position: relative;
height: 220px;
block-size: 220px;
overflow-x: hidden;
overflow-y: hidden;
z-index: 1;
.media-body-wrapper {
min-height: 0;
min-block-size: 0;
mask:
linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
linear-gradient(to top, white, white);
@ -122,21 +122,21 @@
& .cw-status-hider {
display: inline-block;
word-break: break-all;
width: 100%;
inline-size: 100%;
text-align: center;
}
.tall-status-hider {
position: absolute;
height: 70px;
margin-top: 150px;
block-size: 70px;
margin-block-start: 150px;
line-height: 110px;
z-index: 2;
}
.tall-subject-hider {
// position: absolute;
padding-bottom: 0.5em;
padding-block-end: 0.5em;
}
& .status-unhider,
@ -165,12 +165,12 @@
& .body:not(:active),
& .attachments {
max-height: 3.25em;
max-block-size: 3.25em;
}
.body {
white-space: normal;
min-width: 5em;
min-inline-size: 5em;
flex: 5 1 auto;
}
@ -187,11 +187,11 @@
}
.attachments {
margin-top: 0;
margin-block-start: 0;
flex: 1 1 0;
min-width: 5em;
height: 100%;
margin-left: 0.5em;
min-inline-size: 5em;
block-size: 100%;
margin-inline-start: 0.5em;
}
.summary-wrapper {

10
src/components/status_content/status_content.vue
View file

@ -67,12 +67,12 @@
<style lang="scss">
.StatusContent {
flex: 1;
min-width: 0;
min-inline-size: 0;
img, video {
&.emoji {
width: 50px;
height: 50px;
inline-size: 50px;
block-size: 50px;
}
}
@ -89,8 +89,8 @@
animation: none !important;
}
.emoji {
width: 32px !important;
height: 32px !important;
inline-size: 32px !important;
block-size: 32px !important;
}
}
}

10
src/components/status_history_modal/status_history_modal.vue
View file

@ -34,13 +34,13 @@
}
.status-history-modal-panel {
flex-shrink: 0;
margin-top: 25%;
margin-bottom: 2em;
width: 100%;
max-width: 700px;
margin-block-start: 25%;
margin-block-end: 2em;
inline-size: 100%;
max-inline-size: 700px;
@media (orientation: landscape) {
margin-top: 8%;
margin-block-start: 8%;
}
}
</style>

4
src/components/status_popover/status_popover.vue
View file

@ -43,8 +43,8 @@
/* popover styles load on-demand, so we need to override */
.status-popover.popover {
font-size: 1rem;
min-width: 15em;
max-width: 95%;
min-inline-size: 15em;
max-inline-size: 95%;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);

20
src/components/sticker_picker/sticker_picker.vue
View file

@ -35,13 +35,14 @@
@import '../../_variables.scss';
.sticker-picker {
width: 100%;
inline-size: 100%;
display: flex;
flex-direction: column;
position: absolute;
right: 0;
left: 0;
margin: 0 !important;
inset-inline-end: 0;
inset-inline-start: 0;
margin-block: 0;
margin-inline: !important;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
@ -53,19 +54,20 @@
--icon: var(--popoverIcon, $fallback--icon);
.contents {
min-height: 250px;
min-block-size: 250px;
.sticker-picker-content {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
padding-block: 0;
padding-inline: 4px;
.sticker {
display: flex;
flex: 1 1 auto;
margin: 4px;
width: 56px;
height: 56px;
inline-size: 56px;
block-size: 56px;
img {
height: 100%;
block-size: 100%;
&:hover {
filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
}

23
src/components/still-image/still-image.vue
View file

@ -37,19 +37,19 @@
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
visibility: var(--_still-image-canvas-visibility, visible);
}
img {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
&::before {
@ -64,12 +64,13 @@
position: absolute;
line-height: 1;
font-size: 0.7em;
top: 0.5em;
left: 0.5em;
inset-block-start: 0.5em;
inset-inline-start: 0.5em;
background: rgba(127, 127, 127, 0.5);
color: #fff;
display: block;
padding: 2px 4px;
padding-block: 2px;
padding-inline: 4px;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2;

116
src/components/tab_switcher/tab_switcher.scss
View file

@ -4,7 +4,8 @@
display: flex;
.tab-icon {
margin: 0.2em auto;
margin-block: 0.2em;
margin-inline: auto;
display: block;
}
@ -12,39 +13,39 @@
flex-direction: column;
> .tabs {
width: 100%;
inline-size: 100%;
overflow-y: hidden;
overflow-x: auto;
padding-top: 5px;
padding-block-start: 5px;
flex-direction: row;
&::after, &::before {
content: '';
flex: 1 1 auto;
border-bottom: 1px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
border-block-end: 1px solid;
border-block-end-color: $fallback--border;
border-block-end-color: var(--border, $fallback--border);
}
.tab-wrapper {
height: 2em;
block-size: 2em;
&:not(.active)::after {
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
border-block-end: 1px solid;
border-block-end-color: $fallback--border;
border-block-end-color: var(--border, $fallback--border);
}
}
.tab {
width: 100%;
min-width: 1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding-bottom: 99px;
margin-bottom: 6px - 99px;
inline-size: 100%;
min-inline-size: 1px;
border-end-start-radius: 0;
border-end-end-radius: 0;
padding-block-end: 99px;
margin-block-end: 6px - 99px;
}
}
.contents.scrollable-tabs {
@ -73,9 +74,9 @@
flex-shrink: 0;
flex-basis: .5em;
content: '';
border-right: 1px solid;
border-right-color: $fallback--border;
border-right-color: var(--border, $fallback--border);
border-inline-end: 1px solid;
border-inline-end-color: $fallback--border;
border-inline-end-color: var(--border, $fallback--border);
}
&::after {
@ -87,53 +88,53 @@
}
.tab-wrapper {
min-width: 10em;
min-inline-size: 10em;
display: flex;
flex-direction: column;
@media all and (max-width: 800px) {
min-width: 4em;
min-inline-size: 4em;
}
&:not(.active)::after {
top: 0;
right: 0;
bottom: 0;
border-right: 1px solid;
border-right-color: $fallback--border;
border-right-color: var(--border, $fallback--border);
inset-block-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
border-inline-end: 1px solid;
border-inline-end-color: $fallback--border;
border-inline-end-color: var(--border, $fallback--border);
}
&::before {
flex: 0 0 6px;
content: '';
border-right: 1px solid;
border-right-color: $fallback--border;
border-right-color: var(--border, $fallback--border);
border-inline-end: 1px solid;
border-inline-end-color: $fallback--border;
border-inline-end-color: var(--border, $fallback--border);
}
&:last-child .tab {
margin-bottom: 0;
margin-block-end: 0;
}
}
.tab {
flex: 1;
box-sizing: content-box;
min-width: 10em;
min-width: 1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding-left: 1em;
padding-right: calc(1em + 200px);
margin-right: -200px;
margin-left: 1em;
min-inline-size: 10em;
min-inline-size: 1px;
border-start-end-radius: 0;
border-end-end-radius: 0;
padding-inline-start: 1em;
padding-inline-end: calc(1em + 200px);
margin-inline-end: -200px;
margin-inline-start: 1em;
@media all and (max-width: 800px) {
padding-left: .25em;
padding-right: calc(.25em + 200px);
margin-right: calc(.25em - 200px);
margin-left: .25em;
padding-inline-start: .25em;
padding-inline-end: calc(.25em + 200px);
margin-inline-end: calc(.25em - 200px);
margin-inline-start: .25em;
.text {
display: none
}
@ -144,13 +145,13 @@
.contents {
flex: 1 0 auto;
min-height: 0px;
min-block-size: 0px;
.hidden {
display: none;
}
.full-height:not(.hidden) {
height: 100%;
block-size: 100%;
display: flex;
flex-direction: column;
> *:not(.mobile-label) {
@ -166,7 +167,8 @@
.tab {
position: relative;
white-space: nowrap;
padding: 6px 1em;
padding-block: 6px;
padding-inline: 1em;
&:not(.active) {
z-index: 4;
@ -184,9 +186,9 @@
}
img {
max-height: 26px;
max-block-size: 26px;
vertical-align: top;
margin-top: -5px;
margin-block-start: -5px;
}
}
@ -216,12 +218,12 @@
}
.mobile-label {
padding-left: .3em;
padding-bottom: .25em;
margin-top: .5em;
margin-left: .2em;
margin-bottom: .25em;
border-bottom: 1px solid var(--border, $fallback--border);
padding-inline-start: .3em;
padding-block-end: .25em;
margin-block-start: .5em;
margin-inline-start: .2em;
margin-block-end: .25em;
border-block-end: 1px solid var(--border, $fallback--border);
@media all and (min-width: 800px) {
display: none;

4
src/components/thread_tree/thread_tree.vue
View file

@ -121,8 +121,8 @@
<style lang="scss">
@import '../../_variables.scss';
.thread-tree-replies {
margin-left: var(--status-margin, $status-margin);
border-left: 2px solid var(--border, $fallback--border);
margin-inline-start: var(--status-margin, $status-margin);
border-inline-start: 2px solid var(--border, $fallback--border);
}
.thread-tree-replies-hidden {

Some files were not shown because too many files have changed in this diff Show more