Page MenuHomePhorge
Files F85826758

No OneTemporary
Actions

Authored By
Unknown
Size
6 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/settings_modal/tabs/old_theme_tab/theme_preview.vue b/src/components/settings_modal/tabs/old_theme_tab/theme_preview.vue
index 778e92c3bc..ee9ecade8e 100644
--- a/src/components/settings_modal/tabs/old_theme_tab/theme_preview.vue
+++ b/src/components/settings_modal/tabs/old_theme_tab/theme_preview.vue
@@ -1,251 +1,251 @@
<template>
- <div class="theme-preview-container">
+ <div class="theme-preview-container" aria-hidden="true">
<div class="underlay underlay-preview" />
<div class="panel dummy">
<div class="panel-heading">
<h1 class="title">
{{ $t('settings.style.preview.header') }}
<span class="badge -notification">
99
</span>
</h1>
<span class="faint">
{{ $t('settings.style.preview.header_faint') }}
</span>
<span class="alert error">
{{ $t('settings.style.preview.error') }}
</span>
<button class="btn button-default">
{{ $t('settings.style.preview.button') }}
</button>
</div>
<div class="panel-body theme-preview-content">
<div class="post">
<div
class="avatar still-image"
aria-hidden="true"
>
( ͡° ͜ʖ ͡°)
</div>
<div class="content">
<h4>
{{ $t('settings.style.preview.content') }}
</h4>
<i18n-t
scope="global"
keypath="settings.style.preview.text"
>
<code style="font-family: var(--postCodeFont);">
{{ $t('settings.style.preview.mono') }}
</code>
<a style="color: var(--link);">
{{ $t('settings.style.preview.link') }}
</a>
</i18n-t>
<div class="icons">
<FAIcon
fixed-width
style="color: var(--cBlue);"
class="fa-scale-110 fa-old-padding"
icon="reply"
/>
<FAIcon
fixed-width
style="color: var(--cGreen);"
class="fa-scale-110 fa-old-padding"
icon="retweet"
/>
<FAIcon
fixed-width
style="color: var(--cOrange);"
class="fa-scale-110 fa-old-padding"
icon="star"
/>
<FAIcon
fixed-width
style="color: var(--cRed);"
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</div>
</div>
</div>
<div class="after-post">
<div
class="avatar-alt"
aria-hidden="true"
>
:^)
</div>
<div class="content">
<i18n-t
keypath="settings.style.preview.fine_print"
tag="span"
class="faint"
scope="global"
>
<a style="color: var(--linkFaint);">
{{ $t('settings.style.preview.faint_link') }}
</a>
</i18n-t>
</div>
</div>
<div class="separator" />
<span class="alert error">
{{ $t('settings.style.preview.error') }}
</span>
<input
:value="$t('settings.style.preview.input')"
type="text"
class="input"
>
<div class="actions">
<Checkbox>
{{ $t('settings.style.preview.checkbox') }}
</Checkbox>
<button class="btn button-default">
{{ $t('settings.style.preview.button') }}
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import Checkbox from 'src/components/checkbox/checkbox.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faReply,
faRetweet,
faStar,
faTimes,
} from '@fortawesome/free-solid-svg-icons'
library.add(faTimes, faStar, faRetweet, faReply)
export default {
components: {
Checkbox,
},
}
</script>
<style lang="scss">
.theme-preview-container {
position: relative;
border-top: 1px dashed;
border-bottom: 1px dashed;
border-color: var(--border);
margin: 1em 0;
padding: 1em;
background-color: var(--wallpaper);
background-image: var(--body-background-image);
background-size: cover;
background-position: 50% 50%;
.theme-preview-content {
padding: 1.5em;
}
.dummy {
.post {
font-family: var(--postFont);
display: flex;
.content {
flex: 1;
h4 {
margin-bottom: 0.25em;
}
.icons {
margin-top: 0.5em;
display: flex;
i {
margin-right: 1em;
}
}
}
}
.after-post {
margin-top: 1em;
display: flex;
align-items: center;
}
.avatar,
.avatar-alt {
background:
linear-gradient(
135deg,
#b8e1fc 0%,
#a9d2f3 10%,
#90bae4 25%,
#90bcea 37%,
#90bff0 50%,
#6ba8e5 51%,
#a2daf5 83%,
#bdf3fd 100%
);
color: black;
font-family: sans-serif;
text-align: center;
margin-right: 1em;
}
.avatar-alt {
flex: 0 auto;
margin-left: 2em;
font-size: 0.85em;
min-width: 2.2rem;
min-height: 2.2rem;
line-height: 1.5em;
align-content: center;
}
.avatar {
flex: 0 auto;
width: 3.5em;
height: 3.5em;
font-size: 1rem;
line-height: 3.5em;
justify-content: center;
}
.actions {
display: flex;
align-items: baseline;
.checkbox {
margin-right: 1em;
flex: 1;
}
}
.separator {
margin: 1em;
border-bottom: 1px solid;
border-color: var(--border);
}
.btn {
min-width: 3em;
}
}
.underlay-preview {
position: absolute;
inset: 0 0.9em;
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Fri, Oct 30, 9:54 AM (19 h, 55 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1800003
Default Alt Text
(6 KB)

Event Timeline