pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A bunch of styling fixes

Browse Source
This commit is contained in:
Fornax
2022-03-08 23:34:10 +01:00
parent 58bc2e112b
commit 493e1495ce
17 changed files with 162 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
res/include/style/layout.css
View File

@@ -63,7 +63,7 @@ header, footer, .checkers {
background-image: url("{{.BackgroundPattern}}");
background-color: var(--layer_1_color);
background-repeat: repeat;
/* background-blend-mode: luminosity; */
background-blend-mode: luminosity;
}
header, footer {
box-shadow: inset 1px 1px 8px 0 var(--shadow_color);
@@ -404,7 +404,7 @@ select {
margin: 3px;
background: linear-gradient(var(--input_color), var(--input_color_dark));
padding: 5px 5px 5px 5px;
box-shadow: 1px 1px 5px -3px var(--shadow_color);
box-shadow: 1px 1px 5px -2px var(--shadow_color);
overflow: hidden;
color: var(--input_text_color);
vertical-align: middle;
@@ -443,17 +443,28 @@ button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="color"]:active,
select:active{
select:active {
background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 4px 4px 8px var(--shadow_color);
/* Exactly 4px offset compared to the inactive padding to give a depth effect */
padding: 9px 1px 1px 9px;
}
.button_full_width {width: calc(100% - 6px);}
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important; color: var(--highlight_text_color) !important;}
.button_red {background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important; color: var(--highlight_text_color) !important;}
.button_red:active {background: linear-gradient(var(--danger_color_dark), var(--danger_color)) !important; color: var(--highlight_text_color) !important;}
.button_highlight {
background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important;
color: var(--highlight_text_color) !important;
}
.button_highlight:active {
background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;
color: var(--highlight_text_color) !important;
}
.button_red {
background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important;
color: var(--highlight_text_color) !important;
}
.button_red:active {
background: linear-gradient(var(--danger_color_dark), var(--danger_color)) !important;
color: var(--highlight_text_color) !important;
}
button:disabled, button.disabled,
.button:disabled, .button.disabled,

BIN
res/static/misc/MaterialIcons-Regular.ttf
View File

Binary file not shown.

1
res/template/appearance.html
View File

@@ -31,6 +31,7 @@
<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)<br/>
<!--<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>-->
<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
</div>
</section>

2
res/template/widgets.html
View File

@@ -8,7 +8,7 @@
<body>
{{template "page_top" .}}
<header">
<header>
<h1>Widget showcase</h1>
</header>
<section>

26
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -426,7 +426,7 @@ const keyboard_event = evt => {
{#if is_list}
<button
on:click={toggle_gallery}
class="toolbar_button button_full_width"
class="toolbar_button"
class:button_highlight={view === "gallery"}
title="Opens a gallery view of the album">
<i class="icon">photo_library</i>
@@ -437,7 +437,7 @@ const keyboard_event = evt => {
{#if file.abuse_type === "" && view === "file"}
<button
on:click={downloader.download_file}
class="toolbar_button button_full_width"
class="toolbar_button"
title="Save this file to your computer">
<i class="icon">download</i>
<span>Download</span>
@@ -447,7 +447,7 @@ const keyboard_event = evt => {
{#if file.abuse_type === "" && is_list}
<button
on:click={downloader.download_list}
class="toolbar_button button_full_width"
class="toolbar_button"
title="Download all files in this album as a zip archive">
<i class="icon">download</i>
<span>DL all files</span>
@@ -456,7 +456,7 @@ const keyboard_event = evt => {
<button
on:click={copy_url}
class="toolbar_button button_full_width"
class="toolbar_button"
class:button_highlight={copy_url_status === "copied"}
class:button_red={copy_url_status === "error"}
title="Copy a link to this page to your clipboard">
@@ -474,7 +474,7 @@ const keyboard_event = evt => {
<button
on:click={toggle_sharebar}
class="toolbar_button button_full_width"
class="toolbar_button"
class:button_highlight={sharebar_visible}
title="Share this file on social media">
<i class="icon">share</i>
@@ -482,7 +482,7 @@ const keyboard_event = evt => {
</button>
<button
class="toolbar_button button_full_width"
class="toolbar_button"
on:click={qr_window.toggle}
class:button_highlight={qr_visible}
title="Show a QR code with a link to this page. Useful for sharing files in-person">
@@ -492,7 +492,7 @@ const keyboard_event = evt => {
{#if is_list}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
title="Go to a random file when pressing → or clicking the next file button"
class:button_highlight={list_shuffle}
on:click={toggle_shuffle}>
@@ -507,7 +507,7 @@ const keyboard_event = evt => {
{#if view === "file"}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
on:click={details_window.toggle}
class:button_highlight={details_visible}
title="Information and statistics about this file">
@@ -520,7 +520,7 @@ const keyboard_event = evt => {
{#if file.can_edit || list.can_edit}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
on:click={edit_window.toggle}
class:button_highlight={edit_visible}
title="Edit or delete this file or album">
@@ -532,7 +532,7 @@ const keyboard_event = evt => {
{#if view === "file" && window.user_authenticated && !file.can_edit}
<button
on:click={grab_file}
class="toolbar_button button_full_width"
class="toolbar_button"
title="Copy this file to your own pixeldrain account">
<i class="icon">save_alt</i>
<span><u>G</u>rab file</span>
@@ -540,7 +540,7 @@ const keyboard_event = evt => {
{/if}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
title="Include this file in your own webpages"
on:click={embed_window.toggle}
class:button_highlight={embed_visible}>
@@ -550,7 +550,7 @@ const keyboard_event = evt => {
{#if view === "file"}
<button
class="toolbar_button button_full_width"
class="toolbar_button"
title="Report this file as abusive"
on:click={report_window.toggle}
class:button_highlight={report_visible}>
@@ -754,9 +754,9 @@ const keyboard_event = evt => {
height: auto;
text-align: center;
}
.toolbar_button{
text-align: left;
width: calc(100% - 6px);
}
.toolbar_button > span {
vertical-align: middle;

3
svelte/src/file_viewer/Sharebar.svelte
View File

@@ -78,6 +78,9 @@ const share_tumblr = () => {
transition: left 0.5s;
}
.visible { left: 8em; }
.button_full_width {
width: calc(100% - 6px);
}
.button_full_width > svg {
height: 3em;
width: 3em;

2
svelte/src/file_viewer/UkrainePopup.svelte
View File

@@ -18,7 +18,7 @@ onMount(() => {
{#if visible}
<div in:fade out:fade class="notice highlight_yellow">
<div class="text">
🇺🇦 Russia has invaded Ukraine and is murdering its citizens! 🇺🇦<br/>
🇺🇦 Russia has invaded Ukraine and is attacking civilians! 🇺🇦<br/>
There are a number of ways you can help:
<a href="https://helpukrainewin.org/" rel="noreferrer" target="_blank">Click here for more information</a>.
</div>

1
svelte/src/file_viewer/viewers/File.svelte
View File

@@ -33,6 +33,7 @@ let file = {
<style>
h1 {
text-shadow: 1px 1px 3px var(--shadow_color);
line-break: anywhere;
}
.icon {
display: inline-block;

4
svelte/src/file_viewer/viewers/Torrent.svelte
View File

@@ -132,6 +132,10 @@ const copy_magnet = () => {
{/if}
<style>
h1 {
text-shadow: 1px 1px 3px var(--shadow_color);
line-break: anywhere;
}
.icon {
display: inline-block;
vertical-align: middle;

4
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -170,6 +170,10 @@ const fullscreen = () => {
{/if}
<style>
h1 {
text-shadow: 1px 1px 3px var(--shadow_color);
line-break: anywhere;
}
.container {
display: flex;
flex-direction: column;

15
svelte/src/filesystem/Filesystem.svelte
View File

@@ -325,23 +325,23 @@ const share = () => {
</div>
{#if state.base.type === "file"}
<button on:click={download} class="toolbar_button button_full_width">
<button on:click={download} class="toolbar_button">
<i class="icon">save</i> Download
</button>
{/if}
<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
<button id="btn_download_list" class="toolbar_button" style="display: none;">
<i class="icon">save</i> DL all files
</button>
<button id="btn_copy" class="toolbar_button button_full_width">
<button id="btn_copy" class="toolbar_button">
<i class="icon">content_copy</i> <u>C</u>opy Link
</button>
<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button" class:button_highlight={sharebar_visible}>
<i class="icon">share</i> Share
</button>
<button on:click={details.toggle} class="toolbar_button button_full_width" class:button_highlight={details_visible}>
<button on:click={details.toggle} class="toolbar_button" class:button_highlight={details_visible}>
<i class="icon">help</i> Deta<u>i</u>ls
</button>
<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
<button id="btn_edit" class="toolbar_button" style="display: none;">
<i class="icon">edit</i> <u>E</u>dit
</button>
</div></div></div>
@@ -549,8 +549,9 @@ const share = () => {
height: auto;
text-align: center;
}
.toolbar_button{
.toolbar_button {
text-align: left;
width: calc(100% - 6px);
}
.toolbar_label {
text-align: left;

3
svelte/src/filesystem/Sharebar.svelte
View File

@@ -82,6 +82,9 @@ const share_tumblr = () => {
border-bottom-left-radius: 16px;
}
.visible { left: 8em; }
.button_full_width {
width: calc(100% - 6px);
}
.button_full_width > svg {
height: 3em;
width: 3em;

26
svelte/src/home_page/HomePage.svelte
View File

@@ -4,11 +4,8 @@ import OtherPlans from "./OtherPlans.svelte";
import UploadWidget from "./UploadWidget.svelte";
</script>
<header style="padding-bottom: 80px; padding-top: 80px;">
<picture>
<source media="(max-width: 700px)" srcset="/res/img/header_orbitron.webp">
<img class="header_image" src="/res/img/header_orbitron_wide.webp" alt="Header">
</picture>
<header>
<div class="header_image_container"></div>
</header>
<UploadWidget></UploadWidget>
@@ -83,7 +80,7 @@ import UploadWidget from "./UploadWidget.svelte";
option if your files are accessed often.
</p>
<div style="text-align: center;">
<img src="/res/img/coins.webp" alt="supported coins" style="width: 250px;"/>
<img src="/res/img/coins.webp" alt="supported coins" style="width: 250px; height: 96px;"/>
</div>
<p>
To use prepaid you need to register a pixeldrain account. After
@@ -93,9 +90,20 @@ import UploadWidget from "./UploadWidget.svelte";
</section>
<style>
.header_image{
width: 100%;
max-width: 800px;
.header_image_container {
margin: auto;
height: 300px;
width: 750px;
max-width: 100%;
background-image: url("/res/img/header_orbitron_wide.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
@media (max-width: 700px) {
.header_image_container {
height: 250px;
background-image: url("/res/img/header_orbitron.webp");
}
}
</style>

2
svelte/src/home_page/UploadWidget.svelte
View File

@@ -577,7 +577,7 @@ const keydown = (e) => {
line-height: 1em;
text-align: center;
display: inline-block;
background-color: var(--highlight_color);
background: var(--highlight_color);
color: var(--highlight_text_color);
border-radius: 30px;
padding: 0.15em;

3
svelte/src/util/ThemePicker.svelte
View File

@@ -44,6 +44,9 @@ let set = s => {
<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
Skeuos
</button>
<button class:button_highlight={theme==="sweet"} on:click={() => {set("sweet")}}>
Sweet
</button>
</div>
<style>

4
webcontroller/subscription_activate.go
View File

@@ -11,7 +11,7 @@ import (
func (wc *WebController) patreonLinkForm(td *TemplateData, r *http.Request) (f Form) {
f.Name = "link_patreon_subscription"
f.Title = "Link Patreon pledge to pixeldrain account"
f.SubmitLabel = "Submit"
f.SubmitLabel = "Activate subscription"
if r.FormValue("key") == "" {
f.Submitted = true
@@ -68,7 +68,7 @@ func (wc *WebController) patreonLinkForm(td *TemplateData, r *http.Request) (f F
Type: FieldTypeDescription,
}, {
Name: "8",
Description: "When clicking submit your patreon pledge will be linked " +
Description: "When clicking 'Activate' your patreon pledge will be linked " +
"to your pixeldrain account and you will be able to use " +
"pixeldrain's premium features. If you would like to update or " +
"cancel your subscription later on you can do so through " +

137
webcontroller/user_style.go
View File

@@ -45,6 +45,8 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
s = nordPixeldrainStyle
case "snowstorm":
s = snowstormPixeldrainStyle
case "sweet":
s = sweetPixeldrainStyle
case "default":
fallthrough // use default case
default:
@@ -70,6 +72,10 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
return s
}
type Colour interface {
CSS() string
}
type pixeldrainStyleSheet struct {
Text hsl
Link hsl // Based on Highlight if undefined
@@ -100,64 +106,64 @@ type pixeldrainStyleSheet struct {
func (s pixeldrainStyleSheet) String() string {
return fmt.Sprintf(
`:root {
--text_color: #%s;
--link_color: #%s;
--input_color: #%s;
--input_color_dark: #%s;
--input_text_color: #%s;
--input_disabled_color: #%s;
--highlight_color: #%s;
--highlight_color_dark: #%s;
--highlight_text_color: #%s;
--danger_color: #%s;
--danger_color_dark: #%s;
--scrollbar_foreground_color: #%s;
--scrollbar_hover_color: #%s;
--scrollbar_background_color: #%s;
--text_color: %s;
--link_color: %s;
--input_color: %s;
--input_color_dark: %s;
--input_text_color: %s;
--input_disabled_color: %s;
--highlight_color: %s;
--highlight_color_dark: %s;
--highlight_text_color: %s;
--danger_color: %s;
--danger_color_dark: %s;
--scrollbar_foreground_color: %s;
--scrollbar_hover_color: %s;
--scrollbar_background_color: %s;
--layer_1_color: #%s;
--layer_1_color_border: #%s;
--layer_1_text_color: #%s;
--layer_2_color: #%s;
--layer_2_color_border: #%s;
--layer_3_color: #%s;
--layer_3_color_border: #%s;
--layer_4_color: #%s;
--layer_4_color_border: #%s;
--layer_1_color: %s;
--layer_1_color_border: %s;
--layer_1_text_color: %s;
--layer_2_color: %s;
--layer_2_color_border: %s;
--layer_3_color: %s;
--layer_3_color_border: %s;
--layer_4_color: %s;
--layer_4_color_border: %s;
--chart_1_color: #%s;
--chart_2_color: #%s;
--chart_3_color: #%s;
--chart_1_color: %s;
--chart_2_color: %s;
--chart_3_color: %s;
--shadow_color: #%s;
--shadow_color: %s;
}`,
s.Text.RGB(),
s.Link.RGB(),
s.Input.RGB(),
s.Input.Add(0, 0, -.02).RGB(),
s.InputText.RGB(),
s.InputDisabled.RGB(),
s.Highlight.RGB(),
s.Highlight.Add(0, 0, -.02).RGB(),
s.HighlightText.RGB(),
s.Danger.RGB(),
s.Danger.Add(0, 0, -.02).RGB(),
s.ScrollbarForeground.RGB(),
s.ScrollbarHover.RGB(),
s.Layer2.RGB(), // Scrollbar background
s.Layer1.RGB(),
s.Layer1.Add(0, 0, .05).RGB(),
s.Layer1Text.RGB(),
s.Layer2.RGB(),
s.Layer2.Add(0, 0, .05).RGB(),
s.Layer3.RGB(),
s.Layer3.Add(0, 0, .05).RGB(),
s.Layer4.RGB(),
s.Layer4.Add(0, 0, .05).RGB(),
s.Chart1.RGB(),
s.Chart2.RGB(),
s.Chart3.RGB(),
s.Shadow.RGB(),
s.Text.CSS(),
s.Link.CSS(),
s.Input.CSS(),
s.Input.Add(0, 0, -.02).CSS(),
s.InputText.CSS(),
s.InputDisabled.CSS(),
s.Highlight.CSS(),
s.Highlight.Add(0, 0, -.02).CSS(),
s.HighlightText.CSS(),
s.Danger.CSS(),
s.Danger.Add(0, 0, -.02).CSS(),
s.ScrollbarForeground.CSS(),
s.ScrollbarHover.CSS(),
s.Layer2.CSS(), // Scrollbar background
s.Layer1.CSS(),
s.Layer1.Add(0, 0, .05).CSS(),
s.Layer1Text.CSS(),
s.Layer2.CSS(),
s.Layer2.Add(0, 0, .05).CSS(),
s.Layer3.CSS(),
s.Layer3.Add(0, 0, .05).CSS(),
s.Layer4.CSS(),
s.Layer4.Add(0, 0, .05).CSS(),
s.Chart1.CSS(),
s.Chart2.CSS(),
s.Chart3.CSS(),
s.Shadow.CSS(),
)
}
@@ -180,8 +186,8 @@ func (s pixeldrainStyleSheet) Background(tpl *template.Template) template.URL {
} else if month == time.December && (day == 25 || day == 26 || day == 27) {
file = "checker_christmas"
} else {
file = "checker_ukraine"
// file = fmt.Sprintf("checker%d", now.UnixNano()%18)
// file = "checker_ukraine"
file = fmt.Sprintf("checker%d", now.UnixNano()%18)
}
if s.Light {
@@ -240,6 +246,9 @@ func (orig hsl) RGB() string {
return fmt.Sprintf("%02x%02x%02x", int(r*255), int(g*255), int(b*255))
}
func (orig hsl) CSS() string {
return "#" + orig.RGB()
}
// Add returns a NEW HSL struct, it doesn't modify the current one
func (h hsl) Add(hue int, saturation float64, lightness float64) hsl {
@@ -472,3 +481,19 @@ var snowstormPixeldrainStyle = pixeldrainStyleSheet{
Shadow: hsl{0, .0, .50},
Light: true,
}
var sweetPixeldrainStyle = pixeldrainStyleSheet{
Text: hsl{223, .13, .79}, // hsl(223, 13%, 79%)
Input: hsl{214, .26, .20}, // hsl(214, 26%, 12%)
InputText: hsl{223, .13, .79},
Highlight: hsl{296, .88, .44},
HighlightText: hsl{0, 0, 0},
Danger: hsl{356, 1, .64}, // hsl(356, 100%, 64%)
Layer1: hsl{225, .25, .06}, // hsl(225, 25%, 6%)
Layer2: hsl{228, .25, .12}, // hsl(228, 25%, 12%)
Layer3: hsl{229, .25, .14}, // hsl(229, 25%, 14%)
Layer4: hsl{229, .25, .18},
Shadow: hsl{0, 0, 0},
}