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

remove all "fallback variables"

This commit is contained in:
Henry Jameson 2024-03-04 19:45:42 +02:00
parent 50a9c077fb
commit 075f2cb903
80 changed files with 99 additions and 382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.scss
View File

@ -1,6 +1,5 @@
// stylelint-disable rscss/class-format // stylelint-disable rscss/class-format
/* stylelint-disable no-descending-specificity */ /* stylelint-disable no-descending-specificity */
@import "./variables";
@import "./panel"; @import "./panel";
:root { :root {

36
src/_variables.scss
View File

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

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

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

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

@ -99,16 +99,14 @@
<script src="./announcement.js"></script> <script src="./announcement.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.announcement { .announcement {
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
.heading, .heading,
.body { .body {
margin-bottom: var(--status-margin, $status-margin); margin-bottom: var(--status-margin);
} }
.footer { .footer {

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

@ -61,15 +61,13 @@
<script src="./announcements_page.js"></script> <script src="./announcements_page.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.announcements-page { .announcements-page {
.post-form { .post-form {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
.heading, .heading,
.body { .body {
margin-bottom: var(--status-margin, $status-margin); margin-bottom: var(--status-margin);
} }
.post-button { .post-button {

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

@ -1,5 +1,3 @@
@import "../../variables";
.Attachment { .Attachment {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -131,23 +129,12 @@
.attachment-button { .attachment-button {
padding: 0; padding: 0;
border-radius: $fallback--tooltipRadius; border-radius: var(--roundness);
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; text-align: center;
width: 2em; width: 2em;
height: 2em; height: 2em;
margin-left: 0.5em; margin-left: 0.5em;
font-size: 1.25em; font-size: 1.25em;
// TODO: theming? hard to theme with unknown background image color
background: rgb(230 230 230 / 70%);
.svg-inline--fa {
color: rgb(0 0 0 / 60%);
}
&:hover .svg-inline--fa {
color: rgb(0 0 0 / 90%);
}
} }
} }
@ -222,8 +209,7 @@
&.-placeholder { &.-placeholder {
display: inline-block; display: inline-block;
color: $fallback--link; color: var(--link);
color: var(--postLink, $fallback--link);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
height: auto; height: auto;

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

@ -25,8 +25,6 @@
<script src="./autosuggest.js"></script> <script src="./autosuggest.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.autosuggest { .autosuggest {
position: relative; position: relative;
@ -41,11 +39,9 @@
top: 100%; top: 100%;
right: 0; right: 0;
max-height: 400px; max-height: 400px;
background-color: $fallback--bg; background-color: var(--bg);
background-color: var(--bg, $fallback--bg);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: $fallback--border;
border-color: var(--border); border-color: var(--border);
border-radius: var(--roundness); border-radius: var(--roundness);
border-top-left-radius: 0; border-top-left-radius: 0;

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

@ -17,8 +17,6 @@
<script src="./avatar_list.js"></script> <script src="./avatar_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.avatars { .avatars {
display: flex; display: flex;
margin: 0; margin: 0;
@ -36,8 +34,7 @@
} }
.avatar-small { .avatar-small {
border-radius: $fallback--avatarAltRadius; border-radius: var(--roundness);
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
height: 24px; height: 24px;
width: 24px; width: 24px;
} }

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

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

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

@ -45,8 +45,6 @@
<script src="./chat_list.js"></script> <script src="./chat_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.chat-list { .chat-list {
min-height: 25em; min-height: 25em;
margin-bottom: 0; margin-bottom: 0;
@ -57,8 +55,7 @@
font-size: 1.2em; font-size: 1.2em;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: $fallback--text; color: var(--textFaint);
color: var(--faint, $fallback--text);
} }
</style> </style>

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

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

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

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

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

@ -26,8 +26,6 @@
<script src="./chat_title.js"></script> <script src="./chat_title.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.chat-title { .chat-title {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@ -54,8 +52,7 @@
margin-right: 0.5em; margin-right: 0.5em;
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
border-radius: $fallback--avatarAltRadius; border-radius: var(--roundness);
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
&.animated::before { &.animated::before {
display: none; display: none;

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

@ -54,7 +54,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.checkbox { .checkbox {

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

@ -1,5 +1,3 @@
@import "../../variables";
.color-input { .color-input {
display: inline-flex; display: inline-flex;
@ -12,8 +10,6 @@
input { input {
background: none; background: none;
color: $fallback--lightText;
color: var(--inputText, $fallback--lightText);
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;

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

@ -213,14 +213,12 @@
<script src="./conversation.js"></script> <script src="./conversation.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Conversation { .Conversation {
z-index: 1; z-index: 1;
.conversation-dive-to-top-level-box { .conversation-dive-to-top-level-box {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
@ -230,20 +228,22 @@
} }
.thread-ancestors { .thread-ancestors {
margin-left: var(--status-margin, $status-margin); margin-left: var(--status-margin);
border-left: 2px solid var(--border, $fallback--border); border-left: 2px solid var(--border);
} }
.thread-ancestor.-faded .StatusContent { .thread-ancestor.-faded .RichContent {
--link: var(--faintLink); /* stylelint-disable declaration-no-important */
--text: var(--faint); --text: var(--textFaint) !important;
--link: var(--linkFaint) !important;
color: var(--text); --funtextGreentext: var(--funtextGreentextFaint) !important;
--funtextCyantext: var(--funtextCyantextFaint) !important;
/* stylelint-enable declaration-no-important */
} }
.thread-ancestor-dive-box { .thread-ancestor-dive-box {
padding-left: var(--status-margin, $status-margin); padding-left: var(--status-margin);
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
@ -256,11 +256,11 @@
} }
.thread-ancestor-dive-box-inner { .thread-ancestor-dive-box-inner {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
} }
.conversation-status { .conversation-status {
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
border-radius: 0; border-radius: 0;
} }
@ -274,7 +274,7 @@
} }
.thread-ancestors + .thread-tree > .conversation-status { .thread-ancestors + .thread-tree > .conversation-status {
border-top: 1px solid var(--border, $fallback--border); border-top: 1px solid var(--border);
} }
/* expanded conversation in timeline */ /* expanded conversation in timeline */
@ -288,7 +288,7 @@
&.-expanded.status-fadein { &.-expanded.status-fadein {
background: var(--background); background: var(--background);
padding: calc(var(--status-margin, $status-margin) / 2); padding: calc(var(--status-margin) / 2);
} }
} }
</style> </style>

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

@ -1,5 +1,3 @@
@import "../../variables";
.DesktopNav { .DesktopNav {
width: 100%; width: 100%;
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);

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

@ -25,8 +25,6 @@
<script src="./dialog_modal.js"></script> <script src="./dialog_modal.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
// TODO: unify with other modals. // TODO: unify with other modals.
.dark-overlay { .dark-overlay {
&::before { &::before {
@ -54,8 +52,6 @@
z-index: 2001; z-index: 2001;
cursor: default; cursor: default;
display: block; display: block;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.dialog-modal-heading { .dialog-modal-heading {
.title { .title {
@ -66,18 +62,13 @@
.dialog-modal-content { .dialog-modal-content {
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
white-space: normal; white-space: normal;
} }
.dialog-modal-footer { .dialog-modal-footer {
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
background-color: $fallback--bg; border-top: 1px solid var(--border);
background-color: var(--bg, $fallback--bg);
border-top: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

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

@ -110,8 +110,6 @@
<script src="./emoji_input.js"></script> <script src="./emoji_input.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.input.emoji-input { .input.emoji-input {
padding: 0; padding: 0;
display: flex; display: flex;

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

@ -1,5 +1,3 @@
@import "../../variables";
$emoji-picker-header-height: 36px; $emoji-picker-header-height: 36px;
$emoji-picker-header-picture-width: 32px; $emoji-picker-header-picture-width: 32px;
$emoji-picker-header-picture-height: 32px; $emoji-picker-header-picture-height: 32px;
@ -72,8 +70,7 @@ $emoji-picker-emoji-size: 32px;
.additional-tabs { .additional-tabs {
display: flex; display: flex;
border-left: 1px solid; border-left: 1px solid;
border-left-color: $fallback--icon; border-left-color: var(--border);
border-left-color: var(--icon, $fallback--icon);
padding-left: 7px; padding-left: 7px;
flex: 0 0 auto; flex: 0 0 auto;
} }

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

@ -72,7 +72,6 @@
<script src="./emoji_reactions.js"></script> <script src="./emoji_reactions.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.EmojiReactions { .EmojiReactions {
@ -102,11 +101,9 @@
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $fallback--text;
color: var(--btnText, $fallback--text);
&.-picked-reaction { &.-picked-reaction {
border: 1px solid var(--accent, $fallback--link); border: 1px solid var(--accent);
margin-right: -1px; margin-right: -1px;
} }
} }
@ -149,18 +146,16 @@
} }
.svg-inline--fa { .svg-inline--fa {
color: $fallback--text; color: var(--text);
color: var(--btnText, $fallback--text);
} }
&.-picked-reaction { &.-picked-reaction {
border: 1px solid var(--accent, $fallback--link); border: 1px solid var(--accent);
margin-left: -1px; // offset the border, can't use inset shadows either margin-left: -1px; // offset the border, can't use inset shadows either
margin-right: -1px; margin-right: -1px;
.svg-inline--fa { .svg-inline--fa {
color: $fallback--link; color: var(--accent);
color: var(--accent, $fallback--link);
} }
} }
@ -176,8 +171,7 @@
@include focused-style { @include focused-style {
.svg-inline--fa { .svg-inline--fa {
color: $fallback--link; color: var(--accent);
color: var(--accent, $fallback--link);
} }
.focus-marker { .focus-marker {

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

@ -201,7 +201,6 @@
<script src="./extra_buttons.js"></script> <script src="./extra_buttons.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.ExtraButtons { .ExtraButtons {
@ -211,8 +210,7 @@
margin: -10px; margin: -10px;
&:hover .svg-inline--fa { &:hover .svg-inline--fa {
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }

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

@ -80,8 +80,6 @@
<script src="./extra_notifications.js" /> <script src="./extra_notifications.js" />
<style lang="scss"> <style lang="scss">
@import "../../variables";
.ExtraNotifications { .ExtraNotifications {
width: 100%; width: 100%;
display: flex; display: flex;
@ -91,8 +89,7 @@
.notification { .notification {
width: 100%; width: 100%;
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;

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

@ -65,7 +65,6 @@
<script src="./favorite_button.js"></script> <script src="./favorite_button.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.FavoriteButton { .FavoriteButton {
@ -88,8 +87,7 @@
&:hover .svg-inline--fa, &:hover .svg-inline--fa,
&.-favorited .svg-inline--fa { &.-favorited .svg-inline--fa {
color: $fallback--cOrange; color: var(--cOrange);
color: var(--cOrange, $fallback--cOrange);
} }
@include unfocused-style { @include unfocused-style {

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

@ -42,8 +42,6 @@
<script src="./flash.js"></script> <script src="./flash.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Flash { .Flash {
display: inline-block; display: inline-block;
width: 100%; width: 100%;

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

@ -53,8 +53,6 @@
<script src="./font_control.js"></script> <script src="./font_control.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.font-control { .font-control {
input.custom-font { input.custom-font {
min-width: 10em; min-width: 10em;

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

@ -87,8 +87,6 @@
<script src='./gallery.js'></script> <script src='./gallery.js'></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Gallery { .Gallery {
.gallery-rows { .gallery-rows {
display: flex; display: flex;

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

@ -25,8 +25,6 @@
<script src="./global_notice_list.js"></script> <script src="./global_notice_list.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.global-notice-list { .global-notice-list {
position: fixed; position: fixed;
top: calc(var(--navbar-height) + 0.5em); top: calc(var(--navbar-height) + 0.5em);

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

@ -104,8 +104,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.interface-language-switcher { .interface-language-switcher {
.language-select { .language-select {
margin-right: 1em; margin-right: 1em;

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

@ -33,8 +33,6 @@
<script src="./link-preview.js"></script> <script src="./link-preview.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.link-preview-card { .link-preview-card {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -81,12 +79,9 @@
margin: 2em 0; margin: 2em 0;
} }
color: $fallback--text;
color: var(--text, $fallback--text);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: var(--roundness); border-radius: var(--roundness);
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
} }
</style> </style>

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

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

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

@ -28,8 +28,6 @@
<script src="./lists_user_search.js"></script> <script src="./lists_user_search.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.ListsUserSearch { .ListsUserSearch {
.input-wrap { .input-wrap {
display: flex; display: flex;

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

@ -93,8 +93,6 @@
<script src="./login_form.js"></script> <script src="./login_form.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.login-form { .login-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -36,8 +36,6 @@
<script src="./media_upload.js"></script> <script src="./media_upload.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.media-upload { .media-upload {
.hidden-input-file { .hidden-input-file {
display: none; display: none;

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

@ -1,5 +1,3 @@
@import "../../variables";
.MentionLink { .MentionLink {
position: relative; position: relative;
white-space: normal; white-space: normal;
@ -13,7 +11,7 @@
} }
.mention-avatar { .mention-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--roundness);
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
vertical-align: middle; vertical-align: middle;
@ -60,8 +58,8 @@
} }
&.-has-selection { &.-has-selection {
color: var(--alertNeutralText, $fallback--text); color: var(--selectionText);
background-color: var(--alertNeutral, $fallback--fg); background-color: var(--selectionBackground);
} }
.at { .at {
@ -101,7 +99,7 @@
} }
.serverName.-faded { .serverName.-faded {
color: var(--faintLink, $fallback--link); color: var(--linkFaint);
} }
} }

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

@ -123,8 +123,6 @@
<script src="./mobile_nav.js"></script> <script src="./mobile_nav.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.MobileNav { .MobileNav {
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);
@ -195,11 +193,7 @@
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
position: absolute; position: absolute;
color: var(--topBarText); box-shadow: var(--shadow);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow);
.spacer { .spacer {
flex: 1; flex: 1;

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

@ -13,8 +13,6 @@
<script src="./mobile_post_status_button.js"></script> <script src="./mobile_post_status_button.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.MobilePostButton { .MobilePostButton {
&.button-default { &.button-default {
width: 5em; width: 5em;
@ -40,8 +38,7 @@
svg { svg {
font-size: 1.5em; font-size: 1.5em;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }

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

@ -166,8 +166,6 @@
<script src="./moderation_tools.js"></script> <script src="./moderation_tools.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.moderation-tools-popover { .moderation-tools-popover {
height: 100%; height: 100%;

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

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

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

@ -103,8 +103,6 @@
<script src="./nav_panel.js"></script> <script src="./nav_panel.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.NavPanel { .NavPanel {
.panel { .panel {
overflow: hidden; overflow: hidden;

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

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

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

@ -1,5 +1,3 @@
@import "../../variables";
.Notifications { .Notifications {
&:not(.minimal) { &:not(.minimal) {
// a bit of a hack to allow scrolling below notifications // a bit of a hack to allow scrolling below notifications

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

@ -23,22 +23,18 @@ export default {}
</script> </script>
<style lang="scss"> <style lang="scss">
@import "src/variables";
.panel-loading { .panel-loading {
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 2em; font-size: 2em;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
.loading-text svg { .loading-text svg {
line-height: 0; line-height: 0;
vertical-align: middle; vertical-align: middle;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
} }
</style> </style>

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

@ -30,7 +30,7 @@
<div v-else> <div v-else>
<p <p
v-if="passwordResetRequested" v-if="passwordResetRequested"
class="password-reset-required error" class="alert password-reset-required error"
> >
{{ $t('password_reset.password_reset_required') }} {{ $t('password_reset.password_reset_required') }}
</p> </p>
@ -77,8 +77,6 @@
<script src="./password_reset.js"></script> <script src="./password_reset.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.password-reset-form { .password-reset-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -117,11 +115,6 @@
margin: 0.3em 0 1em; margin: 0.3em 0 1em;
} }
.password-reset-required {
background-color: var(--alertError, $fallback--alertError);
padding: 10px 0;
}
.notice-dismissible { .notice-dismissible {
padding-right: 2rem; padding-right: 2rem;
} }

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

@ -103,8 +103,6 @@
<script src="./poll.js"></script> <script src="./poll.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.poll { .poll {
.votes { .votes {
display: flex; display: flex;
@ -121,8 +119,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: relative; position: relative;
color: $fallback--lightText; color: var(--textLight);
color: var(--lightText, $fallback--lightText);
} }
.option-result-label { .option-result-label {

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

@ -95,8 +95,6 @@
<script src="./poll_form.js"></script> <script src="./poll_form.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.poll-form { .poll-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -375,8 +375,6 @@
<script src="./post_status_form.js"></script> <script src="./post_status_form.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.post-status-form { .post-status-form {
position: relative; position: relative;
@ -437,15 +435,12 @@
.preview-error { .preview-error {
font-style: italic; font-style: italic;
color: $fallback--faint; color: var(--textFaint);
color: var(--faint, $fallback--faint);
} }
.preview-status { .preview-status {
border: 1px solid $fallback--border; border: 1px solid var(--border);
border: 1px solid var(--border, $fallback--border); border-radius: var(--roundness);
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
padding: 0.5em; padding: 0.5em;
margin: 0; margin: 0;
} }
@ -456,8 +451,7 @@
.text-format { .text-format {
.only-format { .only-format {
color: $fallback--faint; color: var(--textFaint);
color: var(--faint, $fallback--faint);
} }
} }
@ -585,8 +579,7 @@
margin: 0 0.5em; margin: 0 0.5em;
&.error { &.error {
color: $fallback--cRed; color: var(--cRed);
color: var(--cRed, $fallback--cRed);
} }
} }
@ -609,14 +602,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0.6; opacity: 0.6;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text); background-color: var(--bg);
background-color: $fallback--bg; border-radius: var(--roundness);
background-color: var(--bg, $fallback--bg); border: 2px dashed var(--text);
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
border: 2px dashed $fallback--text;
border: 2px dashed var(--text, $fallback--text);
} }
} }
</style> </style>

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

@ -41,7 +41,6 @@
<script src="./react_button.js"></script> <script src="./react_button.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.ReactButton { .ReactButton {
@ -58,7 +57,7 @@
height: 1px; height: 1px;
width: 100%; width: 100%;
margin: 0.5em; margin: 0.5em;
background-color: var(--border, $fallback--border); background-color: var(--border);
} }
.reaction-picker { .reaction-picker {
@ -99,11 +98,6 @@
padding: 10px; padding: 10px;
margin: -10px; margin: -10px;
&:hover .svg-inline--fa {
color: $fallback--text;
color: var(--text, $fallback--text);
}
@include unfocused-style { @include unfocused-style {
.focus-marker { .focus-marker {
visibility: hidden; visibility: hidden;

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

@ -320,9 +320,6 @@
<script src="./registration.js"></script> <script src="./registration.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
$validations-cRed: #f04124;
.registration-form { .registration-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -369,8 +366,7 @@ $validations-cRed: #f04124;
} }
.form-group--error .form--label { .form-group--error .form--label {
color: $validations-cRed; color: var(--cRed);
color: var(--cRed, $validations-cRed);
} }
.form-error { .form-error {

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

@ -59,7 +59,6 @@
<script src="./reply_button.js"></script> <script src="./reply_button.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.ReplyButton { .ReplyButton {
@ -78,8 +77,7 @@
.interactive { .interactive {
&:hover .svg-inline--fa, &:hover .svg-inline--fa,
&.-active .svg-inline--fa { &.-active .svg-inline--fa {
color: $fallback--cBlue; color: var(--cBlue);
color: var(--cBlue, $fallback--cBlue);
} }
@include unfocused-style { @include unfocused-style {

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

@ -1,5 +1,3 @@
@import "../../variables";
.Report { .Report {
.report-content { .report-content {
margin: 0.5em 0 1em; margin: 0.5em 0 1em;

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

@ -84,7 +84,6 @@
<script src="./retweet_button.js"></script> <script src="./retweet_button.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
@import "../../mixins"; @import "../../mixins";
.RetweetButton { .RetweetButton {
@ -107,8 +106,7 @@
&:hover .svg-inline--fa, &:hover .svg-inline--fa,
&.-repeated .svg-inline--fa { &.-repeated .svg-inline--fa {
color: $fallback--cGreen; color: var(--cGreen);
color: var(--cGreen, $fallback--cGreen);
} }
@include unfocused-style { @include unfocused-style {

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

@ -64,8 +64,6 @@
<script src="./scope_selector.js"></script> <script src="./scope_selector.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.ScopeSelector { .ScopeSelector {
.scope { .scope {
display: inline-block; display: inline-block;

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

@ -60,8 +60,6 @@
<script src="./search_bar.js"></script> <script src="./search_bar.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.SearchBar { .SearchBar {
display: inline-flex; display: inline-flex;
align-items: baseline; align-items: baseline;
@ -86,8 +84,7 @@
} }
.cancel-icon { .cancel-icon {
color: $fallback--text; color: var(--text);
color: var(--btnTopBarText, $fallback--text);
} }
} }

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

@ -22,8 +22,6 @@
<script src="./select.js"> </script> <script src="./select.js"> </script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
/* TODO fix order of styles */ /* TODO fix order of styles */
label.Select { label.Select {
padding: 0; padding: 0;
@ -50,7 +48,6 @@ label.Select {
right: 5px; right: 5px;
height: 100%; height: 100%;
width: 0.875em; width: 0.875em;
color: $fallback--text;
font-family: var(--font); font-family: var(--font);
line-height: 2; line-height: 2;
z-index: 0; z-index: 0;

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

@ -1,5 +1,3 @@
@import "src/variables";
.settings-modal { .settings-modal {
overflow: hidden; overflow: hidden;

7
src/components/settings_modal/settings_modal_admin_content.scss
View File

@ -1,10 +1,8 @@
@import "src/variables";
.settings_tab-switcher { .settings_tab-switcher {
height: 100%; height: 100%;
.setting-item { .setting-item {
border-bottom: 2px solid var(--fg, $fallback--fg); border-bottom: 2px solid var(--border);
margin: 1em 1em 1.4em; margin: 1em 1em 1.4em;
padding-bottom: 1.4em; padding-bottom: 1.4em;
@ -45,8 +43,7 @@
.unavailable, .unavailable,
.unavailable svg { .unavailable svg {
color: var(--cRed, $fallback--cRed); color: var(--cRed);
color: $fallback--cRed;
} }
} }
} }

7
src/components/settings_modal/settings_modal_user_content.scss
View File

@ -1,10 +1,8 @@
@import "src/variables";
.settings_tab-switcher { .settings_tab-switcher {
height: 100%; height: 100%;
.setting-item { .setting-item {
border-bottom: 2px solid var(--fg, $fallback--fg); border-bottom: 2px solid var(--border);
margin: 1em 1em 1.4em; margin: 1em 1em 1.4em;
padding-bottom: 1.4em; padding-bottom: 1.4em;
@ -45,8 +43,7 @@
.unavailable, .unavailable,
.unavailable svg { .unavailable svg {
color: var(--cRed, $fallback--cRed); color: var(--cRed);
color: $fallback--cRed;
} }
} }
} }

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

@ -1,5 +1,3 @@
@import "../../../variables";
.profile-tab { .profile-tab {
.bio { .bio {
margin: 0; margin: 0;

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

@ -139,8 +139,6 @@
<script src="./mfa.js"></script> <script src="./mfa.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../../../variables";
.mfa-settings { .mfa-settings {
.mfa-heading, .mfa-heading,
.method-item { .method-item {
@ -151,8 +149,7 @@
} }
.warning { .warning {
color: $fallback--cOrange; color: var(--cOrange);
color: var(--cOrange, $fallback--cOrange);
} }
.setup-otp { .setup-otp {

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

@ -21,8 +21,6 @@
</template> </template>
<script src="./mfa_backup_codes.js"></script> <script src="./mfa_backup_codes.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../../../variables";
.mfa-backup-codes { .mfa-backup-codes {
.warning { .warning {
color: var(--cOrange); color: var(--cOrange);

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

@ -1,5 +1,3 @@
@import "src/variables";
.theme-tab { .theme-tab {
padding-bottom: 2em; padding-bottom: 2em;
@ -162,8 +160,7 @@
.preview-container { .preview-container {
border-top: 1px dashed; border-top: 1px dashed;
border-bottom: 1px dashed; border-bottom: 1px dashed;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
margin: 1em 0; margin: 1em 0;
padding: 1em; padding: 1em;
background-color: var(--wallpaper); background-color: var(--wallpaper);
@ -252,8 +249,7 @@
.separator { .separator {
margin: 1em; margin: 1em;
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
} }
.btn { .btn {
@ -294,7 +290,7 @@
border: 0; border: 0;
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
color: var(--faint, $fallback--faint); color: var(--textFaint);
align-self: stretch; align-self: stretch;
} }

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

@ -75,8 +75,6 @@
<script src="./shout_panel.js"></script> <script src="./shout_panel.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.floating-shout { .floating-shout {
position: fixed; position: fixed;
bottom: 0.5em; bottom: 0.5em;
@ -97,8 +95,7 @@
cursor: pointer; cursor: pointer;
.icon { .icon {
color: $fallback--text; color: var(--text);
color: var(--panelText, $fallback--text);
margin-right: 0.5em; margin-right: 0.5em;
} }

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

@ -283,8 +283,6 @@
<script src="./side_drawer.js"></script> <script src="./side_drawer.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.side-drawer-container { .side-drawer-container {
position: fixed; position: fixed;
z-index: var(--ZI_navbar); z-index: var(--ZI_navbar);

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

@ -1,5 +1,3 @@
@import "../../variables";
.Status { .Status {
min-width: 0; min-width: 0;
white-space: normal; white-space: normal;
@ -12,24 +10,8 @@
--_still-image-label-visibility: hidden; --_still-image-label-visibility: hidden;
} }
&.-focused {
background-color: $fallback--lightBg;
background-color: var(--selectedPost, $fallback--lightBg);
color: $fallback--text;
color: var(--selectedPostText, $fallback--text);
--lightText: var(--selectedPostLightText, $fallback--light);
--faint: var(--selectedPostFaintText, $fallback--faint);
--faintLink: var(--selectedPostFaintLink, $fallback--faint);
--postLink: var(--selectedPostPostLink, $fallback--faint);
--postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
--icon: var(--selectedPostIcon, $fallback--icon);
}
.gravestone { .gravestone {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
display: flex; display: flex;
.deleted-text { .deleted-text {
@ -40,7 +22,7 @@
.status-container { .status-container {
display: flex; display: flex;
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
> * { > * {
min-width: 0; min-width: 0;
@ -52,7 +34,7 @@
} }
.pin { .pin {
padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0; padding: var(--status-margin) var(--status-margin) 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@ -68,7 +50,7 @@
} }
.left-side { .left-side {
margin-right: var(--status-margin, $status-margin); margin-right: var(--status-margin);
} }
.right-side { .right-side {
@ -77,7 +59,7 @@
} }
.usercard { .usercard {
margin-bottom: var(--status-margin, $status-margin); margin-bottom: var(--status-margin);
} }
.status-username { .status-username {
@ -238,11 +220,10 @@
} }
.repeat-info { .repeat-info {
padding: 0.4em var(--status-margin, $status-margin); padding: 0.4em var(--status-margin);
.repeat-icon { .repeat-icon {
color: $fallback--cGreen; color: var(--cGreen);
color: var(--cGreen, $fallback--cGreen);
} }
} }
@ -284,7 +265,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
display: flex; display: flex;
margin-top: var(--status-margin, $status-margin); margin-top: var(--status-margin);
> * { > * {
max-width: 4em; max-width: 4em;
@ -352,7 +333,7 @@
} }
.favs-repeated-users { .favs-repeated-users {
margin-top: var(--status-margin, $status-margin); margin-top: var(--status-margin);
} }
.stats { .stats {
@ -373,16 +354,16 @@
height: 100%; height: 100%;
width: 1px; width: 1px;
left: 0; left: 0;
background-color: var(--faint, $fallback--faint); background-color: var(--textFaint);
} }
} }
.stat-count { .stat-count {
margin-right: var(--status-margin, $status-margin); margin-right: var(--status-margin);
user-select: none; user-select: none;
.stat-title { .stat-title {
color: var(--faint, $fallback--faint); color: var(--textFaint);
font-size: 0.85em; font-size: 0.85em;
text-transform: uppercase; text-transform: uppercase;
position: relative; position: relative;
@ -419,7 +400,7 @@
.quoted-status { .quoted-status {
margin-top: 0.5em; margin-top: 0.5em;
border: 1px solid var(--border, $fallback--border); border: 1px solid var(--border);
border-radius: var(--roundness); border-radius: var(--roundness);
&.-unavailable-prompt { &.-unavailable-prompt {

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

@ -40,8 +40,6 @@
<script src="./status_popover.js"></script> <script src="./status_popover.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
/* popover styles load on-demand, so we need to override */ /* popover styles load on-demand, so we need to override */
.status-popover.popover { .status-popover.popover {
font-size: 1rem; font-size: 1rem;

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

@ -32,8 +32,6 @@
<script src="./sticker_picker.js"></script> <script src="./sticker_picker.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.sticker-picker { .sticker-picker {
width: 100%; width: 100%;
@ -56,7 +54,7 @@
height: 100%; height: 100%;
&:hover { &:hover {
filter: drop-shadow(0 0 5px var(--accent, $fallback--link)); filter: drop-shadow(0 0 5px var(--accent));
} }
} }
} }

5
src/components/still-image/still-image.vue
View File

@ -28,8 +28,6 @@
<script src="./still-image.js"></script> <script src="./still-image.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.still-image { .still-image {
position: relative; position: relative;
line-height: 0; line-height: 0;
@ -68,8 +66,7 @@
color: #fff; color: #fff;
display: block; display: block;
padding: 2px 4px; padding: 2px 4px;
border-radius: $fallback--tooltipRadius; border-radius: var(--roundness);
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2; z-index: 2;
visibility: var(--_still-image-label-visibility, visible); visibility: var(--_still-image-label-visibility, visible);
} }

15
src/components/tab_switcher/tab_switcher.scss
View File

@ -1,5 +1,3 @@
@import "../../variables";
/* stylelint-disable no-descending-specificity */ /* stylelint-disable no-descending-specificity */
.tab-switcher { .tab-switcher {
display: flex; display: flex;
@ -78,8 +76,7 @@
flex-basis: 0.5em; flex-basis: 0.5em;
content: ""; content: "";
border-right: 1px solid; border-right: 1px solid;
border-right-color: $fallback--border; border-right-color: var(--border);
border-right-color: var(--border, $fallback--border);
} }
&::after { &::after {
@ -104,16 +101,14 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
border-right: 1px solid; border-right: 1px solid;
border-right-color: $fallback--border; border-right-color: var(--border);
border-right-color: var(--border, $fallback--border);
} }
&::before { &::before {
flex: 0 0 6px; flex: 0 0 6px;
content: ""; content: "";
border-right: 1px solid; border-right: 1px solid;
border-right-color: $fallback--border; border-right-color: var(--border);
border-right-color: var(--border, $fallback--border);
} }
&:last-child .tab { &:last-child .tab {
@ -194,8 +189,6 @@
&.active { &.active {
background: transparent; background: transparent;
z-index: 5; z-index: 5;
color: $fallback--text;
color: var(--tabActiveText, $fallback--text);
} }
img { img {
@ -237,7 +230,7 @@
margin-top: 0.5em; margin-top: 0.5em;
margin-left: 0.2em; margin-left: 0.2em;
margin-bottom: 0.25em; margin-bottom: 0.25em;
border-bottom: 1px solid var(--border, $fallback--border); border-bottom: 1px solid var(--border);
@media all and (min-width: 800px) { @media all and (min-width: 800px) {
display: none; display: none;

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

@ -119,15 +119,13 @@
<script src="./thread_tree.js"></script> <script src="./thread_tree.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.thread-tree-replies { .thread-tree-replies {
margin-left: var(--status-margin, $status-margin); margin-left: var(--status-margin);
border-left: 2px solid var(--border, $fallback--border); border-left: 2px solid var(--border);
} }
.thread-tree-replies-hidden { .thread-tree-replies-hidden {
padding: var(--status-margin, $status-margin); padding: var(--status-margin);
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
display: flex; display: flex;

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

@ -1,5 +1,3 @@
@import "../../variables";
.Timeline { .Timeline {
.timeline-body { .timeline-body {
background: none; background: none;

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

@ -45,8 +45,6 @@
<script src="./timeline_menu.js"></script> <script src="./timeline_menu.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.timeline-menu-popover { .timeline-menu-popover {
min-width: 24rem; min-width: 24rem;
max-width: 100vw; max-width: 100vw;

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

@ -1,5 +1,3 @@
@import "src/variables";
.UpdateNotification { .UpdateNotification {
overflow: hidden; overflow: hidden;
} }
@ -48,7 +46,7 @@
.panel-body { .panel-body {
border-width: 0 0 1px; border-width: 0 0 1px;
border-style: solid; border-style: solid;
border-color: var(--border, $fallback--border); border-color: var(--border);
} }
.panel-footer { .panel-footer {

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

@ -32,8 +32,6 @@
<script src="./user_avatar.js"></script> <script src="./user_avatar.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.Avatar { .Avatar {
--_avatarShadowBox: var(--shadow); --_avatarShadowBox: var(--shadow);
--_avatarShadowFilter: var(--shadowFilter); --_avatarShadowFilter: var(--shadowFilter);

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

@ -1,5 +1,3 @@
@import "../../variables";
.user-card { .user-card {
position: relative; position: relative;
z-index: 1; z-index: 1;

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

@ -48,8 +48,6 @@
<script src="./user_note.js"></script> <script src="./user_note.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.user-note { .user-note {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -82,7 +80,7 @@
.note-text.-blank { .note-text.-blank {
font-style: italic; font-style: italic;
color: var(--faint, $fallback--faint); color: var(--textFaint);
} }
} }
</style> </style>

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

@ -24,8 +24,6 @@
<script src="./user_popover.js"></script> <script src="./user_popover.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
/* popover styles load on-demand, so we need to override */ /* popover styles load on-demand, so we need to override */
/* stylelint-disable block-no-empty */ /* stylelint-disable block-no-empty */
.user-popover.popover { .user-popover.popover {

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

@ -153,8 +153,6 @@
<script src="./user_profile.js"></script> <script src="./user_profile.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.user-profile { .user-profile {
flex: 2; flex: 2;
flex-basis: 500px; flex-basis: 500px;

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

@ -72,8 +72,6 @@
<script src="./user_reporting_modal.js"></script> <script src="./user_reporting_modal.js"></script>
<style lang="scss"> <style lang="scss">
@import "../../variables";
.user-reporting-panel { .user-reporting-panel {
width: 90vw; width: 90vw;
max-width: 700px; max-width: 700px;
@ -84,8 +82,7 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
border-top: 1px solid; border-top: 1px solid;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
overflow: hidden; overflow: hidden;
} }
@ -155,8 +152,7 @@
width: 50%; width: 50%;
max-width: 320px; max-width: 320px;
border-right: 1px solid; border-right: 1px solid;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
padding: 1.1em; padding: 1.1em;
> div { > div {

5
src/hocs/with_load_more/with_load_more.scss
View File

@ -1,12 +1,9 @@
@import "../../variables";
.with-load-more { .with-load-more {
&-footer { &-footer {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
border-top: 1px solid; border-top: 1px solid;
border-top-color: $fallback--border; border-top-color: var(--border);
border-top-color: var(--border, $fallback--border);
.error { .error {
font-size: 1rem; font-size: 1rem;