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 no-descending-specificity */
@import "./variables";
@import "./panel";
: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>
<style lang="scss">
@import "../../variables";
.AccountActions {
.ellipsis-button {
width: 2.5em;

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

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

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

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

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

@ -1,5 +1,3 @@
@import "../../variables";
.Attachment {
display: inline-flex;
flex-direction: column;
@ -131,23 +129,12 @@
.attachment-button {
padding: 0;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
border-radius: var(--roundness);
text-align: center;
width: 2em;
height: 2em;
margin-left: 0.5em;
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 {
display: inline-block;
color: $fallback--link;
color: var(--postLink, $fallback--link);
color: var(--link);
overflow: hidden;
white-space: nowrap;
height: auto;

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

@ -25,8 +25,6 @@
<script src="./autosuggest.js"></script>
<style lang="scss">
@import "../../variables";
.autosuggest {
position: relative;
@ -41,11 +39,9 @@
top: 100%;
right: 0;
max-height: 400px;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
background-color: var(--bg);
border-style: solid;
border-width: 1px;
border-color: $fallback--border;
border-color: var(--border);
border-radius: var(--roundness);
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>
<style lang="scss">
@import "../../variables";
.avatars {
display: flex;
margin: 0;
@ -36,8 +34,7 @@
}
.avatar-small {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
border-radius: var(--roundness);
height: 24px;
width: 24px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -110,8 +110,6 @@
<script src="./emoji_input.js"></script>
<style lang="scss">
@import "../../variables";
.input.emoji-input {
padding: 0;
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-picture-width: 32px;
$emoji-picker-header-picture-height: 32px;
@ -72,8 +70,7 @@ $emoji-picker-emoji-size: 32px;
.additional-tabs {
display: flex;
border-left: 1px solid;
border-left-color: $fallback--icon;
border-left-color: var(--icon, $fallback--icon);
border-left-color: var(--border);
padding-left: 7px;
flex: 0 0 auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -87,8 +87,6 @@
<script src='./gallery.js'></script>
<style lang="scss">
@import "../../variables";
.Gallery {
.gallery-rows {
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>
<style lang="scss">
@import "../../variables";
.global-notice-list {
position: fixed;
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>
<style lang="scss">
@import "../../variables";
.interface-language-switcher {
.language-select {
margin-right: 1em;

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

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

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

@ -165,8 +165,6 @@
<script src="./lists_edit.js"></script>
<style lang="scss">
@import "../../variables";
.ListEdit {
--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>
<style lang="scss">
@import "../../variables";
.ListsUserSearch {
.input-wrap {
display: flex;

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

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

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

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

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

@ -1,5 +1,3 @@
@import "../../variables";
.MentionLink {
position: relative;
white-space: normal;
@ -13,7 +11,7 @@
}
.mention-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
border-radius: var(--roundness);
width: 1.5em;
height: 1.5em;
vertical-align: middle;
@ -60,8 +58,8 @@
}
&.-has-selection {
color: var(--alertNeutralText, $fallback--text);
background-color: var(--alertNeutral, $fallback--fg);
color: var(--selectionText);
background-color: var(--selectionBackground);
}
.at {
@ -101,7 +99,7 @@
}
.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>
<style lang="scss">
@import "../../variables";
.MobileNav {
z-index: var(--ZI_navbar);
@ -195,11 +193,7 @@
height: 50px;
line-height: 50px;
position: absolute;
color: var(--topBarText);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow);
box-shadow: var(--shadow);
.spacer {
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>
<style lang="scss">
@import "../../variables";
.MobilePostButton {
&.button-default {
width: 5em;
@ -40,8 +38,7 @@
svg {
font-size: 1.5em;
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
}
}

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

@ -166,8 +166,6 @@
<script src="./moderation_tools.js"></script>
<style lang="scss">
@import "../../variables";
.moderation-tools-popover {
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>
<style lang="scss">
@import "../../variables";
@import "./mrf_transparency_panel";
</style>

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

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

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

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

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

@ -1,5 +1,3 @@
@import "../../variables";
.Notifications {
&:not(.minimal) {
// 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>
<style lang="scss">
@import "src/variables";
.panel-loading {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
font-size: 2em;
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
.loading-text svg {
line-height: 0;
vertical-align: middle;
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
}
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,3 @@
@import "../../variables";
.Report {
.report-content {
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>
<style lang="scss">
@import "../../variables";
@import "../../mixins";
.RetweetButton {
@ -107,8 +106,7 @@
&:hover .svg-inline--fa,
&.-repeated .svg-inline--fa {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
color: var(--cGreen);
}
@include unfocused-style {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -21,8 +21,6 @@
</template>
<script src="./mfa_backup_codes.js"></script>
<style lang="scss">
@import "../../../../variables";
.mfa-backup-codes {
.warning {
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 {
padding-bottom: 2em;
@ -162,8 +160,7 @@
.preview-container {
border-top: 1px dashed;
border-bottom: 1px dashed;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-color: var(--border);
margin: 1em 0;
padding: 1em;
background-color: var(--wallpaper);
@ -252,8 +249,7 @@
.separator {
margin: 1em;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-color: var(--border);
}
.btn {
@ -294,7 +290,7 @@
border: 0;
box-shadow: none;
background: transparent;
color: var(--faint, $fallback--faint);
color: var(--textFaint);
align-self: stretch;
}

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

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

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

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

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

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

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

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

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

@ -32,8 +32,6 @@
<script src="./sticker_picker.js"></script>
<style lang="scss">
@import "../../variables";
.sticker-picker {
width: 100%;
@ -56,7 +54,7 @@
height: 100%;
&: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>
<style lang="scss">
@import "../../variables";
.still-image {
position: relative;
line-height: 0;
@ -68,8 +66,7 @@
color: #fff;
display: block;
padding: 2px 4px;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
border-radius: var(--roundness);
z-index: 2;
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 */
.tab-switcher {
display: flex;
@ -78,8 +76,7 @@
flex-basis: 0.5em;
content: "";
border-right: 1px solid;
border-right-color: $fallback--border;
border-right-color: var(--border, $fallback--border);
border-right-color: var(--border);
}
&::after {
@ -104,16 +101,14 @@
right: 0;
bottom: 0;
border-right: 1px solid;
border-right-color: $fallback--border;
border-right-color: var(--border, $fallback--border);
border-right-color: var(--border);
}
&::before {
flex: 0 0 6px;
content: "";
border-right: 1px solid;
border-right-color: $fallback--border;
border-right-color: var(--border, $fallback--border);
border-right-color: var(--border);
}
&:last-child .tab {
@ -194,8 +189,6 @@
&.active {
background: transparent;
z-index: 5;
color: $fallback--text;
color: var(--tabActiveText, $fallback--text);
}
img {
@ -237,7 +230,7 @@
margin-top: 0.5em;
margin-left: 0.2em;
margin-bottom: 0.25em;
border-bottom: 1px solid var(--border, $fallback--border);
border-bottom: 1px solid var(--border);
@media all and (min-width: 800px) {
display: none;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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