Merge branch 'themes3' into shigusegubu-themes3
This commit is contained in:
Henry Jameson
commit
ebeeec6391
143 changed files with 3616 additions and 1417 deletions
1
changelog.d/themes3.change
Normal file
1
changelog.d/themes3.change
Normal file
|
|
@ -0,0 +1 @@
|
|||
Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system.
|
||||
309
src/App.scss
309
src/App.scss
|
|
@ -22,10 +22,9 @@ html {
|
|||
|
||||
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;
|
||||
|
|
@ -50,9 +49,8 @@ body {
|
|||
|
||||
&::-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 +59,7 @@ body {
|
|||
&::-webkit-scrollbar-button {
|
||||
--___bgPadding: 2px;
|
||||
|
||||
color: var(--btnText);
|
||||
color: var(--text);
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
|
||||
&:horizontal {
|
||||
|
|
@ -69,15 +67,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) 51%),
|
||||
linear-gradient(-45deg, var(--text) 50%, transparent 51%);
|
||||
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
|
||||
}
|
||||
}
|
||||
|
|
@ -87,15 +85,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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -111,8 +109,7 @@ body {
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $fallback--link;
|
||||
color: var(--link, $fallback--link);
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -128,27 +125,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 +177,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;
|
||||
}
|
||||
|
||||
|
|
@ -366,106 +347,56 @@ 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 {
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: initial;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--border);
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: var(--roundness);
|
||||
border-top-left-radius: var(--roundness);
|
||||
}
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
// TODO: add better color variable
|
||||
color: $fallback--text;
|
||||
color: var(--alertErrorPanelText, $fallback--text);
|
||||
background-color: $fallback--alertError;
|
||||
background-color: var(--alertError, $fallback--alertError);
|
||||
&:last-child {
|
||||
border-bottom-right-radius: var(--roundness);
|
||||
border-bottom-left-radius: var(--roundness);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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,24 +404,18 @@ 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;
|
||||
|
|
@ -502,19 +427,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 +443,6 @@ textarea,
|
|||
&[disabled="disabled"],
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&[type="range"] {
|
||||
|
|
@ -543,9 +457,8 @@ 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);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -564,11 +477,9 @@ textarea,
|
|||
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 +492,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 +512,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 +531,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 +559,7 @@ option {
|
|||
|
||||
li {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--inputRadius);
|
||||
border-radius: var(--roundness);
|
||||
padding: 0.5em;
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
|
@ -714,74 +620,42 @@ 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 {
|
||||
border-radius: 100%;
|
||||
min-height: 8px;
|
||||
max-height: 8px;
|
||||
min-width: 8px;
|
||||
max-width: 8px;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
left: calc(50% - 4px);
|
||||
top: calc(50% - 4px);
|
||||
margin-left: 6px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -816,6 +690,11 @@ option {
|
|||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.timeago {
|
||||
--link: var(--text);
|
||||
--linkFaint: var(--textFaint);
|
||||
}
|
||||
|
||||
.login-hint {
|
||||
text-align: center;
|
||||
|
||||
|
|
|
|||
|
|
@ -130,11 +130,6 @@
|
|||
margin: -0.5em 0;
|
||||
padding: 0.5em 0;
|
||||
text-align: center;
|
||||
|
||||
&:not(:hover) .icon {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
50
src/components/alert.style.js
Normal file
50
src/components/alert.style.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
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
|
||||
}
|
||||
},
|
||||
{
|
||||
parent: {
|
||||
component: 'Alert'
|
||||
},
|
||||
component: 'Border',
|
||||
textColor: '--parent'
|
||||
},
|
||||
{
|
||||
variant: 'error',
|
||||
directives: {
|
||||
background: '--cRed'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'warning',
|
||||
directives: {
|
||||
background: '--cOrange'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'success',
|
||||
directives: {
|
||||
background: '--cGreen'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,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;
|
||||
|
|
|
|||
24
src/components/attachment/attachment.style.js
Normal file
24
src/components/attachment/attachment.style.js
Normal 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
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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=""
|
||||
>
|
||||
|
|
@ -253,7 +253,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=""
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -45,13 +46,12 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
24
src/components/badge.style.js
Normal file
24
src/components/badge.style.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
export default {
|
||||
name: 'Badge',
|
||||
selector: '.badge',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon'
|
||||
],
|
||||
variants: {
|
||||
notification: '.-notification'
|
||||
},
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--cGreen'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'notification',
|
||||
directives: {
|
||||
background: '--cRed'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
13
src/components/border.style.js
Normal file
13
src/components/border.style.js
Normal 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
101
src/components/button.style.js
Normal 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,-24.2',
|
||||
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['toggled', 'hover'],
|
||||
directives: {
|
||||
background: '--inheritedBackground,-24.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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
87
src/components/button_unstyled.style.js
Normal file
87
src/components/button_unstyled.style.js
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
export default {
|
||||
name: 'ButtonUnstyled',
|
||||
selector: '.button-unstyled',
|
||||
states: {
|
||||
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: 'Text',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['disabled']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Text',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['disabled', 'hover']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['disabled']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['disabled', 'hover']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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,7 @@
|
|||
.footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
background-color: var(--background);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -61,8 +60,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 +76,6 @@
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1em;
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
.unread-message-count {
|
||||
font-size: 0.8em;
|
||||
left: 50%;
|
||||
|
|
|
|||
14
src/components/chat/chat.style.js
Normal file
14
src/components/chat/chat.style.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
export default {
|
||||
name: 'Chat',
|
||||
selector: '.chat-message-list',
|
||||
lazy: true,
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Avatar',
|
||||
'ChatMessage'
|
||||
],
|
||||
defaultRules: [
|
||||
]
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -73,11 +73,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.Avatar {
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
}
|
||||
|
||||
.chat-preview-body {
|
||||
--emoji-size: 1.4em;
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -27,12 +27,6 @@
|
|||
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
.extra-button-popover.open & {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
|
|
@ -61,10 +55,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 {
|
||||
|
|
@ -117,16 +113,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 +123,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;
|
||||
}
|
||||
|
|
|
|||
30
src/components/chat_message/chat_message.style.js
Normal file
30
src/components/chat_message/chat_message.style.js
Normal 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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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") }}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
class="input"
|
||||
placeholder="Search people"
|
||||
@input="onInput"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
@ -62,9 +62,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 +82,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 +101,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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -262,7 +262,8 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -275,11 +276,11 @@
|
|||
|
||||
/* 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 {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.inner-nav {
|
||||
|
|
@ -54,27 +54,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 +74,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 +95,7 @@
|
|||
text-align: center;
|
||||
|
||||
.svg-inline--fa {
|
||||
color: $fallback--link;
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
|
|
@ -112,7 +112,8 @@
|
|||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.emoji-input {
|
||||
.input.emoji-input {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
|
@ -127,8 +128,7 @@
|
|||
line-height: 24px;
|
||||
|
||||
&:hover i {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -145,6 +145,12 @@
|
|||
input,
|
||||
textarea {
|
||||
flex: 1 0 auto;
|
||||
color: inherit;
|
||||
// stylint-disable-next-line declaration-no-important
|
||||
background: none !important;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.with-picker input {
|
||||
|
|
@ -183,7 +189,6 @@
|
|||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 0.2em 0.4em;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 40%);
|
||||
height: 32px;
|
||||
|
||||
.image {
|
||||
|
|
@ -216,17 +221,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>
|
||||
|
|
|
|||
|
|
@ -10,15 +10,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;
|
||||
|
|
@ -109,13 +100,8 @@ $emoji-picker-emoji-size: 32px;
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&.toggled {
|
||||
border-bottom: 4px solid;
|
||||
|
||||
svg {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
40
src/components/fun_text.style.js
Normal file
40
src/components/fun_text.style.js
Normal 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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
14
src/components/icon.style.js
Normal file
14
src/components/icon.style.js
Normal 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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<input
|
||||
ref="input"
|
||||
type="file"
|
||||
class="image-cropper-img-input"
|
||||
class="input image-cropper-img-input"
|
||||
:accept="mimes"
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<form>
|
||||
<input
|
||||
ref="input"
|
||||
class="input"
|
||||
type="file"
|
||||
@change="change"
|
||||
>
|
||||
|
|
|
|||
60
src/components/input.style.js
Normal file
60
src/components/input.style.js
Normal 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']
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -51,8 +51,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: $fallback--attachmentRadius;
|
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,8 +85,7 @@
|
|||
color: var(--text, $fallback--text);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: $fallback--attachmentRadius;
|
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
border-radius: var(--roundness);
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
|
|
|||
24
src/components/link.style.js
Normal file
24
src/components/link.style.js
Normal 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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -36,6 +36,7 @@
|
|||
id="list-edit-title"
|
||||
ref="title"
|
||||
v-model="titleDraft"
|
||||
class="input"
|
||||
>
|
||||
<button
|
||||
v-if="id"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
class="input"
|
||||
:placeholder="$t('lists.search')"
|
||||
@input="onInput"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
position: relative;
|
||||
white-space: normal;
|
||||
display: inline;
|
||||
color: var(--link);
|
||||
word-break: normal;
|
||||
|
||||
& .new,
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
:class="classnames"
|
||||
>
|
||||
<a
|
||||
class="short button-unstyled"
|
||||
class="short"
|
||||
:class="{ '-with-tooltip': shouldShowTooltip }"
|
||||
:href="url"
|
||||
@click.prevent="onClick"
|
||||
|
|
|
|||
62
src/components/menu_item.style.js
Normal file
62
src/components/menu_item.style.js
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
export default {
|
||||
name: 'MenuItem',
|
||||
selector: '.menu-item',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon',
|
||||
'Input',
|
||||
'Border',
|
||||
'ButtonUnstyled',
|
||||
'Badge'
|
||||
],
|
||||
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, 5)',
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Text',
|
||||
variant: 'normal',
|
||||
parent: {
|
||||
component: 'MenuItem',
|
||||
state: ['normal', 'hover'],
|
||||
variant: 'normal'
|
||||
},
|
||||
directives: {
|
||||
textColor: '--link',
|
||||
textAuto: 'no-preserve'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'MenuItem',
|
||||
state: ['hover']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--link',
|
||||
textAuto: 'no-preserve'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<input
|
||||
id="code"
|
||||
v-model="code"
|
||||
class="form-control"
|
||||
class="input form-control"
|
||||
>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<input
|
||||
id="code"
|
||||
v-model="code"
|
||||
class="form-control"
|
||||
class="input form-control"
|
||||
>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
42
src/components/mobile_drawer.style.js
Normal file
42
src/components/mobile_drawer.style.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
export default {
|
||||
name: 'MobileDrawer',
|
||||
selector: '.mobile-drawer',
|
||||
lazy: true,
|
||||
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
|
||||
}]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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" />
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
box-sizing: border-box;
|
||||
|
||||
a {
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -165,19 +165,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 +172,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%);
|
||||
|
|
@ -238,10 +225,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;
|
||||
|
|
|
|||
|
|
@ -25,8 +25,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;
|
||||
|
|
|
|||
9
src/components/modal/modals.style.js
Normal file
9
src/components/modal/modals.style.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default {
|
||||
name: 'Modals',
|
||||
selector: '.modal-view',
|
||||
lazy: true,
|
||||
validInnerComponents: [
|
||||
'Panel'
|
||||
],
|
||||
defaultRules: []
|
||||
}
|
||||
|
|
@ -12,13 +12,13 @@
|
|||
<div class="dropdown-menu">
|
||||
<span v-if="canGrantRole">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item"
|
||||
@click="toggleRight("admin")"
|
||||
>
|
||||
{{ $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"
|
||||
@click="toggleRight("moderator")"
|
||||
>
|
||||
{{ $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"
|
||||
@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"
|
||||
@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"
|
||||
@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"
|
||||
@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"
|
||||
@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"
|
||||
@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"
|
||||
@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"
|
||||
@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"
|
||||
@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') }}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<div
|
||||
v-show="showTimelines"
|
||||
class="timelines-background"
|
||||
: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"
|
||||
/>
|
||||
|
|
@ -76,6 +76,7 @@
|
|||
<div
|
||||
v-show="showLists"
|
||||
class="timelines-background"
|
||||
:class="{ expanded: showTimelines }"
|
||||
>
|
||||
<ListsMenuContent
|
||||
:show-pin="editMode || forceEditMode"
|
||||
|
|
@ -107,7 +108,7 @@
|
|||
.NavPanel {
|
||||
.panel {
|
||||
overflow: hidden;
|
||||
box-shadow: var(--panelShadow);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -116,33 +117,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 +130,11 @@
|
|||
|
||||
.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);
|
||||
.timelines-background.expanded + .NavigationEntry {
|
||||
border-top: 1px solid;
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.nav-panel-heading {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<OptionalRouterLink
|
||||
v-slot="{ isActive, href, navigate } = {}"
|
||||
ass="ass"
|
||||
:to="routeTo"
|
||||
>
|
||||
<li
|
||||
|
|
@ -35,7 +34,7 @@
|
|||
<slot />
|
||||
<div
|
||||
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
||||
class="badge badge-notification"
|
||||
class="badge -notification"
|
||||
>
|
||||
{{ getters[item.badgeGetter] }}
|
||||
</div>
|
||||
|
|
@ -71,17 +70,22 @@
|
|||
align-items: baseline;
|
||||
height: 3.5em;
|
||||
line-height: 3.5em;
|
||||
padding: 0 1em;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
color: $fallback--link;
|
||||
color: var(--link, $fallback--link);
|
||||
|
||||
&[aria-expanded] {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.timelines-chevron {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.main-link {
|
||||
flex: 1;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
|
|
@ -97,39 +101,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
&: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 0.8em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -35,17 +36,6 @@
|
|||
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 +50,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
// 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;
|
||||
|
||||
|
|
|
|||
17
src/components/notification/notification.style.js
Normal file
17
src/components/notification/notification.style.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export default {
|
||||
name: 'Notification',
|
||||
selector: '.Notification',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'RichContent',
|
||||
'Input',
|
||||
'Avatar',
|
||||
'Attachment'
|
||||
],
|
||||
defaultRules: []
|
||||
}
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,7 @@
|
|||
}
|
||||
|
||||
.loadmore-error {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.notification {
|
||||
|
|
@ -25,7 +24,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 +34,11 @@
|
|||
.notification {
|
||||
box-sizing: border-box;
|
||||
|
||||
/* TODO cleanup this */
|
||||
.Status {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:hover .animated.Avatar {
|
||||
canvas {
|
||||
display: none;
|
||||
|
|
@ -56,28 +60,35 @@
|
|||
padding: 0.6em;
|
||||
min-width: 0;
|
||||
|
||||
.RichContent {
|
||||
a {
|
||||
--link: var(--linkFaint);
|
||||
}
|
||||
|
||||
.greentext {
|
||||
--funtextGreentext: var(--funtextGreentextFaint);
|
||||
}
|
||||
|
||||
.cyantext {
|
||||
--funtextCyantext: var(--funtextCyantextFaint);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
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 +108,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* TODO cleanup this */
|
||||
.Status {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
time {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
/>
|
||||
<input
|
||||
:id="name"
|
||||
class="input-number"
|
||||
class="input input-number"
|
||||
type="number"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
|
|
|
|||
39
src/components/panel.style.js
Normal file
39
src/components/panel.style.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
export default {
|
||||
name: 'Panel',
|
||||
selector: '.panel',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Input',
|
||||
'PanelHeader',
|
||||
'MenuItem',
|
||||
'Post',
|
||||
'Notification',
|
||||
'Alert',
|
||||
'UserCard',
|
||||
'Chat',
|
||||
'Attachment',
|
||||
'Tab'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
roundness: 3,
|
||||
blur: '5px',
|
||||
shadow: [{
|
||||
x: 1,
|
||||
y: 1,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.6
|
||||
}]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
23
src/components/panel_header.style.js
Normal file
23
src/components/panel_header.style.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
export default {
|
||||
name: 'PanelHeader',
|
||||
selector: '.panel-heading',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Badge',
|
||||
'Alert',
|
||||
'Avatar'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
component: 'PanelHeader',
|
||||
directives: {
|
||||
background: '--fg',
|
||||
shadow: []
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -39,10 +39,11 @@
|
|||
:aria-checked="choices[index]"
|
||||
@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 +52,7 @@
|
|||
type="radio"
|
||||
:disabled="loading"
|
||||
:value="index"
|
||||
class="input -radio"
|
||||
>
|
||||
<label class="option-vote">
|
||||
<RichContent
|
||||
|
|
@ -138,12 +140,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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
12
src/components/poll/poll_graph.style.js
Normal file
12
src/components/poll/poll_graph.style.js
Normal 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
36
src/components/popover.style.js
Normal 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
|
||||
}]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -53,8 +53,7 @@
|
|||
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 {
|
||||
|
|
@ -66,29 +65,19 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
||||
box-shadow: var(--panelShadow);
|
||||
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;
|
||||
|
|
@ -121,13 +110,10 @@
|
|||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
--btnText: var(--popoverText, $fallback--text);
|
||||
|
||||
&-icon {
|
||||
svg {
|
||||
width: 22px;
|
||||
margin-right: 0.75rem;
|
||||
color: var(--menuPopoverIcon, $fallback--icon);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,25 +124,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
|
|
@ -167,10 +134,7 @@
|
|||
line-height: 22px;
|
||||
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);
|
||||
box-shadow: var(--shadow);
|
||||
margin-right: 0.75em;
|
||||
|
||||
&.menu-checkbox-checked::after {
|
||||
|
|
@ -188,30 +152,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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -503,31 +503,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 +555,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 +566,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;
|
||||
|
|
|
|||
|
|
@ -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')"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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')"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,8 @@
|
|||
}
|
||||
|
||||
.reported-status {
|
||||
border: 1px solid $fallback--faint;
|
||||
border-color: var(--faint, $fallback--faint);
|
||||
border-radius: $fallback--inputRadius;
|
||||
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--roundness);
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em 0;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<Select
|
||||
:id="report-state"
|
||||
v-model="state"
|
||||
class="form-control"
|
||||
class="input form-control"
|
||||
>
|
||||
<option
|
||||
v-for="state in ['open', 'closed', 'resolved']"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@import "../../variables";
|
||||
|
||||
.RichContent {
|
||||
font-family: var(--font);
|
||||
|
||||
blockquote {
|
||||
margin: 0.2em 0 0.2em 0.2em;
|
||||
font-style: italic;
|
||||
border-left: 0.2em solid var(--faint, $fallback--faint);
|
||||
border-left: 0.2em solid var(--textFaint);
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
kbd,
|
||||
var,
|
||||
pre {
|
||||
font-family: var(--postCodeFont, monospace);
|
||||
font-family: var(--monoFont);
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -65,4 +65,12 @@
|
|||
vertical-align: middle;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.greentext {
|
||||
color: var(--funtextGreentext);
|
||||
}
|
||||
|
||||
.cyantext {
|
||||
color: var(--funtextCyantext);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
18
src/components/rich_content/rich_content.style.js
Normal file
18
src/components/rich_content/rich_content.style.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
export default {
|
||||
name: 'RichContent',
|
||||
selector: '.RichContent',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'FunText',
|
||||
'Link'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
'--font': 'generic | inherit',
|
||||
'--monoFont': 'generic | monospace',
|
||||
textNoCssColor: 'yes'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
22
src/components/root.style.js
Normal file
22
src/components/root.style.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
export default {
|
||||
name: 'Root',
|
||||
selector: ':root',
|
||||
validInnerComponents: [
|
||||
'Underlay',
|
||||
'Modals',
|
||||
'Popover',
|
||||
'TopBar',
|
||||
'Scrollbar',
|
||||
'ScrollbarElement',
|
||||
'MobileDrawer',
|
||||
'Button' // mobile post button
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
'--font': 'generic | sans-serif',
|
||||
'--monoFont': 'generic | monospace'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -44,10 +44,10 @@ const ScopeSelector = {
|
|||
},
|
||||
css () {
|
||||
return {
|
||||
public: { selected: this.currentScope === 'public' },
|
||||
unlisted: { selected: this.currentScope === 'unlisted' },
|
||||
private: { selected: this.currentScope === 'private' },
|
||||
direct: { selected: this.currentScope === 'direct' }
|
||||
public: { toggled: this.currentScope === 'public' },
|
||||
unlisted: { toggled: this.currentScope === 'unlisted' },
|
||||
private: { toggled: this.currentScope === 'private' },
|
||||
direct: { toggled: this.currentScope === 'direct' }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -73,11 +73,6 @@
|
|||
min-width: 1.3em;
|
||||
min-height: 1.3em;
|
||||
text-align: center;
|
||||
|
||||
&.selected svg {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
11
src/components/scrollbar.style.js
Normal file
11
src/components/scrollbar.style.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export default {
|
||||
name: 'Scrollbar',
|
||||
selector: '::-webkit-scrollbar',
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
101
src/components/scrollbar_element.style.js
Normal file
101
src/components/scrollbar_element.style.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
const border = (top, shadow) => ({
|
||||
x: 0,
|
||||
y: top ? 1 : -1,
|
||||
blur: 0,
|
||||
spread: 0,
|
||||
color: shadow ? '#000000' : '#FFFFFF',
|
||||
alpha: 0.2,
|
||||
inset: true
|
||||
})
|
||||
|
||||
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
|
||||
const inputInsetFakeBorders = [border(true, true), border(false, false)]
|
||||
const buttonOuterShadow = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 2,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 1
|
||||
}
|
||||
|
||||
const hoverGlow = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '--text',
|
||||
alpha: 1
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'ScrollbarElement',
|
||||
selector: '::-webkit-scrollbar-button',
|
||||
states: {
|
||||
pressed: ':active',
|
||||
hover: ':hover:not(:disabled)',
|
||||
disabled: ':disabled'
|
||||
},
|
||||
validInnerComponents: [
|
||||
'Text'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--fg',
|
||||
shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
|
||||
roundness: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover'],
|
||||
directives: {
|
||||
shadow: [hoverGlow, ...buttonInsetFakeBorders]
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['pressed'],
|
||||
directives: {
|
||||
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover', 'pressed'],
|
||||
directives: {
|
||||
shadow: [hoverGlow, ...inputInsetFakeBorders]
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['toggled'],
|
||||
directives: {
|
||||
background: '--accent,-24.2',
|
||||
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['toggled', 'hover'],
|
||||
directives: {
|
||||
background: '--accent,-24.2',
|
||||
shadow: [hoverGlow, ...inputInsetFakeBorders]
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['disabled'],
|
||||
directives: {
|
||||
background: '$blend(--inheritedBackground, 0.25, --parent)',
|
||||
shadow: [...buttonInsetFakeBorders]
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Text',
|
||||
parent: {
|
||||
component: 'Button',
|
||||
state: ['disabled']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<input
|
||||
ref="searchInput"
|
||||
v-model="searchTerm"
|
||||
class="search-input"
|
||||
class="input search-input"
|
||||
:placeholder="$t('nav.search')"
|
||||
@keyup.enter="newQuery(searchTerm)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
id="search-bar-input"
|
||||
ref="searchInput"
|
||||
v-model="searchTerm"
|
||||
class="search-bar-input"
|
||||
class="input search-bar-input"
|
||||
:placeholder="$t('nav.search')"
|
||||
type="text"
|
||||
@keyup.enter="find(searchTerm)"
|
||||
|
|
|
|||
|
|
@ -32,12 +32,10 @@ label.Select {
|
|||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, --text, $fallback--text);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
padding: 0 2em 0 0.2em;
|
||||
font-family: sans-serif;
|
||||
font-family: var(--inputFont, sans-serif);
|
||||
font-family: var(--font);
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
|
@ -53,7 +51,7 @@ label.Select {
|
|||
height: 100%;
|
||||
width: 0.875em;
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, $fallback--text);
|
||||
font-family: var(--font);
|
||||
line-height: 2;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,10 @@
|
|||
</div>
|
||||
|
||||
<div class="setting-list relative">
|
||||
<PanelLoading class="overlay" v-if="working"/>
|
||||
<PanelLoading
|
||||
v-if="working"
|
||||
class="overlay"
|
||||
/>
|
||||
<h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
|
||||
<ul class="cards-list">
|
||||
<li
|
||||
|
|
@ -107,7 +110,7 @@
|
|||
<button
|
||||
v-for="ref in frontend.refs"
|
||||
:key="ref"
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item"
|
||||
@click.prevent="update(frontend, ref)"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -164,7 +167,7 @@
|
|||
<button
|
||||
v-for="ref in frontend.installedRefs || frontend.refs"
|
||||
:key="ref"
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item"
|
||||
@click.prevent="setDefault(frontend, ref)"
|
||||
@click="close"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@
|
|||
</li>
|
||||
<!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
|
||||
<li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
|
||||
<AttachmentSetting compact path=":pleroma.:instance.:favicon" />
|
||||
<AttachmentSetting
|
||||
compact
|
||||
path=":pleroma.:instance.:favicon"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<StringSetting path=":pleroma.:instance.:email" />
|
||||
|
|
@ -20,7 +23,10 @@
|
|||
<StringSetting path=":pleroma.:instance.:short_description" />
|
||||
</li>
|
||||
<li>
|
||||
<AttachmentSetting compact path=":pleroma.:instance.:instance_thumbnail" />
|
||||
<AttachmentSetting
|
||||
compact
|
||||
path=":pleroma.:instance.:instance_thumbnail"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<AttachmentSetting path=":pleroma.:instance.:background_image" />
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<label for="path">{{ $t('settings.url') }}</label>
|
||||
<input
|
||||
:id="path"
|
||||
class="string-input"
|
||||
class="input string-input"
|
||||
:disabled="shouldBeDisabled"
|
||||
:value="realDraftMode ? draft : state"
|
||||
@change="update"
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</label>
|
||||
<input
|
||||
:id="path"
|
||||
class="number-input"
|
||||
class="input number-input"
|
||||
type="number"
|
||||
:step="step || 1"
|
||||
:disabled="shouldBeDisabled"
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</label>
|
||||
<input
|
||||
:id="path"
|
||||
class="number-input"
|
||||
class="input number-input"
|
||||
type="number"
|
||||
step="1"
|
||||
:disabled="disabled"
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</label>
|
||||
<input
|
||||
:id="path"
|
||||
class="string-input"
|
||||
class="input string-input"
|
||||
:disabled="shouldBeDisabled"
|
||||
:value="realDraftMode ? draft : state"
|
||||
@change="update"
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
<template #content="{close}">
|
||||
<div class="dropdown-menu">
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
@click.prevent="backup"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
/><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
@click.prevent="backupWithTheme"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
/><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
@click.prevent="restore"
|
||||
@click="close"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
<textarea
|
||||
id="muteWords"
|
||||
v-model="muteWordsString"
|
||||
class="resize-height"
|
||||
class="input resize-height"
|
||||
/>
|
||||
<div>{{ $t('settings.filtering_explanation') }}</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,10 @@
|
|||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="unseenAtTop" expert="1">
|
||||
<BooleanSetting
|
||||
path="unseenAtTop"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.notification_setting_unseen_at_top') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
|
|
@ -38,7 +41,9 @@
|
|||
</li>
|
||||
<li>
|
||||
<h3> {{ $t('settings.notification_visibility') }}</h3>
|
||||
<p v-if="expertLevel > 0">{{ $t('settings.notification_setting_filters_chrome_push') }}</p>
|
||||
<p v-if="expertLevel > 0">
|
||||
{{ $t('settings.notification_setting_filters_chrome_push') }}
|
||||
</p>
|
||||
<ul class="setting-list two-column">
|
||||
<li>
|
||||
<h4> {{ $t('settings.notification_visibility_mentions') }}</h4>
|
||||
|
|
|
|||
|
|
@ -43,16 +43,14 @@
|
|||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: $fallback--avatarRadius;
|
||||
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
right: 0.2em;
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
border-radius: var(--roundness);
|
||||
background-color: rgb(0 0 0 / 60%);
|
||||
opacity: 0.7;
|
||||
width: 1.5em;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<input
|
||||
id="username"
|
||||
v-model="newName"
|
||||
class="name-changer"
|
||||
class="input name-changer"
|
||||
v-bind="propsToNative(inputProps)"
|
||||
>
|
||||
</template>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<template #default="inputProps">
|
||||
<textarea
|
||||
v-model="newBio"
|
||||
class="bio resize-height"
|
||||
class="input bio resize-height"
|
||||
v-bind="propsToNative(inputProps)"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
id="birthday"
|
||||
v-model="newBirthday"
|
||||
type="date"
|
||||
class="birthday-input"
|
||||
class="input birthday-input"
|
||||
>
|
||||
<Checkbox v-model="showBirthday">
|
||||
{{ $t('settings.birthday.show_birthday') }}
|
||||
|
|
@ -71,6 +71,7 @@
|
|||
v-model="newFields[i].name"
|
||||
:placeholder="$t('settings.profile_fields.name')"
|
||||
v-bind="propsToNative(inputProps)"
|
||||
class="input"
|
||||
>
|
||||
</template>
|
||||
</EmojiInput>
|
||||
|
|
@ -85,6 +86,7 @@
|
|||
v-model="newFields[i].value"
|
||||
:placeholder="$t('settings.profile_fields.value')"
|
||||
v-bind="propsToNative(inputProps)"
|
||||
class="input"
|
||||
>
|
||||
</template>
|
||||
</EmojiInput>
|
||||
|
|
@ -205,6 +207,7 @@
|
|||
<div>
|
||||
<input
|
||||
type="file"
|
||||
class="input"
|
||||
@change="uploadFile('banner', $event)"
|
||||
>
|
||||
</div>
|
||||
|
|
@ -247,6 +250,7 @@
|
|||
<div>
|
||||
<input
|
||||
type="file"
|
||||
class="input"
|
||||
@change="uploadFile('background', $event)"
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -99,12 +99,14 @@
|
|||
<input
|
||||
v-model="otpConfirmToken"
|
||||
type="text"
|
||||
class="input"
|
||||
>
|
||||
|
||||
<p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
|
||||
<input
|
||||
v-model="currentPassword"
|
||||
type="password"
|
||||
class="input"
|
||||
>
|
||||
<div class="confirm-otp-actions">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -25,12 +25,11 @@
|
|||
|
||||
.mfa-backup-codes {
|
||||
.warning {
|
||||
color: $fallback--cOrange;
|
||||
color: var(--cOrange, $fallback--cOrange);
|
||||
color: var(--cOrange);
|
||||
}
|
||||
|
||||
.backup-codes {
|
||||
font-family: var(--postCodeFont, monospace);
|
||||
font-family: var(--monoFont);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
<input
|
||||
v-model="currentPassword"
|
||||
type="password"
|
||||
class="input"
|
||||
>
|
||||
</confirm>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
v-model="newEmail"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
v-model="changeEmailPassword"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -40,6 +42,7 @@
|
|||
<input
|
||||
v-model="changePasswordInputs[0]"
|
||||
type="password"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -47,6 +50,7 @@
|
|||
<input
|
||||
v-model="changePasswordInputs[1]"
|
||||
type="password"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -54,6 +58,7 @@
|
|||
<input
|
||||
v-model="changePasswordInputs[2]"
|
||||
type="password"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -155,6 +160,7 @@
|
|||
</i18n-t>
|
||||
<input
|
||||
v-model="addAliasTarget"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -187,6 +193,7 @@
|
|||
</i18n-t>
|
||||
<input
|
||||
v-model="moveAccountTarget"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -195,6 +202,7 @@
|
|||
v-model="moveAccountPassword"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -222,6 +230,7 @@
|
|||
<input
|
||||
v-model="deleteAccountConfirmPasswordInput"
|
||||
type="password"
|
||||
class="input"
|
||||
>
|
||||
<button
|
||||
class="btn button-default"
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue