moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use stylelint

This commit is contained in:
tusooa 2023-01-09 13:02:16 -05:00
parent 38961bc167
commit 7dc2277453
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
125 changed files with 984 additions and 854 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.stylelintrc.json
View File

@ -10,12 +10,17 @@
"declaration-no-important": true, "declaration-no-important": true,
"rscss/no-descendant-combinator": false, "rscss/no-descendant-combinator": false,
"rscss/class-format": [ "rscss/class-format": [
true, false,
{ {
"component": "pascal-case", "component": "pascal-case",
"variant": "^-[a-z]\\w+", "variant": "^-[a-z]\\w+",
"element": "^[a-z]\\w+" "element": "^[a-z]\\w+"
} }
] ],
"selector-class-pattern": null,
"import-notation": null,
"custom-property-pattern": null,
"keyframes-name-pattern": null,
"scss/operator-no-newline-after": null
} }
} }

3
build/webpack.base.conf.js
View File

@ -6,7 +6,7 @@ var ServiceWorkerWebpackPlugin = require('serviceworker-webpack5-plugin')
var CopyPlugin = require('copy-webpack-plugin'); var CopyPlugin = require('copy-webpack-plugin');
var { VueLoaderPlugin } = require('vue-loader') var { VueLoaderPlugin } = require('vue-loader')
var ESLintPlugin = require('eslint-webpack-plugin'); var ESLintPlugin = require('eslint-webpack-plugin');
var StylelintPlugin = require('stylelint-webpack-plugin');
var env = process.env.NODE_ENV var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -111,6 +111,7 @@ module.exports = {
extensions: ['js', 'vue'], extensions: ['js', 'vue'],
formatter: require('eslint-formatter-friendly') formatter: require('eslint-formatter-friendly')
}), }),
new StylelintPlugin({}),
new VueLoaderPlugin(), new VueLoaderPlugin(),
// This copies Ruffle's WASM to a directory so that JS side can access it // This copies Ruffle's WASM to a directory so that JS side can access it
new CopyPlugin({ new CopyPlugin({

1
package.json
View File

@ -120,6 +120,7 @@
"stylelint-config-recommended-vue": "^1.4.0", "stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "29.0.0", "stylelint-config-standard": "29.0.0",
"stylelint-rscss": "0.4.0", "stylelint-rscss": "0.4.0",
"stylelint-webpack-plugin": "^3.3.0",
"vue-loader": "17.0.1", "vue-loader": "17.0.1",
"vue-style-loader": "4.1.3", "vue-style-loader": "4.1.3",
"webpack": "5.75.0", "webpack": "5.75.0",

78
src/App.scss
View File

@ -1,5 +1,7 @@
// stylelint-disable rscss/class-format // stylelint-disable rscss/class-format
@import './_variables.scss'; /* stylelint-disable no-descending-specificity */
@import "./variables";
@import "./panel";
:root { :root {
--navbar-height: 3.5rem; --navbar-height: 3.5rem;
@ -123,7 +125,7 @@ h4 {
font-weight: 1000; font-weight: 1000;
} }
i[class*=icon-], i[class*="icon-"],
.svg-inline--fa, .svg-inline--fa,
.iconLetter { .iconLetter {
color: $fallback--icon; color: $fallback--icon;
@ -132,7 +134,7 @@ i[class*=icon-],
.button-unstyled:hover, .button-unstyled:hover,
a:hover { a:hover {
> i[class*=icon-], > i[class*="icon-"],
> .svg-inline--fa, > .svg-inline--fa,
> .iconLetter { > .iconLetter {
color: var(--text); color: var(--text);
@ -141,12 +143,11 @@ a:hover {
nav { nav {
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
color: var(--topBarText);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg); background-color: var(--topBar, $fallback--fg);
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow); box-shadow: var(--topBarShadow);
box-sizing: border-box; box-sizing: border-box;
height: var(--navbar-height); height: var(--navbar-height);
@ -191,13 +192,11 @@ nav {
} }
.underlay { .underlay {
grid-column-start: 1; grid-column: 1 / span 3;
grid-column-end: span 3; grid-row: 1 / 1;
grid-row-start: 1;
grid-row-end: 1;
pointer-events: none; pointer-events: none;
background-color: rgba(0, 0, 0, 0.15); background-color: rgb(0 0 0 / 15%);
background-color: var(--underlay, rgba(0, 0, 0, 0.15)); background-color: var(--underlay, rgb(0 0 0 / 15%));
z-index: -1000; z-index: -1000;
} }
@ -215,8 +214,10 @@ nav {
grid-template-columns: grid-template-columns:
var(--effectiveSidebarColumnWidth) var(--effectiveSidebarColumnWidth)
var(--effectiveContentColumnWidth); var(--effectiveContentColumnWidth);
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
grid-template-areas: "sidebar content"; grid-template-areas: "sidebar content";
grid-template-rows: 1fr; grid-template-rows: 1fr;
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto;
align-content: flex-start; align-content: flex-start;
@ -231,8 +232,7 @@ nav {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
box-sizing: border-box; box-sizing: border-box;
grid-row-start: 1; grid-row: 1 / 1;
grid-row-end: 1;
margin: 0 calc(var(--___columnMargin) / 2); margin: 0 calc(var(--___columnMargin) / 2);
padding: calc(var(--___columnMargin)) 0; padding: calc(var(--___columnMargin)) 0;
row-gap: var(--___columnMargin); row-gap: var(--___columnMargin);
@ -307,7 +307,7 @@ nav {
align-content: start; align-content: start;
} }
&.-reverse:not(.-wide):not(.-mobile) { &.-reverse:not(.-wide, .-mobile) {
grid-template-columns: grid-template-columns:
var(--effectiveContentColumnWidth) var(--effectiveContentColumnWidth)
var(--effectiveSidebarColumnWidth); var(--effectiveSidebarColumnWidth);
@ -336,11 +336,8 @@ nav {
padding: 0; padding: 0;
.column { .column {
margin-left: 0;
margin-right: 0;
padding-top: 0; padding-top: 0;
margin-top: var(--navbar-height); margin-top: var(--navbar-height) 0 0 0;
margin-bottom: 0;
} }
.panel-heading, .panel-heading,
@ -389,7 +386,7 @@ nav {
background: transparent; background: transparent;
} }
i[class*=icon-], i[class*="icon-"],
.svg-inline--fa { .svg-inline--fa {
color: $fallback--text; color: $fallback--text;
color: var(--btnText, $fallback--text); color: var(--btnText, $fallback--text);
@ -400,12 +397,15 @@ nav {
} }
&:hover { &:hover {
box-shadow: 0 0 4px rgba(255, 255, 255, 0.3); box-shadow: 0 0 4px rgb(255 255 255 / 30%);
box-shadow: var(--buttonHoverShadow); box-shadow: var(--buttonHoverShadow);
} }
&:active { &:active {
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset; box-shadow:
0 0 4px 0 rgb(255 255 255 / 30%),
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow); box-shadow: var(--buttonPressedShadow);
color: $fallback--text; color: $fallback--text;
color: var(--btnPressedText, $fallback--text); color: var(--btnPressedText, $fallback--text);
@ -438,7 +438,10 @@ nav {
color: var(--btnToggledText, $fallback--text); color: var(--btnToggledText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnToggled, $fallback--fg); background-color: var(--btnToggled, $fallback--fg);
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset; box-shadow:
0 0 4px 0 rgb(255 255 255 / 30%),
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow); box-shadow: var(--buttonPressedShadow);
svg, svg,
@ -503,7 +506,10 @@ textarea,
border: none; border: none;
border-radius: $fallback--inputRadius; border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset; box-shadow:
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset,
0 0 2px 0 rgb(0 0 0 / 100%) inset;
box-shadow: var(--inputShadow); box-shadow: var(--inputShadow);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--input, $fallback--fg); background-color: var(--input, $fallback--fg);
@ -521,13 +527,13 @@ textarea,
padding: 0 var(--_padding); padding: 0 var(--_padding);
&:disabled, &:disabled,
&[disabled=disabled], &[disabled="disabled"],
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; opacity: 0.5;
} }
&[type=range] { &[type="range"] {
background: none; background: none;
border: none; border: none;
margin: 0; margin: 0;
@ -535,7 +541,7 @@ textarea,
flex: 1; flex: 1;
} }
&[type=radio] { &[type="radio"] {
display: none; display: none;
&:checked + label::before { &:checked + label::before {
@ -555,7 +561,7 @@ textarea,
+ label::before { + label::before {
flex-shrink: 0; flex-shrink: 0;
display: inline-block; display: inline-block;
content: ''; content: "";
transition: box-shadow 200ms; transition: box-shadow 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
@ -575,7 +581,7 @@ textarea,
} }
} }
&[type=checkbox] { &[type="checkbox"] {
display: none; display: none;
&:checked + label::before { &:checked + label::before {
@ -594,7 +600,7 @@ textarea,
+ label::before { + label::before {
flex-shrink: 0; flex-shrink: 0;
display: inline-block; display: inline-block;
content: '✓'; content: "✓";
transition: color 200ms; transition: color 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
@ -634,10 +640,10 @@ option {
} }
.hide-number-spinner { .hide-number-spinner {
-moz-appearance: textfield; appearance: textfield;
&[type=number]::-webkit-inner-spin-button, &[type="number"]::-webkit-inner-spin-button,
&[type=number]::-webkit-outer-spin-button { &[type="number"]::-webkit-outer-spin-button {
opacity: 0; opacity: 0;
display: none; display: none;
} }
@ -669,8 +675,6 @@ option {
} }
} }
@import './panel.scss';
.fa { .fa {
color: grey; color: grey;
} }
@ -686,7 +690,7 @@ option {
max-width: 10em; max-width: 10em;
min-width: 1.7em; min-width: 1.7em;
height: 1.3em; height: 1.3em;
padding: 0.15em 0.15em; padding: 0.15em;
vertical-align: middle; vertical-align: middle;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -789,7 +793,8 @@ option {
.fa-old-padding { .fa-old-padding {
&.iconLetter, &.iconLetter,
&.svg-inline--fa, &-layer { &.svg-inline--fa,
&-layer {
padding: 0 0.3em; padding: 0 0.3em;
} }
} }
@ -883,3 +888,4 @@ option {
.fade-leave-active { .fade-leave-active {
opacity: 0; opacity: 0;
} }
/* stylelint-enable no-descending-specificity */

5
src/_mixins.scss
View File

@ -1,13 +1,14 @@
@mixin unfocused-style { @mixin unfocused-style {
@content; @content;
&:focus:not(:focus-visible):not(:hover) { &:focus:not(:focus-visible, :hover) {
@content; @content;
} }
} }
@mixin focused-style { @mixin focused-style {
&:hover, &:focus { &:hover,
&:focus {
@content; @content;
} }

14
src/_variables.scss
View File

@ -4,20 +4,20 @@ $darkened-background: whitesmoke;
$fallback--bg: #121a24; $fallback--bg: #121a24;
$fallback--fg: #182230; $fallback--fg: #182230;
$fallback--faint: rgba(185, 185, 186, .5); $fallback--faint: rgb(185 185 186 / 50%);
$fallback--text: #b9b9ba; $fallback--text: #b9b9ba;
$fallback--link: #d8a070; $fallback--link: #d8a070;
$fallback--icon: #666; $fallback--icon: #666;
$fallback--lightBg: rgb(21, 30, 42); $fallback--lightBg: rgb(21 30 42);
$fallback--lightText: #b9b9ba; $fallback--lightText: #b9b9ba;
$fallback--border: #222; $fallback--border: #222;
$fallback--cRed: #ff0000; $fallback--cRed: #f00;
$fallback--cBlue: #0095ff; $fallback--cBlue: #0095ff;
$fallback--cGreen: #0fa00f; $fallback--cGreen: #0fa00f;
$fallback--cOrange: orange; $fallback--cOrange: orange;
$fallback--alertError: rgba(211,16,20,.5); $fallback--alertError: rgb(211 16 20 / 50%);
$fallback--alertWarning: rgba(111,111,20,.5); $fallback--alertWarning: rgb(111 111 20 / 50%);
$fallback--panelRadius: 10px; $fallback--panelRadius: 10px;
$fallback--checkboxRadius: 2px; $fallback--checkboxRadius: 2px;
@ -29,6 +29,8 @@ $fallback--avatarAltRadius: 10px;
$fallback--attachmentRadius: 10px; $fallback--attachmentRadius: 10px;
$fallback--chatMessageRadius: 10px; $fallback--chatMessageRadius: 10px;
$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; $fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
0 1px 0 0 rgb(255 255 255 / 20%) inset,
0 -1px 0 0 rgb(0 0 0 / 20%) inset;
$status-margin: 0.75em; $status-margin: 0.75em;

3
src/components/about/about.vue
View File

@ -9,6 +9,3 @@
</template> </template>
<script src="./about.js"></script> <script src="./about.js"></script>
<style lang="scss">
</style>

3
src/components/account_actions/account_actions.vue
View File

@ -80,7 +80,8 @@
<script src="./account_actions.js"></script> <script src="./account_actions.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.AccountActions { .AccountActions {
.ellipsis-button { .ellipsis-button {
width: 2.5em; width: 2.5em;

8
src/components/announcement/announcement.vue
View File

@ -102,19 +102,19 @@
@import "../../variables"; @import "../../variables";
.announcement { .announcement {
border-bottom-width: 1px; border-bottom: 1px solid var(--border, $fallback--border);
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
padding: var(--status-margin, $status-margin); padding: var(--status-margin, $status-margin);
.heading, .body { .heading,
.body {
margin-bottom: var(--status-margin, $status-margin); margin-bottom: var(--status-margin, $status-margin);
} }
.footer { .footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.times { .times {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

3
src/components/announcements_page/announcements_page.vue
View File

@ -67,7 +67,8 @@
.post-form { .post-form {
padding: var(--status-margin, $status-margin); padding: var(--status-margin, $status-margin);
.heading, .body { .heading,
.body {
margin-bottom: var(--status-margin, $status-margin); margin-bottom: var(--status-margin, $status-margin);
} }

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

@ -34,9 +34,10 @@ export default {
height: 100%; height: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.btn { .btn {
margin: .5em; margin: 0.5em;
padding: .5em 2em; padding: 0.5em 2em;
} }
} }
</style> </style>

47
src/components/attachment/attachment.scss
View File

@ -1,4 +1,4 @@
@import '../../_variables.scss'; @import "../../variables";
.Attachment { .Attachment {
display: inline-flex; display: inline-flex;
@ -102,14 +102,13 @@
padding-top: 0.5em; padding-top: 0.5em;
} }
.play-icon { .play-icon {
position: absolute; position: absolute;
font-size: 64px; font-size: 64px;
top: calc(50% - 32px); top: calc(50% - 32px);
left: calc(50% - 32px); left: calc(50% - 32px);
color: rgba(255, 255, 255, 0.75); color: rgb(255 255 255 / 75%);
text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); text-shadow: 0 0 2px rgb(0 0 0 / 40%);
&::before { &::before {
margin: 0; margin: 0;
@ -135,18 +134,32 @@
margin-left: 0.5em; margin-left: 0.5em;
font-size: 1.25em; font-size: 1.25em;
// TODO: theming? hard to theme with unknown background image color // TODO: theming? hard to theme with unknown background image color
background: rgba(230, 230, 230, 0.7); background: rgb(230 230 230 / 70%);
.svg-inline--fa { .svg-inline--fa {
color: rgba(0, 0, 0, 0.6); color: rgb(0 0 0 / 60%);
} }
&:hover .svg-inline--fa { &:hover .svg-inline--fa {
color: rgba(0, 0, 0, 0.9); color: rgb(0 0 0 / 90%);
} }
} }
} }
&.-contain-fit {
img,
canvas {
object-fit: contain;
}
}
&.-cover-fit {
img,
canvas {
object-fit: cover;
}
}
.oembed-container { .oembed-container {
line-height: 1.2em; line-height: 1.2em;
flex: 1 0 100%; flex: 1 0 100%;
@ -160,8 +173,9 @@
.image { .image {
flex: 1; flex: 1;
img { img {
border: 0px; border: 0;
border-radius: 5px; border-radius: 5px;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
@ -172,9 +186,10 @@
flex: 2; flex: 2;
margin: 8px; margin: 8px;
word-break: break-all; word-break: break-all;
h1 { h1 {
font-size: 1rem; font-size: 1rem;
margin: 0px; margin: 0;
} }
} }
} }
@ -251,18 +266,4 @@
&.-loading { &.-loading {
cursor: progress; cursor: progress;
} }
&.-contain-fit {
img,
canvas {
object-fit: contain;
}
}
&.-cover-fit {
img,
canvas {
object-fit: cover;
}
}
} }

4
src/components/autosuggest/autosuggest.vue
View File

@ -24,7 +24,7 @@
<script src="./autosuggest.js"></script> <script src="./autosuggest.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.autosuggest { .autosuggest {
position: relative; position: relative;
@ -50,7 +50,7 @@
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
overflow-y: auto; overflow-y: auto;
z-index: 1; z-index: 1;

2
src/components/avatar_list/avatar_list.vue
View File

@ -17,7 +17,7 @@
<script src="./avatar_list.js"></script> <script src="./avatar_list.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.avatars { .avatars {
display: flex; display: flex;

2
src/components/basic_user_card/basic_user_card.vue
View File

@ -49,7 +49,7 @@
margin: 0; margin: 0;
padding: 0.6em 1em; padding: 0.6em 1em;
--emoji-size: 14px; --emoji-size: 14px;
&-collapsed-content { &-collapsed-content {
margin-left: 0.7em; margin-left: 0.7em;

1
src/components/block_card/block_card.vue
View File

@ -37,6 +37,7 @@
.block-card-content-container { .block-card-content-container {
margin-top: 0.5em; margin-top: 0.5em;
text-align: right; text-align: right;
button { button {
width: 10em; width: 10em;
} }

4
src/components/chat/chat.scss
View File

@ -17,7 +17,7 @@
width: 100%; width: 100%;
overflow: visible; overflow: visible;
min-height: calc(100vh - var(--navbar-height)); min-height: calc(100vh - var(--navbar-height));
margin: 0 0 0 0; margin: 0;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0; border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
@ -66,7 +66,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 2px 4px rgb(0 0 0 / 30%);
z-index: 10; z-index: 10;
transition: 0.35s all; transition: 0.35s all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

4
src/components/chat/chat.vue
View File

@ -95,6 +95,6 @@
<script src="./chat.js"></script> <script src="./chat.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
@import './chat.scss'; @import "./chat";
</style> </style>

2
src/components/chat_list/chat_list.vue
View File

@ -45,7 +45,7 @@
<script src="./chat_list.js"></script> <script src="./chat_list.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.chat-list { .chat-list {
min-height: 25em; min-height: 25em;

9
src/components/chat_list_item/chat_list_item.scss
View File

@ -13,7 +13,7 @@
&:hover { &:hover {
background-color: var(--selectedPost, $fallback--lightBg); background-color: var(--selectedPost, $fallback--lightBg);
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
} }
.chat-list-item-left { .chat-list-item-left {
@ -67,6 +67,7 @@
canvas { canvas {
display: none; display: none;
} }
img { img {
visibility: visible; visibility: visible;
} }
@ -79,13 +80,11 @@
.chat-preview-body { .chat-preview-body {
--emoji-size: 1.4em; --emoji-size: 1.4em;
padding-right: 1em;
} }
.time-wrapper { .time-wrapper {
line-height: var(--post-line-height); line-height: var(--post-line-height);
} }
.chat-preview-body {
padding-right: 1em;
}
} }

4
src/components/chat_list_item/chat_list_item.vue
View File

@ -48,6 +48,6 @@
<script src="./chat_list_item.js"></script> <script src="./chat_list_item.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
@import './chat_list_item.scss'; @import "./chat_list_item";
</style> </style>

94
src/components/chat_message/chat_message.scss
View File

@ -1,12 +1,12 @@
@import '../../_variables.scss'; @import "../../variables";
.chat-message-wrapper { .chat-message-wrapper {
&.hovered-message-chain { &.hovered-message-chain {
.animated.Avatar { .animated.Avatar {
canvas { canvas {
display: none; display: none;
} }
img { img {
visibility: visible; visibility: visible;
} }
@ -28,7 +28,8 @@
.menu-icon { .menu-icon {
cursor: pointer; cursor: pointer;
&:hover, .extra-button-popover.open & { &:hover,
.extra-button-popover.open & {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
@ -54,27 +55,11 @@
width: 32px; width: 32px;
} }
.link-preview, .attachments { .link-preview,
.attachments {
margin-bottom: 1em; margin-bottom: 1em;
} }
.chat-message-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 80%;
min-width: 10em;
width: 100%;
&.with-media {
width: 100%;
.status {
width: 100%;
}
}
}
.status { .status {
border-radius: $fallback--chatMessageRadius; border-radius: $fallback--chatMessageRadius;
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
@ -86,7 +71,7 @@
position: relative; position: relative;
float: right; float: right;
font-size: 0.8em; font-size: 0.8em;
margin: -1em 0 -0.5em 0; margin: -1em 0 -0.5em;
font-style: italic; font-style: italic;
opacity: 0.8; opacity: 0.8;
} }
@ -103,18 +88,54 @@
} }
.pending { .pending {
.status-content.media-body, .created-at { .status-content.media-body,
.created-at {
color: var(--faint); color: var(--faint);
} }
} }
.error { .error {
.status-content.media-body, .created-at { .status-content.media-body,
.created-at {
color: $fallback--cRed; color: $fallback--cRed;
color: var(--badgeNotification, $fallback--cRed); color: var(--badgeNotification, $fallback--cRed);
} }
} }
.chat-message-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 80%;
min-width: 10em;
width: 100%;
}
.outgoing {
display: flex;
flex-flow: row wrap;
align-content: end;
justify-content: flex-end;
a {
color: var(--chatMessageOutgoingLink, $fallback--link);
}
.status {
color: var(--chatMessageOutgoingText, $fallback--text);
background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
}
.chat-message-inner {
align-items: flex-end;
}
.chat-message-menu {
right: 0.4rem;
}
}
.incoming { .incoming {
a { a {
color: var(--chatMessageIncomingLink, $fallback--link); color: var(--chatMessageIncomingLink, $fallback--link);
@ -137,36 +158,17 @@
} }
} }
.outgoing { .chat-message-inner.with-media {
display: flex; width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-content: end;
justify-content: flex-end;
a {
color: var(--chatMessageOutgoingLink, $fallback--link);
}
.status { .status {
color: var(--chatMessageOutgoingText, $fallback--text); width: 100%;
background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
}
.chat-message-inner {
align-items: flex-end;
}
.chat-message-menu {
right: 0.4rem;
} }
} }
.visible { .visible {
opacity: 1; opacity: 1;
} }
} }
.chat-message-date-separator { .chat-message-date-separator {

4
src/components/chat_message/chat_message.vue
View File

@ -33,7 +33,7 @@
<div <div
class="media status" class="media status"
:class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }" :class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }"
style="position: relative" style="position: relative;"
@mouseenter="hovered = true" @mouseenter="hovered = true"
@mouseleave="hovered = false" @mouseleave="hovered = false"
> >
@ -98,6 +98,6 @@
<script src="./chat_message.js"></script> <script src="./chat_message.js"></script>
<style lang="scss"> <style lang="scss">
@import './chat_message.scss'; @import "./chat_message";
</style> </style>

2
src/components/chat_new/chat_new.scss
View File

@ -1,7 +1,7 @@
.chat-new { .chat-new {
.input-wrap { .input-wrap {
display: flex; display: flex;
margin: 0.7em 0.5em 0.7em 0.5em; margin: 0.7em 0.5em;
input { input {
width: 100%; width: 100%;

4
src/components/chat_new/chat_new.vue
View File

@ -46,6 +46,6 @@
<script src="./chat_new.js"></script> <script src="./chat_new.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
@import './chat_new.scss'; @import "./chat_new";
</style> </style>

2
src/components/chat_title/chat_title.vue
View File

@ -26,7 +26,7 @@
<script src="./chat_title.js"></script> <script src="./chat_title.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.chat-title { .chat-title {
display: flex; display: flex;

16
src/components/checkbox/checkbox.vue
View File

@ -32,7 +32,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.checkbox { .checkbox {
position: relative; position: relative;
@ -49,13 +49,13 @@ export default {
right: 0; right: 0;
top: 0; top: 0;
display: block; display: block;
content: '✓'; content: "✓";
transition: color 200ms; transition: color 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
border-radius: $fallback--checkboxRadius; border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0px 0px 2px black inset; box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow); box-shadow: var(--inputShadow);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--input, $fallback--fg); background-color: var(--input, $fallback--fg);
@ -71,15 +71,16 @@ export default {
&.disabled { &.disabled {
.checkbox-indicator::before, .checkbox-indicator::before,
.label { .label {
opacity: .5; opacity: 0.5;
} }
.label { .label {
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
} }
} }
input[type=checkbox] { input[type="checkbox"] {
display: none; display: none;
&:checked + .checkbox-indicator::before { &:checked + .checkbox-indicator::before {
@ -88,15 +89,14 @@ export default {
} }
&:indeterminate + .checkbox-indicator::before { &:indeterminate + .checkbox-indicator::before {
content: '–'; content: "–";
color: $fallback--text; color: $fallback--text;
color: var(--inputText, $fallback--text); color: var(--inputText, $fallback--text);
} }
} }
& > span { & > span {
margin-left: .5em; margin-left: 0.5em;
} }
} }
</style> </style>

19
src/components/color_input/color_input.scss
View File

@ -1,4 +1,4 @@
@import '../../_variables.scss'; @import "../../variables";
.color-input { .color-input {
display: inline-flex; display: inline-flex;
@ -8,7 +8,7 @@
flex: 0 0 0; flex: 0 0 0;
max-width: 9em; max-width: 9em;
align-items: stretch; align-items: stretch;
padding: .2em 8px; padding: 0.2em 8px;
input { input {
background: none; background: none;
@ -31,6 +31,7 @@
min-height: 100%; min-height: 100%;
} }
} }
.computedIndicator, .computedIndicator,
.transparentIndicator { .transparentIndicator {
flex: 0 0 2em; flex: 0 0 2em;
@ -38,22 +39,27 @@
align-self: stretch; align-self: stretch;
min-height: 100%; min-height: 100%;
} }
.transparentIndicator { .transparentIndicator {
// forgot to install counter-strike source, ooops // forgot to install counter-strike source, ooops
background-color: #FF00FF; background-color: #f0f;
position: relative; position: relative;
&::before, &::after {
&::before,
&::after {
display: block; display: block;
content: ''; content: "";
background-color: #000000; background-color: #000;
position: absolute; position: absolute;
height: 50%; height: 50%;
width: 50%; width: 50%;
} }
&::after { &::after {
top: 0; top: 0;
left: 0; left: 0;
} }
&::before { &::before {
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -64,5 +70,4 @@
.label { .label {
flex: 1 1 auto; flex: 1 1 auto;
} }
} }

1
src/components/contrast_ratio/contrast_ratio.vue
View File

@ -87,7 +87,6 @@ export default {
.contrast-ratio { .contrast-ratio {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: -4px; margin-top: -4px;
margin-bottom: 5px; margin-bottom: 5px;

31
src/components/conversation/conversation.vue
View File

@ -210,17 +210,16 @@
<script src="./conversation.js"></script> <script src="./conversation.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.Conversation { .Conversation {
z-index: 1; z-index: 1;
.conversation-dive-to-top-level-box { .conversation-dive-to-top-level-box {
padding: var(--status-margin, $status-margin); padding: var(--status-margin, $status-margin);
border-bottom-width: 1px; border-bottom: 1px solid var(--border, $fallback--border);
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@ -235,52 +234,48 @@
.thread-ancestor.-faded .StatusContent { .thread-ancestor.-faded .StatusContent {
--link: var(--faintLink); --link: var(--faintLink);
--text: var(--faint); --text: var(--faint);
color: var(--text); color: var(--text);
} }
.thread-ancestor-dive-box { .thread-ancestor-dive-box {
padding-left: var(--status-margin, $status-margin); padding-left: var(--status-margin, $status-margin);
border-bottom-width: 1px; border-bottom: 1px solid var(--border, $fallback--border);
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
&, &-inner { &,
&-inner {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
} }
} }
.thread-ancestor-dive-box-inner { .thread-ancestor-dive-box-inner {
padding: var(--status-margin, $status-margin); padding: var(--status-margin, $status-margin);
} }
.conversation-status { .conversation-status {
border-bottom-width: 1px; border-bottom: 1px solid var(--border, $fallback--border);
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
} }
.thread-ancestor-has-other-replies .conversation-status, .thread-ancestor-has-other-replies .conversation-status,
&:last-child .conversation-status,
.thread-ancestor:last-child .conversation-status, .thread-ancestor:last-child .conversation-status,
.thread-ancestor:last-child .thread-ancestor-dive-box, .thread-ancestor:last-child .thread-ancestor-dive-box,
&:last-child .conversation-status,
&.-expanded .thread-tree .conversation-status { &.-expanded .thread-tree .conversation-status {
border-bottom: none; border-bottom: none;
} }
.thread-ancestors + .thread-tree > .conversation-status { .thread-ancestors + .thread-tree > .conversation-status {
border-top-width: 1px; border-top: 1px solid var(--border, $fallback--border);
border-top-style: solid;
border-top-color: var(--border, $fallback--border);
} }
/* expanded conversation in timeline */ /* expanded conversation in timeline */
&.status-fadein.-expanded .thread-body { &.status-fadein.-expanded .thread-body {
border-left-width: 4px; border-left: 4px solid $fallback--cRed;
border-left-style: solid;
border-left-color: $fallback--cRed;
border-left-color: var(--cRed, $fallback--cRed); border-left-color: var(--cRed, $fallback--cRed);
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);

39
src/components/desktop_nav/desktop_nav.scss
View File

@ -1,4 +1,4 @@
@import '../../_variables.scss'; @import "../../variables";
.DesktopNav { .DesktopNav {
width: 100%; width: 100%;
@ -14,9 +14,11 @@
.inner-nav { .inner-nav {
display: grid; display: grid;
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
grid-template-rows: var(--navbar-height); grid-template-rows: var(--navbar-height);
grid-template-columns: 2fr auto 2fr; grid-template-columns: 2fr auto 2fr;
grid-template-areas: "sitename logo actions"; grid-template-areas: "sitename logo actions";
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
box-sizing: border-box; box-sizing: border-box;
padding: 0 1.2em; padding: 0 1.2em;
margin: auto; margin: auto;
@ -27,20 +29,13 @@
--miniColumn: 25rem; --miniColumn: 25rem;
--maxiColumn: 45rem; --maxiColumn: 45rem;
--columnGap: 1em; --columnGap: 1em;
max-width: calc(
var(--sidebarColumnWidth, var(--miniColumn)) +
var(--contentColumnWidth, var(--maxiColumn)) +
var(--columnGap)
);
}
&.-column-stretch.-wide .inner-nav { max-width:
max-width: calc( calc(
var(--sidebarColumnWidth, var(--miniColumn)) + var(--sidebarColumnWidth, var(--miniColumn)) +
var(--contentColumnWidth, var(--maxiColumn)) + var(--contentColumnWidth, var(--maxiColumn)) +
var(--notifsColumnWidth, var(--miniColumn)) + var(--columnGap)
var(--columnGap) );
);
} }
&.-logoLeft .inner-nav { &.-logoLeft .inner-nav {
@ -48,8 +43,19 @@
grid-template-areas: "logo sitename actions"; grid-template-areas: "logo sitename actions";
} }
&.-column-stretch.-wide .inner-nav {
max-width:
calc(
var(--sidebarColumnWidth, var(--miniColumn)) +
var(--contentColumnWidth, var(--maxiColumn)) +
var(--notifsColumnWidth, var(--miniColumn)) +
var(--columnGap)
);
}
.button-default { .button-default {
&, svg { &,
svg {
color: $fallback--text; color: $fallback--text;
color: var(--btnTopBarText, $fallback--text); color: var(--btnTopBarText, $fallback--text);
} }
@ -70,7 +76,7 @@
color: $fallback--text; color: $fallback--text;
color: var(--btnToggledTopBarText, $fallback--text); color: var(--btnToggledTopBarText, $fallback--text);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--btnToggledTopBar, $fallback--fg) background-color: var(--btnToggledTopBar, $fallback--fg);
} }
} }
@ -82,6 +88,7 @@
transition-duration: 100ms; transition-duration: 100ms;
@media all and (min-width: 800px) { @media all and (min-width: 800px) {
/* stylelint-disable-next-line declaration-no-important */
opacity: 1 !important; opacity: 1 !important;
} }

10
src/components/dialog_modal/dialog_modal.vue
View File

@ -25,7 +25,7 @@
<script src="./dialog_modal.js"></script> <script src="./dialog_modal.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
// TODO: unify with other modals. // TODO: unify with other modals.
.dark-overlay { .dark-overlay {
@ -38,7 +38,7 @@
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
background: rgba(27,31,35,.5); background: rgb(27 31 35 / 50%);
z-index: 99; z-index: 99;
} }
} }
@ -65,7 +65,7 @@
.dialog-modal-content { .dialog-modal-content {
margin: 0; margin: 0;
padding: 1rem 1rem; padding: 1rem;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
white-space: normal; white-space: normal;
@ -73,7 +73,7 @@
.dialog-modal-footer { .dialog-modal-footer {
margin: 0; margin: 0;
padding: .5em .5em; padding: 0.5em;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
border-top: 1px solid $fallback--border; border-top: 1px solid $fallback--border;
@ -83,7 +83,7 @@
button { button {
width: auto; width: auto;
margin-left: .5rem; margin-left: 0.5rem;
} }
} }
} }

1
src/components/edit_status_modal/edit_status_modal.vue
View File

@ -26,6 +26,7 @@
.modal-view.edit-form-modal-view { .modal-view.edit-form-modal-view {
align-items: flex-start; align-items: flex-start;
} }
.edit-form-modal-panel { .edit-form-modal-panel {
flex-shrink: 0; flex-shrink: 0;
margin-top: 25%; margin-top: 25%;

24
src/components/emoji_input/emoji_input.vue
View File

@ -91,22 +91,18 @@
<script src="./emoji_input.js"></script> <script src="./emoji_input.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.emoji-input { .emoji-input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
&.with-picker input {
padding-right: 30px;
}
.emoji-picker-icon { .emoji-picker-icon {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: .2em .25em; margin: 0.2em 0.25em;
font-size: 1.3em; font-size: 1.3em;
cursor: pointer; cursor: pointer;
line-height: 24px; line-height: 24px;
@ -123,14 +119,19 @@
margin-top: 2px; margin-top: 2px;
&.hide { &.hide {
display: none display: none;
} }
} }
input, textarea { input,
textarea {
flex: 1 0 auto; flex: 1 0 auto;
} }
&.with-picker input {
padding-right: 30px;
}
.hidden-overlay { .hidden-overlay {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -140,8 +141,10 @@
right: 0; right: 0;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
/* DEBUG STUFF */ /* DEBUG STUFF */
color: red; color: red;
/* set opacity to non-zero to see the overlay */ /* set opacity to non-zero to see the overlay */
.caret { .caret {
@ -151,6 +154,7 @@
} }
} }
} }
.autocomplete { .autocomplete {
&-panel { &-panel {
position: absolute; position: absolute;
@ -160,7 +164,7 @@
display: flex; display: flex;
cursor: pointer; cursor: pointer;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgb(0 0 0 / 40%);
height: 32px; height: 32px;
.image { .image {
@ -169,7 +173,6 @@
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-size: 32px; font-size: 32px;
margin-right: 4px; margin-right: 4px;
img { img {
@ -199,6 +202,7 @@
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--selectedMenuPopover, $fallback--fg); background-color: var(--selectedMenuPopover, $fallback--fg);
color: var(--selectedMenuPopoverText, $fallback--text); color: var(--selectedMenuPopoverText, $fallback--text);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint); --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);

35
src/components/emoji_picker/emoji_picker.scss
View File

@ -1,4 +1,4 @@
@import '../../_variables.scss'; @import "../../variables";
$emoji-picker-header-height: 36px; $emoji-picker-header-height: 36px;
$emoji-picker-header-picture-width: 32px; $emoji-picker-header-picture-width: 32px;
@ -14,7 +14,7 @@ $emoji-picker-emoji-size: 32px;
background-color: var(--popover, $fallback--bg); background-color: var(--popover, $fallback--bg);
color: $fallback--link; color: $fallback--link;
color: var(--popoverText, $fallback--link); color: var(--popoverText, $fallback--link);
--lightText: var(--popoverLightText, $fallback--faint);
--faint: var(--popoverFaintText, $fallback--faint); --faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText); --lightText: var(--popoverLightText, $fallback--lightText);
@ -28,6 +28,7 @@ $emoji-picker-emoji-size: 32px;
max-width: $emoji-picker-header-picture-width; max-width: $emoji-picker-header-picture-width;
height: $emoji-picker-header-picture-height; height: $emoji-picker-header-picture-height;
max-height: $emoji-picker-header-picture-height; max-height: $emoji-picker-header-picture-height;
.still-image { .still-image {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
@ -62,25 +63,18 @@ $emoji-picker-emoji-size: 32px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0px; min-height: 0;
} }
.emoji-tabs { .emoji-tabs {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: row; flex-flow: row nowrap;
flex-wrap: nowrap;
overflow-x: auto; overflow-x: auto;
} }
.emoji-groups {
height: 100%;
min-height: 200px;
}
.additional-tabs { .additional-tabs {
display: flex; display: flex;
flex: 1;
border-left: 1px solid; border-left: 1px solid;
border-left-color: $fallback--icon; border-left-color: $fallback--icon;
border-left-color: var(--icon, $fallback--icon); border-left-color: var(--icon, $fallback--icon);
@ -122,7 +116,7 @@ $emoji-picker-emoji-size: 32px;
} }
.sticker-picker { .sticker-picker {
flex: 1 1 auto flex: 1 1 auto;
} }
.stickers, .stickers,
@ -152,22 +146,27 @@ $emoji-picker-emoji-size: 32px;
} }
&-groups { &-groups {
height: 100%;
min-height: 200px;
flex: 1 1 1px; flex: 1 1 1px;
position: relative; position: relative;
overflow: auto; overflow: auto;
user-select: none; user-select: none;
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, mask:
linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
linear-gradient(to top, white, white); linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
linear-gradient(to top, white, white);
transition: mask-size 150ms; transition: mask-size 150ms;
mask-size: 100% 20px, 100% 20px, auto; mask-size: 100% 20px, 100% 20px, auto;
// Autoprefixed seem to ignore this one, and also syntax is different // Autoprefixed seem to ignore this one, and also syntax is different
-webkit-mask-composite: xor; mask-composite: xor;
mask-composite: exclude; mask-composite: exclude;
&.scrolled { &.scrolled {
&-top { &-top {
mask-size: 100% 20px, 100% 0, auto; mask-size: 100% 20px, 100% 0, auto;
} }
&-bottom { &-bottom {
mask-size: 100% 0, 100% 20px, auto; mask-size: 100% 0, 100% 20px, auto;
} }
@ -201,7 +200,6 @@ $emoji-picker-emoji-size: 32px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 4px; margin: 4px;
cursor: pointer; cursor: pointer;
.emoji-picker-emoji.-custom { .emoji-picker-emoji.-custom {
@ -209,12 +207,11 @@ $emoji-picker-emoji-size: 32px;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
.emoji-picker-emoji.-unicode { .emoji-picker-emoji.-unicode {
font-size: 24px; font-size: 24px;
overflow: hidden; overflow: hidden;
} }
} }
} }
} }

5
src/components/emoji_reactions/emoji_reactions.vue
View File

@ -28,7 +28,7 @@
<script src="./emoji_reactions.js"></script> <script src="./emoji_reactions.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.EmojiReactions { .EmojiReactions {
display: flex; display: flex;
@ -55,6 +55,7 @@
&.not-clickable { &.not-clickable {
cursor: default; cursor: default;
&:hover { &:hover {
box-shadow: $fallback--buttonShadow; box-shadow: $fallback--buttonShadow;
box-shadow: var(--buttonShadow); box-shadow: var(--buttonShadow);
@ -75,10 +76,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
} }
</style> </style>

13
src/components/extra_buttons/extra_buttons.vue
View File

@ -172,15 +172,10 @@
<script src="./extra_buttons.js"></script> <script src="./extra_buttons.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
@import '../../_mixins.scss'; @import "../../mixins";
.ExtraButtons { .ExtraButtons {
/* override of popover internal stuff */
.popover-trigger-button {
width: auto;
}
.popover-trigger { .popover-trigger {
position: static; position: static;
padding: 10px; padding: 10px;
@ -190,10 +185,12 @@
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
} }
.popover-trigger-button { .popover-trigger-button {
/* override of popover internal stuff */
width: auto;
@include unfocused-style { @include unfocused-style {
.focus-marker { .focus-marker {
visibility: hidden; visibility: hidden;

4
src/components/favorite_button/favorite_button.vue
View File

@ -58,8 +58,8 @@
<script src="./favorite_button.js"></script> <script src="./favorite_button.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
@import '../../_mixins.scss'; @import "../../mixins";
.FavoriteButton { .FavoriteButton {
display: flex; display: flex;

5
src/components/flash/flash.vue
View File

@ -42,7 +42,8 @@
<script src="./flash.js"></script> <script src="./flash.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.Flash { .Flash {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@ -78,7 +79,7 @@
.hidden { .hidden {
display: none; display: none;
visibility: 'hidden'; visibility: "hidden";
} }
} }
</style> </style>

3
src/components/follow_card/follow_card.vue
View File

@ -39,9 +39,8 @@
&-content-container { &-content-container {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: row; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
line-height: 1.5em; line-height: 1.5em;
} }

4
src/components/follow_request_card/follow_request_card.vue
View File

@ -22,8 +22,8 @@
<style lang="scss"> <style lang="scss">
.follow-request-card-content-container { .follow-request-card-content-container {
display: flex; display: flex;
flex-direction: row; flex-flow: row wrap;
flex-wrap: wrap;
button { button {
margin-top: 0.5em; margin-top: 0.5em;
margin-right: 0.5em; margin-right: 0.5em;

5
src/components/font_control/font_control.vue
View File

@ -50,17 +50,20 @@
<script src="./font_control.js"></script> <script src="./font_control.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.font-control { .font-control {
input.custom-font { input.custom-font {
min-width: 10em; min-width: 10em;
} }
&.custom { &.custom {
/* TODO Should make proper joiners... */ /* TODO Should make proper joiners... */
.font-switcher { .font-switcher {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.custom-font { .custom-font {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;

100
src/components/gallery/gallery.vue
View File

@ -86,7 +86,7 @@
<script src='./gallery.js'></script> <script src='./gallery.js'></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.Gallery { .Gallery {
.gallery-rows { .gallery-rows {
@ -100,6 +100,53 @@
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
.gallery-row-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-flow: row wrap;
align-content: stretch;
.gallery-item {
margin: 0 0.5em 0 0;
flex-grow: 1;
height: 100%;
box-sizing: border-box;
// to make failed images a bit more noticeable on chromium
min-width: 2em;
&:last-child {
margin: 0;
}
}
&.-grid {
width: 100%;
height: auto;
position: relative;
display: grid;
grid-gap: 0.5em;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
.gallery-item {
margin: 0;
height: 200px;
}
}
}
&.-grid,
&.-minimal {
height: auto;
.gallery-row-inner {
position: relative;
}
}
&:not(:first-child) { &:not(:first-child) {
margin-top: 0.5em; margin-top: 0.5em;
} }
@ -114,7 +161,7 @@
linear-gradient(to top, white, white); linear-gradient(to top, white, white);
/* Autoprefixed seem to ignore this one, and also syntax is different */ /* Autoprefixed seem to ignore this one, and also syntax is different */
-webkit-mask-composite: xor; mask-composite: xor;
mask-composite: exclude; mask-composite: exclude;
} }
} }
@ -138,54 +185,5 @@
padding: 0 2em; padding: 0 2em;
} }
} }
.gallery-row {
&.-grid,
&.-minimal {
height: auto;
.gallery-row-inner {
position: relative;
}
}
}
.gallery-row-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: stretch;
&.-grid {
width: 100%;
height: auto;
position: relative;
display: grid;
grid-column-gap: 0.5em;
grid-row-gap: 0.5em;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
.gallery-item {
margin: 0;
height: 200px;
}
}
}
.gallery-item {
margin: 0 0.5em 0 0;
flex-grow: 1;
height: 100%;
box-sizing: border-box;
// to make failed images a bit more noticeable on chromium
min-width: 2em;
&:last-child {
margin: 0;
}
}
} }
</style> </style>

5
src/components/global_notice_list/global_notice_list.vue
View File

@ -25,7 +25,7 @@
<script src="./global_notice_list.js"></script> <script src="./global_notice_list.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.global-notice-list { .global-notice-list {
position: fixed; position: fixed;
@ -73,6 +73,7 @@
.global-success { .global-success {
background-color: var(--alertPopupSuccess, $fallback--cGreen); background-color: var(--alertPopupSuccess, $fallback--cGreen);
color: var(--alertPopupSuccessText, $fallback--text); color: var(--alertPopupSuccessText, $fallback--text);
.svg-inline--fa { .svg-inline--fa {
color: var(--alertPopupSuccessText, $fallback--text); color: var(--alertPopupSuccessText, $fallback--text);
} }
@ -81,6 +82,7 @@
.global-info { .global-info {
background-color: var(--alertPopupNeutral, $fallback--fg); background-color: var(--alertPopupNeutral, $fallback--fg);
color: var(--alertPopupNeutralText, $fallback--text); color: var(--alertPopupNeutralText, $fallback--text);
.svg-inline--fa { .svg-inline--fa {
color: var(--alertPopupNeutralText, $fallback--text); color: var(--alertPopupNeutralText, $fallback--text);
} }
@ -88,6 +90,7 @@
.close-notice { .close-notice {
padding-right: 0.2em; padding-right: 0.2em;
.svg-inline--fa:hover { .svg-inline--fa:hover {
opacity: 0.6; opacity: 0.6;
} }

5
src/components/link-preview/link-preview.vue
View File

@ -33,7 +33,7 @@
<script src="./link-preview.js"></script> <script src="./link-preview.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.link-preview-card { .link-preview-card {
display: flex; display: flex;
@ -46,6 +46,7 @@
flex-shrink: 0; flex-shrink: 0;
width: 120px; width: 120px;
max-width: 25%; max-width: 25%;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -67,7 +68,7 @@
} }
.card-description { .card-description {
margin: 0.5em 0 0 0; margin: 0.5em 0 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word; word-break: break-word;

2
src/components/list/list.vue
View File

@ -35,7 +35,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.list { .list {
&-item:not(:last-child) { &-item:not(:last-child) {

11
src/components/lists_card/lists_card.vue
View File

@ -21,12 +21,16 @@
<script src="./lists_card.js"></script> <script src="./lists_card.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.list-card { .list-card {
display: flex; display: flex;
} }
.list-name {
flex-grow: 1;
}
.list-name, .list-name,
.button-list-edit { .button-list-edit {
margin: 0; margin: 0;
@ -39,13 +43,10 @@
background-color: var(--selectedMenu, $fallback--lightBg); background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link; color: $fallback--link;
color: var(--selectedMenuText, $fallback--link); color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint); --faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText); --lightText: var(--selectedMenuLightText, $fallback--lightText);
} }
} }
.list-name {
flex-grow: 1;
}
</style> </style>

2
src/components/lists_edit/lists_edit.vue
View File

@ -164,7 +164,7 @@
<script src="./lists_edit.js"></script> <script src="./lists_edit.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.ListEdit { .ListEdit {
--panel-body-padding: 0.5em; --panel-body-padding: 0.5em;

4
src/components/lists_user_search/lists_user_search.vue
View File

@ -27,12 +27,12 @@
<script src="./lists_user_search.js"></script> <script src="./lists_user_search.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.ListsUserSearch { .ListsUserSearch {
.input-wrap { .input-wrap {
display: flex; display: flex;
margin: 0.7em 0.5em 0.7em 0.5em; margin: 0.7em 0.5em;
input { input {
width: 100%; width: 100%;

7
src/components/login_form/login_form.vue
View File

@ -93,7 +93,7 @@
<script src="./login_form.js"></script> <script src="./login_form.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.login-form { .login-form {
display: flex; display: flex;
@ -110,7 +110,7 @@
} }
.login-bottom { .login-bottom {
margin-top: 1.0em; margin-top: 1em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -121,7 +121,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.3em 0.5em 0.6em; padding: 0.3em 0.5em 0.6em;
line-height:24px; line-height: 24px;
} }
.form-bottom { .form-bottom {
@ -142,7 +142,6 @@
.error { .error {
text-align: center; text-align: center;
animation-name: shakeError; animation-name: shakeError;
animation-duration: 0.4s; animation-duration: 0.4s;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;

57
src/components/media_modal/media_modal.vue
View File

@ -120,32 +120,12 @@ $modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2)
$modal-view-button-icon-width: 3em; $modal-view-button-icon-width: 3em;
$modal-view-button-icon-margin: 0.5em; $modal-view-button-icon-margin: 0.5em;
.modal-view.media-modal-view {
z-index: var(--ZI_media_modal);
flex-direction: column;
.modal-view-button-arrow,
.modal-view-button-hide {
opacity: 0.75;
&:focus,
&:hover {
outline: none;
box-shadow: none;
}
&:hover {
opacity: 1;
}
}
overflow: hidden;
}
.media-modal-view { .media-modal-view {
@keyframes media-fadein { @keyframes media-fadein {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
@ -226,7 +206,7 @@ $modal-view-button-icon-margin: 0.5em;
appearance: none; appearance: none;
overflow: visible; overflow: visible;
cursor: pointer; cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
height: $modal-view-button-icon-height; height: $modal-view-button-icon-height;
width: $modal-view-button-icon-width; width: $modal-view-button-icon-width;
@ -236,9 +216,9 @@ $modal-view-button-icon-margin: 0.5em;
width: $modal-view-button-icon-width; width: $modal-view-button-icon-width;
font-size: 1rem; font-size: 1rem;
line-height: $modal-view-button-icon-height; line-height: $modal-view-button-icon-height;
color: #FFF; color: #fff;
text-align: center; text-align: center;
background-color: rgba(0,0,0,.3); background-color: rgb(0 0 0 / 30%);
} }
} }
@ -254,13 +234,14 @@ $modal-view-button-icon-margin: 0.5em;
position: absolute; position: absolute;
top: 0; top: 0;
line-height: $modal-view-button-icon-height; line-height: $modal-view-button-icon-height;
color: #FFF; color: #fff;
text-align: center; text-align: center;
background-color: rgba(0,0,0,.3); background-color: rgb(0 0 0 / 30%);
} }
&--prev { &--prev {
left: 0; left: 0;
.arrow-icon { .arrow-icon {
left: $modal-view-button-icon-margin; left: $modal-view-button-icon-margin;
} }
@ -268,6 +249,7 @@ $modal-view-button-icon-margin: 0.5em;
&--next { &--next {
right: 0; right: 0;
.arrow-icon { .arrow-icon {
right: $modal-view-button-icon-margin; right: $modal-view-button-icon-margin;
} }
@ -278,10 +260,33 @@ $modal-view-button-icon-margin: 0.5em;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
.button-icon { .button-icon {
top: $modal-view-button-icon-margin; top: $modal-view-button-icon-margin;
right: $modal-view-button-icon-margin; right: $modal-view-button-icon-margin;
} }
} }
} }
.modal-view.media-modal-view {
z-index: var(--ZI_media_modal);
flex-direction: column;
.modal-view-button-arrow,
.modal-view-button-hide {
opacity: 0.75;
&:focus,
&:hover {
outline: none;
box-shadow: none;
}
&:hover {
opacity: 1;
}
}
overflow: hidden;
}
</style> </style>

2
src/components/media_upload/media_upload.vue
View File

@ -29,7 +29,7 @@
<script src="./media_upload.js"></script> <script src="./media_upload.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.media-upload { .media-upload {
cursor: pointer; // We use <label> for interactivity... i wonder if it's fine cursor: pointer; // We use <label> for interactivity... i wonder if it's fine

7
src/components/mention_link/mention_link.scss
View File

@ -1,4 +1,4 @@
@import '../../_variables.scss'; @import "../../variables";
.MentionLink { .MentionLink {
position: relative; position: relative;
@ -59,6 +59,7 @@
font-weight: 600; font-weight: 600;
} }
} }
&.-has-selection { &.-has-selection {
color: var(--alertNeutralText, $fallback--text); color: var(--alertNeutralText, $fallback--text);
background-color: var(--alertNeutral, $fallback--fg); background-color: var(--alertNeutral, $fallback--fg);
@ -100,10 +101,6 @@
} }
} }
.full {
pointer-events: none;
}
.serverName.-faded { .serverName.-faded {
color: var(--faintLink, $fallback--link); color: var(--faintLink, $fallback--link);
} }

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

@ -2,7 +2,7 @@
word-break: break-all; word-break: break-all;
.mention-link:not(:first-child)::before { .mention-link:not(:first-child)::before {
content: ' '; content: " ";
} }
.showMoreLess { .showMoreLess {

8
src/components/mobile_nav/mobile_nav.vue
View File

@ -94,7 +94,7 @@
<script src="./mobile_nav.js"></script> <script src="./mobile_nav.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.MobileNav { .MobileNav {
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
@ -127,7 +127,7 @@
} }
.site-name { .site-name {
padding: 0 .3em; padding: 0 0.3em;
display: inline-block; display: inline-block;
} }
@ -156,7 +156,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
box-shadow: 1px 1px 4px rgba(0,0,0,.6); box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
transition-property: transform; transition-property: transform;
transition-duration: 0.25s; transition-duration: 0.25s;
@ -182,7 +182,7 @@
color: var(--topBarText); color: var(--topBarText);
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg); background-color: var(--topBar, $fallback--fg);
box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow); box-shadow: var(--topBarShadow);
.spacer { .spacer {

5
src/components/mobile_post_status_button/mobile_post_status_button.vue
View File

@ -13,7 +13,7 @@
<script src="./mobile_post_status_button.js"></script> <script src="./mobile_post_status_button.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.MobilePostButton { .MobilePostButton {
&.button-default { &.button-default {
@ -30,9 +30,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 2px rgb(0 0 0 / 30%), 0 4px 6px rgb(0 0 0 / 30%);
z-index: 10; z-index: 10;
transition: 0.35s transform; transition: 0.35s transform;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
} }

7
src/components/modal/modal.vue
View File

@ -59,7 +59,7 @@ export default {
&.modal-background { &.modal-background {
pointer-events: initial; pointer-events: initial;
background-color: rgba(0, 0, 0, 0.5); background-color: rgb(0 0 0 / 50%);
} }
&.open { &.open {
@ -69,10 +69,11 @@ export default {
@keyframes modal-background-fadein { @keyframes modal-background-fadein {
from { from {
background-color: rgba(0, 0, 0, 0); background-color: rgb(0 0 0 / 0%);
} }
to { to {
background-color: rgba(0, 0, 0, 0.5); background-color: rgb(0 0 0 / 50%);
} }
} }
</style> </style>

7
src/components/moderation_tools/moderation_tools.vue
View File

@ -166,18 +166,21 @@
<script src="./moderation_tools.js"></script> <script src="./moderation_tools.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.moderation-tools-popover { .moderation-tools-popover {
height: 100%; height: 100%;
.trigger { .trigger {
/* stylelint-disable-next-line declaration-no-important */
display: flex !important; display: flex !important;
height: 100%; height: 100%;
} }
} }
.moderation-tools-button { .moderation-tools-button {
svg,i { svg,
i {
font-size: 0.8em; font-size: 0.8em;
} }
} }

14
src/components/mrf_transparency_panel/mrf_transparency_panel.scss
View File

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

4
src/components/mrf_transparency_panel/mrf_transparency_panel.vue
View File

@ -227,6 +227,6 @@
<script src="./mrf_transparency_panel.js"></script> <script src="./mrf_transparency_panel.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
@import './mrf_transparency_panel.scss'; @import "./mrf_transparency_panel";
</style> </style>

1
src/components/mute_card/mute_card.vue
View File

@ -37,6 +37,7 @@
.mute-card-content-container { .mute-card-content-container {
margin-top: 0.5em; margin-top: 0.5em;
text-align: right; text-align: right;
button { button {
width: 10em; width: 10em;
} }

7
src/components/nav_panel/nav_panel.vue
View File

@ -102,7 +102,7 @@
<script src="./nav_panel.js"></script> <script src="./nav_panel.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.NavPanel { .NavPanel {
.panel { .panel {
@ -169,8 +169,9 @@
} }
.nav-panel-heading { .nav-panel-heading {
// breaks without a unit // breaks without a unit
--panel-heading-height-padding: 0em; // stylelint-disable-next-line length-zero-no-unit
--panel-heading-height-padding: 0px;
} }
} }
</style> </style>

4
src/components/navigation/navigation_entry.vue
View File

@ -63,7 +63,7 @@
<script src="./navigation_entry.js"></script> <script src="./navigation_entry.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.NavigationEntry { .NavigationEntry {
display: flex; display: flex;
@ -102,6 +102,7 @@
background-color: var(--selectedMenu, $fallback--lightBg); background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link; color: $fallback--link;
color: var(--selectedMenuText, $fallback--link); color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint); --faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText); --lightText: var(--selectedMenuLightText, $fallback--lightText);
@ -117,6 +118,7 @@
background-color: var(--selectedMenu, $fallback--lightBg); background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--text; color: $fallback--text;
color: var(--selectedMenuText, $fallback--text); color: var(--selectedMenuText, $fallback--text);
--faint: var(--selectedMenuFaintText, $fallback--faint); --faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText); --lightText: var(--selectedMenuLightText, $fallback--lightText);

3
src/components/navigation/navigation_pins.vue
View File

@ -27,7 +27,8 @@
<script src="./navigation_pins.js"></script> <script src="./navigation_pins.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.NavigationPins { .NavigationPins {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

17
src/components/notification/notification.scss
View File

@ -1,13 +1,14 @@
@import '../../_variables.scss'; @import "../../variables";
// TODO Copypaste from Status, should unify it somehow // TODO Copypaste from Status, should unify it somehow
.Notification { .Notification {
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
--emoji-size: 14px;
--emoji-size: 14px;
&:hover { &:hover {
--_still-image-img-visibility: visible; --_still-image-img-visibility: visible;
@ -54,7 +55,7 @@
margin-left: 0.2em; margin-left: 0.2em;
&::before { &::before {
content: ' '; content: " ";
} }
} }

9
src/components/notifications/notifications.scss
View File

@ -1,4 +1,4 @@
@import '../../_variables.scss'; @import "../../variables";
.Notifications { .Notifications {
&:not(.minimal) { &:not(.minimal) {
@ -25,12 +25,13 @@
&.unseen { &.unseen {
.notification-overlay { .notification-overlay {
background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px) background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
} }
} }
} }
} }
/* stylelint-disable-next-line no-descending-specificity */
.notification { .notification {
box-sizing: border-box; box-sizing: border-box;
@ -38,6 +39,7 @@
canvas { canvas {
display: none; display: none;
} }
img { img {
visibility: visible; visibility: visible;
} }
@ -79,7 +81,8 @@
} }
} }
.follow-text, .move-text { .follow-text,
.move-text {
padding: 0.5em 0; padding: 0.5em 0;
overflow-wrap: break-word; overflow-wrap: break-word;
display: flex; display: flex;

3
src/components/panel_loading/panel_loading.vue
View File

@ -23,7 +23,7 @@ export default {}
</script> </script>
<style lang="scss"> <style lang="scss">
@import 'src/_variables.scss'; @import "src/variables";
.panel-loading { .panel-loading {
display: flex; display: flex;
@ -33,6 +33,7 @@ export default {}
font-size: 2em; font-size: 2em;
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
.loading-text svg { .loading-text svg {
line-height: 0; line-height: 0;
vertical-align: middle; vertical-align: middle;

2
src/components/password_reset/password_reset.vue
View File

@ -77,7 +77,7 @@
<script src="./password_reset.js"></script> <script src="./password_reset.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.password-reset-form { .password-reset-form {
display: flex; display: flex;

12
src/components/poll/poll.vue
View File

@ -90,7 +90,7 @@
<script src="./poll.js"></script> <script src="./poll.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.poll { .poll {
.votes { .votes {
@ -98,9 +98,11 @@
flex-direction: column; flex-direction: column;
margin: 0 0 0.5em; margin: 0 0 0.5em;
} }
.poll-option { .poll-option {
margin: 0.75em 0.5em; margin: 0.75em 0.5em;
} }
.option-result { .option-result {
height: 100%; height: 100%;
display: flex; display: flex;
@ -109,6 +111,7 @@
color: $fallback--lightText; color: $fallback--lightText;
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
} }
.option-result-label { .option-result-label {
display: flex; display: flex;
align-items: center; align-items: center;
@ -116,10 +119,12 @@
z-index: 1; z-index: 1;
word-break: break-word; word-break: break-word;
} }
.result-percentage { .result-percentage {
width: 3.5em; width: 3.5em;
flex-shrink: 0; flex-shrink: 0;
} }
.result-fill { .result-fill {
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -133,20 +138,25 @@
left: 0; left: 0;
transition: width 0.5s; transition: width 0.5s;
} }
.option-vote { .option-vote {
display: flex; display: flex;
align-items: center; align-items: center;
} }
input { input {
width: 3.5em; width: 3.5em;
} }
.footer { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
} }
&.loading * { &.loading * {
cursor: progress; cursor: progress;
} }
.poll-vote-button { .poll-vote-button {
padding: 0 0.5em; padding: 0 0.5em;
margin-right: 0.5em; margin-right: 0.5em;

3
src/components/poll/poll_form.vue
View File

@ -95,7 +95,7 @@
<script src="./poll_form.js"></script> <script src="./poll_form.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.poll-form { .poll-form {
display: flex; display: flex;
@ -117,6 +117,7 @@
.input-container { .input-container {
width: 100%; width: 100%;
input { input {
// Hack: dodge the floating X icon // Hack: dodge the floating X icon
padding-right: 2.5em; padding-right: 2.5em;

37
src/components/popover/popover.vue
View File

@ -41,7 +41,7 @@
<script src="./popover.js" /> <script src="./popover.js" />
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.popover-trigger-button { .popover-trigger-button {
display: inline-block; display: inline-block;
@ -52,31 +52,31 @@
position: fixed; position: fixed;
min-width: 0; min-width: 0;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
box-shadow: var(--popupShadow); box-shadow: var(--popupShadow);
} }
.popover-default { .popover-default {
&:after { &::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 3; z-index: 3;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
pointer-events: none; pointer-events: none;
} }
border-radius: $fallback--btnRadius; border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius); border-radius: var(--btnRadius, $fallback--btnRadius);
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg); background-color: var(--popover, $fallback--bg);
color: $fallback--text; color: $fallback--text;
color: var(--popoverText, $fallback--text); color: var(--popoverText, $fallback--text);
--faint: var(--popoverFaintText, $fallback--faint); --faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText); --lightText: var(--popoverLightText, $fallback--lightText);
@ -87,7 +87,7 @@
.dropdown-menu { .dropdown-menu {
display: block; display: block;
padding: .5rem 0; padding: 0.5rem 0;
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;
list-style: none; list-style: none;
@ -97,7 +97,7 @@
.dropdown-divider { .dropdown-divider {
height: 0; height: 0;
margin: .5rem 0; margin: 0.5rem 0;
overflow: hidden; overflow: hidden;
border-top: 1px solid $fallback--border; border-top: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border); border-top: 1px solid var(--border, $fallback--border);
@ -113,7 +113,7 @@
text-align: inherit; text-align: inherit;
white-space: nowrap; white-space: nowrap;
border: none; border: none;
border-radius: 0px; border-radius: 0;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
width: 100%; width: 100%;
@ -126,7 +126,7 @@
svg { svg {
width: 22px; width: 22px;
margin-right: 0.75rem; margin-right: 0.75rem;
color: var(--menuPopoverIcon, $fallback--icon) color: var(--menuPopoverIcon, $fallback--icon);
} }
} }
@ -137,17 +137,21 @@
} }
} }
&:active, &:hover { &:active,
&:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--selectedMenuPopover, $fallback--lightBg); background-color: var(--selectedMenuPopover, $fallback--lightBg);
box-shadow: none; box-shadow: none;
--btnText: var(--selectedMenuPopoverText, $fallback--link); --btnText: var(--selectedMenuPopoverText, $fallback--link);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint); --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon); --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
svg { svg {
color: var(--selectedMenuPopoverIcon, $fallback--icon); color: var(--selectedMenuPopoverIcon, $fallback--icon);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon); --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
} }
} }
@ -161,16 +165,16 @@
max-height: 22px; max-height: 22px;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
border-radius: 0px; border-radius: 0;
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--input, $fallback--fg); background-color: var(--input, $fallback--fg);
box-shadow: 0px 0px 2px black inset; box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow); box-shadow: var(--inputShadow);
margin-right: 0.75em; margin-right: 0.75em;
&.menu-checkbox-checked::after { &.menu-checkbox-checked::after {
font-size: 1.25em; font-size: 1.25em;
content: '✓'; content: "✓";
} }
&.-radio { &.-radio {
@ -178,16 +182,15 @@
&.menu-checkbox-checked::after { &.menu-checkbox-checked::after {
font-size: 2em; font-size: 2em;
content: '•'; content: "•";
} }
} }
} }
} }
.button-default.dropdown-item { .button-default.dropdown-item {
&, &,
i[class*=icon-] { i[class*="icon-"] {
color: $fallback--text; color: $fallback--text;
color: var(--btnText, $fallback--text); color: var(--btnText, $fallback--text);
} }

87
src/components/post_status_form/post_status_form.vue
View File

@ -331,7 +331,7 @@
<script src="./post_status_form.js"></script> <script src="./post_status_form.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.post-status-form { .post-status-form {
position: relative; position: relative;
@ -378,7 +378,9 @@
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
svg, i {
svg,
i {
margin-left: 0.2em; margin-left: 0.2em;
font-size: 0.8em; font-size: 0.8em;
transform: rotate(90deg); transform: rotate(90deg);
@ -428,36 +430,6 @@
} }
} }
.media-upload-icon, .poll-icon, .emoji-icon {
font-size: 1.85em;
line-height: 1.1;
flex: 1;
padding: 0 0.1em;
display: flex;
align-items: center;
&.selected, &:hover {
// needs to be specific to override icon default color
svg, i, label {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
&.disabled {
svg, i {
cursor: not-allowed;
color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon);
&:hover {
color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon);
}
}
}
}
// Order is not necessary but a good indicator // Order is not necessary but a good indicator
.media-upload-icon { .media-upload-icon {
order: 1; order: 1;
@ -474,16 +446,53 @@
justify-content: right; justify-content: right;
} }
.media-upload-icon,
.poll-icon,
.emoji-icon {
font-size: 1.85em;
line-height: 1.1;
flex: 1;
padding: 0 0.1em;
display: flex;
align-items: center;
&.selected,
&:hover {
// needs to be specific to override icon default color
svg,
i,
label {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
&.disabled {
svg,
i {
cursor: not-allowed;
color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon);
&:hover {
color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon);
}
}
}
}
.error { .error {
text-align: center; text-align: center;
} }
.media-upload-wrapper { .media-upload-wrapper {
margin-right: .2em; margin-right: 0.2em;
margin-bottom: .5em; margin-bottom: 0.5em;
width: 18em; width: 18em;
img, video { img,
video {
object-fit: contain; object-fit: contain;
max-height: 10em; max-height: 10em;
} }
@ -557,18 +566,14 @@
} }
} }
.btn[disabled] {
cursor: not-allowed;
}
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } from { opacity: 0; }
to { opacity: 0.6; } to { opacity: 0.6; }
} }
@keyframes fade-out { @keyframes fade-out {
from { opacity: 0.6; } from { opacity: 0.6; }
to { opacity: 0; } to { opacity: 0; }
} }
.drop-indicator { .drop-indicator {

24
src/components/react_button/react_button.vue
View File

@ -73,8 +73,8 @@
<script src="./react_button.js"></script> <script src="./react_button.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
@import '../../_mixins.scss'; @import "../../mixins";
.ReactButton { .ReactButton {
.reaction-picker-filter { .reaction-picker-filter {
@ -104,20 +104,19 @@
text-align: center; text-align: center;
align-content: flex-start; align-content: flex-start;
user-select: none; user-select: none;
mask:
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
linear-gradient(to top, white, white); linear-gradient(to top, white, white);
transition: mask-size 150ms; transition: mask-size 150ms;
mask-size: 100% 20px, 100% 20px, auto; mask-size: 100% 20px, 100% 20px, auto;
/* Autoprefixed seem to ignore this one, and also syntax is different */ /* Autoprefixed seem to ignore this one, and also syntax is different */
-webkit-mask-composite: xor; mask-composite: xor;
mask-composite: exclude; mask-composite: exclude;
.emoji-button { .emoji-button {
cursor: pointer; cursor: pointer;
flex-basis: 20%; flex-basis: 20%;
line-height: 1.5; line-height: 1.5;
align-content: center; align-content: center;
@ -128,11 +127,6 @@
} }
} }
/* override of popover internal stuff */
.popover-trigger-button {
width: auto;
}
.popover-trigger { .popover-trigger {
padding: 10px; padding: 10px;
margin: -10px; margin: -10px;
@ -141,10 +135,12 @@
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
} }
.popover-trigger-button { .popover-trigger-button {
/* override of popover internal stuff */
width: auto;
@include unfocused-style { @include unfocused-style {
.focus-marker { .focus-marker {
visibility: hidden; visibility: hidden;

6
src/components/registration/registration.vue
View File

@ -277,7 +277,7 @@
<script src="./registration.js"></script> <script src="./registration.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
$validations-cRed: #f04124; $validations-cRed: #f04124;
.registration-form { .registration-form {
@ -321,7 +321,7 @@ $validations-cRed: #f04124;
.form-group--error { .form-group--error {
animation-name: shakeError; animation-name: shakeError;
animation-duration: .6s; animation-duration: 0.6s;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
@ -350,7 +350,7 @@ $validations-cRed: #f04124;
} }
form textarea { form textarea {
line-height:16px; line-height: 16px;
resize: vertical; resize: vertical;
} }

3
src/components/remote_user_resolver/remote_user_resolver.vue
View File

@ -15,6 +15,3 @@
</template> </template>
<script src="./remote_user_resolver.js"></script> <script src="./remote_user_resolver.js"></script>
<style lang="scss">
</style>

5
src/components/reply_button/reply_button.vue
View File

@ -51,8 +51,8 @@
<script src="./reply_button.js"></script> <script src="./reply_button.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
@import '../../_mixins.scss'; @import "../../mixins";
.ReplyButton { .ReplyButton {
display: flex; display: flex;
@ -86,6 +86,5 @@
} }
} }
} }
} }
</style> </style>

2
src/components/report/report.scss
View File

@ -1,4 +1,4 @@
@import '../../_variables.scss'; @import "../../variables";
.Report { .Report {
.report-content { .report-content {

4
src/components/retweet_button/retweet_button.vue
View File

@ -65,8 +65,8 @@
<script src="./retweet_button.js"></script> <script src="./retweet_button.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
@import '../../_mixins.scss'; @import "../../mixins";
.RetweetButton { .RetweetButton {
display: flex; display: flex;

6
src/components/rich_content/rich_content.scss
View File

@ -1,4 +1,4 @@
@import '../../variables'; @import "../../variables";
.RichContent { .RichContent {
blockquote { blockquote {
@ -21,11 +21,11 @@
} }
p { p {
margin: 0 0 1em 0; margin: 0 0 1em;
} }
p:last-child { p:last-child {
margin: 0 0 0 0; margin: 0;
} }
h1 { h1 {

3
src/components/scope_selector/scope_selector.vue
View File

@ -64,10 +64,9 @@
<script src="./scope_selector.js"></script> <script src="./scope_selector.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.ScopeSelector { .ScopeSelector {
.scope { .scope {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;

14
src/components/search/search.vue
View File

@ -148,7 +148,7 @@
<script src="./search.js"></script> <script src="./search.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.search-result-heading { .search-result-heading {
color: $fallback--faint; color: $fallback--faint;
@ -176,7 +176,7 @@
} }
.search-result-footer { .search-result-footer {
border-width: 1px 0 0 0; border-width: 1px 0 0;
border-style: solid; border-style: solid;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
padding: 10px; padding: 10px;
@ -229,11 +229,11 @@
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
} }
.more-statuses-button { .more-statuses-button {
height: 3.5em; height: 3.5em;
line-height: 3.5em; line-height: 3.5em;
} }
</style> </style>

2
src/components/search_bar/search_bar.vue
View File

@ -56,7 +56,7 @@
<script src="./search_bar.js"></script> <script src="./search_bar.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.SearchBar { .SearchBar {
display: inline-flex; display: inline-flex;

7
src/components/select/select.vue
View File

@ -21,22 +21,20 @@
<script src="./select.js"> </script> <script src="./select.js"> </script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
/* TODO fix order of styles */ /* TODO fix order of styles */
label.Select { label.Select {
padding: 0; padding: 0;
select { select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; appearance: none;
background: transparent; background: transparent;
border: none; border: none;
color: $fallback--text; color: $fallback--text;
color: var(--inputText, --text, $fallback--text); color: var(--inputText, --text, $fallback--text);
margin: 0; margin: 0;
padding: 0 2em 0 .2em; padding: 0 2em 0 0.2em;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--inputFont, sans-serif); font-family: var(--inputFont, sans-serif);
font-size: 1em; font-size: 1em;
@ -59,6 +57,5 @@ label.Select {
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
} }
} }
</style> </style>

3
src/components/selectable_list/selectable_list.vue
View File

@ -51,7 +51,7 @@
<script src="./selectable_list.js"></script> <script src="./selectable_list.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.selectable-list { .selectable-list {
&-item-inner { &-item-inner {
@ -67,6 +67,7 @@
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg); background-color: var(--selectedMenu, $fallback--lightBg);
color: var(--selectedMenuText, $fallback--text); color: var(--selectedMenuText, $fallback--text);
--faint: var(--selectedMenuFaintText, $fallback--faint); --faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText); --lightText: var(--selectedMenuLightText, $fallback--lightText);

5
src/components/settings_modal/helpers/choice_setting.vue
View File

@ -28,8 +28,3 @@
</template> </template>
<script src="./choice_setting.js"></script> <script src="./choice_setting.js"></script>
<style lang="scss">
.ChoiceSetting {
}
</style>

9
src/components/settings_modal/helpers/size_setting.vue
View File

@ -45,10 +45,11 @@
<script src="./size_setting.js"></script> <script src="./size_setting.js"></script>
<style lang="scss"> <style lang="scss">
.css-unit-input, .css-unit-input select { .css-unit-input,
.css-unit-input select {
margin-left: 0.5em; margin-left: 0.5em;
width: 4em !important; width: 4em;
max-width: 4em !important; max-width: 4em;
min-width: 4em !important; min-width: 4em;
} }
</style> </style>

51
src/components/settings_modal/settings_modal.scss
View File

@ -1,4 +1,5 @@
@import 'src/_variables.scss'; @import "src/variables";
.settings-modal { .settings-modal {
overflow: hidden; overflow: hidden;
@ -6,32 +7,13 @@
.option-list { .option-list {
list-style-type: none; list-style-type: none;
padding-left: 2em; padding-left: 2em;
li { li {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.suboptions { .suboptions {
margin-top: 0.3em margin-top: 0.3em;
}
}
&.peek {
.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
* + 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));
@media all and (max-width: 800px) {
/* For mobile, the modal takes 100% of the available screen.
This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
*/
transform: translateY(calc(100% - 50px));
}
} }
} }
@ -63,6 +45,7 @@
.settings-footer { .settings-footer {
display: flex; display: flex;
>* { >* {
margin-right: 0.5em; margin-right: 0.5em;
} }
@ -72,4 +55,26 @@
flex-grow: 1; flex-grow: 1;
} }
} }
&.peek {
.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
* + 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));
@media all and (max-width: 800px) {
/* For mobile, the modal takes 100% of the available screen.
This ensures the minimized modal is always 50px above the browser bottom
bar regardless of whether or not it is visible.
*/
transform: translateY(calc(100% - 50px));
}
}
}
} }

8
src/components/settings_modal/settings_modal_content.scss
View File

@ -1,4 +1,5 @@
@import 'src/_variables.scss'; @import "src/variables";
.settings_tab-switcher { .settings_tab-switcher {
height: 100%; height: 100%;
@ -10,7 +11,8 @@
> div, > div,
> label { > label {
display: block; display: block;
margin-bottom: .5em; margin-bottom: 0.5em;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -21,7 +23,7 @@
.option-list { .option-list {
margin: 0; margin: 0;
padding-left: .5em; padding-left: 0.5em;
} }
} }

1
src/components/settings_modal/tabs/general_tab.vue
View File

@ -464,6 +464,7 @@
justify-content: space-evenly; justify-content: space-evenly;
flex-wrap: wrap; flex-wrap: wrap;
} }
.column-settings .size-label { .column-settings .size-label {
display: block; display: block;
margin-bottom: 0.5em; margin-bottom: 0.5em;

44
src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
View File

@ -1,29 +1,29 @@
.mutes-and-blocks-tab { .mutes-and-blocks-tab {
height: 100%; height: 100%;
.usersearch-wrapper { .usersearch-wrapper {
padding: 1em; padding: 1em;
} }
.bulk-actions { .bulk-actions {
text-align: right; text-align: right;
padding: 0 1em; padding: 0 1em;
min-height: 2em; min-height: 2em;
} }
.bulk-action-button { .bulk-action-button {
width: 10em width: 10em;
} }
.domain-mute-form { .domain-mute-form {
padding: 1em; padding: 1em;
display: flex; display: flex;
flex-direction: column flex-direction: column;
} }
.domain-mute-button { .domain-mute-button {
align-self: flex-end; align-self: flex-end;
margin-top: 1em; margin-top: 1em;
width: 10em width: 10em;
} }
} }

7
src/components/settings_modal/tabs/profile_tab.scss
View File

@ -1,4 +1,5 @@
@import '../../../_variables.scss'; @import "../../../variables";
.profile-tab { .profile-tab {
.bio { .bio {
margin: 0; margin: 0;
@ -8,7 +9,7 @@
padding-top: 5px; padding-top: 5px;
} }
input[type=file] { input[type="file"] {
padding: 5px; padding: 5px;
height: auto; height: auto;
} }
@ -52,7 +53,7 @@
right: 0.2em; right: 0.2em;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
background-color: rgba(0, 0, 0, 0.6); background-color: rgb(0 0 0 / 60%);
opacity: 0.7; opacity: 0.7;
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;

11
src/components/settings_modal/tabs/security_tab/mfa.vue
View File

@ -137,9 +137,11 @@
<script src="./mfa.js"></script> <script src="./mfa.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../../../_variables.scss'; @import "../../../../variables";
.mfa-settings { .mfa-settings {
.mfa-heading, .method-item { .mfa-heading,
.method-item {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
@ -155,18 +157,19 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
.qr-code { .qr-code {
flex: 1; flex: 1;
padding-right: 10px; padding-right: 10px;
} }
.verify { flex: 1; } .verify { flex: 1; }
.error { margin: 4px 0 0 0; } .error { margin: 4px 0 0; }
.confirm-otp-actions { .confirm-otp-actions {
button { button {
width: 15em; width: 15em;
margin-top: 5px; margin-top: 5px;
} }
} }
} }
} }

3
src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
View File

@ -21,13 +21,14 @@
</template> </template>
<script src="./mfa_backup_codes.js"></script> <script src="./mfa_backup_codes.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../../../_variables.scss'; @import "../../../../variables";
.mfa-backup-codes { .mfa-backup-codes {
.warning { .warning {
color: $fallback--cOrange; color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange); color: var(--cOrange, $fallback--cOrange);
} }
.backup-codes { .backup-codes {
font-family: var(--postCodeFont, monospace); font-family: var(--postCodeFont, monospace);
} }

15
src/components/settings_modal/tabs/theme_tab/preview.vue
View File

@ -33,10 +33,10 @@
scope="global" scope="global"
keypath="settings.style.preview.text" keypath="settings.style.preview.text"
> >
<code style="font-family: var(--postCodeFont)"> <code style="font-family: var(--postCodeFont);">
{{ $t('settings.style.preview.mono') }} {{ $t('settings.style.preview.mono') }}
</code> </code>
<a style="color: var(--link)"> <a style="color: var(--link);">
{{ $t('settings.style.preview.link') }} {{ $t('settings.style.preview.link') }}
</a> </a>
</i18n-t> </i18n-t>
@ -44,25 +44,25 @@
<div class="icons"> <div class="icons">
<FAIcon <FAIcon
fixed-width fixed-width
style="color: var(--cBlue)" style="color: var(--cBlue);"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="reply" icon="reply"
/> />
<FAIcon <FAIcon
fixed-width fixed-width
style="color: var(--cGreen)" style="color: var(--cGreen);"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="retweet" icon="retweet"
/> />
<FAIcon <FAIcon
fixed-width fixed-width
style="color: var(--cOrange)" style="color: var(--cOrange);"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="star" icon="star"
/> />
<FAIcon <FAIcon
fixed-width fixed-width
style="color: var(--cRed)" style="color: var(--cRed);"
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="times" icon="times"
/> />
@ -81,7 +81,7 @@
class="faint" class="faint"
scope="global" scope="global"
> >
<a style="color: var(--faintLink)"> <a style="color: var(--faintLink);">
{{ $t('settings.style.preview.faint_link') }} {{ $t('settings.style.preview.faint_link') }}
</a> </a>
</i18n-t> </i18n-t>
@ -138,6 +138,7 @@ export default {}
.preview-container { .preview-container {
position: relative; position: relative;
} }
.underlay-preview { .underlay-preview {
position: absolute; position: absolute;
top: 0; top: 0;

120
src/components/settings_modal/tabs/theme_tab/theme_tab.scss
View File

@ -1,20 +1,17 @@
@import 'src/_variables.scss'; @import "src/variables";
.theme-tab { .theme-tab {
padding-bottom: 2em; padding-bottom: 2em;
.theme-warning {
display: flex;
align-items: baseline;
margin-bottom: .5em;
.buttons {
.btn {
margin-bottom: .5em;
}
}
}
.preset-switcher { .preset-switcher {
margin-right: 1em; margin-right: 1em;
} }
.btn {
margin-left: 0.25em;
margin-right: 0.25em;
}
.style-control { .style-control {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
@ -24,35 +21,37 @@
flex: 1; flex: 1;
} }
&.disabled {
input, select {
opacity: .5
}
}
.opt { .opt {
margin: .5em; margin: 0.5em;
} }
.color-input { .color-input {
flex: 0 0 0; flex: 0 0 0;
} }
input, select { input,
select {
min-width: 3em; min-width: 3em;
margin: 0; margin: 0;
flex: 0; flex: 0;
&[type=number] { &[type="number"] {
min-width: 5em; min-width: 5em;
} }
&[type=range] { &[type="range"] {
flex: 1; flex: 1;
min-width: 3em; min-width: 3em;
align-self: flex-start; align-self: flex-start;
} }
} }
&.disabled {
input,
select {
opacity: 0.5;
}
}
} }
.reset-container { .reset-container {
@ -63,8 +62,7 @@
.reset-container, .reset-container,
.apply-container, .apply-container,
.radius-container, .radius-container,
.color-container, .color-container, {
{
display: flex; display: flex;
} }
@ -73,10 +71,11 @@
flex-direction: column; flex-direction: column;
} }
.color-container{ .color-container {
> h4 { > h4 {
width: 99%; width: 99%;
} }
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
} }
@ -100,7 +99,7 @@
p { p {
flex: 1; flex: 1;
margin: 0; margin: 0;
margin-right: .5em; margin-right: 0.5em;
} }
} }
@ -112,15 +111,16 @@
min-width: 1px; min-width: 1px;
flex: 0 auto; flex: 0 auto;
padding: 0 1em; padding: 0 1em;
margin-bottom: .5em; margin-bottom: 0.5em;
} }
} }
.shadow-selector { .shadow-selector {
.override { .override {
flex: 1; flex: 1;
margin-left: .5em; margin-left: 0.5em;
} }
.select-container { .select-container {
margin-top: -4px; margin-top: -4px;
margin-bottom: -3px; margin-bottom: -3px;
@ -136,7 +136,7 @@
.presets, .presets,
.import-export { .import-export {
margin-bottom: .5em; margin-bottom: 0.5em;
} }
.import-export { .import-export {
@ -144,16 +144,17 @@
} }
.override { .override {
margin-left: .5em; margin-left: 0.5em;
} }
} }
.save-load-options { .save-load-options {
flex-wrap: wrap; flex-wrap: wrap;
margin-top: .5em; margin-top: 0.5em;
justify-content: center; justify-content: center;
.keep-option { .keep-option {
margin: 0 .5em .5em; margin: 0 0.5em 0.5em;
min-width: 25%; min-width: 25%;
} }
} }
@ -179,11 +180,11 @@
flex: 1; flex: 1;
h4 { h4 {
margin-bottom: .25em; margin-bottom: 0.25em;
} }
.icons { .icons {
margin-top: .5em; margin-top: 0.5em;
display: flex; display: flex;
i { i {
@ -199,8 +200,20 @@
align-items: center; align-items: center;
} }
.avatar, .avatar-alt{ .avatar,
background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); .avatar-alt {
background:
linear-gradient(
135deg,
#b8e1fc 0%,
#a9d2f3 10%,
#90bae4 25%,
#90bcea 37%,
#90bff0 50%,
#6ba8e5 51%,
#a2daf5 83%,
#bdf3fd 100%
);
color: black; color: black;
font-family: sans-serif; font-family: sans-serif;
text-align: center; text-align: center;
@ -251,33 +264,33 @@
} }
} }
.radius-item {
flex-basis: auto;
}
.radius-item, .radius-item,
.color-item { .color-item {
min-width: 20em; min-width: 20em;
margin: 5px 6px 0 0; margin: 5px 6px 0 0;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 0; flex: 1 1 0;
&.wide { &.wide {
min-width: 60% min-width: 60%;
} }
&:not(.wide):nth-child(2n+1) { &:not(.wide):nth-child(2n+1) {
margin-right: 7px; margin-right: 7px;
} }
.color, .opacity { .color,
display:flex; .opacity {
display: flex;
align-items: baseline; align-items: baseline;
} }
} }
.radius-item {
flex-basis: auto;
}
.theme-radius-rn, .theme-radius-rn,
.theme-color-cl { .theme-color-cl {
border: 0; border: 0;
@ -295,14 +308,11 @@
.theme-radius-in { .theme-radius-in {
min-width: 1em; min-width: 1em;
}
.theme-radius-in {
max-width: 7em; max-width: 7em;
flex: 1; flex: 1;
} }
.theme-radius-lb{ .theme-radius-lb {
max-width: 50em; max-width: 50em;
} }
@ -310,9 +320,16 @@
padding: 20px; padding: 20px;
} }
.btn { .theme-warning {
margin-left: .25em; display: flex;
margin-right: .25em; align-items: baseline;
margin-bottom: 0.5em;
.buttons {
.btn {
margin-bottom: 0.5em;
}
}
} }
} }
@ -323,6 +340,7 @@
justify-content: space-around; justify-content: space-around;
flex-grow: 1; flex-grow: 1;
/* stylelint-disable-next-line no-descending-specificity */
.btn { .btn {
flex-grow: 1; flex-grow: 1;
min-height: 2em; min-height: 2em;

40
src/components/shadow_control/shadow_control.vue
View File

@ -218,7 +218,8 @@
<script src="./shadow_control.js"></script> <script src="./shadow_control.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.shadow-control { .shadow-control {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -229,6 +230,7 @@
.shadow-tweak { .shadow-tweak {
margin: 5px 6px 0 0; margin: 5px 6px 0 0;
} }
.shadow-preview-container { .shadow-preview-container {
flex: 0; flex: 0;
display: flex; display: flex;
@ -236,19 +238,19 @@
$side: 15em; $side: 15em;
input[type=number] { input[type="number"] {
width: 5em; width: 5em;
min-width: 2em; min-width: 2em;
} }
.x-shift-control, .x-shift-control,
.y-shift-control { .y-shift-control {
display: flex; display: flex;
flex: 0; flex: 0;
&[disabled=disabled] *{ &[disabled="disabled"] * {
opacity: .5 opacity: 0.5;
} }
} }
.x-shift-control { .x-shift-control {
@ -256,37 +258,40 @@
} }
.x-shift-control .wrap, .x-shift-control .wrap,
input[type=range] { input[type="range"] {
margin: 0; margin: 0;
width: $side; width: $side;
height: 2em; height: 2em;
} }
.y-shift-control { .y-shift-control {
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
.wrap { .wrap {
width: 2em; width: 2em;
height: $side; height: $side;
} }
input[type=range] {
input[type="range"] {
transform-origin: 1em 1em; transform-origin: 1em 1em;
transform: rotate(90deg); transform: rotate(90deg);
} }
} }
.preview-window { .preview-window {
flex: 1; flex: 1;
background-color: #999999; background-color: #999;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-image: background-image:
linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(45deg, #666 25%, transparent 25%),
linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(45deg, transparent 75%, #666 75%),
linear-gradient(-45deg, transparent 75%, #666666 75%); linear-gradient(-45deg, transparent 75%, #666 75%);
background-size: 20px 20px; background-size: 20px 20px;
background-position:0 0, 0 10px, 10px -10px, -10px 0; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
border-radius: $fallback--inputRadius; border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
@ -312,14 +317,15 @@
flex: 1; flex: 1;
} }
.shadow-switcher, .btn { .shadow-switcher,
.btn {
min-width: 1px; min-width: 1px;
margin-right: 5px; margin-right: 5px;
} }
.btn { .btn {
padding: 0 .4em; padding: 0 0.4em;
margin: 0 .1em; margin: 0 0.1em;
} }
} }
} }

2
src/components/shout_panel/shout_panel.vue
View File

@ -75,7 +75,7 @@
<script src="./shout_panel.js"></script> <script src="./shout_panel.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.floating-shout { .floating-shout {
position: fixed; position: fixed;

18
src/components/side_drawer/side_drawer.vue
View File

@ -73,7 +73,7 @@
> >
<router-link <router-link
:to="{ name: 'chats', params: { username: currentUser.screen_name } }" :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
style="position: relative" style="position: relative;"
> >
<FAIcon <FAIcon
fixed-width fixed-width
@ -251,7 +251,7 @@
<script src="./side_drawer.js"></script> <script src="./side_drawer.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import "../../variables";
.side-drawer-container { .side-drawer-container {
position: fixed; position: fixed;
@ -284,11 +284,11 @@
z-index: -1; z-index: -1;
transition: 0.35s; transition: 0.35s;
transition-property: background-color; transition-property: background-color;
background-color: rgba(0, 0, 0, 0.5); background-color: rgb(0 0 0 / 50%);
} }
.side-drawer-darken-closed { .side-drawer-darken-closed {
background-color: rgba(0, 0, 0, 0); background-color: rgb(0 0 0 / 0%);
} }
.side-drawer-click-outside { .side-drawer-click-outside {
@ -297,20 +297,21 @@
.side-drawer { .side-drawer {
overflow-x: hidden; overflow-x: hidden;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition: 0.35s; transition: 0.35s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-property: transform; transition-property: transform;
margin: 0 0 0 -100px; margin: 0 0 0 -100px;
padding: 0 0 1em 100px; padding: 0 0 1em 100px;
width: 80%; width: 80%;
max-width: 20em; max-width: 20em;
flex: 0 0 80%; flex: 0 0 80%;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg); background-color: var(--popover, $fallback--bg);
color: $fallback--link; color: $fallback--link;
color: var(--popoverText, $fallback--link); color: var(--popoverText, $fallback--link);
--faint: var(--popoverFaintText, $fallback--faint); --faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText); --lightText: var(--popoverLightText, $fallback--lightText);
@ -360,7 +361,6 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
@ -373,7 +373,8 @@
.side-drawer li { .side-drawer li {
padding: 0; padding: 0;
a, button { a,
button {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
height: 3em; height: 3em;
@ -385,6 +386,7 @@
background-color: var(--selectedMenuPopover, $fallback--lightBg); background-color: var(--selectedMenuPopover, $fallback--lightBg);
color: $fallback--text; color: $fallback--text;
color: var(--selectedMenuPopoverText, $fallback--text); color: var(--selectedMenuPopoverText, $fallback--text);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint); --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);

1
src/components/staff_panel/staff_panel.vue
View File

@ -27,7 +27,6 @@
<script src="./staff_panel.js"></script> <script src="./staff_panel.js"></script>
<style lang="scss"> <style lang="scss">
.staff-group { .staff-group {
padding-left: 1em; padding-left: 1em;
padding-top: 1em; padding-top: 1em;

10
src/components/status/status.scss
View File

@ -1,4 +1,4 @@
@import '../../_variables.scss'; @import "../../variables";
.Status { .Status {
min-width: 0; min-width: 0;
@ -181,7 +181,7 @@
.reply-to-popover { .reply-to-popover {
.reply-to:hover::before { .reply-to:hover::before {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -197,7 +197,7 @@
&.-strikethrough { &.-strikethrough {
.reply-to::after { .reply-to::after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -336,7 +336,7 @@
margin-left: 0.2em; margin-left: 0.2em;
&::before { &::before {
content: ' '; content: " ";
} }
} }
@ -374,7 +374,7 @@
align-items: center; align-items: center;
&::before { &::before {
content: ''; content: "";
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 1px; width: 1px;

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