No OneTemporary
Actions

Authored By

Unknown

Size

17 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index f830a33bcb..2426b99823 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,428 +1,435 @@
	@import './_variables.scss';

	#app {
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 0 50px;
	min-height: 100vh;
	max-width: 100%;
	overflow: hidden;
	}

	i {
	user-select: none;
	}

	h4 {
	margin: 0;
	}

	#content {
	box-sizing: border-box;
	padding-top: 60px;
	margin: auto;
	min-height: 100vh;
	max-width: 980px;
	background-color: rgba(0,0,0,0.15);
	align-content: flex-start;
	}

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

	body {
	font-family: sans-serif;
	font-size: 14px;
	margin: 0;
	color: $fallback--fg;
	color: var(--fg, $fallback--fg);
	max-width: 100vw;
	overflow-x: hidden;
	}

	a {
	text-decoration: none;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	button{
	user-select: none;
	color: $fallback--fg;
	color: var(--fg, $fallback--fg);
	background-color: $fallback--btn;
	background-color: var(--btn, $fallback--btn);
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	cursor: pointer;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 2px black;
	font-size: 14px;
	font-family: sans-serif;

	&:hover {
	box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
	}

	&:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	&.pressed {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg)
	}
	}

	label.select {
	padding: 0;

	}

	input, textarea, .select {
	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 2px black inset;
	background-color: $fallback--input;
	background-color: var(--input, $fallback--input);
	color: $fallback--lightFg;
	color: var(--lightFg, $fallback--lightFg);
	font-family: sans-serif;
	font-size: 14px;
	padding: 8px 7px;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 29px;
	line-height: 16px;

	.icon-down-open {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	color: $fallback--fg;
	color: var(--fg, $fallback--fg);
	line-height: 29px;
	z-index: 0;
	pointer-events: none;
	}

	select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	margin: 0;
	color: $fallback--fg;
	color: var(--fg, $fallback--fg);
	padding: 4px 2em 3px 3px;
	width: 100%;
	z-index: 1;
	height: 29px;
	line-height: 16px;
	}

	&[type=radio],
	&[type=checkbox] {
	display: none;
	&:checked + label::before {
	color: $fallback--fg;
	color: var(--fg, $fallback--fg);
	}
	+ label::before {
	display: inline-block;
	content: '✔';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkBoxRadius;
	border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 2px black inset;
	margin-right: .5em;
	background-color: $fallback--input;
	background-color: var(--input, $fallback--input);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}
	}

	+option {
	+ color: $fallback--fg;
	+ color: var(--fg, $fallback--fg);
	+ background-color: $fallback--bg;
	+ background-color: var(--bg, $fallback--bg);
	+}
	+
	i[class*=icon-] {
	color: $fallback--icon;
	color: var(--icon, $fallback--icon)
	}


	.container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 10px 0 10px;
	}

	.gaps {
	margin: -1em 0 0 -1em;
	}

	.item {
	flex: 1;
	line-height: 50px;
	height: 50px;
	overflow: hidden;

	.nav-icon {
	font-size: 1.1em;
	margin-left: 0.4em;
	}
	}

	.gaps > .item {
	padding: 1em 0 0 1em;
	}

	.auto-size {
	flex: 1
	}

	nav {
	width: 100%;
	align-items: center;
	position: fixed;
	height: 50px;

	.inner-nav {
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
	align-items: center;
	flex-basis: 970px;
	margin: auto;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 80%;

	a i {
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}
	}
	}

	main-router {
	flex: 1;
	}

	.status.compact {
	color: rgba(0, 0, 0, 0.42);
	font-weight: 300;

	p {
	margin: 0;
	font-size: 0.8em
	}
	}

	/* Panel */

	.panel {
	display: flex;
	flex-direction: column;
	margin: 0.5em;

	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	}

	.panel-body:empty::before {
	content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	display: block;
	margin: 1em;
	text-align: center;
	}

	.panel-heading {
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	background-size: cover;
	padding: 0.6em 1.0em;
	text-align: left;
	font-size: 1.3em;
	line-height: 24px;
	background-color: $fallback--btn;
	background-color: var(--btn, $fallback--btn);
	}

	.panel-heading.stub {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	.panel-footer {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	}

	.panel-body > p {
	line-height: 18px;
	padding: 1em;
	margin: 0;
	}

	.container > * {
	min-width: 0px;
	}

	.fa {
	color: grey;
	}

	nav {
	z-index: 1000;
	background-color: $fallback--btn;
	background-color: var(--btn, $fallback--btn);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	}

	.fade-enter-active, .fade-leave-active {
	transition: opacity .2s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}

	.main {
	flex-basis: 60%;
	flex-grow: 1;
	flex-shrink: 1;
	}

	.sidebar-bounds {
	flex: 0;
	flex-basis: 35%;
	}

	.sidebar-flexer {
	flex: 1;
	flex-basis: 345px;
	width: 365px;
	}

	.mobile-shown {
	display: none;
	}

	.panel-switcher {
	display: none;
	width: 100%;
	height: 46px;
	button {
	display: block;
	flex: 1;
	max-height: 32px;
	margin: 0.5em;
	padding: 0.5em;
	}
	}

	@media all and (min-width: 960px) {
	body {
	overflow-y: scroll;
	}
	.sidebar-bounds {
	overflow: hidden;
	max-height: 100vh;
	width: 345px;
	position: fixed;
	margin-top: -10px;

	.sidebar-scroller {
	height: 96vh;
	width: 365px;
	padding-top: 10px;
	padding-right: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	}

	.sidebar {
	width: 345px;
	}
	}
	.sidebar-flexer {
	max-height: 96vh;
	flex-shrink: 0;
	flex-grow: 0;
	}
	}

	.alert {
	margin: 0.35em;
	padding: 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	min-height: 28px;
	line-height: 28px;

	&.error {
	background-color: $fallback--cAlertRed;
	background-color: var(--cAlertRed, $fallback--cAlertRed);
	}
	}

	.faint {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	@media all and (max-width: 959px) {
	.mobile-hidden {
	display: none;
	}

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0 0 0 0;
	}

	.panel {
	margin: 0.5em 0 0.5em 0;
	}
	}

	.item.right {
	text-align: right;
	padding-right: 20px;
	}
	diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
	index 7acba1dc4f..112bbc1e12 100644
	--- a/src/components/style_switcher/style_switcher.vue
	+++ b/src/components/style_switcher/style_switcher.vue
	@@ -1,237 +1,240 @@
	<template>
	<div>
	<div>{{$t('settings.presets')}}
	<label for="style-switcher" class='select'>
	<select id="style-switcher" v-model="selected" class="style-switcher">
	- <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
	+ <option v-for="style in availableStyles" :value="style" :style="{
	+ backgroundColor: style[1],
	+ color: style[3]
	+ }">{{style[0]}}</option>
	</select>
	<i class="icon-down-open"/>
	</label>
	</div>
	<div class="color-container">
	<p>{{$t('settings.theme_help')}}</p>
	<div class="color-item">
	<label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label>
	<input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal">
	<input id="bgcolor-t" class="theme-color-in" type="text" v-model="bgColorLocal">
	</div>
	<div class="color-item">
	<label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label>
	<input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal">
	<input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal">
	</div>
	<div class="color-item">
	<label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label>
	<input id="textcolor" class="theme-color-cl" type="color" v-model="textColorLocal">
	<input id="textcolor-t" class="theme-color-in" type="text" v-model="textColorLocal">
	</div>
	<div class="color-item">
	<label for="linkcolor" class="theme-color-lb">{{$t('settings.links')}}</label>
	<input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal">
	<input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
	</div>
	<div class="color-item">
	<label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label>
	<input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal">
	<input id="redcolor-t" class="theme-color-in" type="text" v-model="redColorLocal">
	</div>
	<div class="color-item">
	<label for="bluecolor" class="theme-color-lb">{{$t('settings.cBlue')}}</label>
	<input id="bluecolor" class="theme-color-cl" type="color" v-model="blueColorLocal">
	<input id="bluecolor-t" class="theme-color-in" type="text" v-model="blueColorLocal">
	</div>
	<div class="color-item">
	<label for="greencolor" class="theme-color-lb">{{$t('settings.cGreen')}}</label>
	<input id="greencolor" class="theme-color-cl" type="color" v-model="greenColorLocal">
	<input id="greencolor-t" class="theme-color-in" type="green" v-model="greenColorLocal">
	</div>
	<div class="color-item">
	<label for="orangecolor" class="theme-color-lb">{{$t('settings.cOrange')}}</label>
	<input id="orangecolor" class="theme-color-cl" type="color" v-model="orangeColorLocal">
	<input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
	</div>
	</div>
	<div class="radius-container">
	<p>{{$t('settings.radii_help')}}</p>
	<div class="radius-item">
	<label for="btnradius" class="theme-radius-lb">{{$t('settings.btnRadius')}}</label>
	<input id="btnradius" class="theme-radius-rn" type="range" v-model="btnRadiusLocal" max="16">
	<input id="btnradius-t" class="theme-radius-in" type="text" v-model="btnRadiusLocal">
	</div>
	<div class="radius-item">
	<label for="inputradius" class="theme-radius-lb">{{$t('settings.inputRadius')}}</label>
	<input id="inputradius" class="theme-radius-rn" type="range" v-model="inputRadiusLocal" max="16">
	<input id="inputradius-t" class="theme-radius-in" type="text" v-model="inputRadiusLocal">
	</div>
	<div class="radius-item">
	<label for="panelradius" class="theme-radius-lb">{{$t('settings.panelRadius')}}</label>
	<input id="panelradius" class="theme-radius-rn" type="range" v-model="panelRadiusLocal" max="50">
	<input id="panelradius-t" class="theme-radius-in" type="text" v-model="panelRadiusLocal">
	</div>
	<div class="radius-item">
	<label for="avatarradius" class="theme-radius-lb">{{$t('settings.avatarRadius')}}</label>
	<input id="avatarradius" class="theme-radius-rn" type="range" v-model="avatarRadiusLocal" max="28">
	<input id="avatarradius-t" class="theme-radius-in" type="green" v-model="avatarRadiusLocal">
	</div>
	<div class="radius-item">
	<label for="avataraltradius" class="theme-radius-lb">{{$t('settings.avatarAltRadius')}}</label>
	<input id="avataraltradius" class="theme-radius-rn" type="range" v-model="avatarAltRadiusLocal" max="28">
	<input id="avataraltradius-t" class="theme-radius-in" type="text" v-model="avatarAltRadiusLocal">
	</div>
	<div class="radius-item">
	<label for="attachmentradius" class="theme-radius-lb">{{$t('settings.attachmentRadius')}}</label>
	<input id="attachmentrradius" class="theme-radius-rn" type="range" v-model="attachmentRadiusLocal" max="50">
	<input id="attachmentradius-t" class="theme-radius-in" type="text" v-model="attachmentRadiusLocal">
	</div>
	<div class="radius-item">
	<label for="tooltipradius" class="theme-radius-lb">{{$t('settings.tooltipRadius')}}</label>
	<input id="tooltipradius" class="theme-radius-rn" type="range" v-model="tooltipRadiusLocal" max="20">
	<input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal">
	</div>
	</div>
	<div :style="{
	'--btnRadius': btnRadiusLocal + 'px',
	'--inputRadius': inputRadiusLocal + 'px',
	'--panelRadius': panelRadiusLocal + 'px',
	'--avatarRadius': avatarRadiusLocal + 'px',
	'--avatarAltRadius': avatarAltRadiusLocal + 'px',
	'--tooltipRadius': tooltipRadiusLocal + 'px',
	'--attachmentRadius': attachmentRadiusLocal + 'px'
	}">
	<div class="panel dummy">
	<div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
	<div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
	<div class="avatar" :style="{
	'border-radius': avatarRadiusLocal + 'px'
	}">
	( ͡° ͜ʖ ͡°)
	</div>
	<h4>Content</h4>
	<br>
	A bunch of more content and
	<a :style="{ color: linkColorLocal }">a nice lil' link</a>
	<i :style="{ color: blueColorLocal }" class="icon-reply"/>
	<i :style="{ color: greenColorLocal }" class="icon-retweet"/>
	<i :style="{ color: redColorLocal }" class="icon-cancel"/>
	<i :style="{ color: orangeColorLocal }" class="icon-star"/>
	<br>
	<button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
	</div>
	</div>
	</div>
	<button class="btn" @click="setCustomTheme">{{$t('general.apply')}}</button>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';
	.style-switcher {
	margin-right: 1em;
	}

	.radius-container,
	.color-container {
	display: flex;

	p {
	margin-top: 2em;
	margin-bottom: .5em;
	}
	}
	.radius-container {
	flex-direction: column;
	}

	.color-container {
	flex-wrap: wrap;
	justify-content: space-between;
	}

	.radius-item,
	.color-item {
	min-width: 20em;
	display:flex;
	flex: 1 1 0;
	align-items: baseline;
	margin: 5px 6px 5px 0;

	label {
	color: var(--faint, $fallback--faint);
	}
	}

	.radius-item {
	flex-basis: auto;
	}

	.theme-radius-rn,
	.theme-color-cl {
	border: 0;
	box-shadow: none;
	background: transparent;
	color: var(--faint, $fallback--faint);
	align-self: stretch;
	}

	.theme-color-cl,
	.theme-radius-in,
	.theme-color-in {
	margin-left: 4px;
	}

	.theme-color-in {
	min-width: 4em;
	}

	.theme-radius-in {
	min-width: 1em;
	}

	.theme-radius-in,
	.theme-color-in {
	max-width: 7em;
	flex: 1;
	}

	.theme-radius-lb,
	.theme-color-lb {
	flex: 2;
	min-width: 7em;
	}

	.theme-radius-lb{
	max-width: 50em;
	}

	.theme-color-lb {
	max-width: 10em;
	}

	.theme-color-cl {
	padding: 1px;
	max-width: 8em;
	height: 100%;
	flex: 0;
	min-width: 2em;
	cursor: pointer;
	}

	.theme-preview-content {
	padding: 20px;
	}

	.dummy {
	.avatar {
	background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
	color: black;
	text-align: center;
	height: 48px;
	line-height: 48px;
	width: 48px;
	float: left;
	margin-right: 1em;
	}
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 2:37 PM (13 h, 53 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1800213
Default Alt Text: (17 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions