Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'themes3' into 'develop'

Browse Source 
Themes 3.0 / Pleroma ISS (Interface Style Sheets) [Side A]

See merge request pleroma/pleroma-fe!1892
This commit is contained in:
HJ 2024-03-26 17:13:41 +00:00
commit d7f744d281
189 changed files with 4629 additions and 2267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.d/themes3.change Normal file
View File

@ -0,0 +1 @@
Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system.

419
src/App.scss
View File

@ -1,9 +1,10 @@
// stylelint-disable rscss/class-format
/* stylelint-disable no-descending-specificity */
@import "./variables";
@import "./panel";
:root {
--font-size: 14px;
--status-margin: 0.75em;
--navbar-height: 3.5rem;
--post-line-height: 1.4;
// Z-Index stuff
@ -16,16 +17,15 @@
}
html {
font-size: 14px;
font-size: var(--font-size);
// overflow-x: clip causes my browser's tab to crash with SIGILL lul
}
body {
font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif);
font-family: var(--font);
margin: 0;
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: none;
@ -42,17 +42,35 @@ body {
// have a cursor/pointer to operate them
@media (any-pointer: fine) {
* {
scrollbar-color: var(--btn) transparent;
scrollbar-color: var(--fg) transparent;
&::-webkit-scrollbar {
background: transparent;
}
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-resizer {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
background-image:
linear-gradient(
135deg,
transparent calc(50% - 1px),
var(--textFaint) 50%,
transparent calc(50% + 1px),
transparent calc(75% - 1px),
var(--textFaint) 75%,
transparent calc(75% + 1px),
);
}
&::-webkit-scrollbar-button,
&::-webkit-scrollbar-thumb {
background-color: var(--btn);
box-shadow: var(--buttonShadow);
border-radius: var(--btnRadius);
box-shadow: var(--shadow);
border-radius: var(--roundness);
}
// horizontal/vertical/increment/decrement are webkit-specific stuff
@ -61,7 +79,7 @@ body {
&::-webkit-scrollbar-button {
--___bgPadding: 2px;
color: var(--btnText);
color: var(--text);
background-repeat: no-repeat, no-repeat;
&:horizontal {
@ -69,15 +87,15 @@ body {
&:increment {
background-image:
linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
linear-gradient(45deg, var(--text) 50%, transparent 51%),
linear-gradient(-45deg, transparent 50%, var(--text) 51%);
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
}
&:decrement {
background-image:
linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
linear-gradient(-45deg, var(--text) 50%, transparent 51%);
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
}
}
@ -87,15 +105,15 @@ body {
&:increment {
background-image:
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
linear-gradient(-45deg, transparent 50%, var(--text) 51%),
linear-gradient(45deg, transparent 50%, var(--text) 51%);
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
}
&:decrement {
background-image:
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
linear-gradient(-45deg, var(--text) 50%, transparent 51%),
linear-gradient(45deg, var(--text) 50%, transparent 51%);
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
}
}
@ -104,15 +122,14 @@ body {
}
// Body should have background to scrollbar otherwise it will use white (body color?)
html {
scrollbar-color: var(--selectedMenu) var(--wallpaper);
scrollbar-color: var(--fg) var(--wallpaper);
background: var(--wallpaper);
}
}
a {
text-decoration: none;
color: $fallback--link;
color: var(--link, $fallback--link);
color: var(--link);
}
h4 {
@ -128,27 +145,12 @@ h4 {
i[class*="icon-"],
.svg-inline--fa,
.iconLetter {
color: $fallback--icon;
color: var(--icon, $fallback--icon);
}
.button-unstyled:hover,
a:hover {
> i[class*="icon-"],
> .svg-inline--fa,
> .iconLetter {
color: var(--text);
}
color: var(--icon);
}
nav {
z-index: var(--ZI_navbar);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow);
box-shadow: var(--shadow);
box-sizing: border-box;
height: var(--navbar-height);
position: fixed;
@ -195,8 +197,7 @@ nav {
grid-column: 1 / span 3;
grid-row: 1 / 1;
pointer-events: none;
background-color: rgb(0 0 0 / 15%);
background-color: var(--underlay, rgb(0 0 0 / 15%));
background-color: var(--underlay);
z-index: -1000;
}
@ -204,7 +205,6 @@ nav {
--miniColumn: 25rem;
--maxiColumn: 45rem;
--columnGap: 1em;
--status-margin: 0.75em;
--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
@ -366,106 +366,110 @@ nav {
.button-default {
user-select: none;
color: $fallback--text;
color: var(--btnText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
color: var(--text);
border: none;
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
border-radius: var(--roundness);
cursor: pointer;
box-shadow: $fallback--buttonShadow;
box-shadow: var(--buttonShadow);
box-shadow: var(--shadow);
font-size: 1em;
font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif);
&.-sublime {
background: transparent;
}
i[class*="icon-"],
.svg-inline--fa {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
font-family: var(--font);
&::-moz-focus-inner {
border: none;
}
&:hover {
box-shadow: 0 0 4px rgb(255 255 255 / 30%);
box-shadow: var(--buttonHoverShadow);
}
&:active {
box-shadow:
0 0 4px 0 rgb(255 255 255 / 30%),
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow);
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnPressed, $fallback--fg);
svg,
i {
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
}
}
&:disabled {
cursor: not-allowed;
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnDisabled, $fallback--fg);
}
}
svg,
i {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
}
.menu-item,
.list-item {
display: block;
box-sizing: border-box;
border: none;
outline: none;
text-align: initial;
font-size: inherit;
font-family: inherit;
font-weight: 400;
cursor: pointer;
color: inherit;
clear: both;
position: relative;
white-space: nowrap;
border-color: var(--border);
border-style: solid;
border-width: 0;
border-top-width: 1px;
width: 100%;
line-height: var(--__line-height);
padding: var(--__vertical-gap) var(--__horizontal-gap);
--__line-height: 1.5em;
--__horizontal-gap: 0.75em;
--__vertical-gap: 0.5em;
&.-non-interactive {
cursor: auto;
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggled, $fallback--fg);
box-shadow:
0 0 4px 0 rgb(255 255 255 / 30%),
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow);
svg,
i {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
&.-active,
&:hover {
border-top-width: 1px;
border-bottom-width: 1px;
}
&.danger {
// TODO: add better color variable
color: $fallback--text;
color: var(--alertErrorPanelText, $fallback--text);
background-color: $fallback--alertError;
background-color: var(--alertError, $fallback--alertError);
&.-active + &,
&:hover + & {
border-top-width: 0;
}
&:hover + .menu-item-collapsible:not(.-expanded) + &,
&.-active + .menu-item-collapsible:not(.-expanded) + & {
border-top-width: 0;
}
&[aria-expanded="true"] {
border-bottom-width: 1px;
}
a,
button:not(.button-default) {
text-align: initial;
padding: 0;
background: none;
border: none;
outline: none;
display: inline;
font-size: 100%;
font-family: inherit;
line-height: unset;
color: var(--text);
}
&:first-child {
border-top-right-radius: var(--roundness);
border-top-left-radius: var(--roundness);
border-top-width: 0;
}
&:last-child {
border-bottom-right-radius: var(--roundness);
border-bottom-left-radius: var(--roundness);
border-bottom-width: 0;
}
}
.button-unstyled {
background: none;
border: none;
outline: none;
display: inline;
text-align: initial;
font-size: 100%;
font-family: inherit;
box-shadow: var(--shadow);
padding: 0;
line-height: unset;
cursor: pointer;
@ -473,28 +477,23 @@ nav {
color: inherit;
&.-link {
color: $fallback--link;
color: var(--link, $fallback--link);
}
&.-fullwidth {
width: 100%;
}
&.-hover-highlight {
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
/* stylelint-disable-next-line declaration-no-important */
color: var(--link) !important;
}
}
input,
textarea,
textarea {
border: none;
display: inline-block;
outline: none;
}
.input {
&.unstyled {
border-radius: 0;
background: none;
/* stylelint-disable-next-line declaration-no-important */
background: none !important;
box-shadow: none;
height: unset;
}
@ -502,19 +501,9 @@ textarea,
--_padding: 0.5em;
border: none;
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
box-shadow:
0 1px 0 0 rgb(0 0 0 / 20%) inset,
0 -1px 0 0 rgb(255 255 255 / 20%) inset,
0 0 2px 0 rgb(0 0 0 / 100%) inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
color: $fallback--lightText;
color: var(--inputText, $fallback--lightText);
font-family: sans-serif;
font-family: var(--inputFont, sans-serif);
border-radius: var(--roundness);
box-shadow: var(--shadow);
font-family: var(--font);
font-size: 1em;
margin: 0;
box-sizing: border-box;
@ -528,7 +517,6 @@ textarea,
&[disabled="disabled"],
&.disabled {
cursor: not-allowed;
opacity: 0.5;
}
&[type="range"] {
@ -543,9 +531,9 @@ textarea,
display: none;
&:checked + label::before {
box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
background-color: var(--accent, $fallback--link);
box-shadow: var(--shadow);
background-color: var(--background);
color: var(--text);
}
&:disabled {
@ -559,16 +547,14 @@ textarea,
+ label::before {
flex-shrink: 0;
display: inline-block;
content: "";
content: "•";
transition: box-shadow 200ms;
width: 1.1em;
height: 1.1em;
border-radius: 100%; // Radio buttons should always be circle
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
background-color: var(--background);
box-shadow: var(--shadow);
margin-right: 0.5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top;
text-align: center;
line-height: 1.1;
@ -581,8 +567,9 @@ textarea,
&[type="checkbox"] {
&:checked + label::before {
color: $fallback--text;
color: var(--inputText, $fallback--text);
color: var(--text);
background-color: var(--background);
box-shadow: var(--shadow);
}
&:disabled {
@ -600,13 +587,9 @@ textarea,
transition: color 200ms;
width: 1.1em;
height: 1.1em;
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
border-radius: var(--roundness);
box-shadow: var(--shadow);
margin-right: 0.5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top;
text-align: center;
line-height: 1.1;
@ -623,16 +606,14 @@ textarea,
}
// Textareas should have stock line-height + vertical padding instead of huge line-height
textarea {
textarea.input {
padding: var(--_padding);
line-height: var(--post-line-height);
}
option {
color: $fallback--text;
color: var(--text, $fallback--text);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
color: var(--text);
background-color: var(--background);
}
.hide-number-spinner {
@ -653,7 +634,7 @@ option {
li {
border: 1px solid var(--border);
border-radius: var(--inputRadius);
border-radius: var(--roundness);
padding: 0.5em;
margin: 0.25em;
}
@ -714,74 +695,58 @@ option {
overflow: hidden;
text-overflow: ellipsis;
&.badge-notification {
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
color: white;
color: var(--badgeNotificationText, white);
&.-dot,
&.-counter {
margin: 0;
position: absolute;
}
&.-dot {
min-height: 8px;
max-height: 8px;
min-width: 8px;
max-width: 8px;
padding: 0;
line-height: 0;
font-size: 0;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
}
&.-counter {
border-radius: var(--roundness);
font-size: 0.75em;
line-height: 1;
text-align: right;
padding: 0.2em;
min-width: 0;
left: calc(50% - 0.5em);
top: calc(50% - 0.4em);
margin-left: 0.7em;
margin-top: -1em;
}
}
.alert {
margin: 0 0.35em;
padding: 0 0.25em;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
&.error {
background-color: $fallback--alertError;
background-color: var(--alertError, $fallback--alertError);
color: $fallback--text;
color: var(--alertErrorText, $fallback--text);
.panel-heading & {
color: $fallback--text;
color: var(--alertErrorPanelText, $fallback--text);
}
}
&.warning {
background-color: $fallback--alertWarning;
background-color: var(--alertWarning, $fallback--alertWarning);
color: $fallback--text;
color: var(--alertWarningText, $fallback--text);
.panel-heading & {
color: $fallback--text;
color: var(--alertWarningPanelText, $fallback--text);
}
}
&.success {
background-color: var(--alertSuccess, $fallback--alertWarning);
color: var(--alertSuccessText, $fallback--text);
.panel-heading & {
color: var(--alertSuccessPanelText, $fallback--text);
}
}
border-radius: var(--roundness);
border: 1px solid var(--border);
}
.faint {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
--text: var(--textFaint);
--link: var(--linkFaint);
.faint-link {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
&:hover {
text-decoration: underline;
}
color: var(--text);
}
.visibility-notice {
padding: 0.5em;
border: 1px solid $fallback--faint;
border: 1px solid var(--faint, $fallback--faint);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border: 1px solid var(--textFaint);
border-radius: var(--roundness);
}
.notice-dismissible {
@ -802,6 +767,10 @@ option {
&.iconLetter {
font-size: 1.1em;
}
&.svg-inline--fa {
vertical-align: -0.15em;
}
}
.fa-old-padding {
@ -816,6 +785,11 @@ option {
opacity: 0.25;
}
.timeago {
--link: var(--text);
--linkFaint: var(--textFaint);
}
.login-hint {
text-align: center;
@ -914,3 +888,8 @@ option {
padding: 0;
position: absolute;
}
*::selection {
color: var(--selectionText);
background-color: var(--selectionBackground);
}

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;

17
src/boot/after_store.js
View File

@ -328,17 +328,14 @@ const setConfig = async ({ store }) => {
}
const checkOAuthToken = async ({ store }) => {
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve, reject) => {
if (store.getters.getUserToken()) {
try {
await store.dispatch('loginUser', store.getters.getUserToken())
} catch (e) {
console.error(e)
}
if (store.getters.getUserToken()) {
try {
await store.dispatch('loginUser', store.getters.getUserToken())
} catch (e) {
console.error(e)
}
resolve()
})
}
return Promise.resolve()
}
const afterStoreSetup = async ({ store, i18n }) => {

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

@ -11,14 +11,14 @@
<template v-if="relationship.following">
<button
v-if="relationship.showing_reblogs"
class="btn button-default dropdown-item"
class="dropdown-item menu-item"
@click="hideRepeats"
>
{{ $t('user_card.hide_repeats') }}
</button>
<button
v-if="!relationship.showing_reblogs"
class="btn button-default dropdown-item"
class="dropdown-item menu-item"
@click="showRepeats"
>
{{ $t('user_card.show_repeats') }}
@ -31,34 +31,34 @@
<UserListMenu :user="user" />
<button
v-if="relationship.followed_by"
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="removeUserFromFollowers"
>
{{ $t('user_card.remove_follower') }}
</button>
<button
v-if="relationship.blocking"
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="unblockUser"
>
{{ $t('user_card.unblock') }}
</button>
<button
v-else
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="blockUser"
>
{{ $t('user_card.block') }}
</button>
<button
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="reportUser"
>
{{ $t('user_card.report') }}
</button>
<button
v-if="pleromaChatMessagesAvailable"
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="openChat"
>
{{ $t('user_card.message') }}
@ -122,19 +122,12 @@
<script src="./account_actions.js"></script>
<style lang="scss">
@import "../../variables";
.AccountActions {
.ellipsis-button {
width: 2.5em;
margin: -0.5em 0;
padding: 0.5em 0;
text-align: center;
&:not(:hover) .icon {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
}
</style>

51
src/components/alert.style.js Normal file
View File

@ -0,0 +1,51 @@
export default {
name: 'Alert',
selector: '.alert',
validInnerComponents: [
'Text',
'Icon',
'Link',
'Border',
'ButtonUnstyled'
],
variants: {
normal: '.neutral',
error: '.error',
warning: '.warning',
success: '.success'
},
defaultRules: [
{
directives: {
background: '--text',
opacity: 0.5,
blur: '9px'
}
},
{
parent: {
component: 'Alert'
},
component: 'Border',
textColor: '--parent'
},
{
variant: 'error',
directives: {
background: '--cRed'
}
},
{
variant: 'warning',
directives: {
background: '--cOrange'
}
},
{
variant: 'success',
directives: {
background: '--cGreen'
}
}
]
}

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 {

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

@ -3,7 +3,7 @@
<textarea
ref="textarea"
v-model="announcement.content"
class="post-textarea"
class="input post-textarea"
rows="1"
cols="1"
:placeholder="$t('announcements.post_placeholder')"
@ -14,6 +14,7 @@
<input
id="announcement-start-time"
v-model="announcement.startsAt"
class="input"
:type="announcement.allDay ? 'date' : 'datetime-local'"
:disabled="disabled"
>
@ -23,6 +24,7 @@
<input
id="announcement-end-time"
v-model="announcement.endsAt"
class="input"
:type="announcement.allDay ? 'date' : 'datetime-local'"
:disabled="disabled"
>

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 {

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

@ -1,5 +1,3 @@
@import "../../variables";
.Attachment {
display: inline-flex;
flex-direction: column;
@ -9,10 +7,8 @@
height: 100%;
border-style: solid;
border-width: 1px;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-radius: var(--roundness);
border-color: var(--border);
.attachment-wrapper {
flex: 1 1 auto;
@ -84,6 +80,13 @@
}
}
.video-container {
border: none;
outline: none;
color: inherit;
background: transparent;
}
.audio-container {
display: flex;
align-items: flex-end;
@ -126,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%);
}
}
}
@ -217,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;

24
src/components/attachment/attachment.style.js Normal file
View File

@ -0,0 +1,24 @@
export default {
name: 'Attachment',
selector: '.Attachment',
validInnerComponents: [
'Border',
'ButtonUnstyled',
'Input'
],
defaultRules: [
{
directives: {
roundness: 3
}
},
{
component: 'ButtonUnstyled',
parent: { component: 'Attachment' },
directives: {
background: '#FFFFFF',
opacity: 0.5
}
}
]
}

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

@ -38,7 +38,7 @@
v-if="edit"
v-model="localDescription"
type="text"
class="description-field"
class="input description-field"
:placeholder="$t('post_status.media_description')"
@keydown.enter.prevent=""
>
@ -175,7 +175,6 @@
:is="videoTag"
v-if="type === 'video' && !hidden"
class="video-container"
:class="{ 'button-unstyled': 'isModal' }"
:href="attachment.url"
@click.stop.prevent="openModal"
>
@ -253,7 +252,7 @@
v-if="edit"
v-model="localDescription"
type="text"
class="description-field"
class="input description-field"
:placeholder="$t('post_status.media_description')"
@keydown.enter.prevent=""
>

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

@ -1,3 +1,4 @@
<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
<template>
<div
v-click-outside="onClickOutside"
@ -6,12 +7,12 @@
<input
v-model="term"
:placeholder="placeholder"
class="autosuggest-input"
class="input autosuggest-input"
@click="onInputClick"
>
<div
v-if="resultsVisible && filtered.length > 0"
class="autosuggest-results"
class="panel autosuggest-results"
>
<slot
v-for="item in filtered"
@ -24,8 +25,6 @@
<script src="./autosuggest.js"></script>
<style lang="scss">
@import "../../variables";
.autosuggest {
position: relative;
@ -40,18 +39,15 @@
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, $fallback--border);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-color: var(--border);
border-radius: var(--roundness);
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow);
box-shadow: var(--shadow);
overflow-y: auto;
z-index: 1;
}

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;
}

30
src/components/badge.style.js Normal file
View File

@ -0,0 +1,30 @@
export default {
name: 'Badge',
selector: '.badge',
validInnerComponents: [
'Text',
'Icon'
],
variants: {
notification: '.-notification'
},
defaultRules: [
{
component: 'Root',
directives: {
'--badgeNotification': 'color | --cRed'
}
},
{
directives: {
background: '--cGreen'
}
},
{
variant: 'notification',
directives: {
background: '--cRed'
}
}
]
}

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

@ -47,7 +47,6 @@
display: flex;
flex: 1 0;
margin: 0;
padding: 0.6em 1em;
--emoji-size: 14px;

13
src/components/border.style.js Normal file
View File

@ -0,0 +1,13 @@
export default {
name: 'Border',
selector: '/*border*/',
virtual: true,
defaultRules: [
{
directives: {
textColor: '$mod(--parent, 10)',
textAuto: 'no-auto'
}
}
]
}

101
src/components/button.style.js Normal file
View File

@ -0,0 +1,101 @@
export default {
name: 'Button', // Name of the component
selector: '.button-default', // CSS selector/prefix
// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
states: {
// States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
// normal: '' // normal state is implicitly added, it is always included
toggled: '.toggled',
pressed: ':active',
hover: ':hover:not(:disabled)',
focused: ':focus-within',
disabled: ':disabled'
},
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
variants: {
// Variants save on computation time since adding new variant just adds one more "set".
// normal: '', // you can override normal variant, it will be appenended to the main class
danger: '.danger'
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
// This (currently) is further multipled by number of places where component can exist.
},
// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
validInnerComponents: [
'Text',
'Icon'
],
// Default rules, used as "default theme", essentially.
defaultRules: [
{
component: 'Root',
directives: {
'--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
'--defaultButtonShadow': 'shadow | 0 0 2 #000000',
'--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2)',
'--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
}
},
{
// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
// like within it
directives: {
background: '--fg',
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
roundness: 3
}
},
{
state: ['hover'],
directives: {
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
}
},
{
state: ['pressed'],
directives: {
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
}
},
{
state: ['hover', 'pressed'],
directives: {
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['toggled'],
directives: {
background: '--inheritedBackground,-14.2',
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
}
},
{
state: ['toggled', 'hover'],
directives: {
background: '--inheritedBackground,-14.2',
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground, 0.25, --parent)',
shadow: ['--defaultButtonBevel']
}
},
{
component: 'Text',
parent: {
component: 'Button',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

96
src/components/button_unstyled.style.js Normal file
View File

@ -0,0 +1,96 @@
export default {
name: 'ButtonUnstyled',
selector: '.button-unstyled',
states: {
toggled: '.toggled',
disabled: ':disabled',
hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
validInnerComponents: [
'Text',
'Icon',
'Badge'
],
defaultRules: [
{
directives: {
background: '#ffffff',
opacity: 0,
shadow: []
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled', 'hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled', 'focused']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['toggled', 'focused', 'hover']
},
directives: {
textColor: '--parent--text'
}
},
{
component: 'Text',
parent: {
component: 'ButtonUnstyled',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

16
src/components/chat/chat.scss
View File

@ -11,15 +11,15 @@
.chat-view-body {
box-sizing: border-box;
background-color: var(--chatBg, $fallback--bg);
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
min-height: calc(100vh - var(--navbar-height));
margin: 0;
border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
border-radius: var(--roundness);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&::after {
border-radius: 0;
@ -37,8 +37,6 @@
.footer {
position: sticky;
bottom: 0;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
z-index: 1;
}
@ -61,8 +59,6 @@
position: absolute;
right: 1.3em;
top: -3.2em;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
@ -79,12 +75,6 @@
visibility: visible;
}
i {
font-size: 1em;
color: $fallback--text;
color: var(--text, $fallback--text);
}
.unread-message-count {
font-size: 0.8em;
left: 50%;

19
src/components/chat/chat.style.js Normal file
View File

@ -0,0 +1,19 @@
export default {
name: 'Chat',
selector: '.chat-message-list',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Avatar',
'ChatMessage'
],
defaultRules: [
{
directives: {
background: '--bg',
blur: '5px'
}
}
]
}

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

@ -26,7 +26,7 @@
</div>
</div>
<div
class="message-list"
class="chat-message-list message-list"
:style="{ height: scrollableContainerHeight }"
>
<template v-if="!errorLoadingChat">
@ -61,7 +61,7 @@
<FAIcon icon="chevron-down" />
<div
v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count"
class="badge -notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
@ -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>

21
src/components/chat_list_item/chat_list_item.scss
View File

@ -1,8 +1,6 @@
.chat-list-item {
display: flex;
flex-direction: row;
padding: 0.75em;
height: 5em;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
@ -11,11 +9,6 @@
outline: none;
}
&:hover {
background-color: var(--selectedPost, $fallback--lightBg);
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
}
.chat-list-item-left {
margin-right: 1em;
}
@ -29,7 +22,7 @@
.heading {
width: 100%;
display: inline-flex;
display: flex;
justify-content: space-between;
line-height: 1em;
}
@ -47,18 +40,17 @@
}
.chat-preview {
display: inline-flex;
display: flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0.35em 0;
color: $fallback--text;
color: var(--faint, $fallback--text);
color: var(--textFaint);
width: 100%;
}
a {
color: var(--faintLink, $fallback--link);
color: var(--linkFaint);
text-decoration: none;
pointer-events: none;
}
@ -73,11 +65,6 @@
}
}
.Avatar {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
.chat-preview-body {
--emoji-size: 1.4em;

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

@ -36,7 +36,7 @@
/>
<div
v-if="chat.unread > 0"
class="badge badge-notification unread-chat-count"
class="badge -notification unread-chat-count"
>
{{ chat.unread }}
</div>
@ -48,6 +48,5 @@
<script src="./chat_list_item.js"></script>
<style lang="scss">
@import "../../variables";
@import "./chat_list_item";
</style>

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

@ -1,5 +1,3 @@
@import "../../variables";
.chat-message-wrapper {
&.hovered-message-chain {
.animated.Avatar {
@ -27,12 +25,6 @@
.menu-icon {
cursor: pointer;
&:hover,
.extra-button-popover.open & {
color: $fallback--text;
color: var(--text, $fallback--text);
}
}
.popover {
@ -61,10 +53,12 @@
}
.status {
border-radius: $fallback--chatMessageRadius;
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
background-color: var(--background);
color: var(--text);
border-radius: var(--roundness);
display: flex;
padding: 0.75em;
border: 1px solid var(--border);
}
.created-at {
@ -97,8 +91,7 @@
.error {
.status-content.media-body,
.created-at {
color: $fallback--cRed;
color: var(--badgeNotification, $fallback--cRed);
color: var(--badgeNotification);
}
}
@ -117,16 +110,6 @@
align-content: end;
justify-content: flex-end;
a {
color: var(--chatMessageOutgoingLink, $fallback--link);
}
.status {
color: var(--chatMessageOutgoingText, $fallback--text);
background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
}
.chat-message-inner {
align-items: flex-end;
}
@ -137,22 +120,6 @@
}
.incoming {
a {
color: var(--chatMessageIncomingLink, $fallback--link);
}
.status {
color: var(--chatMessageIncomingText, $fallback--text);
background-color: var(--chatMessageIncomingBg, $fallback--bg);
border: 1px solid var(--chatMessageIncomingBorder, --border);
}
.created-at {
a {
color: var(--chatMessageIncomingText, $fallback--text);
}
}
.chat-message-menu {
left: 0.4rem;
}
@ -176,6 +143,5 @@
margin: 1.4em 0;
font-size: 0.9em;
user-select: none;
color: $fallback--text;
color: var(--faintedText, $fallback--text);
color: var(--textFaint);
}

30
src/components/chat_message/chat_message.style.js Normal file
View File

@ -0,0 +1,30 @@
export default {
name: 'ChatMessage',
selector: '.chat-message',
variants: {
outgoing: '.outgoing'
},
validInnerComponents: [
'Text',
'Icon',
'Border',
'Button',
'RichContent',
'Attachment',
'PollGraph'
],
defaultRules: [
{
directives: {
background: '--bg, 2',
backgroundNoCssColor: 'yes'
}
},
{
variant: 'outgoing',
directives: {
background: '--bg, 5'
}
}
]
}

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

@ -53,7 +53,7 @@
<template #content>
<div class="dropdown-menu">
<button
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
@click="deleteMessage"
>
<FAIcon icon="times" /> {{ $t("chats.delete") }}

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

@ -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;

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

@ -16,27 +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"
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>
@ -46,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;

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

@ -12,7 +12,7 @@
@change="$emit('update:modelValue', $event.target.checked)"
>
<i
class="checkbox-indicator"
class="input -checkbox checkbox-indicator"
:aria-hidden="true"
@transitionend.capture="onTransitionEnd"
/>
@ -54,7 +54,6 @@ export default {
</script>
<style lang="scss">
@import "../../variables";
@import "../../mixins";
.checkbox {
@ -62,9 +61,15 @@ export default {
display: inline-block;
min-height: 1.2em;
&-indicator {
& > &-indicator {
/* Reset .input stuff */
padding: 0;
margin: 0;
position: relative;
line-height: inherit;
display: inline;
padding-left: 1.2em;
box-shadow: none;
}
&-indicator::before {
@ -76,12 +81,9 @@ export default {
transition: color 200ms;
width: 1.1em;
height: 1.1em;
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
border-radius: var(--roundness);
box-shadow: var(--shadow);
background-color: var(--background);
vertical-align: top;
text-align: center;
line-height: 1.1em;
@ -98,21 +100,18 @@ export default {
}
.label {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
color: var(--text);
}
}
input[type="checkbox"] {
&:checked + .checkbox-indicator::before {
color: $fallback--text;
color: var(--inputText, $fallback--text);
color: var(--text);
}
&:indeterminate + .checkbox-indicator::before {
content: "–";
color: $fallback--text;
color: var(--inputText, $fallback--text);
color: var(--text);
}
}

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;

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

@ -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"
@ -203,6 +206,7 @@
</div>
<div
v-else
class="Conversation -hidden"
:style="hiddenStyle"
/>
</template>
@ -210,14 +214,17 @@
<script src="./conversation.js"></script>
<style lang="scss">
@import "../../variables";
.Conversation {
z-index: 1;
&.-hidden {
background: var(--__panel-background);
backdrop-filter: var(--__panel-backdrop-filter);
}
.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 +234,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,16 +262,17 @@
}
.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;
}
.thread-ancestor-has-other-replies .conversation-status,
&:last-child .conversation-status,
&:last-child:not(.-expanded) .conversation-status,
&.-expanded .conversation-status:last-child,
.thread-ancestor:last-child .conversation-status,
.thread-ancestor:last-child .thread-ancestor-dive-box,
&.-expanded .thread-tree .conversation-status {
@ -270,20 +280,36 @@
}
.thread-ancestors + .thread-tree > .conversation-status {
border-top: 1px solid var(--border, $fallback--border);
border-top: 1px solid var(--border);
}
/* expanded conversation in timeline */
&.status-fadein.-expanded .thread-body {
border-left: 4px solid $fallback--cRed;
border-left-color: var(--cRed, $fallback--cRed);
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
border-bottom: 1px solid var(--border, $fallback--border);
border-left: 4px solid var(--cRed);
border-radius: var(--roundness);
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom: 1px solid var(--border);
}
&.-expanded.status-fadein {
margin: calc(var(--status-margin, $status-margin) / 2);
--___margin: calc(var(--status-margin) / 2);
background: var(--background);
margin: var(--___margin);
&::before {
z-index: -1;
content: "";
display: block;
position: absolute;
top: calc(var(--___margin) * -1);
bottom: calc(var(--___margin) * -1);
left: calc(var(--___margin) * -1);
right: calc(var(--___margin) * -1);
background: var(--background);
backdrop-filter: var(--__panel-backdrop-filter);
}
}
}
</style>

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

@ -1,5 +1,3 @@
@import "../../variables";
.DesktopNav {
width: 100%;
z-index: var(--ZI_navbar);
@ -9,7 +7,7 @@
}
a {
color: var(--topBarLink, $fallback--link);
color: var(--link);
}
.inner-nav {
@ -54,27 +52,7 @@
.button-default {
&,
svg {
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
}
&:active {
background-color: $fallback--fg;
background-color: var(--btnPressedTopBar, $fallback--fg);
color: $fallback--text;
color: var(--btnPressedTopBarText, $fallback--text);
}
&:disabled {
color: $fallback--text;
color: var(--btnDisabledTopBarText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledTopBarText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggledTopBar, $fallback--fg);
color: var(--text);
}
}
@ -94,8 +72,7 @@
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: $fallback--fg;
background-color: var(--topBarText, $fallback--fg);
background-color: var(--text);
position: absolute;
top: 0;
bottom: 0;
@ -116,8 +93,7 @@
text-align: center;
.svg-inline--fa {
color: $fallback--link;
color: var(--topBarLink, $fallback--link);
color: var(--link);
}
}

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

@ -12,7 +12,7 @@
<slot name="header" />
</div>
</div>
<div class="dialog-modal-content">
<div class="panel-body dialog-modal-content">
<slot name="default" />
</div>
<div class="dialog-modal-footer user-interactions panel-footer">
@ -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;

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

@ -1,7 +1,7 @@
<template>
<div
ref="root"
class="emoji-input"
class="input emoji-input"
:class="{ 'with-picker': !hideEmojiButton }"
>
<slot
@ -68,9 +68,9 @@
v-for="(suggestion, index) in suggestions"
:id="suggestionItemId(index)"
:key="index"
class="autocomplete-item"
class="menu-item autocomplete-item"
role="option"
:class="{ highlighted: index === highlighted }"
:class="{ '-active': index === highlighted }"
:aria-label="autoCompleteItemLabel(suggestion)"
:aria-selected="index === highlighted"
@click.stop.prevent="onClick($event, suggestion)"
@ -110,9 +110,8 @@
<script src="./emoji_input.js"></script>
<style lang="scss">
@import "../../variables";
.emoji-input {
.input.emoji-input {
padding: 0;
display: flex;
flex-direction: column;
position: relative;
@ -127,8 +126,7 @@
line-height: 24px;
&:hover i {
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
}
}
@ -145,6 +143,12 @@
input,
textarea {
flex: 1 0 auto;
color: inherit;
/* stylelint-disable-next-line declaration-no-important */
background: none !important;
box-shadow: none;
border: none;
outline: none;
}
&.with-picker input {
@ -179,26 +183,28 @@
position: absolute;
}
&-item {
&-item.menu-item {
display: flex;
cursor: pointer;
padding: 0.2em 0.4em;
border-bottom: 1px solid rgb(0 0 0 / 40%);
height: 32px;
padding-top: 0;
padding-bottom: 0;
.image {
width: 32px;
height: 32px;
line-height: 32px;
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
line-height: var(--__line-height);
text-align: center;
font-size: 32px;
margin-right: 4px;
margin-right: var(--__horizontal-gap);
img {
width: 32px;
height: 32px;
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
object-fit: contain;
}
span {
font-size: var(--__line-height);
line-height: var(--__line-height);
}
}
.label {
@ -216,17 +222,6 @@
line-height: 9px;
}
}
&.highlighted {
background-color: $fallback--fg;
background-color: var(--selectedMenuPopover, $fallback--fg);
color: var(--selectedMenuPopoverText, $fallback--text);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
}
}
}
</style>

21
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;
@ -10,15 +8,6 @@ $emoji-picker-emoji-size: 32px;
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
display: flex;
flex-direction: column;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
color: var(--popoverText, $fallback--link);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon);
&-header-image {
display: inline-flex;
@ -81,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;
}
@ -109,13 +97,8 @@ $emoji-picker-emoji-size: 32px;
pointer-events: none;
}
&.active {
&.toggled {
border-bottom: 4px solid;
svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
}
}

10
src/components/emoji_picker/emoji_picker.vue
View File

@ -23,9 +23,9 @@
v-for="group in filteredEmojiGroups"
:ref="setGroupRef('group-header-' + group.id)"
:key="group.id"
class="emoji-tabs-item"
class="button-unstyled emoji-tabs-item"
:class="{
active: activeGroupView === group.id
toggled: activeGroupView === group.id
}"
:title="group.text"
role="button"
@ -52,8 +52,8 @@
class="additional-tabs"
>
<span
class="stickers-tab-icon additional-tabs-item"
:class="{active: showingStickers}"
class="button-unstyled stickers-tab-icon additional-tabs-item"
:class="{toggled: showingStickers}"
:title="$t('emoji.stickers')"
@click.prevent="toggleStickers"
>
@ -77,7 +77,7 @@
ref="search"
v-model="keyword"
type="text"
class="form-control"
class="input form-control"
:placeholder="$t('emoji.search_emoji')"
@input="$event.target.composing = false"
>

17
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 {
@ -92,7 +91,6 @@
padding: 0;
.emoji-reaction-count-button {
background-color: var(--btn);
margin: 0;
height: 100%;
border-top-left-radius: 0;
@ -102,11 +100,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 +145,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 +170,7 @@
@include focused-style {
.svg-inline--fa {
color: $fallback--link;
color: var(--accent, $fallback--link);
color: var(--accent);
}
.focus-marker {

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

@ -12,13 +12,13 @@
>
<template #content="{close}">
<div
:id="`popup-menu-${randomSeed}`"
class="dropdown-menu"
role="menu"
:id="`popup-menu-${randomSeed}`"
>
<button
v-if="canMute && !status.thread_muted"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="muteConversation"
>
@ -29,7 +29,7 @@
</button>
<button
v-if="canMute && status.thread_muted"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="unmuteConversation"
>
@ -40,7 +40,7 @@
</button>
<button
v-if="!status.pinned && canPin"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="pinStatus"
@click="close"
@ -52,7 +52,7 @@
</button>
<button
v-if="status.pinned && canPin"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="unpinStatus"
@click="close"
@ -65,7 +65,7 @@
<template v-if="canBookmark">
<button
v-if="!status.bookmarked"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="bookmarkStatus"
@click="close"
@ -77,7 +77,7 @@
</button>
<button
v-if="status.bookmarked"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="unbookmarkStatus"
@click="close"
@ -90,7 +90,7 @@
</template>
<button
v-if="ownStatus && editingAvailable"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="editStatus"
@click="close"
@ -102,7 +102,7 @@
</button>
<button
v-if="isEdited && editingAvailable"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="showStatusHistory"
@click="close"
@ -114,7 +114,7 @@
</button>
<button
v-if="canDelete"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="deleteStatus"
@click="close"
@ -125,7 +125,7 @@
/><span>{{ $t("status.delete") }}</span>
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="copyLink"
@click="close"
@ -137,7 +137,7 @@
</button>
<a
v-if="!status.is_local"
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
title="Source"
:href="status.external_url"
@ -149,7 +149,7 @@
/><span>{{ $t("status.external_source") }}</span>
</a>
<button
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click.prevent="reportStatus"
@click="close"
@ -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%;

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

@ -14,7 +14,7 @@
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
:aria-labelledby="name + '-label'"
class="opt exlcude-disabled visible-for-screenreader-only"
class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
type="checkbox"
:checked="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@ -44,7 +44,7 @@
v-if="isCustom"
:id="name"
v-model="family"
class="custom-font"
class="input custom-font"
type="text"
>
</div>
@ -53,8 +53,6 @@
<script src="./font_control.js"></script>
<style lang="scss">
@import "../../variables";
.font-control {
input.custom-font {
min-width: 10em;

40
src/components/fun_text.style.js Normal file
View File

@ -0,0 +1,40 @@
export default {
name: 'FunText',
selector: '/*fun-text*/',
virtual: true,
variants: {
greentext: '.greentext',
cyantext: '.cyantext'
},
states: {
faint: '.faint'
},
defaultRules: [
{
directives: {
textColor: '--text',
textAuto: 'preserve'
}
},
{
state: ['faint'],
directives: {
textOpacity: 0.5
}
},
{
variant: 'greentext',
directives: {
textColor: '--cGreen',
textAuto: 'preserve'
}
},
{
variant: 'cyantext',
directives: {
textColor: '--cBlue',
textAuto: 'preserve'
}
}
]
}

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;

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

@ -4,7 +4,7 @@
v-for="(notice, index) in notices"
:key="index"
class="alert global-notice"
:class="{ ['global-' + notice.level]: true }"
:class="{ [notice.level]: true }"
>
<div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }}
@ -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);
@ -52,48 +50,8 @@
}
}
.global-error {
background-color: var(--alertPopupError, $fallback--cRed);
color: var(--alertPopupErrorText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupErrorText, $fallback--text);
}
}
.global-warning {
background-color: var(--alertPopupWarning, $fallback--cOrange);
color: var(--alertPopupWarningText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupWarningText, $fallback--text);
}
}
.global-success {
background-color: var(--alertPopupSuccess, $fallback--cGreen);
color: var(--alertPopupSuccessText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupSuccessText, $fallback--text);
}
}
.global-info {
background-color: var(--alertPopupNeutral, $fallback--fg);
color: var(--alertPopupNeutralText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupNeutralText, $fallback--text);
}
}
.close-notice {
padding-right: 0.2em;
.svg-inline--fa:hover {
opacity: 0.6;
}
}
}
</style>

14
src/components/icon.style.js Normal file
View File

@ -0,0 +1,14 @@
export default {
name: 'Icon',
virtual: true,
selector: '.svg-inline--fa',
defaultRules: [
{
component: 'Icon',
directives: {
textColor: '$blend(--stack, 0.5, --parent--text)',
textAuto: 'no-auto'
}
}
]
}

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

@ -41,7 +41,7 @@
<input
ref="input"
type="file"
class="image-cropper-img-input"
class="input image-cropper-img-input"
:accept="mimes"
>
</div>

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

@ -3,6 +3,7 @@
<form>
<input
ref="input"
class="input"
type="file"
@change="change"
>

60
src/components/input.style.js Normal file
View File

@ -0,0 +1,60 @@
const hoverGlow = {
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--text',
alpha: 1
}
export default {
name: 'Input',
selector: '.input',
variant: {
checkbox: '.-checkbox',
radio: '.-radio'
},
states: {
disabled: ':disabled',
hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
validInnerComponents: [
'Text'
],
defaultRules: [
{
component: 'Root',
directives: {
'--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
}
},
{
variant: 'checkbox',
directives: {
roundness: 1
}
},
{
directives: {
'--font': 'generic | inherit',
background: '--fg, -5',
roundness: 3,
shadow: [{
x: 0,
y: 0,
blur: 2,
spread: 0,
color: '#000000',
alpha: 1
}, '--defaultInputBevel']
}
},
{
state: ['hover'],
directives: {
shadow: [hoverGlow, '--defaultInputBevel']
}
}
]
}

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;

14
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;
@ -51,8 +49,7 @@
width: 100%;
height: 100%;
object-fit: cover;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-radius: var(--roundness);
}
}
@ -82,13 +79,10 @@
margin: 2em 0;
}
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
border-style: solid;
border-width: 1px;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-radius: var(--roundness);
border-color: var(--border);
}
</style>

24
src/components/link.style.js Normal file
View File

@ -0,0 +1,24 @@
export default {
name: 'Link',
selector: 'a',
virtual: true,
states: {
faint: '.faint'
},
defaultRules: [
{
component: 'Link',
directives: {
textColor: '--link'
}
},
{
component: 'Link',
state: ['faint'],
directives: {
textOpacity: 0.5,
textOpacityMode: 'fake'
}
}
]
}

26
src/components/list/list.vue
View File

@ -7,6 +7,7 @@
v-for="item in items"
:key="getKey(item)"
class="list-item"
:class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
role="listitem"
>
<slot
@ -33,24 +34,15 @@ export default {
getKey: {
type: Function,
default: item => item.id
},
getClass: {
type: Function,
default: item => ''
},
nonInteractive: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss">
@import "../../variables";
.list {
&-item:not(:last-child) {
border-bottom: 1px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
}
&-empty-content {
text-align: center;
padding: 10px;
}
}
</style>

48
src/components/list/list_item.style.js Normal file
View File

@ -0,0 +1,48 @@
export default {
name: 'ListItem',
selector: '.list-item',
states: {
active: '.-active',
hover: ':hover:not(.-non-interactive)'
},
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar'
],
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0
}
},
{
state: ['active'],
directives: {
background: '--inheritedBackground, 10',
opacity: 1
}
},
{
state: ['hover'],
directives: {
background: '--inheritedBackground, 10',
opacity: 1
}
},
{
state: ['hover', 'active'],
directives: {
background: '--inheritedBackground, 20',
opacity: 1
}
}
]
}

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

@ -21,8 +21,6 @@
<script src="./lists_card.js"></script>
<style lang="scss">
@import "../../variables";
.list-card {
display: flex;
}
@ -35,18 +33,6 @@
.button-list-edit {
margin: 0;
padding: 1em;
color: $fallback--link;
color: var(--link, $fallback--link);
&:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
}
color: var(--link);
}
</style>

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

@ -36,6 +36,7 @@
id="list-edit-title"
ref="title"
v-model="titleDraft"
class="input"
>
<button
v-if="id"
@ -164,8 +165,6 @@
<script src="./lists_edit.js"></script>
<style lang="scss">
@import "../../variables";
.ListEdit {
--panel-body-padding: 0.5em;

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

@ -10,6 +10,7 @@
<input
ref="search"
v-model="query"
class="input"
:placeholder="$t('lists.search')"
@input="onInput"
>
@ -27,8 +28,6 @@
<script src="./lists_user_search.js"></script>
<style lang="scss">
@import "../../variables";
.ListsUserSearch {
.input-wrap {
display: flex;

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

@ -18,7 +18,7 @@
id="username"
v-model="user.username"
:disabled="loggingIn"
class="form-control"
class="input form-control"
:placeholder="$t('login.placeholder')"
>
</div>
@ -29,7 +29,7 @@
ref="passwordInput"
v-model="user.password"
:disabled="loggingIn"
class="form-control"
class="input form-control"
type="password"
>
</div>
@ -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;

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

@ -1,10 +1,7 @@
@import "../../variables";
.MentionLink {
position: relative;
white-space: normal;
display: inline;
color: var(--link);
word-break: normal;
& .new,
@ -14,7 +11,7 @@
}
.mention-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
border-radius: var(--roundness);
width: 1.5em;
height: 1.5em;
vertical-align: middle;
@ -61,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 {
@ -102,7 +101,7 @@
}
.serverName.-faded {
color: var(--faintLink, $fallback--link);
color: var(--linkFaint);
}
}

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

@ -22,7 +22,7 @@
:class="classnames"
>
<a
class="short button-unstyled"
class="short"
:class="{ '-with-tooltip': shouldShowTooltip }"
:href="url"
@click.prevent="onClick"

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

@ -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') }}

90
src/components/menu_item.style.js Normal file
View File

@ -0,0 +1,90 @@
export default {
name: 'MenuItem',
selector: '.menu-item',
validInnerComponents: [
'Text',
'Icon',
'Input',
'Border',
'ButtonUnstyled',
'Badge',
'Avatar'
],
states: {
hover: ':hover',
active: '.-active'
},
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0
}
},
{
state: ['hover'],
directives: {
background: '$mod(--bg, 5)',
opacity: 1
}
},
{
state: ['active'],
directives: {
background: '$mod(--bg, 10)',
opacity: 1
}
},
{
state: ['active', 'hover'],
directives: {
background: '$mod(--bg, 15)',
opacity: 1
}
},
{
component: 'Text',
parent: {
component: 'MenuItem',
state: ['hover']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Text',
parent: {
component: 'MenuItem',
state: ['active']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Icon',
parent: {
component: 'MenuItem',
state: ['active']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Icon',
parent: {
component: 'MenuItem',
state: ['hover']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
}
]
}

2
src/components/mfa_form/recovery_form.vue
View File

@ -16,7 +16,7 @@
<input
id="code"
v-model="code"
class="form-control"
class="input form-control"
>
</div>

2
src/components/mfa_form/totp_form.vue
View File

@ -18,7 +18,7 @@
<input
id="code"
v-model="code"
class="form-control"
class="input form-control"
>
</div>

41
src/components/mobile_drawer.style.js Normal file
View File

@ -0,0 +1,41 @@
export default {
name: 'MobileDrawer',
selector: '.mobile-drawer',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'PanelHeader',
'MenuItem',
'Notification',
'Alert',
'UserCard'
],
defaultRules: [
{
directives: {
background: '--bg',
backgroundNoCssColor: 'yes'
}
},
{
component: 'PanelHeader',
parent: { component: 'MobileDrawer' },
directives: {
background: '--fg',
shadow: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}]
}
}
]
}

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

@ -20,7 +20,7 @@
/>
<div
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
class="alert-dot"
class="badge -dot -notification"
/>
</button>
<NavigationPins class="pins" />
@ -37,24 +37,24 @@
/>
<div
v-if="unseenNotificationsCount"
class="alert-dot"
class="badge -dot -notification"
/>
</button>
</div>
</nav>
<aside
v-if="currentUser"
class="mobile-notifications-drawer"
class="mobile-notifications-drawer mobile-drawer"
:class="{ '-closed': !notificationsOpen }"
@touchstart.stop="notificationsTouchStart"
@touchmove.stop="notificationsTouchMove"
>
<div class="mobile-notifications-header">
<div class="panel-heading mobile-notifications-header">
<span class="title">
{{ $t('notifications.notifications') }}
<span
v-if="unseenCountBadgeText"
class="badge badge-notification unseen-count"
class="badge -notification unseen-count"
>{{ unseenCountBadgeText }}</span>
</span>
<span class="spacer" />
@ -123,8 +123,6 @@
<script src="./mobile_nav.js"></script>
<style lang="scss">
@import "../../variables";
.MobileNav {
z-index: var(--ZI_navbar);
@ -137,7 +135,7 @@
box-sizing: border-box;
a {
color: var(--topBarLink, $fallback--link);
color: var(--link);
}
}
@ -165,19 +163,6 @@
display: flex;
}
.alert-dot {
border-radius: 100%;
height: 8px;
width: 8px;
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
}
.mobile-notifications-drawer {
width: 100%;
height: 100vh;
@ -185,13 +170,13 @@
position: fixed;
top: 0;
left: 0;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow);
box-shadow: var(--shadow);
transition-property: transform;
transition-duration: 0.25s;
transform: translateX(0);
z-index: var(--ZI_navbar);
-webkit-overflow-scrolling: touch;
background: var(--background);
&.-closed {
transform: translateX(100%);
@ -208,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;
@ -238,10 +219,6 @@
height: calc(100vh - var(--navbar-height));
overflow-x: hidden;
overflow-y: scroll;
color: $fallback--text;
color: var(--text, $fallback--text);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.notifications {
padding: 0;

7
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;
@ -25,8 +23,6 @@
right: 1.5em;
// TODO: this needs its own color, it has to stand out enough and link color
// is not very optimal for this particular use.
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
@ -42,8 +38,7 @@
svg {
font-size: 1.5em;
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
}
}

9
src/components/modal/modals.style.js Normal file
View File

@ -0,0 +1,9 @@
export default {
name: 'Modals',
selector: '.modal-view',
lazy: true,
validInnerComponents: [
'Panel'
],
defaultRules: []
}

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

@ -12,13 +12,13 @@
<div class="dropdown-menu">
<span v-if="canGrantRole">
<button
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleRight(&quot;admin&quot;)"
>
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleRight(&quot;moderator&quot;)"
>
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@ -31,14 +31,14 @@
</span>
<button
v-if="canChangeActivationState"
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleActivationStatus()"
>
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
</button>
<button
v-if="canDeleteAccount"
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="deleteUserDialog(true)"
>
{{ $t('user_card.admin_menu.delete_account') }}
@ -50,74 +50,74 @@
/>
<span v-if="canUseTagPolicy">
<button
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.FORCE_NSFW)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
/>
{{ $t('user_card.admin_menu.force_nsfw') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.STRIP_MEDIA)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
/>
{{ $t('user_card.admin_menu.strip_media') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.FORCE_UNLISTED)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
/>
{{ $t('user_card.admin_menu.force_unlisted') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.SANDBOX)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
/>
{{ $t('user_card.admin_menu.sandbox') }}
</button>
<button
v-if="user.is_local"
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
/>
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
</button>
<button
v-if="user.is_local"
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
/>
{{ $t('user_card.admin_menu.disable_any_subscription') }}
</button>
<button
v-if="user.is_local"
class="button-default dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.QUARANTINE)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
/>
{{ $t('user_card.admin_menu.quarantine') }}
@ -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>

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

@ -37,7 +37,8 @@
</NavigationEntry>
<div
v-show="showTimelines"
class="timelines-background"
class="timelines-background menu-item-collapsible"
:class="{ '-expanded': showTimelines }"
>
<div class="timelines">
<NavigationEntry
@ -57,12 +58,11 @@
>
<router-link
:title="$t('lists.manage_lists')"
class="extra-button"
class="button-unstyled extra-button"
:to="{ name: 'lists' }"
@click.stop
>
<FAIcon
class="extra-button"
fixed-width
icon="wrench"
/>
@ -75,7 +75,8 @@
</NavigationEntry>
<div
v-show="showLists"
class="timelines-background"
class="timelines-background menu-item-collapsible"
:class="{ '-expanded': showLists }"
>
<ListsMenuContent
:show-pin="editMode || forceEditMode"
@ -102,12 +103,10 @@
<script src="./nav_panel.js"></script>
<style lang="scss">
@import "../../variables";
.NavPanel {
.panel {
overflow: hidden;
box-shadow: var(--panelShadow);
box-shadow: var(--shadow);
}
ul {
@ -116,33 +115,6 @@
padding: 0;
}
li {
position: relative;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
> li {
&:first-child .menu-item {
border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
}
&:last-child .menu-item {
border-bottom-right-radius: $fallback--panelRadius;
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
}
}
li:last-child {
border: none;
}
.navigation-chevron {
margin-left: 0.8em;
margin-right: 0.8em;
@ -156,16 +128,6 @@
.timelines-background {
padding: 0 0 0 0.6em;
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
.timelines {
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
}
.nav-panel-heading {

79
src/components/navigation/navigation_entry.vue
View File

@ -1,7 +1,6 @@
<template>
<OptionalRouterLink
v-slot="{ isActive, href, navigate } = {}"
ass="ass"
:to="routeTo"
>
<li
@ -11,7 +10,7 @@
>
<component
:is="routeTo ? 'a' : 'button'"
class="main-link button-unstyled"
class="main-link"
:href="href"
@click="navigate"
>
@ -35,7 +34,7 @@
<slot />
<div
v-if="item.badgeGetter && getters[item.badgeGetter]"
class="badge badge-notification"
class="badge -notification"
>
{{ getters[item.badgeGetter] }}
</div>
@ -63,73 +62,53 @@
<script src="./navigation_entry.js"></script>
<style lang="scss">
@import "../../variables";
.NavigationEntry.menu-item {
--__line-height: 2.5em;
--__horizontal-gap: 0.5em;
--__vertical-gap: 0.4em;
.NavigationEntry {
padding: 0;
display: flex;
box-sizing: border-box;
align-items: baseline;
height: 3.5em;
line-height: 3.5em;
padding: 0 1em;
width: 100%;
color: $fallback--link;
color: var(--link, $fallback--link);
.timelines-chevron {
margin-right: 0;
&[aria-expanded] {
padding-right: var(--__horizontal-gap);
}
.main-link {
line-height: var(--__line-height);
box-sizing: border-box;
flex: 1;
padding: var(--__vertical-gap) var(--__horizontal-gap);
}
.menu-icon {
margin-right: 0.8em;
line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
margin-right: var(--__horizontal-gap);
}
.timelines-chevron {
line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
margin-right: 0;
}
.extra-button {
width: 3em;
line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
text-align: center;
&:last-child {
margin-right: -0.8em;
margin-right: calc(-1 * var(--__horizontal-gap));
}
}
&:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuText, $fallback--link);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
.menu-icon {
--icon: var(--text, $fallback--icon);
}
}
&.-active {
font-weight: bolder;
background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--text;
color: var(--selectedMenuText, $fallback--text);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
.menu-icon {
--icon: var(--text, $fallback--icon);
}
&:hover {
text-decoration: underline;
}
.badge {
margin: 0 var(--__horizontal-gap);
}
}
</style>

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

@ -3,7 +3,8 @@
<router-link
v-for="item in pinnedList"
:key="item.name"
class="pinned-item"
class="button-unstyled pinned-item"
active-class="toggled"
:to="getRouteTo(item)"
:title="item.labelRaw || $t(item.label)"
>
@ -18,7 +19,7 @@
>{{ item.iconLetter }}</span>
<div
v-if="item.badgeGetter && getters[item.badgeGetter]"
class="alert-dot"
class="badge -dot -notification"
/>
</router-link>
</span>
@ -27,25 +28,12 @@
<script src="./navigation_pins.js"></script>
<style lang="scss">
@import "../../variables";
.NavigationPins {
display: flex;
flex-wrap: wrap;
overflow: hidden;
height: 100%;
.alert-dot {
border-radius: 100%;
height: 0.5em;
width: 0.5em;
position: absolute;
right: calc(50% - 0.75em);
top: calc(50% - 0.5em);
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
}
.pinned-item {
position: relative;
flex: 1 0 3em;
@ -60,15 +48,8 @@
margin: 0;
}
&.router-link-active {
color: $fallback--text;
color: var(--panelText, $fallback--text);
&.toggled {
border-bottom: 4px solid;
& .svg-inline--fa,
& .iconLetter {
color: inherit;
}
}
}
}

26
src/components/notification/notification.scss
View File

@ -1,13 +1,15 @@
@import "../../variables";
// TODO Copypaste from Status, should unify it somehow
.Notification {
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-color: var(--border);
word-wrap: break-word;
word-break: break-word;
&.Status {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
}
--emoji-size: 14px;
&:hover {
@ -71,28 +73,22 @@
}
&.-type--repeat .type-icon {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
color: var(--cGreen);
}
&.-type--follow .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
color: var(--cBlue);
}
&.-type--follow-request .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
color: var(--cBlue);
}
&.-type--like .type-icon {
color: orange;
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
color: var(--cOrange);
}
&.-type--move .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
color: var(--cBlue);
}
}

17
src/components/notification/notification.style.js Normal file
View File

@ -0,0 +1,17 @@
export default {
name: 'Notification',
selector: '.Notification',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar',
'Attachment'
],
defaultRules: []
}

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

@ -155,7 +155,7 @@
<router-link
v-if="notification.status"
:to="{ name: 'conversation', params: { id: notification.status.id } }"
class="timeago-link faint-link"
class="timeago-link faint"
>
<Timeago
:time="notification.created_at"
@ -247,7 +247,6 @@
/>
<template v-else>
<StatusContent
:class="{ faint: !statusExpanded }"
:compact="!statusExpanded"
:status="notification.status"
/>

28
src/components/notifications/notification_filters.vue
View File

@ -8,65 +8,65 @@
<template #content>
<div class="dropdown-menu">
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('likes')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.likes }"
/>{{ $t('settings.notification_visibility_likes') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('repeats')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.repeats }"
/>{{ $t('settings.notification_visibility_repeats') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('follows')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.follows }"
/>{{ $t('settings.notification_visibility_follows') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('mentions')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.mentions }"
/>{{ $t('settings.notification_visibility_mentions') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('emojiReactions')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.emojiReactions }"
/>{{ $t('settings.notification_visibility_emoji_reactions') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('moves')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.moves }"
/>{{ $t('settings.notification_visibility_moves') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
@click="toggleNotificationFilter('polls')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.polls }"
/>{{ $t('settings.notification_visibility_polls') }}
</button>

28
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
@ -7,8 +5,7 @@
}
.loadmore-error {
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
}
.notification {
@ -25,7 +22,7 @@
&.unseen {
.notification-overlay {
background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
}
}
}
@ -35,6 +32,11 @@
.notification {
box-sizing: border-box;
/* TODO cleanup this */
.Status {
flex: 1;
}
&:hover .animated.Avatar {
canvas {
display: none;
@ -60,24 +62,17 @@
width: 32px;
height: 32px;
}
.faint {
--link: var(--faintLink);
--text: var(--faint);
}
}
.follow-request-accept {
&:hover {
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
}
}
.follow-request-reject {
&:hover {
color: $fallback--cRed;
color: var(--cRed, $fallback--cRed);
color: var(--cRed);
}
}
@ -97,11 +92,6 @@
}
}
/* TODO cleanup this */
.Status {
flex: 1;
}
time {
white-space: nowrap;
}

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

@ -18,7 +18,7 @@
{{ $t('notifications.notifications') }}
<span
v-if="unseenCountBadgeText"
class="badge badge-notification unseen-count"
class="badge -notification unseen-count"
>{{ unseenCountBadgeText }}</span>
</div>
<div
@ -85,7 +85,7 @@
</div>
<button
v-else-if="!loading"
class="button-unstyled -link -fullwidth"
class="button-unstyled -link text-center"
@click.prevent="fetchOlderNotifications()"
>
<div class="new-status-notification text-center">

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

@ -18,7 +18,7 @@
/>
<input
:id="name"
class="input-number"
class="input input-number"
type="number"
:value="modelValue || fallback"
:disabled="!present || disabled"

41
src/components/panel.style.js Normal file
View File

@ -0,0 +1,41 @@
export default {
name: 'Panel',
selector: '.panel',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'PanelHeader',
'MenuItem',
'Post',
'Notification',
'Alert',
'UserCard',
'Chat',
'Attachment',
'Tab',
'ListItem'
],
defaultRules: [
{
directives: {
backgroundNoCssColor: 'yes',
background: '--bg',
roundness: 3,
blur: '5px',
shadow: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}]
}
}
]
}

24
src/components/panel_header.style.js Normal file
View File

@ -0,0 +1,24 @@
export default {
name: 'PanelHeader',
selector: '.panel-heading',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Button',
'ButtonUnstyled',
'Badge',
'Alert',
'Avatar'
],
defaultRules: [
{
component: 'PanelHeader',
directives: {
backgroundNoCssColor: 'yes',
background: '--fg',
shadow: []
}
}
]
}

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>

11
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>
@ -43,7 +43,7 @@
v-model="user.email"
:disabled="isPending"
:placeholder="$t('password_reset.placeholder')"
class="form-control"
class="input form-control"
type="input"
>
</div>
@ -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;
}

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

@ -37,12 +37,14 @@
:role="poll.multiple ? 'checkbox' : 'radio'"
:aria-labelledby="`option-vote-${randomSeed}-${index}`"
:aria-checked="choices[index]"
class="input unstyled"
@click="activateOption(index)"
>
<!-- TODO: USE CHECKBOX -->
<input
v-if="poll.multiple"
type="checkbox"
class="poll-checkbox"
class="input -checkbox poll-checkbox"
:disabled="loading"
:value="index"
>
@ -51,6 +53,7 @@
type="radio"
:disabled="loading"
:value="index"
class="input -radio"
>
<label class="option-vote">
<RichContent
@ -103,8 +106,6 @@
<script src="./poll.js"></script>
<style lang="scss">
@import "../../variables";
.poll {
.votes {
display: flex;
@ -114,6 +115,10 @@
.poll-option {
margin: 0.75em 0.5em;
.input {
line-height: inherit;
}
}
.option-result {
@ -121,8 +126,7 @@
display: flex;
flex-direction: row;
position: relative;
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
color: var(--textLight);
}
.option-result-label {
@ -141,12 +145,7 @@
.result-fill {
height: 100%;
position: absolute;
color: $fallback--text;
color: var(--pollText, $fallback--text);
background-color: $fallback--lightBg;
background-color: var(--poll, $fallback--lightBg);
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-radius: var(--roundness);
top: 0;
left: 0;
transition: width 0.5s;

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

@ -13,7 +13,7 @@
:id="`poll-${index}`"
v-model="options[index]"
size="1"
class="poll-option-input"
class="input poll-option-input"
type="text"
:placeholder="$t('polls.option')"
:maxlength="maxLength"
@ -67,7 +67,7 @@
<input
v-model="expiryAmount"
type="number"
class="expiry-amount hide-number-spinner"
class="input expiry-amount hide-number-spinner"
:min="minExpirationInCurrentUnit"
:max="maxExpirationInCurrentUnit"
@change="expiryAmountChange"
@ -95,8 +95,6 @@
<script src="./poll_form.js"></script>
<style lang="scss">
@import "../../variables";
.poll-form {
display: flex;
flex-direction: column;

12
src/components/poll/poll_graph.style.js Normal file
View File

@ -0,0 +1,12 @@
export default {
name: 'PollGraph',
selector: '.result-fill',
defaultRules: [
{
directives: {
background: '--accent',
opacity: 0.5
}
}
]
}

36
src/components/popover.style.js Normal file
View File

@ -0,0 +1,36 @@
export default {
name: 'Popover',
selector: '.popover',
lazy: true,
variants: {
modal: '.modal'
},
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'MenuItem',
'Post',
'UserCard'
],
defaultRules: [
{
directives: {
background: '--bg',
blur: '10px',
shadow: [{
x: 2,
y: 2,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
}]
}
}
]
}

122
src/components/popover/popover.vue
View File

@ -42,8 +42,6 @@
<script src="./popover.js" />
<style lang="scss">
@import "../../variables";
.popover-trigger-button {
display: inline-block;
}
@ -53,42 +51,31 @@
position: fixed;
min-width: 0;
max-width: calc(100vw - 20px);
box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
box-shadow: var(--popupShadow);
box-shadow: var(--shadow);
}
.popover-default {
&::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow);
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
z-index: -1px;
box-shadow: var(--shadow);
pointer-events: none;
}
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--text;
color: var(--popoverText, $fallback--text);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
--postLink: var(--popoverPostLink, $fallback--link);
--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
--icon: var(--popoverIcon, $fallback--icon);
border-radius: var(--roundness);
border-color: var(--border);
border-style: solid;
border-width: 1px;
}
.dropdown-menu {
display: block;
padding: 0.5rem 0;
padding: 0;
font-size: 1em;
text-align: left;
list-style: none;
@ -100,34 +87,16 @@
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border);
border-top: 1px solid var(--border);
}
.dropdown-item {
line-height: 21px;
overflow: hidden;
display: block;
padding: 0.5em 0.75em;
clear: both;
font-weight: 400;
text-align: inherit;
white-space: nowrap;
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
width: 100%;
height: 100%;
box-sizing: border-box;
--btnText: var(--popoverText, $fallback--text);
&-icon {
svg {
width: 22px;
margin-right: 0.75rem;
color: var(--menuPopoverIcon, $fallback--icon);
width: var(--__line-height);
margin-right: var(--__horizontal-gap);
}
}
@ -138,40 +107,18 @@
}
}
&:active,
&:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenuPopover, $fallback--lightBg);
box-shadow: none;
--btnText: var(--selectedMenuPopoverText, $fallback--link);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
svg {
color: var(--selectedMenuPopoverIcon, $fallback--icon);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
}
}
.menu-checkbox {
display: inline-block;
vertical-align: middle;
min-width: 22px;
max-width: 22px;
min-height: 22px;
max-height: 22px;
line-height: 22px;
min-width: calc(var(--__line-height) + 1px);
max-width: calc(var(--__line-height) + 1px);
min-height: calc(var(--__line-height) + 1px);
max-height: calc(var(--__line-height) + 1px);
line-height: var(--__line-height);
text-align: center;
border-radius: 0;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
margin-right: 0.75em;
box-shadow: var(--shadow);
margin-right: var(--__horizontal-gap);
&.menu-checkbox-checked::after {
font-size: 1.25em;
@ -188,30 +135,5 @@
}
}
}
.button-default.dropdown-item {
&,
i[class*="icon-"] {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
&:active {
background-color: $fallback--lightBg;
background-color: var(--selectedMenuPopover, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuPopoverText, $fallback--link);
}
&:disabled {
color: $fallback--text;
color: var(--btnDisabledText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledText, $fallback--text);
}
}
}
</style>

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

@ -161,7 +161,7 @@
v-model="newStatus.spoilerText"
enable-emoji-picker
:suggest="emojiSuggestor"
class="form-control"
class="input form-control"
>
<template #default="inputProps">
<input
@ -171,7 +171,7 @@
:disabled="posting && !optimisticPosting"
v-bind="propsToNative(inputProps)"
size="1"
class="form-post-subject"
class="input form-post-subject"
>
</template>
</EmojiInput>
@ -180,7 +180,7 @@
v-model="newStatus.status"
:suggest="emojiUserSuggestor"
:placement="emojiPickerPlacement"
class="form-control main-input"
class="input form-control main-input"
enable-emoji-picker
hide-emoji-button
:newline-on-ctrl-enter="submitOnEnter"
@ -198,7 +198,7 @@
rows="1"
cols="1"
:disabled="posting && !optimisticPosting"
class="form-post-body"
class="input form-post-body"
:class="{ 'scrollable-form': !!maxHeight }"
v-bind="propsToNative(inputProps)"
@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
@ -237,7 +237,7 @@
<Select
id="post-content-type"
v-model="newStatus.contentType"
class="form-control"
class="input form-control"
:attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
>
<option
@ -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);
}
}
@ -503,31 +497,6 @@
padding: 0 0.1em;
display: flex;
align-items: center;
&.selected,
&:hover {
// needs to be specific to override icon default color
svg,
i,
label {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
&.disabled {
svg,
i {
cursor: not-allowed;
color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon);
&:hover {
color: $fallback--icon;
color: var(--btnDisabledText, $fallback--icon);
}
}
}
}
.error {
@ -580,7 +549,7 @@
line-height: 1.85;
}
.form-post-body {
.input.form-post-body {
// TODO: make a resizable textarea component?
box-sizing: content-box; // needed for easier computation of dynamic size
overflow: hidden;
@ -591,6 +560,7 @@
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
resize: none;
background: transparent;
&.scrollable-form {
overflow-y: auto;
@ -609,8 +579,7 @@
margin: 0 0.5em;
&.error {
color: $fallback--cRed;
color: var(--cRed, $fallback--cRed);
color: var(--cRed);
}
}
@ -633,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>

26
src/components/quick_filter_settings/quick_filter_settings.vue
View File

@ -16,39 +16,39 @@
>
<button
v-if="!conversation"
class="button-default dropdown-item"
class="menu-item dropdown-item"
:aria-checked="replyVisibilityAll"
role="menuitemradio"
@click="replyVisibilityAll = true"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityAll }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_all') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
class="menu-item dropdown-item"
:aria-checked="replyVisibilityFollowing"
role="menuitemradio"
@click="replyVisibilityFollowing = true"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_following_short') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
class="menu-item dropdown-item"
:aria-checked="replyVisibilitySelf"
role="menuitemradio"
@click="replyVisibilitySelf = true"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_self_short') }}
@ -60,43 +60,43 @@
/>
</div>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
role="menuitemcheckbox"
:aria-checked="muteBotStatuses"
@click="muteBotStatuses = !muteBotStatuses"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': muteBotStatuses }"
:aria-hidden="true"
/>{{ $t('settings.mute_bot_posts') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
role="menuitemcheckbox"
:aria-checked="hideMedia"
@click="hideMedia = !hideMedia"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMedia }"
:aria-hidden="true"
/>{{ $t('settings.hide_media_previews') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
role="menuitemcheckbox"
:aria-checked="hideMutedPosts"
@click="hideMutedPosts = !hideMutedPosts"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMutedPosts }"
:aria-hidden="true"
/>{{ $t('settings.hide_all_muted_posts') }}
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click="openTab('filtering')"
>

22
src/components/quick_view_settings/quick_view_settings.vue
View File

@ -12,13 +12,13 @@
>
<div role="group">
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
:aria-checked="conversationDisplay === 'tree'"
role="menuitemradio"
@click="conversationDisplay = 'tree'"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:aria-hidden="true"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
/><FAIcon
@ -27,13 +27,13 @@
/> {{ $t('settings.conversation_display_tree_quick') }}
</button>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
:aria-checked="conversationDisplay === 'linear'"
role="menuitemradio"
@click="conversationDisplay = 'linear'"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
:aria-hidden="true"
/><FAIcon
@ -47,45 +47,45 @@
class="dropdown-divider"
/>
<button
class="button-default dropdown-item"
class="menu-item dropdown-item"
role="menuitemcheckbox"
:aria-checked="showUserAvatars"
@click="showUserAvatars = !showUserAvatars"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': showUserAvatars }"
:aria-hidden="true"
/>{{ $t('settings.mention_link_show_avatar_quick') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
class="menu-item dropdown-item"
role="menuitemcheckbox"
:aria-checked="autoUpdate"
@click="autoUpdate = !autoUpdate"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': autoUpdate }"
:aria-hidden="true"
/>{{ $t('settings.auto_update') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
class="menu-item dropdown-item"
role="menuitemcheckbox"
:aria-checked="collapseWithSubjects"
@click="collapseWithSubjects = !collapseWithSubjects"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': collapseWithSubjects }"
:aria-hidden="true"
/>{{ $t('settings.collapse_subject') }}
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
class="menu-item dropdown-item dropdown-item-icon"
role="menuitem"
@click="openTab('general')"
>

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

@ -14,7 +14,7 @@
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
:aria-labelledby="name + '-label'"
class="opt visible-for-screenreader-only"
class="input -checkbox opt visible-for-screenreader-only"
type="checkbox"
:checked="present"
@change="$emit('update:modelValue', !present ? fallback : undefined)"
@ -27,7 +27,7 @@
/>
<input
:id="name"
class="input-number"
class="input input-number"
type="range"
:value="modelValue || fallback"
:disabled="!present || disabled"
@ -38,7 +38,7 @@
>
<input
:id="name + '-numeric'"
class="input-number"
class="input input-number"
type="number"
:aria-labelledby="name + '-label'"
:value="modelValue || fallback"

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;

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

@ -25,7 +25,7 @@
id="sign-up-username"
v-model.trim="v$.user.username.$model"
:disabled="isPending"
class="form-control"
class="input form-control"
:aria-required="true"
:placeholder="$t('registration.username_placeholder')"
>
@ -53,7 +53,7 @@
id="sign-up-fullname"
v-model.trim="v$.user.fullname.$model"
:disabled="isPending"
class="form-control"
class="input form-control"
:aria-required="true"
:placeholder="$t('registration.fullname_placeholder')"
>
@ -81,7 +81,7 @@
id="email"
v-model="v$.user.email.$model"
:disabled="isPending"
class="form-control"
class="input form-control"
type="email"
:aria-required="accountActivationRequired"
>
@ -106,7 +106,7 @@
id="bio"
v-model="user.bio"
:disabled="isPending"
class="form-control"
class="input form-control"
:placeholder="bioPlaceholder"
/>
</div>
@ -123,7 +123,7 @@
id="sign-up-password"
v-model="user.password"
:disabled="isPending"
class="form-control"
class="input form-control"
type="password"
:aria-required="true"
>
@ -151,7 +151,7 @@
id="sign-up-password-confirmation"
v-model="user.confirm"
:disabled="isPending"
class="form-control"
class="input form-control"
type="password"
:aria-required="true"
>
@ -184,7 +184,7 @@
id="sign-up-birthday"
v-model="user.birthday"
:disabled="isPending"
class="form-control"
class="input form-control"
type="date"
:max="birthdayRequired ? birthdayMinAttr : undefined"
:aria-required="birthdayRequired"
@ -229,7 +229,7 @@
id="reason"
v-model="user.reason"
:disabled="isPending"
class="form-control"
class="input form-control"
:placeholder="reasonPlaceholder"
/>
</div>
@ -256,7 +256,7 @@
id="captcha-answer"
v-model="captcha.solution"
:disabled="isPending"
class="form-control"
class="input form-control"
type="text"
autocomplete="off"
autocorrect="off"
@ -275,7 +275,7 @@
id="token"
v-model="token"
disabled="true"
class="form-control"
class="input form-control"
type="text"
>
</div>
@ -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 {

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