Merge branch 'themes3' into shigusegubu-themes3
This commit is contained in:
Henry Jameson
commit
a83c459be9
93 changed files with 274 additions and 488 deletions
|
|
@ -1,6 +1,5 @@
|
|||
// stylelint-disable rscss/class-format
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
@import "./variables";
|
||||
@import "./panel";
|
||||
|
||||
:root {
|
||||
|
|
@ -888,3 +887,8 @@ option {
|
|||
padding: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
color: var(--selectionText);
|
||||
background-color: var(--selectionBackground);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -122,8 +122,6 @@
|
|||
<script src="./account_actions.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.AccountActions {
|
||||
.ellipsis-button {
|
||||
width: 2.5em;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,6 +95,5 @@
|
|||
|
||||
<script src="./chat.js"></script>
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "./chat";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -48,6 +48,5 @@
|
|||
<script src="./chat_list_item.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "./chat_list_item";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,6 @@
|
|||
padding-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.basic-user-card:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--selectedPost, $fallback--lightBg);
|
||||
}
|
||||
|
||||
.go-back-button {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -16,28 +16,29 @@
|
|||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<div class="input-search">
|
||||
<FAIcon
|
||||
class="search-icon fa-scale-110 fa-old-padding"
|
||||
icon="search"
|
||||
/>
|
||||
<div class="panel-body">
|
||||
<div class="input-wrap">
|
||||
<div class="input-search">
|
||||
<FAIcon
|
||||
class="search-icon fa-scale-110 fa-old-padding"
|
||||
icon="search"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
class="input"
|
||||
placeholder="Search people"
|
||||
@input="onInput"
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
class="input"
|
||||
placeholder="Search people"
|
||||
@input="onInput"
|
||||
>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in availableUsers"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<div @click.capture.prevent="goToChat(user)">
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in availableUsers"
|
||||
:key="user.id"
|
||||
class="list-item"
|
||||
@click.capture.prevent="goToChat(user)"
|
||||
>
|
||||
<BasicUserCard :user="user" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,6 +48,5 @@
|
|||
|
||||
<script src="./chat_new.js"></script>
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "./chat_new";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "../../mixins";
|
||||
|
||||
.checkbox {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,10 @@
|
|||
class="rightside-button"
|
||||
/>
|
||||
</div>
|
||||
<div class="conversation-body panel-body">
|
||||
<div
|
||||
class="conversation-body"
|
||||
:class="{ 'panel-body': isExpanded }"
|
||||
>
|
||||
<div
|
||||
v-if="isTreeView"
|
||||
class="thread-body"
|
||||
|
|
@ -78,7 +81,7 @@
|
|||
:replies="getReplies(status.id)"
|
||||
:in-profile="inProfile"
|
||||
:profile-user-id="profileUserId"
|
||||
class="conversation-status status-fadein panel-body"
|
||||
class="conversation-status status-fadein"
|
||||
|
||||
:simple-tree="treeViewIsSimple"
|
||||
:toggle-thread-display="toggleThreadDisplay"
|
||||
|
|
@ -183,7 +186,7 @@
|
|||
:replies="getReplies(status.id)"
|
||||
:in-profile="inProfile"
|
||||
:profile-user-id="profileUserId"
|
||||
class="conversation-status status-fadein panel-body"
|
||||
class="conversation-status status-fadein"
|
||||
|
||||
:toggle-thread-display="toggleThreadDisplay"
|
||||
:thread-display-status="threadDisplayStatus"
|
||||
|
|
@ -210,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 */
|
||||
|
|
@ -227,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 */
|
||||
|
|
@ -253,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;
|
||||
}
|
||||
|
||||
|
|
@ -271,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 */
|
||||
|
|
@ -284,7 +287,8 @@
|
|||
}
|
||||
|
||||
&.-expanded.status-fadein {
|
||||
margin: calc(var(--status-margin, $status-margin) / 2);
|
||||
background: var(--background);
|
||||
padding: calc(var(--status-margin) / 2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../../variables";
|
||||
|
||||
.DesktopNav {
|
||||
width: 100%;
|
||||
z-index: var(--ZI_navbar);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -110,8 +110,6 @@
|
|||
<script src="./emoji_input.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.input.emoji-input {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
|
@ -202,6 +200,11 @@
|
|||
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: var(--__line-height);
|
||||
line-height: var(--__line-height);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -42,8 +42,6 @@
|
|||
<script src="./flash.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.Flash {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -53,8 +53,6 @@
|
|||
<script src="./font_control.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.font-control {
|
||||
input.custom-font {
|
||||
min-width: 10em;
|
||||
|
|
|
|||
|
|
@ -87,8 +87,6 @@
|
|||
<script src='./gallery.js'></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.Gallery {
|
||||
.gallery-rows {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -104,8 +104,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.interface-language-switcher {
|
||||
.language-select {
|
||||
margin-right: 1em;
|
||||
|
|
|
|||
|
|
@ -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,10 @@
|
|||
margin: 2em 0;
|
||||
}
|
||||
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
color: var(--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>
|
||||
|
|
|
|||
|
|
@ -165,8 +165,6 @@
|
|||
<script src="./lists_edit.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.ListEdit {
|
||||
--panel-body-padding: 0.5em;
|
||||
|
||||
|
|
|
|||
|
|
@ -28,8 +28,6 @@
|
|||
|
||||
<script src="./lists_user_search.js"></script>
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.ListsUserSearch {
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -93,8 +93,6 @@
|
|||
<script src="./login_form.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -36,8 +36,6 @@
|
|||
<script src="./media_upload.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.media-upload {
|
||||
.hidden-input-file {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -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,10 @@
|
|||
}
|
||||
|
||||
&.-has-selection {
|
||||
color: var(--alertNeutralText, $fallback--text);
|
||||
background-color: var(--alertNeutral, $fallback--fg);
|
||||
--color: var(--selectionText);
|
||||
--link: var(--selectionText);
|
||||
|
||||
background-color: var(--selectionBackground);
|
||||
}
|
||||
|
||||
.at {
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
}
|
||||
|
||||
.serverName.-faded {
|
||||
color: var(--faintLink, $fallback--link);
|
||||
color: var(--linkFaint);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
/>
|
||||
</span><button
|
||||
v-if="!expanded"
|
||||
class="button-unstyled showMoreLess"
|
||||
class="button-unstyled -link showMoreLess"
|
||||
@click="toggleShowMore"
|
||||
>
|
||||
{{ $t('status.plus_more', { number: extraMentions.length }) }}
|
||||
</button><button
|
||||
v-if="expanded"
|
||||
class="button-unstyled showMoreLess"
|
||||
class="button-unstyled -link showMoreLess"
|
||||
@click="toggleShowMore"
|
||||
>
|
||||
{{ $t('general.show_less') }}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -166,8 +166,6 @@
|
|||
<script src="./moderation_tools.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.moderation-tools-popover {
|
||||
height: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -227,6 +227,5 @@
|
|||
<script src="./mrf_transparency_panel.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "./mrf_transparency_panel";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -103,8 +103,6 @@
|
|||
<script src="./nav_panel.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.NavPanel {
|
||||
.panel {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -28,8 +28,6 @@
|
|||
<script src="./navigation_pins.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.NavigationPins {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,11 @@
|
|||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
||||
&.Status {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
--emoji-size: 14px;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../../variables";
|
||||
|
||||
.Notifications {
|
||||
&:not(.minimal) {
|
||||
// a bit of a hack to allow scrolling below notifications
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ export default {
|
|||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
backgroundNoCssColor: 'yes',
|
||||
background: '--bg',
|
||||
roundness: 3,
|
||||
blur: '5px',
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export default {
|
|||
{
|
||||
component: 'PanelHeader',
|
||||
directives: {
|
||||
backgroundNoCssColor: 'yes',
|
||||
background: '--fg',
|
||||
shadow: []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -95,8 +95,6 @@
|
|||
<script src="./poll_form.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.poll-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../../variables";
|
||||
|
||||
.Report {
|
||||
.report-content {
|
||||
margin: 0.5em 0 1em;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export default {
|
|||
'--fg': 'color | #182230',
|
||||
'--text': 'color | #b9b9ba',
|
||||
'--link': 'color | #d8a070',
|
||||
'--accent': 'color | #d8a070',
|
||||
'--cRed': 'color | #FF0000',
|
||||
'--cBlue': 'color | #0095ff',
|
||||
'--cGreen': 'color | #0fa00f',
|
||||
|
|
@ -32,7 +33,11 @@ export default {
|
|||
|
||||
// Fallback no-background-image color
|
||||
// (also useful in some other places like scrollbars)
|
||||
'--wallpaper': 'color | --bg, -2'
|
||||
'--wallpaper': 'color | --bg, -2',
|
||||
|
||||
// Selection colors
|
||||
'--selectionBackground': 'color | --accent',
|
||||
'--selectionText': 'color | $textColor(--accent, --text)'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -64,8 +64,6 @@
|
|||
<script src="./scope_selector.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.ScopeSelector {
|
||||
.scope {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "src/variables";
|
||||
|
||||
.settings-modal {
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../../../variables";
|
||||
|
||||
.profile-tab {
|
||||
.bio {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -21,8 +21,6 @@
|
|||
</template>
|
||||
<script src="./mfa_backup_codes.js"></script>
|
||||
<style lang="scss">
|
||||
@import "../../../../variables";
|
||||
|
||||
.mfa-backup-codes {
|
||||
.warning {
|
||||
color: var(--cOrange);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -20,15 +20,13 @@ export default {
|
|||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
opacity: 0
|
||||
background: '--bg'
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['selected'],
|
||||
directives: {
|
||||
background: '--inheritedBackground, 10',
|
||||
opacity: 1
|
||||
background: '--inheritedBackground, 10'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
@import "../../variables";
|
||||
|
||||
.Timeline {
|
||||
.timeline-body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.alert-badge {
|
||||
font-size: 0.75em;
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -45,8 +45,6 @@
|
|||
<script src="./timeline_menu.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.timeline-menu-popover {
|
||||
min-width: 24rem;
|
||||
max-width: 100vw;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -32,8 +32,6 @@
|
|||
|
||||
<script src="./user_avatar.js"></script>
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.Avatar {
|
||||
--_avatarShadowBox: var(--shadow);
|
||||
--_avatarShadowFilter: var(--shadowFilter);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../../variables";
|
||||
|
||||
.user-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -21,14 +19,6 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
word-wrap: break-word;
|
||||
border-bottom-right-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
// create new stacking context
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -282,10 +282,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!hideBio"
|
||||
class="panel-body"
|
||||
>
|
||||
<div v-if="!hideBio">
|
||||
<div
|
||||
v-if="!mergedConfig.hideUserStats && switcher"
|
||||
class="user-counts"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,15 @@
|
|||
<script src="./user_panel.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-panel .signed-in {
|
||||
overflow: visible;
|
||||
z-index: 10;
|
||||
.user-panel {
|
||||
.panel {
|
||||
background: var(--background);
|
||||
backdrop-filter: var(--backdrop-filter);
|
||||
}
|
||||
|
||||
.signed-in {
|
||||
overflow: visible;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -4,52 +4,54 @@
|
|||
v-if="user"
|
||||
class="user-profile panel panel-default"
|
||||
>
|
||||
<UserCard
|
||||
:user-id="userId"
|
||||
:switcher="true"
|
||||
:selected="timeline.viewing"
|
||||
avatar-action="zoom"
|
||||
rounded="top"
|
||||
:has-note-editor="true"
|
||||
/>
|
||||
<span
|
||||
v-if="!!user.birthday"
|
||||
class="user-birthday"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-old-padding"
|
||||
icon="birthday-cake"
|
||||
<div class="panel-body">
|
||||
<UserCard
|
||||
:user-id="userId"
|
||||
:switcher="true"
|
||||
:selected="timeline.viewing"
|
||||
avatar-action="zoom"
|
||||
rounded="top"
|
||||
:has-note-editor="true"
|
||||
/>
|
||||
{{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
|
||||
</span>
|
||||
<div
|
||||
v-if="user.fields_html && user.fields_html.length > 0"
|
||||
class="user-profile-fields"
|
||||
>
|
||||
<dl
|
||||
v-for="(field, index) in user.fields_html"
|
||||
:key="index"
|
||||
class="user-profile-field"
|
||||
<span
|
||||
v-if="!!user.birthday"
|
||||
class="user-birthday"
|
||||
>
|
||||
<dt
|
||||
:title="user.fields_text[index].name"
|
||||
class="user-profile-field-name"
|
||||
<FAIcon
|
||||
class="fa-old-padding"
|
||||
icon="birthday-cake"
|
||||
/>
|
||||
{{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
|
||||
</span>
|
||||
<div
|
||||
v-if="user.fields_html && user.fields_html.length > 0"
|
||||
class="user-profile-fields"
|
||||
>
|
||||
<dl
|
||||
v-for="(field, index) in user.fields_html"
|
||||
:key="index"
|
||||
class="user-profile-field"
|
||||
>
|
||||
<RichContent
|
||||
:html="field.name"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
</dt>
|
||||
<dd
|
||||
:title="user.fields_text[index].value"
|
||||
class="user-profile-field-value"
|
||||
>
|
||||
<RichContent
|
||||
:html="field.value"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
<dt
|
||||
:title="user.fields_text[index].name"
|
||||
class="user-profile-field-name"
|
||||
>
|
||||
<RichContent
|
||||
:html="field.name"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
</dt>
|
||||
<dd
|
||||
:title="user.fields_text[index].value"
|
||||
class="user-profile-field-value"
|
||||
>
|
||||
<RichContent
|
||||
:html="field.value"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<tab-switcher
|
||||
:active-tab="tab"
|
||||
|
|
@ -136,7 +138,7 @@
|
|||
{{ $t('settings.profile_tab') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div>
|
||||
<span v-if="error">{{ error }}</span>
|
||||
<FAIcon
|
||||
v-else
|
||||
|
|
@ -151,8 +153,6 @@
|
|||
<script src="./user_profile.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.user-profile {
|
||||
flex: 2;
|
||||
flex-basis: 500px;
|
||||
|
|
@ -160,6 +160,11 @@
|
|||
// No sticky header on user profile
|
||||
--currentPanelStack: 1;
|
||||
|
||||
.tab-switcher .tabs {
|
||||
background: var(--__panel-background);
|
||||
backdrop-filter: var(--__panel-backdrop-filter);
|
||||
}
|
||||
|
||||
.user-birthday {
|
||||
margin: 0 0.75em 0.5em;
|
||||
}
|
||||
|
|
@ -228,4 +233,5 @@
|
|||
padding: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
/* stylelint-disable no-descending-specificity */
|
||||
.panel {
|
||||
--__panel-background: var(--background);
|
||||
--__panel-backdrop-filter: var(--backdrop-filter);
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -28,6 +31,8 @@
|
|||
|
||||
.panel-body {
|
||||
padding: var(--panel-body-padding, 0);
|
||||
background: var(--background);
|
||||
backdrop-filter: var(--__panel-backdrop-filter);
|
||||
|
||||
&:empty::before {
|
||||
content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
|
||||
|
|
@ -50,6 +55,7 @@
|
|||
--__panel-heading-height: 3.2em;
|
||||
--__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
|
||||
|
||||
backdrop-filter: var(--__panel-backdrop-filter);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
|
|
@ -131,6 +137,9 @@
|
|||
border-radius: var(--roundness) var(--roundness) 0 0;
|
||||
border-width: 0 0 1px;
|
||||
align-items: start;
|
||||
background-image:
|
||||
linear-gradient(to bottom, var(--background), var(--background)),
|
||||
linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
|
||||
|
||||
&::after {
|
||||
background-color: var(--background);
|
||||
|
|
@ -186,5 +195,6 @@
|
|||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: var(--border);
|
||||
background-color: var(--__panel-background);
|
||||
}
|
||||
/* stylelint-enable no-descending-specificity */
|
||||
|
|
|
|||
|
|
@ -50,15 +50,25 @@ export const applyTheme = async (input) => {
|
|||
// Optimization - instead of processing all lazy rules in one go, process them in small chunks
|
||||
// so that UI can do other things and be somewhat responsive while less important rules are being
|
||||
// processed
|
||||
chunk(themes3.lazy, 5).forEach(chunk => {
|
||||
setTimeout(() => {
|
||||
Promise.all(chunk.map(x => x())).then(result => {
|
||||
getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
|
||||
styleSheet.insertRule(rule, 'index-max')
|
||||
})
|
||||
let counter = 0
|
||||
const chunks = chunk(themes3.lazy, 200)
|
||||
// let t0 = performance.now()
|
||||
const processChunk = () => {
|
||||
const chunk = chunks[counter]
|
||||
Promise.all(chunk.map(x => x())).then(result => {
|
||||
getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
|
||||
styleSheet.insertRule(rule, 'index-max')
|
||||
})
|
||||
}, 200)
|
||||
})
|
||||
// const t1 = performance.now()
|
||||
// console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
|
||||
// t0 = t1
|
||||
counter += 1
|
||||
if (counter < chunks.length) {
|
||||
setTimeout(processChunk, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
setTimeout(processChunk, 0)
|
||||
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -126,7 +126,6 @@ export const convertTheme2To3 = (data) => {
|
|||
data.colors.link = data.colors.link || data.colors.accent
|
||||
const generateRoot = () => {
|
||||
const directives = {}
|
||||
console.log(data.colors)
|
||||
basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + convert(data.colors[key]).hex })
|
||||
return {
|
||||
component: 'Root',
|
||||
|
|
@ -202,6 +201,9 @@ export const convertTheme2To3 = (data) => {
|
|||
newRules.push({ ...rule, component: 'Tab' })
|
||||
newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
|
||||
}
|
||||
if (rule.component === 'Panel') {
|
||||
newRules.push({ ...rule, component: 'Post' })
|
||||
}
|
||||
})
|
||||
return newRules
|
||||
}
|
||||
|
|
@ -503,7 +505,6 @@ export const convertTheme2To3 = (data) => {
|
|||
{ ...newRule, component: 'Tab' },
|
||||
{ ...newRule, component: 'ScrollbarElement' }
|
||||
]
|
||||
console.log(newRule)
|
||||
if (newRule.state?.indexOf('toggled') >= 0) {
|
||||
rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
|
||||
rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
|
||||
|
|
@ -513,6 +514,12 @@ export const convertTheme2To3 = (data) => {
|
|||
rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
|
||||
}
|
||||
return rules
|
||||
} else if (newRule.component === 'Badge') {
|
||||
if (newRule.variant === 'notification') {
|
||||
return [newRule, { component: 'Root', directives: { '--badgeNotification': 'color | ' + newRule.directives.background } }]
|
||||
} else {
|
||||
return [newRule]
|
||||
}
|
||||
} else if (newRule.component === 'TopBar') {
|
||||
return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { convert, brightness } from 'chromatism'
|
||||
import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
|
||||
import { alphaBlend, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
|
||||
|
||||
export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
|
||||
const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
|
||||
|
|
@ -23,6 +23,17 @@ export const colorFunctions = {
|
|||
return { ...colorArg, a: amount }
|
||||
}
|
||||
},
|
||||
textColor: {
|
||||
argsNeeded: 2,
|
||||
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
|
||||
const [backgroundArg, foregroundArg, preserve = 'preserve'] = args
|
||||
|
||||
const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
|
||||
const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
|
||||
|
||||
return getTextColor(background, foreground, preserve === 'preserve')
|
||||
}
|
||||
},
|
||||
blend: {
|
||||
argsNeeded: 3,
|
||||
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue