RTL Support #258

Open
yheuhtozr wants to merge 5 commits from yheuhtozr/pleroma-fe:rtl-enabled into develop
122 changed files with 1477 additions and 1262 deletions

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 {
@ -835,3 +844,26 @@ option {
.fade-leave-active {
opacity: 0;
}
// Those containers are not affected by
// external directionality.
.site-name,
.status-username,
.account-name,
.shortName,
.userNameFull,
.userName,
.serverName,
.StatusBody > .body,
.user-card-bio,
.search-result .hashtag a,
.panel-body::before,
.form-control#username:not(:placeholder-shown), .form-control#password,
.emoji-search > .form-control,
.form-post-subject, .form-post-subject + .emoji-picker-icon, .main-input,
.name-changer#username, textarea.bio, .profile-fields input:not(:placeholder-shown),
.name-changer#username + .emoji-picker-icon, textarea.bio + .emoji-picker-icon,
input[type=email], input[type=password], input[type=number] {
unicode-bidi: isolate;
direction: initial;
}

View File

@ -2,6 +2,7 @@
<div
id="app-loaded"
:style="bgStyle"
:dir="$t('_locale.dir')"
>
<div
id="app_bg_wrapper"

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 {

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

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

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

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>

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

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;

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

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>

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>

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>

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

View File

@ -21,6 +21,7 @@
:id="name + '-t'"
class="textColor unstyled"
type="text"
dir="ltr"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)"
@ -112,7 +113,7 @@ export default {
<style lang="scss">
.color-control {
input.text-input {
max-width: 7em;
max-inline-size: 7em;
flex: 1;
}
}

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>

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 {

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

View File

@ -30,33 +30,37 @@
// 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);
[dir="rtl"] & {
transform: translateX(50%);
}
.dialog-modal-heading {
.title {
@ -66,7 +70,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 +79,18 @@
.dialog-modal-footer {
margin: 0;
padding: .5em .5em;
padding-block: .5em;
padding-inline: .5em;
background-color: $fallback--bg;