sjw/pleroma-fe
1
0
Fork 0
mirror of https://git.pleroma.social/sjw/pleroma-fe.git synced 2025-01-05 12:15:15 +01:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'upstream/develop' into neckbeard

Browse Source
This commit is contained in:
Your New SJW Waifu 2023-01-23 15:01:55 -06:00
commit 3f7298e58e
137 changed files with 1682 additions and 1545 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
.stylelintrc.json
View File

@ -1,19 +1,41 @@
{
"extends": [
"stylelint-rscss/config",
"stylelint-config-recommended",
"stylelint-config-standard"
"stylelint-config-standard",
"stylelint-config-recommended-scss",
"stylelint-config-html",
"stylelint-config-recommended-vue/scss"
],
"rules": {
"declaration-no-important": true,
"rscss/no-descendant-combinator": false,
"rscss/class-format": [
true,
false,
{
"component": "pascal-case",
"variant": "^-[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,
"declaration-block-no-redundant-longhand-properties": [
true,
{
"ignoreShorthands": [
"grid-template",
"margin",
"padding",
"border",
"border-width",
"border-style",
"border-color",
"border-radius"
]
}
]
}
}

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

12
docs/HACKING.md
View File

@ -25,7 +25,17 @@ This could be a bit trickier, you basically need steps 1-4 from *develop build*
### Replacing your instance's frontend with custom FE build
This is the most easiest way to use and test FE build: you just need to copy or symlink contents of `dist` folder into backend's [static directory](../backend/configuration/static_dir.md), by default it is located in `instance/static`, or in `/var/lib/pleroma/static` for OTP release installations, create it if it doesn't exist already. Be aware that running `yarn build` wipes the contents of `dist` folder.
#### New way (via AdminFE, a bit janky but works)
In backend's [static directory](../backend/configuration/static_dir.md) there should be a folder called `frontends` if you installed any frontends from AdminFE before, otherwise you can create it yourself (ensuring correct permissions). Backend will serve given frontend from path `frontends/{frontend}/{reference}`, where `{frontend}` is name of frontend (`pleroma-fe`) and `{reference}` is version. You could make a production build, move `dist` folder into `frontends/pleroma-fe` and rename it into something like `myCustomVersion`. To actually make backend serve this frontend by default, in AdminFE you'll need to set name/reference in Settings -> Frontend -> Frontends -> Primary.
You could also install from a zip file (i.e. CI build) but AdminFE UI is a bit buggy and lacking, so this approach is not recommended.
Take note that frontend management is in early development and currently there's no way for user to change frontend or version for themselves, primary frontend becomes default frontend for all users and visitors.
#### Old way (replaces everything, hard to maintain, not recommended)
Copy or symlink contents of `dist` folder into backend's [static directory](../backend/configuration/static_dir.md), by default it is located in `instance/static`, or in `/var/lib/pleroma/static` for OTP release installations, create it if it doesn't exist already. Be aware that running `yarn build` wipes the contents of `dist` folder, and this could remove emojis, other frontends etc. and therefore this approach is not recommended.
### Running production build locally or on a separate server

22
package.json
View File

@ -11,7 +11,7 @@
"unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"stylelint": "npx stylelint src/components/status/status.scss",
"stylelint": "npx stylelint '**/*.scss' '**/*.vue'",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
},
@ -72,13 +72,13 @@
"css-loader": "6.7.3",
"css-minimizer-webpack-plugin": "4.2.2",
"custom-event-polyfill": "1.0.7",
"eslint": "8.31.0",
"eslint": "8.32.0",
"eslint-config-standard": "17.0.0",
"eslint-formatter-friendly": "7.0.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-n": "15.6.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-n": "15.6.1",
"eslint-plugin-promise": "6.1.1",
"eslint-plugin-vue": "9.8.0",
"eslint-plugin-vue": "9.9.0",
"eslint-webpack-plugin": "3.2.0",
"eventsource-polyfill": "0.9.6",
"express": "4.18.2",
@ -99,11 +99,13 @@
"lodash": "4.17.21",
"mini-css-extract-plugin": "2.7.2",
"mocha": "10.2.0",
"nightwatch": "2.6.6",
"nightwatch": "2.6.10",
"opn": "5.5.0",
"ora": "0.4.1",
"postcss": "8.4.20",
"postcss-html": "^1.5.0",
"postcss-loader": "7.0.2",
"postcss-scss": "^4.0.6",
"sass": "1.57.1",
"sass-loader": "13.2.0",
"selenium-server": "2.53.1",
@ -112,9 +114,13 @@
"shelljs": "0.8.5",
"sinon": "15.0.1",
"sinon-chai": "3.7.0",
"stylelint": "13.13.1",
"stylelint-config-standard": "20.0.0",
"stylelint": "14.16.1",
"stylelint-config-html": "^1.1.0",
"stylelint-config-recommended-scss": "^8.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "29.0.0",
"stylelint-rscss": "0.4.0",
"stylelint-webpack-plugin": "^3.3.0",
"vue-loader": "17.0.1",
"vue-style-loader": "4.1.3",
"webpack": "5.75.0",

76
src/App.scss
View File

@ -1,5 +1,7 @@
// stylelint-disable rscss/class-format
@import './_variables.scss';
/* stylelint-disable no-descending-specificity */
@import "./variables";
@import "./panel";
:root {
--navbar-height: 3.5rem;
@ -123,7 +125,7 @@ h4 {
font-weight: 1000;
}
i[class*=icon-],
i[class*="icon-"],
.svg-inline--fa,
.iconLetter {
color: $fallback--icon;
@ -132,7 +134,7 @@ i[class*=icon-],
.button-unstyled:hover,
a:hover {
> i[class*=icon-],
> i[class*="icon-"],
> .svg-inline--fa,
> .iconLetter {
color: var(--text);
@ -141,12 +143,11 @@ a:hover {
nav {
z-index: var(--ZI_navbar);
color: var(--topBarText);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
color: $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-sizing: border-box;
height: var(--navbar-height);
@ -191,13 +192,11 @@ nav {
}
.underlay {
grid-column-start: 1;
grid-column-end: span 3;
grid-row-start: 1;
grid-row-end: 1;
grid-column: 1 / span 3;
grid-row: 1 / 1;
pointer-events: none;
background-color: rgba(0, 0, 0, 0.15);
background-color: var(--underlay, rgba(0, 0, 0, 0.15));
background-color: rgb(0 0 0 / 15%);
background-color: var(--underlay, rgb(0 0 0 / 15%));
z-index: -1000;
}
@ -231,8 +230,7 @@ nav {
display: grid;
grid-template-columns: 100%;
box-sizing: border-box;
grid-row-start: 1;
grid-row-end: 1;
grid-row: 1 / 1;
margin: 0 calc(var(--___columnMargin) / 2);
padding: calc(var(--___columnMargin)) 0;
row-gap: var(--___columnMargin);
@ -307,7 +305,7 @@ nav {
align-content: start;
}
&.-reverse:not(.-wide):not(.-mobile) {
&.-reverse:not(.-wide, .-mobile) {
grid-template-columns:
var(--effectiveContentColumnWidth)
var(--effectiveSidebarColumnWidth);
@ -336,11 +334,8 @@ nav {
padding: 0;
.column {
margin-left: 0;
margin-right: 0;
padding-top: 0;
margin-top: var(--navbar-height);
margin-bottom: 0;
margin: var(--navbar-height) 0 0 0;
}
.panel-heading,
@ -389,7 +384,7 @@ nav {
background: transparent;
}
i[class*=icon-],
i[class*="icon-"],
.svg-inline--fa {
color: $fallback--text;
color: var(--btnText, $fallback--text);
@ -400,12 +395,15 @@ nav {
}
&: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);
}
&: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);
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
@ -438,7 +436,10 @@ nav {
color: var(--btnToggledText, $fallback--text);
background-color: $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);
svg,
@ -503,7 +504,10 @@ textarea,
border: none;
border-radius: $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);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
@ -521,13 +525,13 @@ textarea,
padding: 0 var(--_padding);
&:disabled,
&[disabled=disabled],
&[disabled="disabled"],
&.disabled {
cursor: not-allowed;
opacity: 0.5;
}
&[type=range] {
&[type="range"] {
background: none;
border: none;
margin: 0;
@ -535,7 +539,7 @@ textarea,
flex: 1;
}
&[type=radio] {
&[type="radio"] {
display: none;
&:checked + label::before {
@ -555,7 +559,7 @@ textarea,
+ label::before {
flex-shrink: 0;
display: inline-block;
content: '';
content: "";
transition: box-shadow 200ms;
width: 1.1em;
height: 1.1em;
@ -575,7 +579,7 @@ textarea,
}
}
&[type=checkbox] {
&[type="checkbox"] {
display: none;
&:checked + label::before {
@ -594,7 +598,7 @@ textarea,
+ label::before {
flex-shrink: 0;
display: inline-block;
content: '✓';
content: "✓";
transition: color 200ms;
width: 1.1em;
height: 1.1em;
@ -634,10 +638,10 @@ option {
}
.hide-number-spinner {
-moz-appearance: textfield;
appearance: textfield;
&[type=number]::-webkit-inner-spin-button,
&[type=number]::-webkit-outer-spin-button {
&[type="number"]::-webkit-inner-spin-button,
&[type="number"]::-webkit-outer-spin-button {
opacity: 0;
display: none;
}
@ -669,8 +673,6 @@ option {
}
}
@import './panel.scss';
.fa {
color: grey;
}
@ -686,7 +688,7 @@ option {
max-width: 10em;
min-width: 1.7em;
height: 1.3em;
padding: 0.15em 0.15em;
padding: 0.15em;
vertical-align: middle;
font-weight: normal;
font-style: normal;
@ -789,7 +791,8 @@ option {
.fa-old-padding {
&.iconLetter,
&.svg-inline--fa, &-layer {
&.svg-inline--fa,
&-layer {
padding: 0 0.3em;
}
}
@ -883,3 +886,4 @@ option {
.fade-leave-active {
opacity: 0;
}
/* stylelint-enable no-descending-specificity */

5
src/_mixins.scss
View File

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

14
src/_variables.scss
View File

@ -4,20 +4,20 @@ $darkened-background: whitesmoke;
$fallback--bg: #121a24;
$fallback--fg: #182230;
$fallback--faint: rgba(185, 185, 186, .5);
$fallback--faint: rgb(185 185 186 / 50%);
$fallback--text: #b9b9ba;
$fallback--link: #d8a070;
$fallback--icon: #666;
$fallback--lightBg: rgb(21, 30, 42);
$fallback--lightBg: rgb(21 30 42);
$fallback--lightText: #b9b9ba;
$fallback--border: #222;
$fallback--cRed: #ff0000;
$fallback--cRed: #f00;
$fallback--cBlue: #0095ff;
$fallback--cGreen: #0fa00f;
$fallback--cOrange: orange;
$fallback--alertError: rgba(211,16,20,.5);
$fallback--alertWarning: rgba(111,111,20,.5);
$fallback--alertError: rgb(211 16 20 / 50%);
$fallback--alertWarning: rgb(111 111 20 / 50%);
$fallback--panelRadius: 10px;
$fallback--checkboxRadius: 2px;
@ -29,6 +29,8 @@ $fallback--avatarAltRadius: 10px;
$fallback--attachmentRadius: 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;

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

@ -9,6 +9,3 @@
</template>
<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>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.AccountActions {
.ellipsis-button {
width: 2.5em;

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

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

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

@ -67,7 +67,8 @@
.post-form {
padding: var(--status-margin, $status-margin);
.heading, .body {
.heading,
.body {
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%;
align-items: center;
justify-content: center;
.btn {
margin: .5em;
padding: .5em 2em;
margin: 0.5em;
padding: 0.5em 2em;
}
}
</style>

4
src/components/attachment/attachment.js
View File

@ -36,6 +36,7 @@ library.add(
const Attachment = {
props: [
'attachment',
'compact',
'description',
'hideDescription',
'nsfw',
@ -71,7 +72,8 @@ const Attachment = {
{
'-loading': this.loading,
'-nsfw-placeholder': this.hidden,
'-editable': this.edit !== undefined
'-editable': this.edit !== undefined,
'-compact': this.compact
},
'-type-' + this.type,
this.size && '-size-' + this.size,

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

@ -1,4 +1,4 @@
@import '../../_variables.scss';
@import "../../variables";
.Attachment {
display: inline-flex;
@ -102,14 +102,13 @@
padding-top: 0.5em;
}
.play-icon {
position: absolute;
font-size: 64px;
top: calc(50% - 32px);
left: calc(50% - 32px);
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
color: rgb(255 255 255 / 75%);
text-shadow: 0 0 2px rgb(0 0 0 / 40%);
&::before {
margin: 0;
@ -135,18 +134,32 @@
margin-left: 0.5em;
font-size: 1.25em;
// 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 {
color: rgba(0, 0, 0, 0.6);
color: rgb(0 0 0 / 60%);
}
&: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 {
line-height: 1.2em;
flex: 1 0 100%;
@ -160,8 +173,9 @@
.image {
flex: 1;
img {
border: 0px;
border: 0;
border-radius: 5px;
height: 100%;
object-fit: cover;
@ -172,9 +186,10 @@
flex: 2;
margin: 8px;
word-break: break-all;
h1 {
font-size: 1rem;
margin: 0px;
margin: 0;
}
}
}
@ -252,17 +267,9 @@
cursor: progress;
}
&.-contain-fit {
img,
canvas {
object-fit: contain;
}
}
&.-cover-fit {
img,
canvas {
object-fit: cover;
&.-compact {
.placeholder-container {
padding-bottom: 0.5em;
}
}
}

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

@ -162,10 +162,11 @@
target="_blank"
>
<FAIcon
size="5x"
:size="compact ? '2x' : '5x'"
:icon="placeholderIconClass"
:title="localDescription"
/>
<p>
<p v-if="!compact">
{{ localDescription }}
</p>
</a>

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

@ -24,7 +24,7 @@
<script src="./autosuggest.js"></script>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.autosuggest {
position: relative;
@ -50,7 +50,7 @@
border-radius: var(--inputRadius, $fallback--inputRadius);
border-top-left-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);
overflow-y: auto;
z-index: 1;

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

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

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

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

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

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

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

@ -17,7 +17,7 @@
width: 100%;
overflow: visible;
min-height: calc(100vh - var(--navbar-height));
margin: 0 0 0 0;
margin: 0;
border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
@ -66,7 +66,7 @@
display: flex;
justify-content: 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;
transition: 0.35s all;
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>
<style lang="scss">
@import '../../_variables.scss';
@import './chat.scss';
@import "../../variables";
@import "./chat";
</style>

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

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

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

@ -13,7 +13,7 @@
&:hover {
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 {
@ -67,6 +67,7 @@
canvas {
display: none;
}
img {
visibility: visible;
}
@ -79,13 +80,11 @@
.chat-preview-body {
--emoji-size: 1.4em;
padding-right: 1em;
}
.time-wrapper {
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>
<style lang="scss">
@import '../../_variables.scss';
@import './chat_list_item.scss';
@import "../../variables";
@import "./chat_list_item";
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,4 +1,4 @@
@import '../../_variables.scss';
@import "../../variables";
.DesktopNav {
width: 100%;
@ -27,20 +27,13 @@
--miniColumn: 25rem;
--maxiColumn: 45rem;
--columnGap: 1em;
max-width: calc(
var(--sidebarColumnWidth, var(--miniColumn)) +
var(--contentColumnWidth, var(--maxiColumn)) +
var(--columnGap)
);
}
&.-column-stretch.-wide .inner-nav {
max-width: calc(
var(--sidebarColumnWidth, var(--miniColumn)) +
var(--contentColumnWidth, var(--maxiColumn)) +
var(--notifsColumnWidth, var(--miniColumn)) +
var(--columnGap)
);
max-width:
calc(
var(--sidebarColumnWidth, var(--miniColumn)) +
var(--contentColumnWidth, var(--maxiColumn)) +
var(--columnGap)
);
}
&.-logoLeft .inner-nav {
@ -48,8 +41,19 @@
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 {
&, svg {
&,
svg {
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
}
@ -70,7 +74,7 @@
color: $fallback--text;
color: var(--btnToggledTopBarText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggledTopBar, $fallback--fg)
background-color: var(--btnToggledTopBar, $fallback--fg);
}
}
@ -82,6 +86,7 @@
transition-duration: 100ms;
@media all and (min-width: 800px) {
/* stylelint-disable-next-line declaration-no-important */
opacity: 1 !important;
}

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

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

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

@ -91,22 +91,18 @@
<script src="./emoji_input.js"></script>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.emoji-input {
display: flex;
flex-direction: column;
position: relative;
&.with-picker input {
padding-right: 30px;
}
.emoji-picker-icon {
position: absolute;
top: 0;
right: 0;
margin: .2em .25em;
margin: 0.2em 0.25em;
font-size: 1.3em;
cursor: pointer;
line-height: 24px;
@ -123,14 +119,19 @@
margin-top: 2px;
&.hide {
display: none
display: none;
}
}
input, textarea {
input,
textarea {
flex: 1 0 auto;
}
&.with-picker input {
padding-right: 30px;
}
.hidden-overlay {
opacity: 0;
pointer-events: none;
@ -140,8 +141,10 @@
right: 0;
left: 0;
overflow: hidden;
/* DEBUG STUFF */
color: red;
/* set opacity to non-zero to see the overlay */
.caret {
@ -151,6 +154,7 @@
}
}
}
.autocomplete {
&-panel {
position: absolute;
@ -160,7 +164,7 @@
display: flex;
cursor: pointer;
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;
.image {
@ -169,7 +173,6 @@
line-height: 32px;
text-align: center;
font-size: 32px;
margin-right: 4px;
img {
@ -199,6 +202,7 @@
background-color: $fallback--fg;
background-color: var(--selectedMenuPopover, $fallback--fg);
color: var(--selectedMenuPopoverText, $fallback--text);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--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-picture-width: 32px;
@ -14,7 +14,7 @@ $emoji-picker-emoji-size: 32px;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
color: var(--popoverText, $fallback--link);
--lightText: var(--popoverLightText, $fallback--faint);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
@ -28,6 +28,7 @@ $emoji-picker-emoji-size: 32px;
max-width: $emoji-picker-header-picture-width;
height: $emoji-picker-header-picture-height;
max-height: $emoji-picker-header-picture-height;
.still-image {
max-width: 100%;
max-height: 100%;
@ -62,25 +63,18 @@ $emoji-picker-emoji-size: 32px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0px;
min-height: 0;
}
.emoji-tabs {
flex-grow: 1;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-flow: row nowrap;
overflow-x: auto;
}
.emoji-groups {
height: 100%;
min-height: 200px;
}
.additional-tabs {
display: flex;
flex: 1;
border-left: 1px solid;
border-left-color: $fallback--icon;
border-left-color: var(--icon, $fallback--icon);
@ -122,7 +116,7 @@ $emoji-picker-emoji-size: 32px;
}
.sticker-picker {
flex: 1 1 auto
flex: 1 1 auto;
}
.stickers,
@ -152,22 +146,27 @@ $emoji-picker-emoji-size: 32px;
}
&-groups {
height: 100%;
min-height: 200px;
flex: 1 1 1px;
position: relative;
overflow: auto;
user-select: none;
mask: 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 top, white, white);
mask:
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 top, white, white);
transition: mask-size 150ms;
mask-size: 100% 20px, 100% 20px, auto;
// Autoprefixed seem to ignore this one, and also syntax is different
-webkit-mask-composite: xor;
mask-composite: xor;
mask-composite: exclude;
&.scrolled {
&-top {
mask-size: 100% 20px, 100% 0, auto;
}
&-bottom {
mask-size: 100% 0, 100% 20px, auto;
}
@ -201,7 +200,6 @@ $emoji-picker-emoji-size: 32px;
align-items: center;
justify-content: center;
margin: 4px;
cursor: pointer;
.emoji-picker-emoji.-custom {
@ -209,12 +207,11 @@ $emoji-picker-emoji-size: 32px;
max-width: 100%;
max-height: 100%;
}
.emoji-picker-emoji.-unicode {
font-size: 24px;
overflow: hidden;
}
}
}
}

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

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

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

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

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

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

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

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

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

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

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

@ -22,8 +22,8 @@
<style lang="scss">
.follow-request-card-content-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
button {
margin-top: 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>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.font-control {
input.custom-font {
min-width: 10em;
}
&.custom {
/* TODO Should make proper joiners... */
.font-switcher {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.custom-font {
border-top-left-radius: 0;
border-bottom-left-radius: 0;

1
src/components/gallery/gallery.js
View File

@ -4,6 +4,7 @@ import { sumBy, set } from 'lodash'
const Gallery = {
props: [
'attachments',
'compact',
'limitRows',
'descriptions',
'limit',

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

@ -20,6 +20,7 @@
v-for="(attachment, attachmentIndex) in row.items"
:key="attachment.id"
class="gallery-item"
:compact="compact"
:nsfw="nsfw"
:attachment="attachment"
:size="size"
@ -86,7 +87,7 @@
<script src='./gallery.js'></script>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.Gallery {
.gallery-rows {
@ -100,6 +101,53 @@
width: 100%;
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) {
margin-top: 0.5em;
}
@ -114,7 +162,7 @@
linear-gradient(to top, white, white);
/* Autoprefixed seem to ignore this one, and also syntax is different */
-webkit-mask-composite: xor;
mask-composite: xor;
mask-composite: exclude;
}
}
@ -138,54 +186,5 @@
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>

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

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

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

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

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

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

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

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

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

@ -164,7 +164,7 @@
<script src="./lists_edit.js"></script>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.ListEdit {
--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>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.ListsUserSearch {
.input-wrap {
display: flex;
margin: 0.7em 0.5em 0.7em 0.5em;
margin: 0.7em 0.5em;
input {
width: 100%;

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

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

5
src/components/media_modal/media_modal.js
View File

@ -63,6 +63,11 @@ const MediaModal = {
},
type () {
return this.currentMedia ? this.getType(this.currentMedia) : null
},
swipeDisableClickThreshold () {
// If there is only one media, allow more mouse movements to close the modal
// because there is less chance that the user wants to switch to another image
return () => this.canNavigate ? 1 : 30
}
},
methods: {

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

@ -10,6 +10,7 @@
class="modal-image-container"
:direction="swipeDirection"
:threshold="swipeThreshold"
:disable-click-threshold="swipeDisableClickThreshold"
@preview-requested="handleSwipePreview"
@swipe-finished="handleSwipeEnd"
@swipeless-clicked="hide"
@ -120,32 +121,12 @@ $modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2)
$modal-view-button-icon-width: 3em;
$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 {
@keyframes media-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
@ -226,7 +207,7 @@ $modal-view-button-icon-margin: 0.5em;
appearance: none;
overflow: visible;
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;
width: $modal-view-button-icon-width;
@ -236,9 +217,9 @@ $modal-view-button-icon-margin: 0.5em;
width: $modal-view-button-icon-width;
font-size: 1rem;
line-height: $modal-view-button-icon-height;
color: #FFF;
color: #fff;
text-align: center;
background-color: rgba(0,0,0,.3);
background-color: rgb(0 0 0 / 30%);
}
}
@ -254,13 +235,14 @@ $modal-view-button-icon-margin: 0.5em;
position: absolute;
top: 0;
line-height: $modal-view-button-icon-height;
color: #FFF;
color: #fff;
text-align: center;
background-color: rgba(0,0,0,.3);
background-color: rgb(0 0 0 / 30%);
}
&--prev {
left: 0;
.arrow-icon {
left: $modal-view-button-icon-margin;
}
@ -268,6 +250,7 @@ $modal-view-button-icon-margin: 0.5em;
&--next {
right: 0;
.arrow-icon {
right: $modal-view-button-icon-margin;
}
@ -278,10 +261,33 @@ $modal-view-button-icon-margin: 0.5em;
position: absolute;
top: 0;
right: 0;
.button-icon {
top: $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>

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

@ -29,7 +29,7 @@
<script src="./media_upload.js"></script>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.media-upload {
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 {
position: relative;
@ -59,6 +59,7 @@
font-weight: 600;
}
}
&.-has-selection {
color: var(--alertNeutralText, $fallback--text);
background-color: var(--alertNeutral, $fallback--fg);
@ -100,10 +101,6 @@
}
}
.full {
pointer-events: none;
}
.serverName.-faded {
color: var(--faintLink, $fallback--link);
}

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

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

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

@ -94,7 +94,7 @@
<script src="./mobile_nav.js"></script>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.MobileNav {
z-index: var(--ZI_navbar);
@ -127,7 +127,7 @@
}
.site-name {
padding: 0 .3em;
padding: 0 0.3em;
display: inline-block;
}
@ -156,7 +156,7 @@
position: fixed;
top: 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);
transition-property: transform;
transition-duration: 0.25s;
@ -182,7 +182,7 @@
color: var(--topBarText);
background-color: $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);
.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>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.MobilePostButton {
&.button-default {
@ -30,9 +30,8 @@
display: flex;
justify-content: 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;
transition: 0.35s transform;
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 {
pointer-events: initial;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgb(0 0 0 / 50%);
}
&.open {
@ -69,10 +69,11 @@ export default {
@keyframes modal-background-fadein {
from {
background-color: rgba(0, 0, 0, 0);
background-color: rgb(0 0 0 / 0%);
}
to {
background-color: rgba(0, 0, 0, 0.5);
background-color: rgb(0 0 0 / 50%);
}
}
</style>

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

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

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

@ -2,19 +2,21 @@
margin: 1em;
table {
width:100%;
width: 100%;
text-align: left;
padding-left:10px;
padding-bottom:20px;
padding-left: 10px;
padding-bottom: 20px;
th, td {
th,
td {
width: 180px;
max-width: 360px;
overflow: hidden;
overflow: hidden;
vertical-align: text-top;
}
th+th, td+td {
th + th,
td + td {
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>
<style lang="scss">
@import '../../_variables.scss';
@import './mrf_transparency_panel.scss';
@import "../../variables";
@import "./mrf_transparency_panel";
</style>

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

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

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

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

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

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

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

@ -27,7 +27,8 @@
<script src="./navigation_pins.js"></script>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.NavigationPins {
display: flex;
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
.Notification {
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
word-wrap: break-word;
word-break: break-word;
--emoji-size: 14px;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
word-wrap: break-word;
word-break: break-word;
--emoji-size: 14px;
&:hover {
--_still-image-img-visibility: visible;
@ -54,7 +55,7 @@
margin-left: 0.2em;
&::before {
content: ' ';
content: " ";
}
}

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

@ -1,4 +1,4 @@
@import '../../_variables.scss';
@import "../../variables";
.Notifications {
&:not(.minimal) {
@ -25,12 +25,13 @@
&.unseen {
.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 {
box-sizing: border-box;
@ -38,6 +39,7 @@
canvas {
display: none;
}
img {
visibility: visible;
}
@ -79,7 +81,8 @@
}
}
.follow-text, .move-text {
.follow-text,
.move-text {
padding: 0.5em 0;
overflow-wrap: break-word;
display: flex;

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

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

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

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

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

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

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

@ -41,7 +41,7 @@
<script src="./popover.js" />
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.popover-trigger-button {
display: inline-block;
@ -52,31 +52,31 @@
position: fixed;
min-width: 0;
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);
}
.popover-default {
&:after {
content: '';
&::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
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);
pointer-events: none;
}
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--text;
color: var(--popoverText, $fallback--text);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
@ -87,7 +87,7 @@
.dropdown-menu {
display: block;
padding: .5rem 0;
padding: 0.5rem 0;
font-size: 1em;
text-align: left;
list-style: none;
@ -97,7 +97,7 @@
.dropdown-divider {
height: 0;
margin: .5rem 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border);
@ -113,7 +113,7 @@
text-align: inherit;
white-space: nowrap;
border: none;
border-radius: 0px;
border-radius: 0;
background-color: transparent;
box-shadow: none;
width: 100%;
@ -126,7 +126,7 @@
svg {
width: 22px;
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: var(--selectedMenuPopover, $fallback--lightBg);
box-shadow: none;
--btnText: var(--selectedMenuPopoverText, $fallback--link);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
svg {
color: var(--selectedMenuPopoverIcon, $fallback--icon);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
}
}
@ -161,16 +165,16 @@
max-height: 22px;
line-height: 22px;
text-align: center;
border-radius: 0px;
border-radius: 0;
background-color: $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);
margin-right: 0.75em;
&.menu-checkbox-checked::after {
font-size: 1.25em;
content: '✓';
content: "✓";
}
&.-radio {
@ -178,16 +182,15 @@
&.menu-checkbox-checked::after {
font-size: 2em;
content: '•';
content: "•";
}
}
}
}
.button-default.dropdown-item {
&,
i[class*=icon-] {
i[class*="icon-"] {
color: $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>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.post-status-form {
position: relative;
@ -378,7 +378,9 @@
&:hover {
text-decoration: underline;
}
svg, i {
svg,
i {
margin-left: 0.2em;
font-size: 0.8em;
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
.media-upload-icon {
order: 1;
@ -474,16 +446,53 @@
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 {
text-align: center;
}
.media-upload-wrapper {
margin-right: .2em;
margin-bottom: .5em;
margin-right: 0.2em;
margin-bottom: 0.5em;
width: 18em;
img, video {
img,
video {
object-fit: contain;
max-height: 10em;
}
@ -557,18 +566,14 @@
}
}
.btn[disabled] {
cursor: not-allowed;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 0.6; }
to { opacity: 0.6; }
}
@keyframes fade-out {
from { opacity: 0.6; }
to { opacity: 0; }
to { opacity: 0; }
}
.drop-indicator {

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

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

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

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

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

@ -15,6 +15,3 @@
</template>
<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>
<style lang="scss">
@import '../../_variables.scss';
@import '../../_mixins.scss';
@import "../../variables";
@import "../../mixins";
.ReplyButton {
display: flex;
@ -86,6 +86,5 @@
}
}
}
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -28,8 +28,3 @@
</template>
<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>
<style lang="scss">
.css-unit-input, .css-unit-input select {
.css-unit-input,
.css-unit-input select {
margin-left: 0.5em;
width: 4em !important;
max-width: 4em !important;
min-width: 4em !important;
width: 4em;
max-width: 4em;
min-width: 4em;
}
</style>

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

@ -1,4 +1,5 @@
@import 'src/_variables.scss';
@import "src/variables";
.settings-modal {
overflow: hidden;
@ -6,32 +7,13 @@
.option-list {
list-style-type: none;
padding-left: 2em;
li {
margin-bottom: 0.5em;
}
.suboptions {
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));
}
margin-top: 0.3em;
}
}
@ -63,6 +45,7 @@
.settings-footer {
display: flex;
>* {
margin-right: 0.5em;
}
@ -72,4 +55,26 @@
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 {
height: 100%;
@ -10,7 +11,8 @@
> div,
> label {
display: block;
margin-bottom: .5em;
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 0;
}
@ -21,7 +23,7 @@
.option-list {
margin: 0;
padding-left: .5em;
padding-left: 0.5em;
}
}

9
src/components/settings_modal/tabs/filtering_tab.js
View File

@ -1,4 +1,4 @@
import { filter, trim } from 'lodash'
import { filter, trim, debounce } from 'lodash'
import BooleanSetting from '../helpers/boolean_setting.vue'
import ChoiceSetting from '../helpers/choice_setting.vue'
import IntegerSetting from '../helpers/integer_setting.vue'
@ -29,11 +29,16 @@ const FilteringTab = {
},
set (value) {
this.muteWordsStringLocal = value
this.debouncedSetMuteWords(value)
}
},
debouncedSetMuteWords () {
return debounce((value) => {
this.$store.dispatch('setOption', {
name: 'muteWords',
value: filter(value.split('\n'), (word) => trim(word).length > 0)
})
}
}, 1000)
}
},
// Updating nested properties

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

@ -464,6 +464,7 @@
justify-content: space-evenly;
flex-wrap: wrap;
}
.column-settings .size-label {
display: block;
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 {
height: 100%;
height: 100%;
.usersearch-wrapper {
padding: 1em;
}
.usersearch-wrapper {
padding: 1em;
}
.bulk-actions {
text-align: right;
padding: 0 1em;
min-height: 2em;
}
.bulk-actions {
text-align: right;
padding: 0 1em;
min-height: 2em;
}
.bulk-action-button {
width: 10em
}
.bulk-action-button {
width: 10em;
}
.domain-mute-form {
padding: 1em;
display: flex;
flex-direction: column
}
.domain-mute-form {
padding: 1em;
display: flex;
flex-direction: column;
}
.domain-mute-button {
align-self: flex-end;
margin-top: 1em;
width: 10em
}
.domain-mute-button {
align-self: flex-end;
margin-top: 1em;
width: 10em;
}
}

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

@ -1,4 +1,5 @@
@import '../../../_variables.scss';
@import "../../../variables";
.profile-tab {
.bio {
margin: 0;
@ -8,7 +9,7 @@
padding-top: 5px;
}
input[type=file] {
input[type="file"] {
padding: 5px;
height: auto;
}
@ -52,7 +53,7 @@
right: 0.2em;
border-radius: $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;
width: 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>
<style lang="scss">
@import '../../../../_variables.scss';
@import "../../../../variables";
.mfa-settings {
.mfa-heading, .method-item {
.mfa-heading,
.method-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
@ -155,18 +157,19 @@
display: flex;
justify-content: center;
flex-wrap: wrap;
.qr-code {
flex: 1;
padding-right: 10px;
}
.verify { flex: 1; }
.error { margin: 4px 0 0 0; }
.error { margin: 4px 0 0; }
.confirm-otp-actions {
button {
width: 15em;
margin-top: 5px;
}
}
}
}

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

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

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

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

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