bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SoapboxConfig: site preview

Browse source
This commit is contained in:
Alex Gleason 2020-10-01 18:57:11 -05:00
parent 58d5b1940e
commit 93d2e83584
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
8 changed files with 113 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/soapbox/actions/settings.js
View file

Binary file not shown.

BIN
app/soapbox/features/soapbox_config/components/site_preview.js Normal file
View file

Binary file not shown.

BIN
app/soapbox/features/soapbox_config/index.js
View file

Binary file not shown.

BIN
app/soapbox/utils/theme.js
View file

Binary file not shown.

1
app/styles/components/tabs-bar.scss
View file

@ -5,6 +5,7 @@
flex: 0 0 auto;
overflow-y: auto;
height: 50px;
width: 100%;
position: sticky;
top: 0;
z-index: 1000;

30
app/styles/forms.scss
View file

@ -705,3 +705,33 @@ code {
cursor: pointer;
color: $error-red;
}
.site-preview {
border-radius: 4px;
overflow: hidden;
height: 164px;
border: 1px solid;
margin-bottom: 40px;
background: var(--background-color);
* {
z-index: 0;
}
a {
cursor: default;
}
.ui {
display: flex;
flex-direction: column;
padding: 0;
height: 100%;
}
.page {
align-items: center;
justify-content: center;
height: 100%;
}
}

155
app/styles/holiday/halloween.scss
View file

@ -1,4 +1,5 @@
body.halloween {
.halloween,
.site-preview.halloween {
// Set brand color to orange
--brand-color_h: 29.727272727272727;
--brand-color_s: 100%;
@ -14,8 +15,8 @@ body.halloween {
// Full-screen pseudo-elements to hold BG graphics
&::before,
&::after,
.app-holder::before,
.app-holder::after {
> .app-holder::before,
> .app-holder::after {
content: '';
display: block;
position: fixed;
@ -42,7 +43,7 @@ body.halloween {
animation: halloween-twinkle 200s linear infinite;
}
.app-holder {
> .app-holder {
// Vignette
&::before {
background-image: radial-gradient(
@ -58,90 +59,90 @@ body.halloween {
background: transparent url("../images/halloween/clouds.png") repeat top center;
animation: halloween-clouds 200s linear infinite;
}
}
// Dangling spider
.ui .page__top::after,
.ui .page__columns::after {
content: '';
display: block;
width: 100px;
height: 100px;
right: 20px;
background-image: url('../images/halloween/spider.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
z-index: -1;
pointer-events: none;
}
.ui .page__columns::after {
position: fixed;
top: 50px;
}
.ui .page__top::after {
position: absolute;
bottom: -100px;
}
.ui .page__top + .page__columns::after {
display: none;
}
// Witch emblem
.getting-started__footer::before {
content: '';
display: block;
background-image: url('../images/halloween/halloween-emblem.svg');
background-size: contain;
background-position: left;
background-repeat: no-repeat;
width: 100%;
height: 100px;
margin-bottom: 20px;
}
// Color fixes
// Elements directly over the BG need static colors that don't change
// regardless of the theme-mode
.getting-started__footer {
color: #fff;
a {
color: hsla(0, 0%, 100%, 0.4);
// Dangling spider
.ui .page__top::after,
.ui .page__columns::after {
content: '';
display: block;
width: 100px;
height: 100px;
right: 20px;
background-image: url('../images/halloween/spider.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
z-index: -1;
pointer-events: none;
}
p {
color: hsla(0, 0%, 100%, 0.8);
.ui .page__columns::after {
position: fixed;
top: 50px;
}
}
.profile-info-panel {
color: #fff;
.ui .page__top::after {
position: absolute;
bottom: -100px;
}
&-content__name h1 {
span:first-of-type {
color: hsla(0, 0%, 100%, 0.6);
.ui .page__top + .page__columns::after {
display: none;
}
// Witch emblem
.getting-started__footer::before {
content: '';
display: block;
background-image: url('../images/halloween/halloween-emblem.svg');
background-size: contain;
background-position: left;
background-repeat: no-repeat;
width: 100%;
height: 100px;
margin-bottom: 20px;
}
// Color fixes
// Elements directly over the BG need static colors that don't change
// regardless of the theme-mode
.getting-started__footer {
color: #fff;
a {
color: hsla(0, 0%, 100%, 0.4);
}
small {
p {
color: hsla(0, 0%, 100%, 0.8);
}
}
.profile-info-panel {
color: #fff;
&-content__name h1 {
span:first-of-type {
color: hsla(0, 0%, 100%, 0.6);
}
small {
color: #fff;
}
}
&-content__bio {
color: #fff;
}
}
&-content__bio {
color: #fff;
}
&-content__bio a,
&-content__fields a {
color: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) + 8%)
);
&-content__bio a,
&-content__fields a {
color: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) + 8%)
);
}
}
}
}

7
app/styles/themes.scss
View file

@ -24,7 +24,8 @@ Examples:
--primary-text-color--faint
*/
body {
body,
.site-preview {
// Primary variables
--brand-color: hsl(var(--brand-color_hsl));
--accent-color: hsl(var(--accent-color_hsl));
@ -56,7 +57,7 @@ body {
--warning-color--faint: hsla(var(--warning-color_hsl), 0.5);
}
body.theme-mode-light {
.theme-mode-light {
// Primary variables
--foreground-color: #ffffff;
--highlight-text-color: hsl(
@ -85,7 +86,7 @@ body.theme-mode-light {
);
}
body.theme-mode-dark {
.theme-mode-dark {
// Primary variables
--foreground-color: #222222;
--highlight-text-color: hsl(