sjw
/
pleroma-fe
mirror of https://git.pleroma.social/sjw/pleroma-fe.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Use stylelint

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

9
.stylelintrc.json
View File

@ -10,12 +10,17 @@
"declaration-no-important": true,
"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
}
}

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({

1
package.json
View File

@ -120,6 +120,7 @@
"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",

78
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;
}
@ -215,8 +214,10 @@ nav {
grid-template-columns:
var(--effectiveSidebarColumnWidth)
var(--effectiveContentColumnWidth);
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
grid-template-areas: "sidebar content";
grid-template-rows: 1fr;
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
box-sizing: border-box;
margin: 0 auto;
align-content: flex-start;
@ -231,8 +232,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 +307,7 @@ nav {
align-content: start;
}
&.-reverse:not(.-wide):not(.-mobile) {
&.-reverse:not(.-wide, .-mobile) {
grid-template-columns:
var(--effectiveContentColumnWidth)
var(--effectiveSidebarColumnWidth);
@ -336,11 +336,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 +386,7 @@ nav {
background: transparent;
}
i[class*=icon-],
i[class*="icon-"],
.svg-inline--fa {
color: $fallback--text;
color: var(--btnText, $fallback--text);
@ -400,12 +397,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 +438,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 +506,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 +527,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 +541,7 @@ textarea,
flex: 1;
}
&[type=radio] {
&[type="radio"] {
display: none;
&:checked + label::before {
@ -555,7 +561,7 @@ textarea,
+ label::before {
flex-shrink: 0;
display: inline-block;
content: '';
content: "";
transition: box-shadow 200ms;
width: 1.1em;
height: 1.1em;
@ -575,7 +581,7 @@ textarea,
}
}
&[type=checkbox] {
&[type="checkbox"] {
display: none;
&:checked + label::before {
@ -594,7 +600,7 @@ textarea,
+ label::before {
flex-shrink: 0;
display: inline-block;
content: '✓';
content: "✓";
transition: color 200ms;
width: 1.1em;
height: 1.1em;
@ -634,10 +640,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 +675,6 @@ option {
}
}
@import './panel.scss';
.fa {
color: grey;
}
@ -686,7 +690,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 +793,8 @@ option {
.fa-old-padding {
&.iconLetter,
&.svg-inline--fa, &-layer {
&.svg-inline--fa,
&-layer {
padding: 0 0.3em;
}
}
@ -883,3 +888,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>

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;
}
}
}
@ -251,18 +266,4 @@
&.-loading {
cursor: progress;
}
&.-contain-fit {
img,
canvas {
object-fit: contain;
}
}
&.-cover-fit {
img,
canvas {
object-fit: cover;
}
}
}

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

@ -24,7 +24,7 @@
<script src="./autosuggest.js"></script>
<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);

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

@ -1,4 +1,4 @@
@import '../../_variables.scss';
@import "../../variables";
.DesktopNav {
width: 100%;
@ -14,9 +14,11 @@
.inner-nav {
display: grid;
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
grid-template-rows: var(--navbar-height);
grid-template-columns: 2fr auto 2fr;
grid-template-areas: "sitename logo actions";
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
box-sizing: border-box;
padding: 0 1.2em;
margin: auto;
@ -27,20 +29,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 +43,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 +76,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 +88,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

@ -86,7 +86,7 @@
<script src='./gallery.js'></script>
<style lang="scss">
@import '../../_variables.scss';
@import "../../variables";
.Gallery {
.gallery-rows {
@ -100,6 +100,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 +161,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 +185,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

@ -120,32 +120,12 @@ $modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2)
$modal-view-button-icon-width: 3em;
$modal-view-button-icon-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 +206,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 +216,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 +234,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 +249,7 @@ $modal-view-button-icon-margin: 0.5em;
&--next {
right: 0;
.arrow-icon {
right: $modal-view-button-icon-margin;
}
@ -278,10 +260,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