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

Redesign tab bar and tune shadows

Browse Source
This commit is contained in:
Wim Brand
2021-09-23 20:38:17 +02:00
parent fb26f17fb8
commit cbdbac49d7
19 changed files with 184 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
res/include/script/file_viewer/Viewer.js
View File

@@ -95,6 +95,27 @@ function Viewer(type, viewToken, data) {
// Show introduction popup // Show introduction popup
new IntroPopup() new IntroPopup()
// Delete all the garbage that advertisers leave behind in my cookies and
// localstorage
// window.addEventListener("beforeunload", () => {
// document.cookie.split("; ").forEach(cookie => {
// let name = cookie.split("=")[0]
// if (name !== "pd_auth_key" && name !== "style") {
// document.cookie = name + "=; Max-Age=0; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax; path=/;"
// }
// })
// let keys = []
// for (let i = 0; i < localStorage.length; i++) {
// keys.push(localStorage.key(i))
// }
// keys.forEach(key => {
// if (key !== "viewer_intro_popup_dismissed" && key !== "uploaded_files") {
// localStorage.removeItem(key)
// }
// })
// })
this.initialized = true this.initialized = true
} }

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

@@ -89,7 +89,6 @@ body, .checkers {
background: var(--input_color); background: var(--input_color);
border-radius: 0; border-radius: 0;
border-bottom-right-radius: 90%; border-bottom-right-radius: 90%;
box-shadow: 2px 2px 8px -3px #000000;
box-shadow: 2px 2px 8px -3px var(--shadow_color); box-shadow: 2px 2px 8px -3px var(--shadow_color);
} }
.button_toggle_navigation:active { .button_toggle_navigation:active {
@@ -111,8 +110,7 @@ body, .checkers {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
text-align: left; text-align: left;
box-shadow: inset -10px 0px 10px -10px #000000; box-shadow: inset -8px 0px 8px -8px var(--shadow_color);
box-shadow: inset -10px 0px 10px -10px var(--shadow_color);
transition: left 0.5s; transition: left 0.5s;
} }
.page_body { .page_body {
@@ -148,8 +146,7 @@ body, .checkers {
padding: 0 0 20px 0; padding: 0 0 20px 0;
background-color: #212121; background-color: #212121;
background-color: var(--layer_2_color); background-color: var(--layer_2_color);
box-shadow: 1px 1px 20px 0 #000000; box-shadow: 1px 1px 12px 0 var(--shadow_color);
box-shadow: 1px 1px 20px 0 var(--shadow_color);
box-sizing: border-box; box-sizing: border-box;
clear: both; clear: both;
} }
@@ -207,6 +204,7 @@ body, .checkers {
.highlight_lighter, .highlight_lighter,
.highlight_green, .highlight_green,
.highlight_blue, .highlight_blue,
.highlight_yellow,
.highlight_red, .highlight_red,
.highlight_1, .highlight_1,
.highlight_2, .highlight_2,
@@ -222,27 +220,31 @@ body, .checkers {
} }
.highlight_dark, .highlight_1 { .highlight_dark, .highlight_1 {
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color); box-shadow: 1px 1px 6px -2px var(--shadow_color);
} }
.highlight_middle, .highlight_2 { .highlight_middle, .highlight_2 {
background-color: var(--layer_2_color); background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color); box-shadow: 1px 1px 6px -2px var(--shadow_color);
} }
.highlight_light, .highlight_3 { .highlight_light, .highlight_3 {
background-color: var(--layer_3_color); background-color: var(--layer_3_color);
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color); box-shadow: 1px 1px 6px -2px var(--shadow_color);
} }
.highlight_lighter, .highlight_4 { .highlight_lighter, .highlight_4 {
background-color: var(--layer_4_color); background-color: var(--layer_4_color);
box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color); box-shadow: 1px 1px 6px -2px var(--shadow_color);
} }
.highlight_green { .highlight_green {
background-color: rgba(0, 255, 0, 0.05); background-color: rgba(0, 255, 0, 0.05);
border-color: #00d000; border-color: #00D000;
} }
.highlight_blue { .highlight_blue {
background-color: rgba(32, 32, 255, 0.2); background-color: rgba(32, 32, 255, 0.2);
border-color: rgb(54, 54, 255); border-color: #3636FF;
}
.highlight_yellow {
background-color: rgba(255, 255, 0, 0.05);
border-color: #A0A000;
} }
.highlight_red { .highlight_red {
background-color: rgba(255, 0, 0, 0.1); background-color: rgba(255, 0, 0, 0.1);
@@ -251,6 +253,7 @@ body, .checkers {
.highlight_green, .highlight_green,
.highlight_blue, .highlight_blue,
.highlight_yellow,
.highlight_red { .highlight_red {
border-top-width: 1px; border-top-width: 1px;
border-top-style: solid; border-top-style: solid;
@@ -262,8 +265,7 @@ body, .checkers {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
line-height: 1em; line-height: 1em;
margin-left: 10px; margin: 0.5em 10px;
margin-right: 10px;
font-weight: normal; font-weight: normal;
} }
@@ -508,22 +510,26 @@ select:disabled , select.disabled {
.round { .round {
border-radius: 32px; border-radius: 32px;
} }
.tab {
margin: 0 0 10px 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.tab:last-child {
margin-right: 8px;
}
.tab_bar { .tab_bar {
display: block; display: block;
width: 100%; width: 100%;
margin: 0 0 16px 0;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
background-color: var(--layer_1_color);
box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
}
.tab_bar > button,
.tab_bar > .button {
margin: 10px 0 0 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.tab_bar > *:last-child {
margin-right: 10px;
} }
/* Dropdown list of the select tag */ /* Dropdown list of the select tag */

6
res/include/style/viewer.css
View File

@@ -161,7 +161,7 @@
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
float: left; float: left;
box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color); box-shadow: inset 1px 1px 5px var(--shadow_color);
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
border-radius: 16px; border-radius: 16px;
text-align: center; text-align: center;
@@ -211,7 +211,7 @@
} }
.pannable { cursor: move; } .pannable { cursor: move; }
.drop_shadow { box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color); } .drop_shadow { box-shadow: 1px 1px 5px var(--shadow_color); }
/* ======================== /* ========================
|| TOOLBAR COMPONENTS || || TOOLBAR COMPONENTS ||
@@ -317,7 +317,7 @@ table {width: auto !important;}
max-width: 80%; max-width: 80%;
height: auto; height: auto;
background-color: var(--layer_4_color); background-color: var(--layer_4_color);
box-shadow: 1px 1px var(--layer_4_shadow) var(--shadow_color); box-shadow: 1px 1px 10px var(--shadow_color);
border-radius: 20px; border-radius: 20px;
z-index: 50; z-index: 50;
transition: opacity .4s, left .5s, top .5s; transition: opacity .4s, left .5s, top .5s;

2
svelte/src/admin_panel.js
View File

@@ -1,4 +1,4 @@
import App from './admin_panel/AdminPanel.svelte'; import App from './admin_panel/Router.svelte';
const app = new App({ const app = new App({
target: document.getElementById("page_content"), target: document.getElementById("page_content"),

2
svelte/src/admin_panel/AbuseReporters.svelte
View File

@@ -153,7 +153,7 @@ onMount(get_reporters);
<td>{formatDate(reporter.last_used, true, true, false)}</td> <td>{formatDate(reporter.last_used, true, true, false)}</td>
<td>{formatDate(reporter.created, false, false, false)}</td> <td>{formatDate(reporter.created, false, false, false)}</td>
<td> <td>
<button on:click|preventDefault={() => {delete_reporter(reporter.email)}} class="button button_red"> <button on:click|preventDefault={() => {delete_reporter(reporter.email)}} class="button button_red round">
<i class="icon">delete</i> <i class="icon">delete</i>
</button> </button>
</td> </td>

124
svelte/src/admin_panel/Home.svelte
View File

@@ -155,42 +155,44 @@ onDestroy(() => {
</tr> </tr>
</table> </table>
<h3>Pixelstore peers</h3> <h3>Pixelstore peers</h3>
<table> <div class="table_scroll">
<thead> <table>
<tr> <thead>
<td>Address</td> <tr>
<td>Pos</td> <td>Address</td>
<td>Alive</td> <td>Pos</td>
<td>Err</td> <td>Alive</td>
<td>1m</td> <td>Err</td>
<td>5m</td> <td>1m</td>
<td>15m</td> <td>5m</td>
<td>Ping</td> <td>15m</td>
<td>Free</td> <td>Ping</td>
<td>Min free</td> <td>Free</td>
</tr> <td>Min free</td>
</thead> </tr>
<tbody> </thead>
{#each status.peers as peer} <tbody>
<tr class="peer_row" {#each status.peers as peer}
class:highlight_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable} <tr class="peer_row"
class:highlight_blue={peer.free_space < peer.min_free_space} class:highlight_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable}
class:highlight_green={peer.reachable} class:highlight_yellow={peer.free_space < peer.min_free_space}
> class:highlight_green={peer.reachable}
<td>{peer.address}</td> >
<td>{peer.position}</td> <td>{peer.address}</td>
<td>{peer.reachable}</td> <td>{peer.position}</td>
<td>{peer.unreachable_count}</td> <td>{peer.reachable}</td>
<td>{peer.load_1_min.toFixed(1)}</td> <td>{peer.unreachable_count}</td>
<td>{peer.load_5_min.toFixed(1)}</td> <td>{peer.load_1_min.toFixed(1)}</td>
<td>{peer.load_15_min.toFixed(1)}</td> <td>{peer.load_5_min.toFixed(1)}</td>
<td>{formatDuration(peer.latency, 3)}</td> <td>{peer.load_15_min.toFixed(1)}</td>
<td>{formatDataVolume(peer.free_space, 4)}</td> <td>{formatDuration(peer.latency, 3)}</td>
<td>{formatDataVolume(peer.min_free_space, 3)}</td> <td>{formatDataVolume(peer.free_space, 4)}</td>
</tr> <td>{formatDataVolume(peer.min_free_space, 3)}</td>
{/each} </tr>
</tbody> {/each}
</table> </tbody>
</table>
</div>
<h3>Pixelstore stats</h3> <h3>Pixelstore stats</h3>
<table> <table>
<thead> <thead>
@@ -236,32 +238,34 @@ onDestroy(() => {
</tbody> </tbody>
</table> </table>
<h3>Query statistics</h3> <h3>Query statistics</h3>
<table> <div class="table_scroll" style="text-align: left;">
<thead> <table>
<tr> <thead>
<td style="cursor: pointer;" on:click={() => { getStats('query_name') }}>Query</td>
<td style="cursor: pointer;" on:click={() => { getStats('calls') }}>Calls</td>
<td style="cursor: pointer;" on:click={() => { getStats('average_duration') }}>Average Duration</td>
<td style="cursor: pointer;" on:click={() => { getStats('total_duration') }}>Total Duration</td>
<td>Callers</td>
</tr>
</thead>
<tbody id="tstat_body">
{#each status.query_statistics as q}
<tr> <tr>
<td>{q.query_name}</td> <td style="cursor: pointer;" on:click={() => { getStats('query_name') }}>Query</td>
<td>{q.calls}</td> <td style="cursor: pointer;" on:click={() => { getStats('calls') }}>Calls</td>
<td>{formatDuration(q.average_duration, 3)}</td> <td style="cursor: pointer;" on:click={() => { getStats('average_duration') }}>Avg dur</td>
<td>{formatDuration(q.total_duration, 0)}</td> <td style="cursor: pointer;" on:click={() => { getStats('total_duration') }}>Total dur</td>
<td> <td>Callers</td>
{#each q.callers as caller}
{caller.count}x {caller.name}<br/>
{/each}
</td>
</tr> </tr>
{/each} </thead>
</tbody> <tbody id="tstat_body">
</table> {#each status.query_statistics as q}
<tr>
<td>{q.query_name}</td>
<td>{q.calls}</td>
<td>{q.average_duration}ms</td>
<td>{formatDuration(q.total_duration, 0)}</td>
<td>
{#each q.callers as caller}
{caller.count}x {caller.name}<br/>
{/each}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div> </div>
</div> </div>

13
svelte/src/admin_panel/AdminPanel.svelte → svelte/src/admin_panel/Router.svelte
View File

@@ -26,44 +26,43 @@ onMount(() => {
<div> <div>
<div class="tab_bar"> <div class="tab_bar">
<a class="button tab" <a class="button"
href="/admin" href="/admin"
class:button_highlight={page === "status"} class:button_highlight={page === "status"}
on:click|preventDefault={() => {navigate("status", "Status")}}> on:click|preventDefault={() => {navigate("status", "Status")}}>
<i class="icon">home</i> <i class="icon">home</i>
Status Status
</a> </a>
<a class="button tab" href="/admin/abuse"> <a class="button" href="/admin/abuse">
<i class="icon">block</i> <i class="icon">block</i>
Block files Block files
</a> </a>
<a class="button tab" <a class="button"
href="/admin/abuse_reports" href="/admin/abuse_reports"
class:button_highlight={page === "abuse_reports"} class:button_highlight={page === "abuse_reports"}
on:click|preventDefault={() => {navigate("abuse_reports", "Abuse reports")}}> on:click|preventDefault={() => {navigate("abuse_reports", "Abuse reports")}}>
<i class="icon">flag</i> <i class="icon">flag</i>
User abuse reports User abuse reports
</a> </a>
<a class="button tab" <a class="button"
href="/admin/abuse_reporters" href="/admin/abuse_reporters"
class:button_highlight={page === "abuse_reporters"} class:button_highlight={page === "abuse_reporters"}
on:click|preventDefault={() => {navigate("abuse_reporters", "Abuse reporters")}}> on:click|preventDefault={() => {navigate("abuse_reporters", "Abuse reporters")}}>
<i class="icon">report</i> <i class="icon">report</i>
E-mail abuse reporters E-mail abuse reporters
</a> </a>
<a class="button tab" <a class="button"
href="/admin/ip_bans" href="/admin/ip_bans"
class:button_highlight={page === "ip_bans"} class:button_highlight={page === "ip_bans"}
on:click|preventDefault={() => {navigate("ip_bans", "IP bans")}}> on:click|preventDefault={() => {navigate("ip_bans", "IP bans")}}>
<i class="icon">remove_circle</i> <i class="icon">remove_circle</i>
IP bans IP bans
</a> </a>
<a class="button tab" href="/admin/globals"> <a class="button" href="/admin/globals">
<i class="icon">edit</i> <i class="icon">edit</i>
Update global settings Update global settings
</a> </a>
</div> </div>
<hr/>
{#if page === "status"} {#if page === "status"}
<Home></Home> <Home></Home>

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

@@ -73,7 +73,7 @@ const share_tumblr = () => {
overflow-x: hidden; overflow-x: hidden;
float: left; float: left;
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color); box-shadow: inset 1px 1px 5px var(--shadow_color);
text-align: center; text-align: center;
z-index: 48; z-index: 48;
overflow: hidden; overflow: hidden;

2
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -236,7 +236,7 @@ const toggle_select = () => {
margin: 16px 0 16px 0; margin: 16px 0 16px 0;
text-align: left; text-align: left;
background-color: var(--layer_2_color); background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color); box-shadow: 1px 1px 5px var(--shadow_color);
box-sizing: border-box; box-sizing: border-box;
border-collapse: collapse; border-collapse: collapse;
} }

2
svelte/src/filesystem/filemanager/FileUploader.svelte
View File

@@ -197,7 +197,7 @@ const paste = (e) => {
margin: 6px 0 0 0; margin: 6px 0 0 0;
padding: 0; padding: 0;
background-color: var(--layer_2_color); background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color); box-shadow: 1px 1px 5px var(--shadow_color);
} }
.upload_progress_bar { .upload_progress_bar {

2
svelte/src/filesystem/viewers/Image.svelte
View File

@@ -76,7 +76,7 @@ const mouseup = (e) => {
top: 50%; top: 50%;
cursor: pointer; cursor: pointer;
transform: translateY(-50%); transform: translateY(-50%);
box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color); box-shadow: 1px 1px 5px var(--shadow_color);
} }
.image.zoom { .image.zoom {
max-width: none; max-width: none;

2
svelte/src/filesystem/viewers/Video.svelte
View File

@@ -63,6 +63,6 @@ onMount(() => {
max-height: 100%; max-height: 100%;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color); box-shadow: 1px 1px 5px var(--shadow_color);
} }
</style> </style>

2
svelte/src/user_buckets/UserBucket.svelte
View File

@@ -73,7 +73,7 @@ const delete_bucket = async () => {
text-decoration: none; text-decoration: none;
background-color: var(--layer_3_color); background-color: var(--layer_3_color);
transition: box-shadow 0.5s; transition: box-shadow 0.5s;
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color); box-shadow: 1px 1px 5px 0 var(--shadow_color);
margin: 1em 0; margin: 1em 0;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;

2
svelte/src/user_home/APIKeys.svelte
View File

@@ -84,7 +84,7 @@ const logout = async (key) => {
{/if} {/if}
<div class="limit_width"> <div class="limit_width">
{#if !loaded} {#if !loaded}
<div class="highlight_blue"> <div class="highlight_yellow">
<h2>Warning</h2> <h2>Warning</h2>
<p> <p>
API keys are sensitive information. They can be used to gain API keys are sensitive information. They can be used to gain

2
svelte/src/user_home/Home.svelte
View File

@@ -183,7 +183,7 @@ onDestroy(() => {
refresh the page. refresh the page.
</p> </p>
</div> </div>
<div class="highlight_dark"> <div class="highlight_light">
<button <button
on:click={() => { update_graphs(1440, 1, true) }} on:click={() => { update_graphs(1440, 1, true) }}
class:button_highlight={graph_timespan == 1440}> class:button_highlight={graph_timespan == 1440}>

7
svelte/src/user_home/Router.svelte
View File

@@ -25,21 +25,21 @@ onMount(() => {
<div> <div>
<div class="tab_bar"> <div class="tab_bar">
<a class="button tab" <a class="button"
href="/user" href="/user"
class:button_highlight={page === ""} class:button_highlight={page === ""}
on:click|preventDefault={() => {navigate("", "My home")}}> on:click|preventDefault={() => {navigate("", "My home")}}>
<i class="icon">home</i> <i class="icon">home</i>
My home My home
</a> </a>
<a class="button tab" <a class="button"
href="/user/settings" href="/user/settings"
class:button_highlight={page === "settings"} class:button_highlight={page === "settings"}
on:click|preventDefault={() => {navigate("settings", "Account settings")}}> on:click|preventDefault={() => {navigate("settings", "Account settings")}}>
<i class="icon">settings</i> <i class="icon">settings</i>
Account settings Account settings
</a> </a>
<a class="button tab" <a class="button"
href="/user/api_keys" href="/user/api_keys"
class:button_highlight={page === "api_keys"} class:button_highlight={page === "api_keys"}
on:click|preventDefault={() => {navigate("api_keys", "API keys")}}> on:click|preventDefault={() => {navigate("api_keys", "API keys")}}>
@@ -47,7 +47,6 @@ onMount(() => {
API keys API keys
</a> </a>
</div> </div>
<hr/>
{#if page === ""} {#if page === ""}
<Home></Home> <Home></Home>

2
svelte/src/util/Expandable.svelte
View File

@@ -29,7 +29,7 @@ export const toggle = () => {
text-decoration: none; text-decoration: none;
background-color: var(--layer_3_color); background-color: var(--layer_3_color);
transition: box-shadow 0.5s; transition: box-shadow 0.5s;
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color); box-shadow: 1px 1px 6px -2px var(--shadow_color);
margin: 1em 0; margin: 1em 0;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;

16
webcontroller/file_viewer.go
View File

@@ -88,12 +88,12 @@ func (vd *viewerData) adType(files []pixelapi.ListFile) {
if nudity { if nudity {
// Brave and a-ads don't care about nudity. I'm not sure about ads.plus // Brave and a-ads don't care about nudity. I'm not sure about ads.plus
switch i := rand.Intn(5); i { switch i := rand.Intn(10); i {
case 0: case 0, 1, 2, 3:
vd.AdBannerType = brave vd.AdBannerType = brave
case 1: case 4, 5, 6, 7:
vd.AdBannerType = adsPlus vd.AdBannerType = adsPlus
case 2, 3, 4: case 8, 9:
vd.AdBannerType = aAds vd.AdBannerType = aAds
default: default:
panic(fmt.Errorf("random number generator returned unrecognised number: %d", i)) panic(fmt.Errorf("random number generator returned unrecognised number: %d", i))
@@ -102,13 +102,11 @@ func (vd *viewerData) adType(files []pixelapi.ListFile) {
// PixFuture does not allow nudity, so that's what we'll show on all // PixFuture does not allow nudity, so that's what we'll show on all
// files which are safe // files which are safe
switch i := rand.Intn(10); i { switch i := rand.Intn(10); i {
case 0: case 0, 1:
vd.AdBannerType = brave vd.AdBannerType = brave
case 1: case 2, 3, 4:
vd.AdBannerType = aAds
case 2, 3, 4, 5:
vd.AdBannerType = adsPlus vd.AdBannerType = adsPlus
case 6, 7, 8, 9: case 5, 6, 7, 8, 9:
vd.AdBannerType = pixFuture vd.AdBannerType = pixFuture
default: default:
panic(fmt.Errorf("random number generator returned unrecognised number: %d", i)) panic(fmt.Errorf("random number generator returned unrecognised number: %d", i))

130
webcontroller/user_style.go
View File

@@ -49,14 +49,10 @@ type pixeldrainStyleSheet struct {
ScrollbarHoverColor hsl ScrollbarHoverColor hsl
ScrollbarBackgroundColor hsl ScrollbarBackgroundColor hsl
Layer1Color hsl // Deepest and darkest layer Layer1Color hsl // Deepest and darkest layer
Layer1Shadow int // Deep layers have little shadow Layer2Color hsl
Layer2Color hsl Layer3Color hsl
Layer2Shadow int Layer4Color hsl // Highest and brightest layer
Layer3Color hsl
Layer3Shadow int
Layer4Color hsl // Highest and brightest layer
Layer4Shadow int // High layers have lots of shadow
ShadowColor hsl ShadowColor hsl
} }
@@ -79,16 +75,12 @@ func (s pixeldrainStyleSheet) String() string {
--layer_1_color: #%s; --layer_1_color: #%s;
--layer_1_color_border: #%s; --layer_1_color_border: #%s;
--layer_1_shadow: %s;
--layer_2_color: #%s; --layer_2_color: #%s;
--layer_2_color_border: #%s; --layer_2_color_border: #%s;
--layer_2_shadow: %s;
--layer_3_color: #%s; --layer_3_color: #%s;
--layer_3_color_border: #%s; --layer_3_color_border: #%s;
--layer_3_shadow: %s;
--layer_4_color: #%s; --layer_4_color: #%s;
--layer_4_color_border: #%s; --layer_4_color_border: #%s;
--layer_4_shadow: %s;
--shadow_color: #%s; --shadow_color: #%s;
}`, }`,
@@ -106,16 +98,12 @@ func (s pixeldrainStyleSheet) String() string {
s.ScrollbarBackgroundColor.RGB(), s.ScrollbarBackgroundColor.RGB(),
s.Layer1Color.RGB(), s.Layer1Color.RGB(),
s.Layer1Color.add(0, 0, .05).RGB(), s.Layer1Color.add(0, 0, .05).RGB(),
fmt.Sprintf("%dpx", s.Layer1Shadow),
s.Layer2Color.RGB(), s.Layer2Color.RGB(),
s.Layer2Color.add(0, 0, .05).RGB(), s.Layer2Color.add(0, 0, .05).RGB(),
fmt.Sprintf("%dpx", s.Layer2Shadow),
s.Layer3Color.RGB(), s.Layer3Color.RGB(),
s.Layer3Color.add(0, 0, .05).RGB(), s.Layer3Color.add(0, 0, .05).RGB(),
fmt.Sprintf("%dpx", s.Layer3Shadow),
s.Layer4Color.RGB(), s.Layer4Color.RGB(),
s.Layer4Color.add(0, 0, .05).RGB(), s.Layer4Color.add(0, 0, .05).RGB(),
fmt.Sprintf("%dpx", s.Layer4Shadow),
s.ShadowColor.RGB(), s.ShadowColor.RGB(),
) )
} }
@@ -217,21 +205,17 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{266, .85, .50}, ScrollbarHoverColor: hsl{266, .85, .50},
ScrollbarBackgroundColor: hsl{275, .75, .06}, ScrollbarBackgroundColor: hsl{275, .75, .06},
Layer1Color: hsl{275, .8, .06}, Layer1Color: hsl{275, .8, .07},
Layer1Shadow: 3, Layer2Color: hsl{275, .75, .12},
Layer2Color: hsl{275, .75, .11}, Layer3Color: hsl{275, .7, .18},
Layer2Shadow: 5, Layer4Color: hsl{275, .65, .24},
Layer3Color: hsl{275, .7, .18},
Layer3Shadow: 7,
Layer4Color: hsl{275, .65, .24},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
var pixeldrainClassicStyle = pixeldrainStyleSheet{ var pixeldrainClassicStyle = pixeldrainStyleSheet{
TextColor: hsl{0, 0, .8}, TextColor: hsl{0, 0, .8},
InputColor: hsl{0, 0, .2}, InputColor: hsl{0, 0, .25},
InputTextColor: hsl{0, 0, 1}, InputTextColor: hsl{0, 0, 1},
HighlightColor: hsl{89, .60, .45}, HighlightColor: hsl{89, .60, .45},
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
@@ -240,14 +224,10 @@ var pixeldrainClassicStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{0, 0, .45}, ScrollbarHoverColor: hsl{0, 0, .45},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
Layer1Color: hsl{0, 0, .08}, Layer1Color: hsl{0, 0, .08},
Layer1Shadow: 3, Layer2Color: hsl{0, 0, .11},
Layer2Color: hsl{0, 0, .11}, Layer3Color: hsl{0, 0, .15},
Layer2Shadow: 5, Layer4Color: hsl{0, 0, .18},
Layer3Color: hsl{0, 0, .15},
Layer3Shadow: 7,
Layer4Color: hsl{0, 0, .18},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -263,14 +243,12 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{0, 0, .40}, ScrollbarHoverColor: hsl{0, 0, .40},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
Layer1Color: hsl{0, 0, .98}, // hsl(0, 0%, 13%) Layer1Color: hsl{0, 0, .98}, // hsl(0, 0%, 13%)
Layer1Shadow: 3, Layer2Color: hsl{0, 1, 1},
Layer2Color: hsl{0, 1, 1}, Layer3Color: hsl{0, 1, 1},
Layer2Shadow: 5, Layer4Color: hsl{0, 1, 1},
Layer3Color: hsl{0, 1, 1},
Layer3Shadow: 6,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0.5},
} }
var solarizedDarkStyle = pixeldrainStyleSheet{ var solarizedDarkStyle = pixeldrainStyleSheet{
@@ -284,14 +262,10 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{192, .95, .40}, ScrollbarHoverColor: hsl{192, .95, .40},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
Layer1Color: hsl{192, .87, .09}, Layer1Color: hsl{192, .87, .09},
Layer1Shadow: 3, Layer2Color: hsl{192, .81, .14},
Layer2Color: hsl{192, .81, .14}, Layer3Color: hsl{192, .95, .17},
Layer2Shadow: 5, Layer4Color: hsl{192, .99, .19},
Layer3Color: hsl{192, .95, .17},
Layer3Shadow: 7,
Layer4Color: hsl{192, .99, .19},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -307,14 +281,10 @@ var maroonStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{0, .75, .4}, ScrollbarHoverColor: hsl{0, .75, .4},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
Layer1Color: hsl{0, .5, .05}, Layer1Color: hsl{0, .5, .05},
Layer1Shadow: 3, Layer2Color: hsl{0, .6, .08}, // hsl{0, .8, .15},
Layer2Color: hsl{0, .6, .08}, // hsl{0, .8, .15}, Layer3Color: hsl{0, .9, .14},
Layer2Shadow: 5, Layer4Color: hsl{0, .9, .20},
Layer3Color: hsl{0, .9, .14},
Layer3Shadow: 7,
Layer4Color: hsl{0, .9, .20},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -330,14 +300,10 @@ var hackerStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{120, .5, .35}, ScrollbarHoverColor: hsl{120, .5, .35},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
Layer1Color: hsl{0, 0, 0}, Layer1Color: hsl{0, 0, 0},
Layer1Shadow: 3, Layer2Color: hsl{0, 0, .03},
Layer2Color: hsl{0, 0, .03}, Layer3Color: hsl{120, .3, .08},
Layer2Shadow: 5, Layer4Color: hsl{120, .5, .12},
Layer3Color: hsl{120, .3, .08},
Layer3Shadow: 7,
Layer4Color: hsl{120, .5, .12},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -353,14 +319,10 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{204, .05, .88}, ScrollbarHoverColor: hsl{204, .05, .88},
ScrollbarBackgroundColor: hsl{200, .13, .27}, // hsl(200, 13%, 27%) ScrollbarBackgroundColor: hsl{200, .13, .27}, // hsl(200, 13%, 27%)
Layer1Color: hsl{180, .04, .16}, Layer1Color: hsl{180, .04, .16},
Layer1Shadow: 3, Layer2Color: hsl{168, .05, .21},
Layer2Color: hsl{168, .05, .21}, Layer3Color: hsl{170, .05, .26},
Layer2Shadow: 5, Layer4Color: hsl{163, .04, .31},
Layer3Color: hsl{170, .05, .26},
Layer3Shadow: 6,
Layer4Color: hsl{163, .04, .31},
Layer4Shadow: 7,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -376,14 +338,10 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{222, .08, .54}, // hsl(222, 8%, 44%) ScrollbarHoverColor: hsl{222, .08, .54}, // hsl(222, 8%, 44%)
ScrollbarBackgroundColor: hsl{223, .12, .2}, // hsl(223, 12%, 29%) ScrollbarBackgroundColor: hsl{223, .12, .2}, // hsl(223, 12%, 29%)
Layer1Color: hsl{215, .17, .19}, Layer1Color: hsl{215, .17, .19},
Layer1Shadow: 3, Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%)
Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%) Layer3Color: hsl{223, .12, .29},
Layer2Shadow: 5, Layer4Color: hsl{223, .10, .32},
Layer3Color: hsl{223, .12, .29},
Layer3Shadow: 7,
Layer4Color: hsl{223, .10, .32},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -399,14 +357,10 @@ var deepseaPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{12, .38, .26}, // hsl(12, 38%, 26%) ScrollbarHoverColor: hsl{12, .38, .26}, // hsl(12, 38%, 26%)
ScrollbarBackgroundColor: hsl{0, 0, .11}, // hsl(0, 0%, 11%) ScrollbarBackgroundColor: hsl{0, 0, .11}, // hsl(0, 0%, 11%)
Layer1Color: hsl{160, .27, .05}, Layer1Color: hsl{160, .27, .05},
Layer1Shadow: 3, Layer2Color: hsl{163, .26, .09}, // hsl(163, 26%, 11%)
Layer2Color: hsl{163, .26, .09}, // hsl(163, 26%, 11%) Layer3Color: hsl{161, .28, .12}, // hsl(161, 28%, 14%)
Layer2Shadow: 5, Layer4Color: hsl{161, .32, .15},
Layer3Color: hsl{161, .28, .12}, // hsl(161, 28%, 14%)
Layer3Shadow: 7,
Layer4Color: hsl{161, .32, .15},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }