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

Merge branch 'tusooa/stylelint' into 'develop' 

Use stylelint

Closes #1173 and #857

See merge request pleroma/pleroma-fe!1752
This commit is contained in:
tusooa 2023-01-15 17:02:24 +00:00
parent 4d2056d8aa d2ba67d565
commit dc897a5fef
125 changed files with 1246 additions and 1425 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
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"
},
@ -103,7 +103,9 @@
"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-top: 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>

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

@ -1,4 +1,4 @@
@import '../../_variables.scss';
@import "../../variables";
.Attachment {
display: inline-flex;
@ -107,8 +107,8 @@
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;
@ -134,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%;
@ -159,8 +173,9 @@
.image {
flex: 1;
img {
border: 0px;
border: 0;
border-radius: 5px;
height: 100%;
object-fit: cover;
@ -171,9 +186,10 @@
flex: 2;
margin: 8px;
word-break: break-all;
h1 {
font-size: 1rem;
margin: 0px;
margin: 0;
}
}
}
@ -251,20 +267,6 @@
cursor: progress;
}
&.-contain-fit {
img,
canvas {
object-fit: contain;
}
}
&.-cover-fit {
img,
canvas {
object-fit: cover;
}
}
&.-compact {
.placeholder-container {
padding-bottom: 0.5em;

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;

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

@ -87,7 +87,7 @@
<script src='./gallery.js'></script>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.Gallery {
.gallery-rows {
@ -101,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;
}
@ -115,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;
}
}
@ -139,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;

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

@ -121,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;
}
@ -227,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;
@ -237,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%);
}
}
@ -255,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;
}
@ -269,6 +250,7 @@ $modal-view-button-icon-margin: 0.5em;
&--next {
right: 0;
.arrow-icon {
right: $modal-view-button-icon-margin;
}
@ -279,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;
}
}

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;

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

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

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

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

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

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

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

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

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

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