No OneTemporary
Actions

Size

24 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
	index 1be3e7c5ad..5f5da98f49 100644
	--- a/src/components/mention_link/mention_link.scss
	+++ b/src/components/mention_link/mention_link.scss
	@@ -1,127 +1,132 @@
	.MentionLink {
	position: relative;
	white-space: normal;
	display: inline-block;
	color: var(--link);

	& .new,
	& .original {
	display: inline-block;
	border-radius: 2px;
	}

	.original {
	margin-right: 0.25em;
	}

	.full {
	position: absolute;
	display: inline-block;
	pointer-events: none;
	opacity: 0;
	top: 100%;
	left: 0;
	height: 100%;
	word-wrap: normal;
	white-space: nowrap;
	transition: opacity 0.2s ease;
	z-index: 1;
	margin-top: 0.25em;
	padding: 0.5em;
	+ user-select: all;
	+ }
	+
	+ .short {
	+ user-select: none;
	}

	& .short,
	& .full {
	white-space: nowrap;
	}

	.new {
	margin-right: 0.25em;

	&.-you {
	& .shortName,
	& .full {
	font-weight: 600;
	}
	}

	.at {
	color: var(--link);
	opacity: 0.8;
	display: inline-block;
	height: 50%;
	line-height: 1;
	padding: 0 0.1em;
	vertical-align: -25%;
	margin: 0;
	}

	&:not(.-oldStyle) {
	.short {
	padding-left: 0.25em;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1.5;
	font-size: inherit;

	.at {
	color: var(--faint);
	opacity: 0.8;
	padding-right: 0.25em;
	vertical-align: -20%;
	}
	}

	.you {
	padding-right: 0.25em;
	}

	.userName {
	display: inline-block;
	color: var(--link);
	line-height: inherit;
	margin-left: 0;
	padding-left: 0.125em;
	padding-right: 0.25em;
	padding-top: 0;
	padding-bottom: 0;
	border-top-right-radius: var(--btnRadius);
	border-bottom-right-radius: var(--btnRadius);
	}
	}

	&.-striped {
	& .userName,
	& .full {
	background-image:
	repeating-linear-gradient(
	135deg,
	var(--____highlight-tintColor),
	var(--____highlight-tintColor) 5px,
	var(--____highlight-tintColor2) 5px,
	var(--____highlight-tintColor2) 10px
	);
	}
	}

	&.-solid {
	& .userName,
	& .full {
	background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
	}
	}

	&.-side {
	& .userName,
	& .userNameFull {
	box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
	}
	}
	}

	&:hover .new .full {
	opacity: 1;
	pointer-events: initial;
	}
	}
	diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
	index 062ad4bc0b..3449f4bd63 100644
	--- a/src/components/mention_link/mention_link.vue
	+++ b/src/components/mention_link/mention_link.vue
	@@ -1,57 +1,57 @@
	<template>
	<span
	class="MentionLink"
	>
	<!-- eslint-disable vue/no-v-html -->
	<a
	v-if="!user"
	href="url"
	class="original"
	v-html="content"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-if="user"
	class="new"
	:style="style"
	:class="classnames"
	>
	<button
	class="short"
	:class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
	@click.prevent="onClick"
	>
	<!-- eslint-disable vue/no-v-html -->
	<FAIcon
	- size="s"
	+ size="sm"
	icon="at"
	class="at"
	/><span class="shortName"><span
	class="userName"
	v-html="userName"
	/></span>
	<span
	v-if="isYou"
	class="you"
	>{{ $t('status.you') }}</span>
	<!-- eslint-enable vue/no-v-html -->
	</button>
	<span
	v-if="userName !== userNameFull"
	class="full popover-default"
	:class="[highlightType]"
	>
	<!-- eslint-disable vue/no-v-html -->
	<span
	class="userNameFull"
	- v-html="userNameFull"
	+ v-text="'@' + userNameFull"
	/>
	<!-- eslint-enable vue/no-v-html -->
	</span>
	</span>
	</span>
	</template>

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

	<style lang="scss" src="./mention_link.scss"/>
	diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
	index 10b4c18618..310185ae82 100644
	--- a/src/components/status_body/status_body.scss
	+++ b/src/components/status_body/status_body.scss
	@@ -1,123 +1,127 @@
	@import '../../_variables.scss';

	.StatusBody {

	.emoji {
	--_still_image-label-scale: 0.5;
	}

	& .text,
	& .summary {
	font-family: var(--postFont, sans-serif);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	line-height: 1.4em;
	}

	.summary {
	display: block;
	font-style: italic;
	padding-bottom: 0.5em;
	}

	.text {
	&.-single-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 1.4em;
	}
	}

	.summary-wrapper {
	margin-bottom: 0.5em;
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: var(--border, $fallback--border);
	flex-grow: 0;

	&.-tall {
	position: relative;

	.summary {
	max-height: 2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
	}
	}

	.text-wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	&.-tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 1;

	.text-wrapper {
	min-height: 0;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}
	}
	}

	& .tall-status-hider,
	& .tall-subject-hider,
	& .status-unhider,
	& .cw-status-hider {
	display: inline-block;
	word-break: break-all;
	width: 100%;
	text-align: center;
	}

	.tall-status-hider {
	position: absolute;
	height: 70px;
	margin-top: 150px;
	line-height: 110px;
	z-index: 2;
	}

	.tall-subject-hider {
	// position: absolute;
	padding-bottom: 0.5em;
	}

	& .status-unhider,
	& .cw-status-hider {
	word-break: break-all;

	svg {
	color: inherit;
	}
	}

	.greentext {
	color: $fallback--cGreen;
	color: var(--postGreentext, $fallback--cGreen);
	}

	+ .cyantext {
	+ color: var(--postCyantext, $fallback--cBlue);
	+ }
	+
	/* Not sure if this is necessary */
	video {
	max-width: 100%;
	max-height: 400px;
	vertical-align: middle;
	object-fit: contain;
	}

	}
	diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
	index 14aac9754e..c2983be705 100644
	--- a/src/services/theme_data/pleromafe.js
	+++ b/src/services/theme_data/pleromafe.js
	@@ -1,758 +1,764 @@
	import { invertLightness, brightness } from 'chromatism'
	import { alphaBlend, mixrgb } from '../color_convert/color_convert.js'
	/* This is a definition of all layer combinations
	* each key is a topmost layer, each value represents layer underneath
	* this is essentially a simplified tree
	*/
	export const LAYERS = {
	undelay: null, // root
	topBar: null, // no transparency support
	badge: null, // no transparency support
	profileTint: null, // doesn't matter
	fg: null,
	bg: 'underlay',
	highlight: 'bg',
	panel: 'bg',
	popover: 'bg',
	selectedMenu: 'popover',
	btn: 'bg',
	btnPanel: 'panel',
	btnTopBar: 'topBar',
	input: 'bg',
	inputPanel: 'panel',
	inputTopBar: 'topBar',
	alert: 'bg',
	alertPanel: 'panel',
	poll: 'bg',
	chatBg: 'underlay',
	chatMessage: 'chatBg'
	}

	/* By default opacity slots have 1 as default opacity
	* this allows redefining it to something else
	*/
	export const DEFAULT_OPACITY = {
	profileTint: 0.5,
	alert: 0.5,
	input: 0.5,
	faint: 0.5,
	underlay: 0.15,
	alertPopup: 0.95
	}

	/** SUBJECT TO CHANGE IN THE FUTURE, this is all beta
	* Color and opacity slots definitions. Each key represents a slot.
	*
	* Short-hands:
	* String beginning with `--` - value after dashes treated as sole
	* dependency - i.e. `--value` equivalent to { depends: ['value']}
	* String beginning with `#` - value would be treated as solid color
	* defined in hexadecimal representation (i.e. #FFFFFF) and will be
	* used as default. `#FFFFFF` is equivalent to { default: '#FFFFFF'}
	*
	* Full definition:
	* @property {String[]} depends - color slot names this color depends ones.
	* cyclic dependencies are supported to some extent but not recommended.
	* @property {String} [opacity] - opacity slot used by this color slot.
	* opacity is inherited from parents. To break inheritance graph use null
	* @property {Number} [priority] - EXPERIMENTAL. used to pre-sort slots so
	* that slots with higher priority come earlier
	* @property {Function(mod, ...colors)} [color] - function that will be
	* used to determine the color. By default it just copies first color in
	* dependency list.
	* @argument {Number} mod - `1` (light-on-dark) or `-1` (dark-on-light)
	* depending on background color (for textColor)/given color.
	* @argument {...Object} deps - each argument after mod represents each
	* color from `depends` array. All colors take user customizations into
	* account and represented by { r, g, b } objects.
	* @returns {Object} resulting color, should be in { r, g, b } form
	*
	* @property {Boolean\|String} [textColor] - true to mark color slot as text
	* color. This enables automatic text color generation for the slot. Use
	* 'preserve' string if you don't want text color to fall back to
	* black/white. Use 'bw' to only ever use black or white. This also makes
	* following properties required:
	* @property {String} [layer] - which layer the text sit on top on - used
	* to account for transparency in text color calculation
	* layer is inherited from parents. To break inheritance graph use null
	* @property {String} [variant] - which color slot is background (same as
	* above, used to account for transparency)
	*/
	export const SLOT_INHERITANCE = {
	bg: {
	depends: [],
	opacity: 'bg',
	priority: 1
	},
	wallpaper: {
	depends: ['bg'],
	color: (mod, bg) => brightness(-2 * mod, bg).rgb
	},
	fg: {
	depends: [],
	priority: 1
	},
	text: {
	depends: [],
	layer: 'bg',
	opacity: null,
	priority: 1
	},
	underlay: {
	default: '#000000',
	opacity: 'underlay'
	},
	link: {
	depends: ['accent'],
	priority: 1
	},
	accent: {
	depends: ['link'],
	priority: 1
	},
	faint: {
	depends: ['text'],
	opacity: 'faint'
	},
	faintLink: {
	depends: ['link'],
	opacity: 'faint'
	},
	postFaintLink: {
	depends: ['postLink'],
	opacity: 'faint'
	},

	cBlue: '#0000ff',
	cRed: '#FF0000',
	cGreen: '#00FF00',
	cOrange: '#E3FF00',

	profileBg: {
	depends: ['bg'],
	color: (mod, bg) => ({
	r: Math.floor(bg.r * 0.53),
	g: Math.floor(bg.g * 0.56),
	b: Math.floor(bg.b * 0.59)
	})
	},
	profileTint: {
	depends: ['bg'],
	layer: 'profileTint',
	opacity: 'profileTint'
	},

	highlight: {
	depends: ['bg'],
	color: (mod, bg) => brightness(5 * mod, bg).rgb
	},
	highlightLightText: {
	depends: ['lightText'],
	layer: 'highlight',
	textColor: true
	},
	highlightPostLink: {
	depends: ['postLink'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	highlightFaintText: {
	depends: ['faint'],
	layer: 'highlight',
	textColor: true
	},
	highlightFaintLink: {
	depends: ['faintLink'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	highlightPostFaintLink: {
	depends: ['postFaintLink'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	highlightText: {
	depends: ['text'],
	layer: 'highlight',
	textColor: true
	},
	highlightLink: {
	depends: ['link'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	highlightIcon: {
	depends: ['highlight', 'highlightText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	popover: {
	depends: ['bg'],
	opacity: 'popover'
	},
	popoverLightText: {
	depends: ['lightText'],
	layer: 'popover',
	textColor: true
	},
	popoverPostLink: {
	depends: ['postLink'],
	layer: 'popover',
	textColor: 'preserve'
	},
	popoverFaintText: {
	depends: ['faint'],
	layer: 'popover',
	textColor: true
	},
	popoverFaintLink: {
	depends: ['faintLink'],
	layer: 'popover',
	textColor: 'preserve'
	},
	popoverPostFaintLink: {
	depends: ['postFaintLink'],
	layer: 'popover',
	textColor: 'preserve'
	},
	popoverText: {
	depends: ['text'],
	layer: 'popover',
	textColor: true
	},
	popoverLink: {
	depends: ['link'],
	layer: 'popover',
	textColor: 'preserve'
	},
	popoverIcon: {
	depends: ['popover', 'popoverText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	selectedPost: '--highlight',
	selectedPostFaintText: {
	depends: ['highlightFaintText'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: true
	},
	selectedPostLightText: {
	depends: ['highlightLightText'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: true
	},
	selectedPostPostLink: {
	depends: ['highlightPostLink'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: 'preserve'
	},
	selectedPostFaintLink: {
	depends: ['highlightFaintLink'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: 'preserve'
	},
	selectedPostText: {
	depends: ['highlightText'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: true
	},
	selectedPostLink: {
	depends: ['highlightLink'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: 'preserve'
	},
	selectedPostIcon: {
	depends: ['selectedPost', 'selectedPostText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	selectedMenu: {
	depends: ['bg'],
	color: (mod, bg) => brightness(5 * mod, bg).rgb
	},
	selectedMenuLightText: {
	depends: ['highlightLightText'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: true
	},
	selectedMenuFaintText: {
	depends: ['highlightFaintText'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: true
	},
	selectedMenuFaintLink: {
	depends: ['highlightFaintLink'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: 'preserve'
	},
	selectedMenuText: {
	depends: ['highlightText'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: true
	},
	selectedMenuLink: {
	depends: ['highlightLink'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: 'preserve'
	},
	selectedMenuIcon: {
	depends: ['selectedMenu', 'selectedMenuText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	selectedMenuPopover: {
	depends: ['popover'],
	color: (mod, bg) => brightness(5 * mod, bg).rgb
	},
	selectedMenuPopoverLightText: {
	depends: ['selectedMenuLightText'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: true
	},
	selectedMenuPopoverFaintText: {
	depends: ['selectedMenuFaintText'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: true
	},
	selectedMenuPopoverFaintLink: {
	depends: ['selectedMenuFaintLink'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: 'preserve'
	},
	selectedMenuPopoverText: {
	depends: ['selectedMenuText'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: true
	},
	selectedMenuPopoverLink: {
	depends: ['selectedMenuLink'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: 'preserve'
	},
	selectedMenuPopoverIcon: {
	depends: ['selectedMenuPopover', 'selectedMenuText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	lightText: {
	depends: ['text'],
	layer: 'bg',
	textColor: 'preserve',
	color: (mod, text) => brightness(20 * mod, text).rgb
	},

	postLink: {
	depends: ['link'],
	layer: 'bg',
	textColor: 'preserve'
	},

	postGreentext: {
	depends: ['cGreen'],
	layer: 'bg',
	textColor: 'preserve'
	},

	+ postCyantext: {
	+ depends: ['cBlue'],
	+ layer: 'bg',
	+ textColor: 'preserve'
	+ },
	+
	border: {
	depends: ['fg'],
	opacity: 'border',
	color: (mod, fg) => brightness(2 * mod, fg).rgb
	},

	poll: {
	depends: ['accent', 'bg'],
	copacity: 'poll',
	color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)
	},
	pollText: {
	depends: ['text'],
	layer: 'poll',
	textColor: true
	},

	icon: {
	depends: ['bg', 'text'],
	inheritsOpacity: false,
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	// Foreground
	fgText: {
	depends: ['text'],
	layer: 'fg',
	textColor: true
	},
	fgLink: {
	depends: ['link'],
	layer: 'fg',
	textColor: 'preserve'
	},

	// Panel header
	panel: {
	depends: ['fg'],
	opacity: 'panel'
	},
	panelText: {
	depends: ['text'],
	layer: 'panel',
	textColor: true
	},
	panelFaint: {
	depends: ['fgText'],
	layer: 'panel',
	opacity: 'faint',
	textColor: true
	},
	panelLink: {
	depends: ['fgLink'],
	layer: 'panel',
	textColor: 'preserve'
	},

	// Top bar
	topBar: '--fg',
	topBarText: {
	depends: ['fgText'],
	layer: 'topBar',
	textColor: true
	},
	topBarLink: {
	depends: ['fgLink'],
	layer: 'topBar',
	textColor: 'preserve'
	},

	// Tabs
	tab: {
	depends: ['btn']
	},
	tabText: {
	depends: ['btnText'],
	layer: 'btn',
	textColor: true
	},
	tabActiveText: {
	depends: ['text'],
	layer: 'bg',
	textColor: true
	},

	// Buttons
	btn: {
	depends: ['fg'],
	variant: 'btn',
	opacity: 'btn'
	},
	btnText: {
	depends: ['fgText'],
	layer: 'btn',
	textColor: true
	},
	btnPanelText: {
	depends: ['btnText'],
	layer: 'btnPanel',
	variant: 'btn',
	textColor: true
	},
	btnTopBarText: {
	depends: ['btnText'],
	layer: 'btnTopBar',
	variant: 'btn',
	textColor: true
	},

	// Buttons: pressed
	btnPressed: {
	depends: ['btn'],
	layer: 'btn'
	},
	btnPressedText: {
	depends: ['btnText'],
	layer: 'btn',
	variant: 'btnPressed',
	textColor: true
	},
	btnPressedPanel: {
	depends: ['btnPressed'],
	layer: 'btn'
	},
	btnPressedPanelText: {
	depends: ['btnPanelText'],
	layer: 'btnPanel',
	variant: 'btnPressed',
	textColor: true
	},
	btnPressedTopBar: {
	depends: ['btnPressed'],
	layer: 'btn'
	},
	btnPressedTopBarText: {
	depends: ['btnTopBarText'],
	layer: 'btnTopBar',
	variant: 'btnPressed',
	textColor: true
	},

	// Buttons: toggled
	btnToggled: {
	depends: ['btn'],
	layer: 'btn',
	color: (mod, btn) => brightness(mod * 20, btn).rgb
	},
	btnToggledText: {
	depends: ['btnText'],
	layer: 'btn',
	variant: 'btnToggled',
	textColor: true
	},
	btnToggledPanelText: {
	depends: ['btnPanelText'],
	layer: 'btnPanel',
	variant: 'btnToggled',
	textColor: true
	},
	btnToggledTopBarText: {
	depends: ['btnTopBarText'],
	layer: 'btnTopBar',
	variant: 'btnToggled',
	textColor: true
	},

	// Buttons: disabled
	btnDisabled: {
	depends: ['btn', 'bg'],
	color: (mod, btn, bg) => alphaBlend(btn, 0.25, bg)
	},
	btnDisabledText: {
	depends: ['btnText', 'btnDisabled'],
	layer: 'btn',
	variant: 'btnDisabled',
	color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
	},
	btnDisabledPanelText: {
	depends: ['btnPanelText', 'btnDisabled'],
	layer: 'btnPanel',
	variant: 'btnDisabled',
	color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
	},
	btnDisabledTopBarText: {
	depends: ['btnTopBarText', 'btnDisabled'],
	layer: 'btnTopBar',
	variant: 'btnDisabled',
	color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
	},

	// Input fields
	input: {
	depends: ['fg'],
	opacity: 'input'
	},
	inputText: {
	depends: ['text'],
	layer: 'input',
	textColor: true
	},
	inputPanelText: {
	depends: ['panelText'],
	layer: 'inputPanel',
	variant: 'input',
	textColor: true
	},
	inputTopbarText: {
	depends: ['topBarText'],
	layer: 'inputTopBar',
	variant: 'input',
	textColor: true
	},

	alertError: {
	depends: ['cRed'],
	opacity: 'alert'
	},
	alertErrorText: {
	depends: ['text'],
	layer: 'alert',
	variant: 'alertError',
	textColor: true
	},
	alertErrorPanelText: {
	depends: ['panelText'],
	layer: 'alertPanel',
	variant: 'alertError',
	textColor: true
	},

	alertWarning: {
	depends: ['cOrange'],
	opacity: 'alert'
	},
	alertWarningText: {
	depends: ['text'],
	layer: 'alert',
	variant: 'alertWarning',
	textColor: true
	},
	alertWarningPanelText: {
	depends: ['panelText'],
	layer: 'alertPanel',
	variant: 'alertWarning',
	textColor: true
	},

	alertSuccess: {
	depends: ['cGreen'],
	opacity: 'alert'
	},
	alertSuccessText: {
	depends: ['text'],
	layer: 'alert',
	variant: 'alertSuccess',
	textColor: true
	},
	alertSuccessPanelText: {
	depends: ['panelText'],
	layer: 'alertPanel',
	variant: 'alertSuccess',
	textColor: true
	},

	alertNeutral: {
	depends: ['text'],
	opacity: 'alert'
	},
	alertNeutralText: {
	depends: ['text'],
	layer: 'alert',
	variant: 'alertNeutral',
	color: (mod, text) => invertLightness(text).rgb,
	textColor: true
	},
	alertNeutralPanelText: {
	depends: ['panelText'],
	layer: 'alertPanel',
	variant: 'alertNeutral',
	textColor: true
	},

	alertPopupError: {
	depends: ['alertError'],
	opacity: 'alertPopup'
	},
	alertPopupErrorText: {
	depends: ['alertErrorText'],
	layer: 'popover',
	variant: 'alertPopupError',
	textColor: true
	},

	alertPopupWarning: {
	depends: ['alertWarning'],
	opacity: 'alertPopup'
	},
	alertPopupWarningText: {
	depends: ['alertWarningText'],
	layer: 'popover',
	variant: 'alertPopupWarning',
	textColor: true
	},

	alertPopupSuccess: {
	depends: ['alertSuccess'],
	opacity: 'alertPopup'
	},
	alertPopupSuccessText: {
	depends: ['alertSuccessText'],
	layer: 'popover',
	variant: 'alertPopupSuccess',
	textColor: true
	},

	alertPopupNeutral: {
	depends: ['alertNeutral'],
	opacity: 'alertPopup'
	},
	alertPopupNeutralText: {
	depends: ['alertNeutralText'],
	layer: 'popover',
	variant: 'alertPopupNeutral',
	textColor: true
	},

	badgeNotification: '--cRed',
	badgeNotificationText: {
	depends: ['text', 'badgeNotification'],
	layer: 'badge',
	variant: 'badgeNotification',
	textColor: 'bw'
	},

	chatBg: {
	depends: ['bg']
	},

	chatMessageIncomingBg: {
	depends: ['chatBg']
	},

	chatMessageIncomingText: {
	depends: ['text'],
	layer: 'chatMessage',
	variant: 'chatMessageIncomingBg',
	textColor: true
	},

	chatMessageIncomingLink: {
	depends: ['link'],
	layer: 'chatMessage',
	variant: 'chatMessageIncomingBg',
	textColor: 'preserve'
	},

	chatMessageIncomingBorder: {
	depends: ['border'],
	opacity: 'border',
	color: (mod, border) => brightness(2 * mod, border).rgb
	},

	chatMessageOutgoingBg: {
	depends: ['chatMessageIncomingBg'],
	color: (mod, chatMessage) => brightness(5 * mod, chatMessage).rgb
	},

	chatMessageOutgoingText: {
	depends: ['text'],
	layer: 'chatMessage',
	variant: 'chatMessageOutgoingBg',
	textColor: true
	},

	chatMessageOutgoingLink: {
	depends: ['link'],
	layer: 'chatMessage',
	variant: 'chatMessageOutgoingBg',
	textColor: 'preserve'
	},

	chatMessageOutgoingBorder: {
	depends: ['chatMessageOutgoingBg'],
	opacity: 'border',
	color: (mod, border) => brightness(2 * mod, border).rgb
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 9, 1:13 PM (1 d, 8 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724558
Default Alt Text: (24 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions