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

2
res/template/widgets.html
View File

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

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

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

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

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

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

@@ -18,7 +18,7 @@ onMount(() => {
{#if visible} {#if visible}
<div in:fade out:fade class="notice highlight_yellow"> <div in:fade out:fade class="notice highlight_yellow">
<div class="text"> <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: There are a number of ways you can help:
<a href="https://helpukrainewin.org/" rel="noreferrer" target="_blank">Click here for more information</a>. <a href="https://helpukrainewin.org/" rel="noreferrer" target="_blank">Click here for more information</a>.
</div> </div>

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

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

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

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

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

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

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

@@ -325,23 +325,23 @@ const share = () => {
</div> </div>
{#if state.base.type === "file"} {#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 <i class="icon">save</i> Download
</button> </button>
{/if} {/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 <i class="icon">save</i> DL all files
</button> </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 <i class="icon">content_copy</i> <u>C</u>opy Link
</button> </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 <i class="icon">share</i> Share
</button> </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 <i class="icon">help</i> Deta<u>i</u>ls
</button> </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 <i class="icon">edit</i> <u>E</u>dit
</button> </button>
</div></div></div> </div></div></div>
@@ -549,8 +549,9 @@ const share = () => {
height: auto; height: auto;
text-align: center; text-align: center;
} }
.toolbar_button{ .toolbar_button {
text-align: left; text-align: left;
width: calc(100% - 6px);
} }
.toolbar_label { .toolbar_label {
text-align: left; text-align: left;

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

@@ -82,6 +82,9 @@ const share_tumblr = () => {
border-bottom-left-radius: 16px; border-bottom-left-radius: 16px;
} }
.visible { left: 8em; } .visible { left: 8em; }
.button_full_width {
width: calc(100% - 6px);
}
.button_full_width > svg { .button_full_width > svg {
height: 3em; height: 3em;
width: 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"; import UploadWidget from "./UploadWidget.svelte";
</script> </script>
<header style="padding-bottom: 80px; padding-top: 80px;"> <header>
<picture> <div class="header_image_container"></div>
<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> </header>
<UploadWidget></UploadWidget> <UploadWidget></UploadWidget>
@@ -83,7 +80,7 @@ import UploadWidget from "./UploadWidget.svelte";
option if your files are accessed often. option if your files are accessed often.
</p> </p>
<div style="text-align: center;"> <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> </div>
<p> <p>
To use prepaid you need to register a pixeldrain account. After To use prepaid you need to register a pixeldrain account. After
@@ -93,9 +90,20 @@ import UploadWidget from "./UploadWidget.svelte";
</section> </section>
<style> <style>
.header_image{ .header_image_container {
width: 100%;
max-width: 800px;
margin: auto; 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> </style>

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

@@ -577,7 +577,7 @@ const keydown = (e) => {
line-height: 1em; line-height: 1em;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
background-color: var(--highlight_color); background: var(--highlight_color);
color: var(--highlight_text_color); color: var(--highlight_text_color);
border-radius: 30px; border-radius: 30px;
padding: 0.15em; 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")}}> <button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
Skeuos Skeuos
</button> </button>
<button class:button_highlight={theme==="sweet"} on:click={() => {set("sweet")}}>
Sweet
</button>
</div> </div>
<style> <style>

4
webcontroller/subscription_activate.go
View File

@@ -11,7 +11,7 @@ import (
func (wc *WebController) patreonLinkForm(td *TemplateData, r *http.Request) (f Form) { func (wc *WebController) patreonLinkForm(td *TemplateData, r *http.Request) (f Form) {
f.Name = "link_patreon_subscription" f.Name = "link_patreon_subscription"
f.Title = "Link Patreon pledge to pixeldrain account" f.Title = "Link Patreon pledge to pixeldrain account"
f.SubmitLabel = "Submit" f.SubmitLabel = "Activate subscription"
if r.FormValue("key") == "" { if r.FormValue("key") == "" {
f.Submitted = true f.Submitted = true
@@ -68,7 +68,7 @@ func (wc *WebController) patreonLinkForm(td *TemplateData, r *http.Request) (f F
Type: FieldTypeDescription, Type: FieldTypeDescription,
}, { }, {
Name: "8", 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 " + "to your pixeldrain account and you will be able to use " +
"pixeldrain's premium features. If you would like to update or " + "pixeldrain's premium features. If you would like to update or " +
"cancel your subscription later on you can do so through " + "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 s = nordPixeldrainStyle
case "snowstorm": case "snowstorm":
s = snowstormPixeldrainStyle s = snowstormPixeldrainStyle
case "sweet":
s = sweetPixeldrainStyle
case "default": case "default":
fallthrough // use default case fallthrough // use default case
default: default:
@@ -70,6 +72,10 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
return s return s
} }
type Colour interface {
CSS() string
}
type pixeldrainStyleSheet struct { type pixeldrainStyleSheet struct {
Text hsl Text hsl
Link hsl // Based on Highlight if undefined Link hsl // Based on Highlight if undefined
@@ -100,64 +106,64 @@ type pixeldrainStyleSheet struct {
func (s pixeldrainStyleSheet) String() string { func (s pixeldrainStyleSheet) String() string {
return fmt.Sprintf( return fmt.Sprintf(
`:root { `:root {
--text_color: #%s; --text_color: %s;
--link_color: #%s; --link_color: %s;
--input_color: #%s; --input_color: %s;
--input_color_dark: #%s; --input_color_dark: %s;
--input_text_color: #%s; --input_text_color: %s;
--input_disabled_color: #%s; --input_disabled_color: %s;
--highlight_color: #%s; --highlight_color: %s;
--highlight_color_dark: #%s; --highlight_color_dark: %s;
--highlight_text_color: #%s; --highlight_text_color: %s;
--danger_color: #%s; --danger_color: %s;
--danger_color_dark: #%s; --danger_color_dark: %s;
--scrollbar_foreground_color: #%s; --scrollbar_foreground_color: %s;
--scrollbar_hover_color: #%s; --scrollbar_hover_color: %s;
--scrollbar_background_color: #%s; --scrollbar_background_color: %s;
--layer_1_color: #%s; --layer_1_color: %s;
--layer_1_color_border: #%s; --layer_1_color_border: %s;
--layer_1_text_color: #%s; --layer_1_text_color: %s;
--layer_2_color: #%s; --layer_2_color: %s;
--layer_2_color_border: #%s; --layer_2_color_border: %s;
--layer_3_color: #%s; --layer_3_color: %s;
--layer_3_color_border: #%s; --layer_3_color_border: %s;
--layer_4_color: #%s; --layer_4_color: %s;
--layer_4_color_border: #%s; --layer_4_color_border: %s;
--chart_1_color: #%s; --chart_1_color: %s;
--chart_2_color: #%s; --chart_2_color: %s;
--chart_3_color: #%s; --chart_3_color: %s;
--shadow_color: #%s; --shadow_color: %s;
}`, }`,
s.Text.RGB(), s.Text.CSS(),
s.Link.RGB(), s.Link.CSS(),
s.Input.RGB(), s.Input.CSS(),
s.Input.Add(0, 0, -.02).RGB(), s.Input.Add(0, 0, -.02).CSS(),
s.InputText.RGB(), s.InputText.CSS(),
s.InputDisabled.RGB(), s.InputDisabled.CSS(),
s.Highlight.RGB(), s.Highlight.CSS(),
s.Highlight.Add(0, 0, -.02).RGB(), s.Highlight.Add(0, 0, -.02).CSS(),
s.HighlightText.RGB(), s.HighlightText.CSS(),
s.Danger.RGB(), s.Danger.CSS(),
s.Danger.Add(0, 0, -.02).RGB(), s.Danger.Add(0, 0, -.02).CSS(),
s.ScrollbarForeground.RGB(), s.ScrollbarForeground.CSS(),
s.ScrollbarHover.RGB(), s.ScrollbarHover.CSS(),
s.Layer2.RGB(), // Scrollbar background s.Layer2.CSS(), // Scrollbar background
s.Layer1.RGB(), s.Layer1.CSS(),
s.Layer1.Add(0, 0, .05).RGB(), s.Layer1.Add(0, 0, .05).CSS(),
s.Layer1Text.RGB(), s.Layer1Text.CSS(),
s.Layer2.RGB(), s.Layer2.CSS(),
s.Layer2.Add(0, 0, .05).RGB(), s.Layer2.Add(0, 0, .05).CSS(),
s.Layer3.RGB(), s.Layer3.CSS(),
s.Layer3.Add(0, 0, .05).RGB(), s.Layer3.Add(0, 0, .05).CSS(),
s.Layer4.RGB(), s.Layer4.CSS(),
s.Layer4.Add(0, 0, .05).RGB(), s.Layer4.Add(0, 0, .05).CSS(),
s.Chart1.RGB(), s.Chart1.CSS(),
s.Chart2.RGB(), s.Chart2.CSS(),
s.Chart3.RGB(), s.Chart3.CSS(),
s.Shadow.RGB(), 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) { } else if month == time.December && (day == 25 || day == 26 || day == 27) {
file = "checker_christmas" file = "checker_christmas"
} else { } else {
file = "checker_ukraine" // file = "checker_ukraine"
// file = fmt.Sprintf("checker%d", now.UnixNano()%18) file = fmt.Sprintf("checker%d", now.UnixNano()%18)
} }
if s.Light { 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)) 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 // Add returns a NEW HSL struct, it doesn't modify the current one
func (h hsl) Add(hue int, saturation float64, lightness float64) hsl { func (h hsl) Add(hue int, saturation float64, lightness float64) hsl {
@@ -472,3 +481,19 @@ var snowstormPixeldrainStyle = pixeldrainStyleSheet{
Shadow: hsl{0, .0, .50}, Shadow: hsl{0, .0, .50},
Light: true, 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},
}