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; flex: 0 0 auto;
overflow-y: auto; overflow-y: auto;
height: 50px; height: 50px;
width: 100%;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;

30
app/styles/forms.scss
View file

@ -705,3 +705,33 @@ code {
cursor: pointer; cursor: pointer;
color: $error-red; 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%;
}
}

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

@ -1,4 +1,5 @@
body.halloween { .halloween,
.site-preview.halloween {
// Set brand color to orange // Set brand color to orange
--brand-color_h: 29.727272727272727; --brand-color_h: 29.727272727272727;
--brand-color_s: 100%; --brand-color_s: 100%;
@ -14,8 +15,8 @@ body.halloween {
// Full-screen pseudo-elements to hold BG graphics // Full-screen pseudo-elements to hold BG graphics
&::before, &::before,
&::after, &::after,
.app-holder::before, > .app-holder::before,
.app-holder::after { > .app-holder::after {
content: ''; content: '';
display: block; display: block;
position: fixed; position: fixed;
@ -42,7 +43,7 @@ body.halloween {
animation: halloween-twinkle 200s linear infinite; animation: halloween-twinkle 200s linear infinite;
} }
.app-holder { > .app-holder {
// Vignette // Vignette
&::before { &::before {
background-image: radial-gradient( background-image: radial-gradient(
@ -58,7 +59,6 @@ body.halloween {
background: transparent url("../images/halloween/clouds.png") repeat top center; background: transparent url("../images/halloween/clouds.png") repeat top center;
animation: halloween-clouds 200s linear infinite; animation: halloween-clouds 200s linear infinite;
} }
}
// Dangling spider // Dangling spider
.ui .page__top::after, .ui .page__top::after,
@ -144,6 +144,7 @@ body.halloween {
); );
} }
} }
}
} }
// Animations // Animations

7
app/styles/themes.scss
View file

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