No OneTemporary
Actions

Authored By

Unknown

Size

44 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index d0a4062a6f..0a6fa90bcd 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,1112 +1,1120 @@
	@use "panel";

	@import '@fortawesome/fontawesome-svg-core/styles.css';
	@import '@kazvmoe-infra/pinch-zoom-element/dist/pinch-zoom.css';

	// stylelint-disable rscss/class-format
	/* stylelint-disable no-descending-specificity */

	:root {
	--status-margin: 0.75em;
	--post-line-height: 1.4;
	// Z-Index stuff
	--ZI_media_modal: 9000;
	--ZI_modals_popovers: 8500;
	--ZI_modals: 8000;
	--ZI_navbar_popovers: 7500;
	--ZI_navbar: 7000;
	--ZI_popovers: 6000;

	// Fallback for when stuff is loading
	--background: var(--bg);
	}

	html {
	font-size: var(--textSize, 1rem);

	--navbar-height: var(--navbarSize, 3.5rem);
	--emoji-size: var(--emojiSize, 32px);
	--panel-header-height: var(--panelHeaderSize, 3.2rem);
	// overflow-x: clip causes my browser's tab to crash with SIGILL lul
	}

	body {
	font-family: sans-serif;
	font-family: var(--font);
	margin: 0;
	padding: 0;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior-y: none;
	overflow: clip scroll;

	&.hidden {
	display: none;
	}
	}

	// ## Custom scrollbars
	// Only show custom scrollbars on devices which
	// have a cursor/pointer to operate them
	@media (any-pointer: fine) {
	* {
	scrollbar-color: var(--icon) transparent;

	&::-webkit-scrollbar {
	background: transparent;
	}

	&::-webkit-scrollbar-corner {
	background: transparent;
	}

	&::-webkit-resizer {
	/* stylelint-disable-next-line declaration-no-important */
	background-color: transparent !important;
	background-image:
	linear-gradient(
	135deg,
	transparent calc(50% - 1px),
	var(--textFaint) 50%,
	transparent calc(50% + 1px),
	transparent calc(75% - 1px),
	var(--textFaint) 75%,
	transparent calc(75% + 1px),
	);
	}

	&::-webkit-scrollbar-button,
	&::-webkit-scrollbar-thumb {
	box-shadow: var(--shadow);
	border-radius: var(--roundness);
	}

	// horizontal/vertical/increment/decrement are webkit-specific stuff
	// that indicates whether we're affecting vertical scrollbar, increase button etc
	// stylelint-disable selector-pseudo-class-no-unknown
	&::-webkit-scrollbar-button {
	--___bgPadding: 2px;

	color: var(--text);
	background-repeat: no-repeat, no-repeat;

	&:horizontal {
	background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));

	&:increment {
	background-image:
	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(--text) calc(50% + 1px)),
	linear-gradient(-45deg, var(--text) 50%, transparent 51%);
	background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
	}
	}

	&:vertical {
	background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;

	&:increment {
	background-image:
	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(--text) 50%, transparent 51%),
	linear-gradient(45deg, var(--text) 50%, transparent 51%);
	background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
	}
	}
	}
	// stylelint-enable selector-pseudo-class-no-unknown
	}
	// Body should have background to scrollbar otherwise it will use white (body color?)
	html {
	scrollbar-color: var(--icon) var(--wallpaper);
	background: var(--wallpaper);
	}
	}

	a {
	text-decoration: none;
	color: var(--link);

	&:focus,
	&:hover {
	text-decoration: underline;
	}

	&:not(.button-unstyled):focus-visible {
	border-radius: var(--roundness);
	outline: 2px solid var(--link);
	}
	}

	+
	+.button-unstyled {
	+ &:focus-visible {
	+ border-radius: var(--roundness);
	+ outline: 2px solid var(--text);
	+ }
	+}
	+
	.underline-links a {
	text-decoration: underline;
	}

	h4 {
	margin: 0;
	}

	code {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--roundness);
	padding: 0 0.2em;

	& pre,
	pre & {
	display: block;
	overflow-x: auto;
	padding: 0.2em;
	}

	&.pre {
	white-space: pre;
	display: block;
	}
	}

	.iconLetter {
	display: inline-block;
	text-align: center;
	font-weight: 1000;
	}

	i[class*="icon-"],
	.svg-inline--fa,
	.iconLetter {
	color: var(--icon);
	}

	header {
	z-index: var(--ZI_navbar);
	box-shadow: var(--shadow);
	box-sizing: border-box;
	height: var(--navbar-height);
	font-size: calc(var(--navbar-height) / 3.5);
	position: fixed;
	}

	#sidebar {
	grid-area: sidebar;
	}

	#modal {
	position: absolute;
	z-index: var(--ZI_modals);
	}

	.column.-scrollable {
	top: var(--navbar-height);
	position: sticky;
	}

	#main-scroller {
	grid-area: content;
	position: relative;
	}

	#notifs-column {
	grid-area: notifs;
	}

	.app-bg-wrapper {
	position: fixed;
	height: 100%;
	top: var(--navbar-height);
	z-index: -1000;
	left: 0;
	right: -20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--wallpaper);
	background-image: var(--body-background-image);
	background-position: 50%;
	transition: background-image 1s;
	}

	.underlay {
	grid-column: 1 / span 3;
	grid-row: 1 / 1;
	pointer-events: none;
	background-color: var(--underlay);
	z-index: -1000;
	}

	.app-layout {
	--miniColumn: 25rem;
	--maxiColumn: 45rem;
	--columnGap: 1rem;
	--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
	--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
	--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));

	position: relative;
	display: grid;
	grid-template-columns:
	var(--effectiveSidebarColumnWidth)
	var(--effectiveContentColumnWidth);
	grid-template-areas: "sidebar content";
	grid-template-rows: 1fr;
	box-sizing: border-box;
	margin: 0 auto;
	place-content: flex-start center;
	flex-wrap: wrap;
	min-height: 100vh;
	overflow-x: clip;

	.column {
	--___columnMargin: var(--columnGap);

	display: grid;
	grid-template-columns: 100%;
	box-sizing: border-box;
	grid-row: 1 / 1;
	margin: 0 calc(var(--___columnMargin) / 2);
	padding: calc(var(--___columnMargin)) 0;
	row-gap: var(--___columnMargin);
	align-content: start;

	&:not(.-scrollable) {
	margin-top: var(--navbar-height);
	}

	&:hover {
	z-index: 2;
	}

	&.-full-height {
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	}

	&.-scrollable {
	--___paddingIncrease: calc(var(--columnGap) / 2);

	position: sticky;
	top: var(--navbar-height);
	max-height: calc(100vh - var(--navbar-height));
	overflow: hidden auto;
	margin-left: calc(var(--___paddingIncrease) * -1);
	padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);

	// On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
	// might implement old style of hiding scrollbars later if there's demand
	@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
	&:not(.-show-scrollbar) {
	scrollbar-width: none;
	margin-right: calc(var(--___paddingIncrease) * -1);
	padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);

	&::-webkit-scrollbar {
	display: block;
	width: 0;
	}
	}
	}

	.panel-heading.-sticky {
	top: calc(var(--columnGap) / -1);
	}
	}
	}

	&.-has-new-post-button {
	.column {
	padding-bottom: 10rem;
	}
	}

	&.-no-sticky-headers {
	.column {
	.panel-heading.-sticky {
	position: relative;
	top: 0;
	}
	}
	}

	.column-inner {
	display: grid;
	grid-template-columns: 100%;
	box-sizing: border-box;
	row-gap: 1em;
	align-content: start;
	}

	&.-reverse:not(.-wide, .-mobile) {
	grid-template-columns:
	var(--effectiveContentColumnWidth)
	var(--effectiveSidebarColumnWidth);
	grid-template-areas: "content sidebar";
	}

	&.-wide {
	grid-template-columns:
	var(--effectiveSidebarColumnWidth)
	var(--effectiveContentColumnWidth)
	var(--effectiveNotifsColumnWidth);
	grid-template-areas: "sidebar content notifs";

	&.-reverse {
	grid-template-columns:
	var(--effectiveNotifsColumnWidth)
	var(--effectiveContentColumnWidth)
	var(--effectiveSidebarColumnWidth);
	grid-template-areas: "notifs content sidebar";
	}
	}

	&.-mobile {
	grid-template-columns: 100vw;
	grid-template-areas: "content";
	padding: 0;

	.column {
	padding-top: 0;
	margin: var(--navbar-height) 0 0 0;
	}

	.panel-heading,
	.panel-heading::after,
	.panel-heading::before,
	.panel,
	.panel::after {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	}

	#sidebar,
	#notifs-column {
	display: none;
	}
	}

	&.-normal {
	#notifs-column {
	display: none;
	}
	}
	}

	.text-center {
	text-align: center;
	}

	.button-default {
	user-select: none;
	color: var(--text);
	border: none;
	cursor: pointer;
	background-color: var(--background);
	box-shadow: var(--shadow);
	font-size: 1em;
	font-family: sans-serif;
	font-family: var(--font);

	&.-transparent {
	backdrop-filter: blur(0.125em) contrast(60%);
	}

	&::-moz-focus-inner {
	border: none;
	}

	&:disabled {
	cursor: not-allowed;
	}

	&:active {
	transform: translate(1px, 1px);
	}
	}

	.menu-item {
	line-height: var(--__line-height);
	font-family: inherit;
	font-weight: 400;
	font-size: 100%;
	cursor: pointer;

	a,
	button:not(.button-default) {
	color: var(--text);
	font-size: 100%;
	text-align: initial;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	display: inline;
	font-family: inherit;
	line-height: unset;
	}

	&.disabled {
	cursor: not-allowed;
	}
	}

	.menu-item,
	.list-item {
	display: block;
	box-sizing: border-box;
	border: none;
	outline: none;
	text-align: initial;
	color: inherit;
	clear: both;
	position: relative;
	white-space: nowrap;
	width: 100%;
	padding: var(--__vertical-gap) var(--__horizontal-gap);
	background: transparent;

	--__line-height: 1.5em;
	--__horizontal-gap: 0.75em;
	--__vertical-gap: 0.5em;
	}

	.button-unstyled {
	border: none;
	outline: none;
	display: inline;
	text-align: initial;
	font-size: 100%;
	font-family: inherit;
	box-shadow: var(--shadow);
	background-color: transparent;
	padding: 0;
	line-height: unset;
	cursor: pointer;
	box-sizing: content-box;
	color: inherit;

	&.-link {
	/* stylelint-disable-next-line declaration-no-important */
	color: var(--link) !important;
	}
	}

	label {
	&.-disabled {
	color: var(--textFaint);
	}
	}

	input,
	textarea {
	border: none;
	display: inline-block;
	outline: none;
	}

	.input {
	&.unstyled {
	border-radius: 0;
	/* stylelint-disable-next-line declaration-no-important */
	background: none !important;
	box-shadow: none;
	height: unset;
	}

	&::placeholder {
	color: var(--textFaint)
	}

	--_padding: 0.5em;

	border: none;
	background-color: var(--background);
	color: var(--text);
	box-shadow: var(--shadow);
	font-family: var(--font);
	font-size: 1em;
	margin: 0;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	line-height: 2;
	hyphens: none;
	padding: 0 var(--_padding);

	&:disabled,
	&[disabled="disabled"],
	&.disabled {
	cursor: not-allowed;
	color: var(--textFaint);

	/* stylelint-disable-next-line declaration-no-important */
	background-color: transparent !important;
	}

	&[type="range"] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type="radio"] {
	display: none;

	&:checked + label::before {
	box-shadow: var(--shadow);
	background-color: var(--background);
	color: var(--text);
	}

	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: 0.5;
	}

	background-color: var(--background);
	}

	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: "•";
	transition: box-shadow 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: 100%; // Radio buttons should always be circle
	background-color: var(--background);
	box-shadow: var(--shadow);
	margin-right: 0.5em;
	vertical-align: top;
	text-align: center;
	line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	}
	}

	&[type="checkbox"] {
	&:checked + label::before {
	color: var(--text);
	background-color: var(--background);
	box-shadow: var(--shadow);
	}

	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: 0.5;
	}
	}

	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: "✓";
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: var(--roundness);
	box-shadow: var(--shadow);
	margin-right: 0.5em;
	vertical-align: top;
	text-align: center;
	line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	}
	}

	&.resize-height {
	resize: vertical;
	}
	}

	.input,
	.button-default {
	--_roundness-left: var(--roundness);
	--_roundness-right: var(--roundness);

	border-top-left-radius: var(--_roundness-left);
	border-bottom-left-radius: var(--_roundness-left);
	border-top-right-radius: var(--_roundness-right);
	border-bottom-right-radius: var(--_roundness-right);
	}

	// Textareas should have stock line-height + vertical padding instead of huge line-height
	textarea.input {
	padding: var(--_padding);
	line-height: var(--post-line-height);
	}

	option {
	color: var(--text);
	background-color: var(--background);
	}

	.hide-number-spinner {
	appearance: textfield;

	&[type="number"]::-webkit-inner-spin-button,
	&[type="number"]::-webkit-outer-spin-button {
	opacity: 0;
	display: none;
	}
	}

	.cards-list {
	list-style: none;
	display: grid;
	grid-auto-flow: row dense;
	grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
	gap: 0.5em;

	li {
	border: 1px solid var(--border);
	border-radius: var(--roundness);
	padding: 0.5em;
	margin: 0.25em;
	}
	}

	.btn-group {
	position: relative;
	display: inline-flex;
	vertical-align: middle;

	> .button-default {
	--_roundness-left: 0;
	--_roundness-right: 0;

	position: relative;

	&:first-child {
	--_roundness-left: var(--roundness);
	}

	&:last-child {
	--_roundness-right: var(--roundness);
	}
	}
	}

	.fa {
	color: grey;
	}

	.mobile-shown {
	display: none;
	}

	.badge {
	box-sizing: border-box;
	display: inline-block;
	border-radius: 99px;
	max-width: 10em;
	min-width: 1.7em;
	height: 1.3em;
	padding: 0.15em;
	vertical-align: middle;
	font-weight: normal;
	font-style: normal;
	font-size: 0.9em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&.-dot,
	&.-counter {
	margin: 0;
	position: absolute;
	}

	&.-dot {
	min-height: 0.6em;
	max-height: 0.6em;
	min-width: 0.6em;
	max-width: 0.6em;
	left: calc(50% + 0.5em);
	top: calc(50% - 1em);
	line-height: 0;
	padding: 0;
	margin: 0;
	}

	&.-counter {
	border-radius: var(--roundness);
	font-size: 0.75em;
	line-height: 1;
	text-align: right;
	padding: 0.2em;
	min-width: 0;
	left: calc(50% - 0.5em);
	top: calc(50% - 0.4em);
	margin-left: 0.7em;
	margin-top: -1em;
	}
	}

	.alert {
	margin: 0 0.35em;
	padding: 0 0.25em;
	border-radius: var(--roundness);
	border: 1px solid var(--border);

	&.-dismissible {
	display: flex;
	padding-left: 0.5em;
	margin: 0;
	align-items: baseline;
	line-height: 2;

	span {
	display: block;
	flex: 1 0 auto;
	}
	}
	}

	.faint {
	--text: var(--textFaint);
	--link: var(--linkFaint);

	color: var(--text);
	}

	.notice-dismissible {
	display: flex;
	padding: 0.75em 1em;
	align-items: baseline;
	line-height: 1.5;

	p,
	span {
	display: block;
	flex: 1 1 auto;
	margin: 0;
	}

	.dismiss {
	color: inherit;
	}
	}

	.fa-scale-110 {
	&.svg-inline--fa,
	&.iconLetter {
	font-size: 1.1em;
	}

	&.svg-inline--fa {
	vertical-align: -0.15em;
	}
	}

	.fa-old-padding {
	&.iconLetter,
	&.svg-inline--fa,
	&-layer {
	padding: 0 0.3em;
	}
	}

	.veryfaint {
	opacity: 0.25;
	}

	.timeago {
	--link: var(--text);
	--linkFaint: var(--textFaint);
	}

	.login-hint {
	text-align: center;

	@media all and (width >= 801px) {
	display: none;
	}

	a {
	display: inline-block;
	padding: 1em 0;
	width: 100%;
	}
	}

	.btn.button-default {
	min-height: 2em;
	}

	.new-status-notification {
	position: relative;
	font-size: 1.1em;
	z-index: 1;
	flex: 1;
	}

	@media all and (width <= 800px) {
	.mobile-hidden {
	display: none;
	}
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(359deg);
	}
	}

	@keyframes shakeError {
	0% {
	transform: translateX(0);
	}

	15% {
	transform: translateX(0.375rem);
	}

	30% {
	transform: translateX(-0.375rem);
	}

	45% {
	transform: translateX(0.375rem);
	}

	60% {
	transform: translateX(-0.375rem);
	}

	75% {
	transform: translateX(0.375rem);
	}

	90% {
	transform: translateX(-0.375rem);
	}

	100% {
	transform: translateX(0);
	}
	}

	// Vue transitions
	.fade-enter-active,
	.fade-leave-active {
	transition: opacity 0.3s;
	}

	.fade-enter-from,
	.fade-leave-active {
	opacity: 0;
	}
	/* stylelint-enable no-descending-specificity */

	.visible-for-screenreader-only {
	display: block;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	visibility: visible;
	/* stylelint-disable property-no-deprecated */
	clip: rect(0 0 0 0);
	/* stylelint-enable property-no-deprecated */
	padding: 0;
	position: absolute;
	}

	*::selection {
	color: var(--selectionText);
	background-color: var(--selectionBackground);
	}

	#splash {
	pointer-events: none;

	#status {
	&.css-ok {
	&::before {
	display: inline-block;
	content: "CSS OK";
	}
	}

	.initial-text {
	display: none;
	}
	}

	#throbber {
	animation-duration: 3s;
	animation-name: bounce;
	animation-iteration-count: infinite;
	animation-direction: normal;
	transform-origin: bottom center;

	&.dead {
	animation-name: dead;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
	}

	@keyframes dead {
	0% {
	transform: rotateX(0) rotateY(0) rotateZ(0);
	}

	5% {
	transform: rotateX(0) rotateY(0) rotateZ(1deg);
	}

	10% {
	transform: rotateX(0) rotateY(0) rotateZ(-2deg);
	}

	15% {
	transform: rotateX(0) rotateY(0) rotateZ(3deg);
	}

	20% {
	transform: rotateX(0) rotateY(0) rotateZ(0);
	}

	25% {
	transform: rotateX(0) rotateY(0) rotateZ(0);
	}

	30% {
	transform: rotateX(10deg) rotateY(0) rotateZ(0);
	}

	35% {
	transform: rotateX(-10deg) rotateY(0) rotateZ(0);
	}

	40% {
	transform: rotateX(10deg) rotateY(0) rotateZ(0);
	}

	45% {
	transform: rotateX(-10deg) rotateY(0) rotateZ(0);
	}

	50% {
	transform: rotateX(10deg) rotateY(0) rotateZ(0);
	}

	100% {
	transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
	transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
	}
	}

	@keyframes bounce {
	0% {
	scale: 1 1;
	translate: 0 0;
	animation-timing-function: ease-out;
	}

	10% {
	scale: 1.2 0.8;
	translate: 0 0;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-out;
	}

	30% {
	scale: 0.9 1.1;
	translate: 0 -40%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	40% {
	scale: 1.1 0.9;
	translate: 0 -50%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	45% {
	scale: 0.9 1.1;
	translate: 0 -45%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	50% {
	scale: 1.05 0.95;
	translate: 0 -40%;
	animation-timing-function: ease-in;
	}

	55% {
	scale: 0.985 1.025;
	translate: 0 -35%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	60% {
	scale: 1.0125 0.9985;
	translate: 0 -30%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	80% {
	scale: 1.0063 0.9938;
	translate: 0 -10%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in-out;
	}

	90% {
	scale: 1.2 0.8;
	translate: 0 0;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-out;
	}

	100% {
	scale: 1 1;
	translate: 0 0;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-out;
	}
	}
	}
	}

	@property --shadow {
	syntax: "*";
	inherits: false;
	}
	diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
	index db6ce06b62..8082eee172 100644
	--- a/src/components/attachment/attachment.vue
	+++ b/src/components/attachment/attachment.vue
	@@ -1,263 +1,264 @@
	<template>
	<button
	v-if="usePlaceholder"
	class="Attachment -placeholder button-default"
	:class="classNames"
	@click="openModal"
	>
	<a
	v-if="attachment.type !== 'html'"
	class="placeholder"
	target="_blank"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	@click.prevent
	>
	<FAIcon :icon="placeholderIconClass" />
	<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
	</a>
	<div
	v-if="edit \|\| remove"
	class="attachment-buttons"
	role="toolbar"
	:aria-label="$t('status.attachment_actions')"
	>
	<button
	v-if="remove"
	class="button-default attachment-button -transparent"
	@click.prevent="onRemove"
	:title="$t('status.remove_attachment')"
	>
	<FAIcon icon="trash-alt" />
	</button>
	</div>
	<div
	v-if="size !== 'hide' && !hideDescription && edit"
	class="description-container"
	:class="{ '-static': !edit }"
	>
	<textarea
	v-model="localDescription"
	type="text"
	class="input description-field"
	:placeholder="$t('post_status.media_description')"
	:aria-label="$t('post_status.media_description')"
	/>
	</div>
	</button>
	<div
	v-else
	class="Attachment"
	:class="classNames"
	>
	<div
	v-show="!isEmpty"
	class="attachment-wrapper"
	role="presentation"
	>
	<a
	v-if="hidden"
	class="image-container"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	@click.prevent.stop="toggleHidden"
	>
	<img
	:key="nsfwImage"
	class="nsfw"
	:src="nsfwImage"
	:alt="$t('status.nsfw_placeholder')"
	:title="$t('status.nsfw_placeholder')"
	>
	<FAIcon
	v-if="attachment.type === 'video'"
	class="play-icon"
	icon="play-circle"
	/>
	</a>
	<div
	v-if="!hidden"
	class="attachment-buttons"
	role="toolbar"
	:aria-label="$t('status.attachment_actions')"
	>
	<button
	v-if="attachment.type === 'flash' && flashLoaded"
	class="button-default attachment-button -transparent"
	:title="$t('status.attachment_stop_flash')"
	@click.prevent="stopFlash"
	>
	<FAIcon icon="stop" />
	</button>
	<Popover
	v-if="attachment.description && size !== 'small' && !edit && attachment.type !== 'unknown'"
	trigger="click"
	popover-class="popover popover-default description-popover"
	normal-button
	class="attachment-button -transparent"
	:title="$t('status.attachment_description')"
	>
	<template #trigger>
	<FAIcon icon="align-right" />
	</template>
	<template #content>
	<details open>
	<summary>{{ $t('status.attachment_description') }}</summary>
	<span>{{ localDescription }}</span>
	</details>
	</template>
	</Popover>
	<button
	v-if="!useModal && attachment.type !== 'unknown'"
	class="button-default attachment-button -transparent"
	:title="$t('status.show_attachment_in_modal')"
	aria-haspopup="dialog"
	@click.prevent="openModalForce"
	>
	<FAIcon icon="search-plus" />
	</button>
	<button
	v-if="nsfw && hideNsfwLocal"
	class="button-default attachment-button -transparent"
	:title="$t('status.hide_attachment')"
	@click.prevent="toggleHidden"
	>
	<FAIcon icon="times" />
	</button>
	<button
	v-if="shiftUp"
	class="button-default attachment-button -transparent"
	:title="$t('status.move_up')"
	@click.prevent="onShiftUp"
	>
	<FAIcon icon="chevron-left" />
	</button>
	<button
	v-if="shiftDn"
	class="button-default attachment-button -transparent"
	:title="$t('status.move_down')"
	@click.prevent="onShiftDn"
	>
	<FAIcon icon="chevron-right" />
	</button>
	<button
	v-if="remove"
	class="button-default attachment-button -transparent"
	:title="$t('status.remove_attachment')"
	@click.prevent="onRemove"
	>
	<FAIcon icon="trash-alt" />
	</button>
	</div>

	<a
	v-if="attachment.type === 'image' && (!hidden \|\| preloadImage)"
	class="image-container"
	:class="{'-hidden': hidden && preloadImage }"
	+ :tabindex="hidden ? -1 : 0"
	:href="attachment.url"
	target="_blank"
	@click.stop.prevent="openModal"
	aria-haspopup="dialog"
	>
	<StillImage
	class="image"
	:referrerpolicy="referrerpolicy"
	:mimetype="attachment.mimetype"
	:src="attachment.large_thumb_url \|\| attachment.url"
	:image-load-handler="onImageLoad"
	:alt="attachment.description \|\| $t('status.attachment')"
	/>
	</a>

	<a
	v-if="attachment.type === 'unknown' && !hidden"
	class="placeholder-container"
	:href="attachment.url"
	target="_blank"
	>
	<FAIcon
	:size="compact ? '2x' : '5x'"
	:icon="placeholderIconClass"
	:title="localDescription \|\| $t('status.attachment')"
	/>
	<p v-if="!compact">
	{{ localDescription \|\| $t('status.attachment') }}
	</p>
	</a>

	<component
	:is="videoTag"
	v-if="attachment.type === 'video' && !hidden"
	class="video-container"
	:title="videoTag === 'button' ? $t('status.show_attachment_in_modal') : undefined"
	:href="attachment.url"
	@click.stop.prevent="openModal"
	:aria-haspopup="videoTag === 'button' ? 'dialog' : 'false'"
	>
	<VideoAttachment
	class="video"
	:attachment="attachment"
	:controls="!useModal"
	@play="$emit('play')"
	@pause="$emit('pause')"
	/>
	<FAIcon
	v-if="useModal"
	class="play-icon"
	icon="play-circle"
	/>
	</component>

	<span
	v-if="attachment.type === 'audio' && !hidden"
	class="audio-container"
	:href="attachment.url"
	@click.stop.prevent="openModal"
	>
	<audio
	v-if="attachment.type === 'audio'"
	:src="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	controls
	@play="$emit('play')"
	@pause="$emit('pause')"
	/>
	</span>

	<span
	v-if="attachment.type === 'flash' && !hidden"
	class="flash-container"
	:href="attachment.url"
	@click.stop.prevent="openModal"
	>
	<Flash
	ref="flash"
	class="flash"
	:src="attachment.large_thumb_url \|\| attachment.url"
	@player-opened="setFlashLoaded(true)"
	@player-closed="setFlashLoaded(false)"
	/>
	</span>
	</div>
	<div
	v-if="size !== 'hide' && !hideDescription && edit"
	class="description-container"
	:class="{ '-static': !edit }"
	>
	<textarea
	v-model="localDescription"
	type="text"
	class="input description-field"
	:placeholder="$t('post_status.media_description')"
	:aria-label="$t('post_status.media_description')"
	/>
	</div>
	</div>
	</template>

	<script src="./attachment.js"></script>

	<style src="./attachment.scss" lang="scss"></style>
	diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
	index d0dec61ba7..9755ac5905 100644
	--- a/src/components/desktop_nav/desktop_nav.scss
	+++ b/src/components/desktop_nav/desktop_nav.scss
	@@ -1,116 +1,109 @@
	.DesktopNav {
	width: 100%;
	z-index: var(--ZI_navbar);

	input {
	color: var(--inputTopbarText, var(--inputText));
	}

	.inner-nav {
	display: grid;
	grid-template-rows: var(--navbar-height);
	grid-template-columns: minmax(5em, 1fr) auto minmax(5em, 1fr);
	grid-template-areas: "sitename logo actions";
	box-sizing: border-box;
	padding: 0 1.2em;
	margin: auto;
	max-width: 980px;
	}

	&.-column-stretch .inner-nav {
	--miniColumn: 25rem;
	--maxiColumn: 45rem;
	--columnGap: 1em;

	max-width:
	calc(
	var(--sidebarColumnWidth, var(--miniColumn)) +
	var(--contentColumnWidth, var(--maxiColumn)) +
	var(--columnGap)
	);
	}

	&.-logoLeft .inner-nav {
	grid-template-columns: auto minmax(5em, 1fr) minmax(5em, 1fr);
	grid-template-areas: "logo sitename actions";
	}

	&.-column-stretch.-wide .inner-nav {
	max-width:
	calc(
	var(--sidebarColumnWidth, var(--miniColumn)) +
	var(--contentColumnWidth, var(--maxiColumn)) +
	var(--notifsColumnWidth, var(--miniColumn)) +
	var(--columnGap)
	);
	}

	- .button-unstyled {
	- &:focus-visible {
	- border-radius: var(--roundness);
	- outline: 2px solid var(--text);
	- }
	- }
	-
	.button-default {
	&,
	svg {
	color: var(--text);
	}
	}

	.logo {
	grid-area: logo;
	position: relative;
	transition: opacity;
	transition-timing-function: ease-out;
	transition-duration: 100ms;

	@media all and (width >= 800px) {
	/* stylelint-disable-next-line declaration-no-important */
	opacity: 1 !important;
	}

	.mask {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: var(--text);
	position: absolute;
	inset: 0;
	}

	img {
	display: inline-block;
	height: var(--navbar-height);
	}
	}

	.nav-icon {
	margin-left: 0.2em;
	width: 2em;
	height: 100%;
	text-align: center;
	}

	.sitename {
	grid-area: sitename;
	}

	.actions {
	grid-area: actions;
	justify-content: flex-end;
	text-align: right;
	z-index: 1;
	}

	.item {
	line-height: var(--navbar-height);
	height: var(--navbar-height);
	display: flex;
	}

	.spacer {
	min-width: 1em;
	}
	}
	diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
	index 59dfaa6a8f..120356bb3d 100644
	--- a/src/components/navigation/navigation_entry.vue
	+++ b/src/components/navigation/navigation_entry.vue
	@@ -1,141 +1,145 @@
	<template>
	<OptionalRouterLink
	v-slot="{ isActive, href, navigate } = {}"
	:to="routeTo"
	>
	<li
	class="NavigationEntry menu-item"
	:class="{ '-active': isActive }"
	role="menuitem"
	:aria-label="item.labelRaw ?? $t(item.label)"
	v-bind="$attrs"
	>
	<component
	:is="routeTo ? 'a' : 'button'"
	class="main-link"
	:href="href"
	@click="navigate"
	>
	<span>
	<FAIcon
	v-if="item.icon"
	fixed-width
	class="fa-scale-110 menu-icon"
	:icon="item.icon"
	/>
	</span>
	<img
	v-if="item.iconEmojiUrl"
	class="menu-icon iconEmoji iconEmoji-image"
	:src="item.iconEmojiUrl"
	:alt="item.iconEmoji"
	:title="item.iconEmoji"
	>
	<span
	v-else-if="item.iconEmoji"
	class="menu-icon iconEmoji"
	>
	<span>
	{{ item.iconEmoji }}
	</span>
	</span>
	<span
	v-else-if="item.iconLetter"
	class="icon iconLetter fa-scale-110 menu-icon"
	>{{ item.iconLetter }}</span>
	<span class="label">
	{{ item.labelRaw \|\| $t(item.label) }}
	</span>
	</component>
	<slot />
	<div
	v-if="item.badgeGetter && badges[item.badgeGetter]"
	class="badge"
	:class="[`-${item.badgeStyle}`]"
	>
	{{ badges[item.badgeGetter] }}
	</div>
	<button
	v-if="showPin && currentUser"
	type="button"
	class="button-unstyled extra-button"
	:title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
	:aria-pressed="!!isPinned"
	@click.stop.prevent="togglePin(item.name)"
	>
	<FAIcon
	v-if="showPin && currentUser"
	fixed-width
	class="fa-scale-110"
	:class="{ 'veryfaint': !isPinned(item.name) }"
	:transform="!isPinned(item.name) ? 'rotate-45' : ''"
	icon="thumbtack"
	/>
	</button>
	</li>
	</OptionalRouterLink>
	</template>

	<script src="./navigation_entry.js"></script>

	<style lang="scss">
	.NavigationEntry.menu-item {
	--__line-height: 2.5em;
	--__horizontal-gap: 0.5em;
	--__vertical-gap: 0.4em;

	padding: var(--__vertical-gap) var(--__horizontal-gap);
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-columns: var(--__line-height);
	grid-auto-flow: column;
	gap: var(--__horizontal-gap);
	align-items: baseline;

	&[aria-expanded] {
	padding-right: var(--__horizontal-gap);
	}

	.main-link {
	line-height: var(--__line-height);
	box-sizing: border-box;
	+
	+ &:focus-visible {
	+ outline: none;
	+ }
	}

	.menu-icon {
	line-height: var(--__line-height);
	padding: 0;
	width: var(--__line-height);
	margin-right: var(--__horizontal-gap);
	}

	.timelines-chevron,
	.extra-button {
	line-height: var(--__line-height);
	width: 100%;
	padding: 0;
	text-align: center;
	}

	.badge {
	justify-self: center;
	}

	.iconEmoji {
	display: inline-block;
	text-align: center;
	object-fit: contain;
	vertical-align: middle;
	height: var(--__line-height);
	width: var(--__line-height);

	> span {
	font-size: 1.5rem;
	}
	}

	img.iconEmoji {
	padding: 0.25rem;
	box-sizing: border-box;
	}
	}
	</style>
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index afaf15db12..b5f9c31a04 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,212 +1,208 @@
	<template>
	<Status
	v-if="notification.type === 'mention' \|\| notification.type === 'status'"
	ref="root"
	class="Notification panel-body"
	:compact="true"
	:status-id="notification.status?.id"
	@click="interacted"
	width-efficient
	/>
	<article
	v-else
	ref="root"
	class="NotificationParent panel-body"
	:class="{ '-expandable': expandable }"
	>
	<div
	v-if="needMute && !unmuted"
	:id="'notif-' +notification.id"
	:aria-expanded="statusExpanded"
	:aria-controls="'notif-' +notification.id"
	class="Notification container -muted"
	>
	<small>
	<UserLink
	:user="notification.from_profile"
	:at="false"
	/>
	</small>
	<button
	class="button-unstyled unmute"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</div>
	<div
	v-else
	class="Notification -non-mention activity-layout -width-efficient -compact"
	:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
	:style="[ userStyle ]"
	>
	<div class="activity-avatar">
	- <a
	- :href="$router.resolve(userProfileLink).href"
	- @click.prevent
	+ <UserPopover
	+ :user-id="notification.from_profile.id"
	+ overlay-centers
	+ link
	>
	- <UserPopover
	+ <UserAvatar
	+ class="post-avatar"
	+ :compact="true"
	:user-id="notification.from_profile.id"
	- :overlay-centers="true"
	- >
	- <UserAvatar
	- class="post-avatar"
	- :compact="true"
	- :user-id="notification.from_profile.id"
	- />
	- </UserPopover>
	- </a>
	+ />
	+ </UserPopover>
	</div>
	<ActivityHeader
	class="activity-header"
	:statusoid="status"
	:time="notification.created_at"
	:user-id="notification.from_profile.id"
	@toggle-expanded="toggleStatusExpanded"
	:expanded="statusExpanded"
	non-mention
	multiline
	/>
	<div class="activity-subheader">
	<span v-if="notification.type === 'like'">
	<FAIcon
	class="type-icon"
	icon="star"
	/>
	{{ ' ' }}
	{{ $t('notifications.favorited_you') }}
	</span>
	<span v-if="notification.type === 'repeat'">
	<FAIcon
	class="type-icon"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	{{ ' ' }}
	{{ $t('notifications.repeated_you') }}
	</span>
	<span v-if="notification.type === 'follow'">
	<FAIcon
	class="type-icon"
	icon="user-plus"
	/>
	{{ ' ' }}
	{{ $t('notifications.followed_you') }}
	</span>
	<span v-if="notification.type === 'follow_request'">
	<FAIcon
	class="type-icon"
	icon="user"
	/>
	{{ ' ' }}
	{{ $t('notifications.follow_request') }}
	</span>
	<span v-if="notification.type === 'move'">
	<FAIcon
	class="type-icon"
	icon="suitcase-rolling"
	/>
	{{ ' ' }}
	{{ $t('notifications.migrated_to') }}
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<i18n-t
	scope="global"
	keypath="notifications.reacted_with"
	>
	<img
	v-if="notification.emoji_url"
	class="emoji-reaction-emoji emoji-reaction-emoji-image"
	:src="notification.emoji_url"
	:alt="notification.emoji"
	:title="notification.emoji"
	:class="{ ['-wide']: allowNonSquareEmoji }"
	>
	<span
	v-else
	class="emoji-reaction-emoji"
	>{{ notification.emoji }}</span>
	</i18n-t>
	</span>
	<span v-if="notification.type === 'pleroma:report'">
	{{ $t('notifications.submitted_report') }}
	</span>
	<span v-if="notification.type === 'poll'">
	<FAIcon
	class="type-icon"
	icon="poll-h"
	/>
	{{ ' ' }}
	{{ $t('notifications.poll_ended') }}
	</span>
	</div>
	<div class="activity-content">
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text activity-content"
	>
	<UserLink
	class="follow-name"
	:user="notification.from_profile"
	/>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text activity-content"
	>
	<UserLink
	:user="notification.target"
	/>
	</div>
	<Report
	class="avatar-container"
	v-else-if="notification.type === 'pleroma:report'"
	:report-id="notification.report.id"
	/>
	<small>
	<StatusContent
	v-if="status"
	class="activity-container"
	:compact="!statusExpanded"
	:status="status"
	:collapse="!statusExpanded"
	@click="onContentClick"
	/>
	</small>
	</div>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	class="activity-actions"
	>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.accept_follow_request')"
	@click="() => approve(user.id)"
	>
	<FAIcon
	icon="check"
	class="fa-scale-110 fa-old-padding follow-request-accept"
	/>
	</button>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.reject_follow_request')"
	@click="() => deny(user.id)"
	>
	<FAIcon
	icon="times"
	class="fa-scale-110 fa-old-padding follow-request-reject"
	/>
	</button>
	</div>
	</div>
	</article>
	</template>

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	<style src="/src/components/status/activity-layout.scss" lang="scss"></style>

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 9:24 AM (19 h, 27 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1797039
Default Alt Text: (44 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions