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

Start of new menu

Browse Source
This commit is contained in:
Wim Brand
2019-09-16 23:50:57 +02:00
parent 09509367aa
commit b1107236cd
11 changed files with 303 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
res/static/style/layout.css
View File

@@ -56,11 +56,10 @@ html{height: 100%;}
body{ body{
background-color: #0d0d0d; /* Fallback */ background-color: #0d0d0d; /* Fallback */
background-color: var(--background_color); background-color: var(--body_color);
background-repeat: repeat; background-repeat: repeat;
font-family: 'Ubuntu'; font-family: 'Ubuntu';
margin: 0; margin: 0;
text-align: center; /* Center the header and body */
line-height: 1.5em; line-height: 1.5em;
overflow-x: hidden; overflow-x: hidden;
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
@@ -71,45 +70,111 @@ body{
/* Page layout elements */ /* Page layout elements */
.header_image{ .page_wrapper {
width: 100%; position: absolute;
max-width: 1000px; display: flex;
margin-top: 15px; flex-direction: column;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.page_wrapper > .page_header {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
line-height: 2em;
z-index: 101;
}
.page_wrapper > .page_header > span {
margin: 0 0.5em 0 0.5em;
}
.page_wrapper > .page_content_wrapper {
flex-grow: 1;
flex-shrink: 1;
position: relative;
display: inline-block;
width: auto;
height: auto;
margin: 0;
} }
.body{ .page_wrapper > .page_content_wrapper > .page_navigation {
position: absolute;
width: 200px;
z-index: 100;
float: left;
background-color: var(--layer_1_color);
left: 0;
bottom: 0;
top: 0;
padding: 0.5em 0 0.5em 0;
text-align: left;
box-shadow: 2px 2px 8px var(--shadow_color);
transition: left 0.5s;
}
.page_wrapper > .page_content_wrapper > .page_content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 200px;
min-width: 300px;
display: inline-block;
text-align: center; /* Center the header and body */
overflow-y: scroll;
z-index: 50;
transition: left 0.5s;
}
@media (max-width: 500px) {
.page_wrapper > .page_content_wrapper > .page_navigation {
left: -210px;
}
.page_wrapper > .page_content_wrapper > .page_content {
left: 0;
}
}
.page_wrapper > .page_content_wrapper > .page_content > .centered {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 1000px; max-width: 1000px;
min-width: 300px;
width: 100%; width: 100%;
height: auto; height: auto;
padding: 0; padding: 0;
margin: 30px 0 30px 0;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--body_color);
text-align: left; text-align: left;
box-shadow: #000000 0 0 10px, 5px;
box-shadow: var(--shadow_color) 0 0 var(--shadow_spread) var(--shadow_intensity);
z-index: 1;
word-break: break-word; word-break: break-word;
clear: both;
} }
.navigation a { /* Page contents */
.header_image{
width: 100%;
max-width: 1000px;
margin-top: 30px;
margin-bottom: 30px;
}
.page_wrapper > .page_content_wrapper > .page_navigation a {
float: none; float: none;
display: inline-block; display: inline-block;
box-sizing: border-box;
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
color: var(--text_color); color: var(--text_color);
text-align: center; text-align: center;
padding: 4px 6px; padding: 4px 6px;
margin: 0 4px; margin: 0.1em 0 0.1em 0;
width: 100%;
text-decoration: none; text-decoration: none;
font-family: "Lato Thin", sans-serif; font-family: "Lato Thin", sans-serif;
font-weight: bold; font-weight: bold;
font-size: 1.8em; font-size: 1.8em;
transition: box-shadow 5s; transition: box-shadow 5s;
} }
.navigation a:hover { .page_wrapper > .page_content_wrapper > .page_navigation a:hover {
background: linear-gradient(#82c13e, #6da234); background: linear-gradient(#82c13e, #6da234);
background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)); background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));
box-shadow: #82c13e, 1px 1px 4px #000000; box-shadow: #82c13e, 1px 1px 4px #000000;
@@ -119,7 +184,7 @@ body{
transition: box-shadow 0.5s; transition: box-shadow 0.5s;
text-decoration: none; text-decoration: none;
} }
.navigation .icon { .page_wrapper > .page_content_wrapper > .page_navigation .icon {
display: none; display: none;
} }
@media screen and (max-width: 35em) { @media screen and (max-width: 35em) {
@@ -141,10 +206,17 @@ body{
} }
} }
.highlight_headerbar, .inset {
box-shadow: inset 1px 1px 10px -1px var(--shadow_color);
}
.checkers {
text-shadow: 0 0 20px #000000;
}
.highlight_dark, .highlight_dark,
.highlight_middle, .highlight_middle,
.highlight_light, .highlight_light,
.highlight_headerbar,
.highlight_green, .highlight_green,
.highlight_blue, .highlight_blue,
.highlight_red { .highlight_red {
@@ -156,20 +228,19 @@ body{
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
padding: .5em; padding: .5em;
z-index: 101;
} }
.highlight_headerbar {
background-color: var(--accent_color_headerbar);
box-shadow: 1px 1px 3px -1px var(--shadow_color);}
.highlight_dark { .highlight_dark {
background-color: var(--accent_color_dark); background-color: var(--layer_1_color);
box-shadow: inset 1px 1px 8px -1px var(--shadow_color);} box-shadow: 1px 1px var(--layer_1_shadow) -2px var(--shadow_color);}
.highlight_middle { .highlight_middle {
background-color: var(--accent_color_medium); background-color: var(--layer_2_color);
box-shadow: inset 1px 1px 6px -1px var(--shadow_color);} box-shadow: 1px 1px var(--layer_2_shadow) -2px var(--shadow_color);}
.highlight_light { .highlight_light {
background-color: var(--accent_color_light); background-color: var(--layer_3_color);
box-shadow: 1px 1px 4px var(--shadow_color);} box-shadow: 1px 1px var(--layer_3_shadow) -2px var(--shadow_color);}
.highlight_headerbar {
background-color: var(--layer_4_color);
box-shadow: 1px 1px var(--layer_4_shadow) -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;}
@@ -202,7 +273,7 @@ h3{font-size: 1.5em; font-family: "Lato Thin";}
h4{font-size: 1.25em; font-family: "Lato";} h4{font-size: 1.25em; font-family: "Lato";}
h5{font-size: 1em; font-family: "Lato";} h5{font-size: 1em; font-family: "Lato";}
h6{font-size: .75em; font-family: "Lato";} h6{font-size: .75em; font-family: "Lato";}
h3, h2{border-bottom: 1px var(--accent_color_light_border) solid;} /* Differentiate it a bit, else it just looks like bold text */ h3, h2{border-bottom: 1px var(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
p, .indent { p, .indent {
margin: 10px; margin: 10px;
@@ -211,7 +282,7 @@ p, .indent {
hr{ hr{
height: 8px; height: 8px;
border: none; border: none;
background: linear-gradient(var(--accent_color_dark), var(--accent_color_light)); background: linear-gradient(var(--layer_1_color), var(--layer_3_color));
margin: 16px 0 16px 0; margin: 16px 0 16px 0;
} }
@@ -239,7 +310,7 @@ a:hover {color: var(--highlight_color); text-decoration: underline;}
max-width: 35em; max-width: 35em;
} }
table:not(.form) {border-collapse: collapse; width: 100%;} table:not(.form) {border-collapse: collapse; width: 100%;}
tr:not(.form) {border-bottom: 1px var(--accent_color_medium_border) solid;} tr:not(.form) {border-bottom: 1px var(--layer_2_color_border) solid;}
tr > td {padding: 0.5em;} tr > td {padding: 0.5em;}
@media(max-width: 30em) { @media(max-width: 30em) {
tr > td { tr > td {
@@ -252,7 +323,7 @@ tr > td {padding: 0.5em;}
pre{ pre{
padding: 2px; padding: 2px;
border-bottom: 1px var(--accent_color_medium_border) solid; border-bottom: 1px var(--layer_2_color_border) solid;
overflow-x: scroll; overflow-x: scroll;
} }

8
res/static/style/viewer.css
View File

@@ -49,7 +49,7 @@
position: relative; position: relative;
display: none; /* Becomes visible if the page is a list */ display: none; /* Becomes visible if the page is a list */
width: 100%; width: 100%;
background-color: var(--accent_color_dark); background-color: var(--layer_1_color);
box-shadow: 0 0 8px var(--shadow_color); box-shadow: 0 0 8px var(--shadow_color);
text-align: center; text-align: center;
line-height: 1em; line-height: 1em;
@@ -95,7 +95,7 @@
z-index: 49; z-index: 49;
overflow: hidden; overflow: hidden;
float: left; float: left;
background-color: var(--accent_color_dark); background-color: var(--layer_1_color);
left: -9em; left: -9em;
bottom: 0; bottom: 0;
top: 0; top: 0;
@@ -113,7 +113,7 @@
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
float: left; float: left;
background-color: var(--accent_color_dark); background-color: var(--layer_1_color);
box-shadow: 2px 2px 8px var(--shadow_color); box-shadow: 2px 2px 8px var(--shadow_color);
text-align: center; text-align: center;
z-index: 48; z-index: 48;
@@ -245,7 +245,7 @@
opacity: 0; opacity: 0;
transition: visibility .5s, opacity .5s; transition: visibility .5s, opacity .5s;
background-color: var(--body_color); background-color: var(--body_color);
border-color: var(--accent_color_dark_border); border-color: var(--layer_1_color_border);
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
top: 20%; top: 20%;

9
res/template/account/user_files.html
View File

@@ -7,12 +7,15 @@
</head> </head>
<body> <body>
{{template "menu" .}} {{template "page_top" .}}
<div class="highlight_middle"> <br/>
<div class="centered">
These files were uploaded while logged in to your pixeldrain account, These files were uploaded while logged in to your pixeldrain account,
<a href="/history">click here</a> to view files uploaded anonymously <a href="/history">click here</a> to view files uploaded anonymously
in this browser. in this browser.
</div> </div>
<br/>
<br/>
{{$limit := 200}} {{$limit := 200}}
{{$page := .URLQuery.Get "page" | pageNr}} {{$page := .URLQuery.Get "page" | pageNr}}
@@ -56,6 +59,8 @@
{{end}} {{end}}
</div> </div>
{{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

13
res/template/account/user_home.html
View File

@@ -7,10 +7,13 @@
</head> </head>
<body> <body>
<div id='body' class="body"> {{template "page_top" .}}
{{template "menu" .}}
<h1 class="highlight_middle">Welcome home, {{.Username}}!</h1> <div class="checkers inset highlight_dark">
<h1>Welcome home, {{.Username}}!</h1>
</div>
<div class="centered">
<h2>Actions</h2> <h2>Actions</h2>
<ul> <ul>
@@ -47,8 +50,10 @@
<br/> <br/>
<a href="/user/lists" class="button">...All my lists</a> <a href="/user/lists" class="button">...All my lists</a>
</div> </div>
{{template "footer"}}
</div> </div>
{{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

2
res/template/fragments/bgpattern.html
View File

@@ -1,3 +1,3 @@
{{define "bgpattern"}} {{define "bgpattern"}}
<style>body, .checkers{background-image: url("/res/img/{{bgPattern}}");}</style> <style>.checkers{background-image: url("/res/img/{{bgPattern}}");}</style>
{{end}} {{end}}

9
res/template/fragments/footer.html
View File

@@ -1,9 +0,0 @@
{{define "footer"}}
<br/>
<div class="highlight_dark">
Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
</div>
{{end}}

24
res/template/fragments/menu.html
View File

@@ -1,24 +0,0 @@
{{define "menu"}}
<div id="navigation" class="highlight_headerbar navigation">
<a href="/">Home</a>
<a href="{{if .Authenticated}}/user/files{{else}}/history{{end}}">My&nbsp;Files</a>
{{if .Authenticated}}<a href="/user/lists">My&nbsp;Lists</a>{{end}}
<a href="/api">API</a>
{{if .Authenticated}}<a href="/user">{{.Username}}</a>
<a href="/logout" style="vertical-align: 0.6em; font-size: 0.9em; padding: 1px;">(Log out)</a>{{else}}
<a href="/login">Login</a>
<a href="/register">Register</a>
{{end}}
<a href="javascript:void(0);" class="icon" onclick="expandNavigation()">&#9776;</a>
<script>
function expandNavigation() {
var x = document.getElementById("navigation");
if (!x.className.includes("responsive")) {
x.className += " responsive";
} else {
x.className = x.className.replace(" responsive", "");
}
}
</script>
</div>
{{end}}

56
res/template/fragments/page_wrap.html Normal file
View File

@@ -0,0 +1,56 @@
{{define "page_top"}}
<div id="page_wrapper" class="page_wrapper">
<div id="page_header" class="page_header highlight_headerbar navigation">
<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="toggleMenu();">☰</button>
<span>Pixeldrain ~ Free file sharing</span>
</div>
<div id="page_content_wrapper" class="page_content_wrapper">
<div id="page_navigation" class="page_navigation">
<a href="/">Home</a>
<hr/>
{{if .Authenticated}}<a href="/user">{{.Username}}</a>
<a href="{{if .Authenticated}}/user/files{{else}}/history{{end}}">My&nbsp;Files</a>
{{if .Authenticated}}<a href="/user/lists">My&nbsp;Lists</a>{{end}}
<a href="/logout" style="vertical-align: 0.6em; font-size: 0.9em; padding: 1px;">(Log out)</a>{{else}}
<a href="/login">Login</a>
<a href="/register">Register</a>
{{end}}
<hr/>
<a href="/api">API</a>
</div>
<div id="page_content" class="page_content">
{{end}}
{{define "page_bottom"}}
<br/>
<div class="checkers inset" style="height: 100px;"></div>
<div class="highlight_dark">
Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
</div>
</div><!-- end page_content -->
</div><!-- end page_content_wrapper -->
</div><!-- end page_wrapper-->
<script>
var nav = document.getElementById("page_navigation");
var content = document.getElementById("page_content");
function toggleMenu() {
if (nav.offsetLeft === 0) {
// Menu is visible
nav.style.left = -nav.clientWidth - 10 + "px";
content.style.left = "0";
} else {
// Menu is hidden
nav.style.left = "0";
content.style.left = nav.clientWidth + "px";
}
}
</script>
{{end}}

41
res/template/home.html
View File

@@ -6,27 +6,30 @@
{{template "user_style" .}} {{template "user_style" .}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script> <script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
</head> </head>
<body> <body>
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/> {{template "page_top" .}}
<div class="checkers highlight_dark">
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
</div>
<br/> <br/>
<div id="body" class="body"> <input id="file_input_field" type="file" name="file" multiple="multiple"/>
{{template "menu" .}} <button id="select_file_button" class="big_button button_highlight">Upload Files</button>
<div class="highlight_middle"> <button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button>
<input id="file_input_field" type="file" name="file" multiple="multiple"/> <br/><br/>
<button id="select_file_button" class="big_button button_highlight">Upload Files</button>
<button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>
By uploading files to Pixeldrain you accept that a cookie will
be placed in your web browser. More information below.
<div id="uploads_queue"></div> By uploading files to Pixeldrain you accept that a cookie will be
</div> placed in your web browser. More information below.
<div class="highlight_dark">
<button id="btn_create_list">Create list with uploaded files</button>
<button id="btn_copy_links">Copy links to clipboard</button>
<button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
</div>
<br/><br/>
<div id="uploads_queue"></div>
<br/>
<button id="btn_create_list">Create list with uploaded files</button>
<button id="btn_copy_links">Copy links to clipboard</button>
<button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
<br/>
<div class="centered">
<h1>What is Pixeldrain?</h1> <h1>What is Pixeldrain?</h1>
<p> <p>
Pixeldrain is a file sharing website built for speed and ease of Pixeldrain is a file sharing website built for speed and ease of
@@ -47,6 +50,7 @@
(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/> (Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
<input type="radio" id="style_arc" name="style"><label for="style_arc">Arc Style</label> <input type="radio" id="style_arc" name="style"><label for="style_arc">Arc Style</label>
(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/> (Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>
</div> </div>
<h2>Questions and Answers</h2> <h2>Questions and Answers</h2>
@@ -152,9 +156,10 @@
<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a> <a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>
</p> </p>
{{template "footer"}}
</div> </div>
{{template "page_bottom"}}
<script src="/res/script/jquery-2.1.4.min.js"></script> <script src="/res/script/jquery-2.1.4.min.js"></script>
<script type="text/javascript">var API_URL = "/api";</script> <script type="text/javascript">var API_URL = "/api";</script>
<script src="/res/script/compiled/home.js"></script> <script src="/res/script/compiled/home.js"></script>

4
res/template/paste.html
View File

@@ -11,7 +11,7 @@
position: absolute; position: absolute;
width: 8em; width: 8em;
height: 100%; height: 100%;
background-color: var(--accent_color_medium) background-color: var(--layer_2_color)
} }
.textarea_container { .textarea_container {
position: absolute; position: absolute;
@@ -26,7 +26,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
/* border: none !important; */ /* border: none !important; */
background: var(--accent_color_dark); background: var(--layer_1_color);
} }
.toolbar_button{ .toolbar_button{

154
webcontroller/user_style.go
View File

@@ -49,10 +49,15 @@ func userStyle(r *http.Request) (style template.CSS) {
--background_color: %s; --background_color: %s;
--body_color: %s; --body_color: %s;
--accent_color_headerbar: %s;
--accent_color_dark: %s; --layer_1_color: %s;
--accent_color_medium: %s; --layer_1_shadow: %s;
--accent_color_light: %s; --layer_2_color: %s;
--layer_2_shadow: %s;
--layer_3_color: %s;
--layer_3_shadow: %s;
--layer_4_color: %s;
--layer_4_shadow: %s;
--shadow_color: %s; --shadow_color: %s;
--shadow_spread: %s; --shadow_spread: %s;
@@ -72,10 +77,14 @@ func userStyle(r *http.Request) (style template.CSS) {
selectedStyle.ScrollbarBackgroundColor.cssString(), selectedStyle.ScrollbarBackgroundColor.cssString(),
selectedStyle.BackgroundColor.cssString(), selectedStyle.BackgroundColor.cssString(),
selectedStyle.BodyColor.cssString(), selectedStyle.BodyColor.cssString(),
selectedStyle.AccentColorHeaderbar.cssString(), selectedStyle.Layer1Color.cssString(),
selectedStyle.AccentColorDark.cssString(), fmt.Sprintf("%dpx", selectedStyle.Layer1Shadow),
selectedStyle.AccentColorMedium.cssString(), selectedStyle.Layer2Color.cssString(),
selectedStyle.AccentColorLight.cssString(), fmt.Sprintf("%dpx", selectedStyle.Layer2Shadow),
selectedStyle.Layer3Color.cssString(),
fmt.Sprintf("%dpx", selectedStyle.Layer3Shadow),
selectedStyle.Layer4Color.cssString(),
fmt.Sprintf("%dpx", selectedStyle.Layer4Shadow),
selectedStyle.ShadowColor.cssString(), selectedStyle.ShadowColor.cssString(),
fmt.Sprintf("%dpx", selectedStyle.ShadowSpread), fmt.Sprintf("%dpx", selectedStyle.ShadowSpread),
fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity), fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity),
@@ -93,12 +102,17 @@ type pixeldrainStyleSheet struct {
ScrollbarForegroundColor hsl ScrollbarForegroundColor hsl
ScrollbarBackgroundColor hsl ScrollbarBackgroundColor hsl
BackgroundColor hsl BackgroundColor hsl
BodyColor hsl BodyColor hsl
AccentColorHeaderbar hsl
AccentColorDark hsl Layer1Color hsl // Deepest and darkest layer
AccentColorMedium hsl Layer1Shadow int // Deep layers have little shadow
AccentColorLight hsl Layer2Color hsl
Layer2Shadow int
Layer3Color hsl
Layer3Shadow int
Layer4Color hsl // Highest and brightest layer
Layer4Shadow int // High layers have lots of shadow
ShadowColor hsl ShadowColor hsl
ShadowSpread int // Pixels ShadowSpread int // Pixels
@@ -161,12 +175,16 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, 0, .35}, ScrollbarForegroundColor: hsl{0, 0, .35},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, .07}, BodyColor: hsl{0, 0, .07},
AccentColorHeaderbar: hsl{0, 0, .14}, Layer1Color: hsl{0, 0, .11},
AccentColorDark: hsl{0, 0, .11}, Layer1Shadow: 4,
AccentColorMedium: hsl{0, 0, .13}, Layer2Color: hsl{0, 0, .13},
AccentColorLight: hsl{0, 0, .14}, Layer2Shadow: 7,
Layer3Color: hsl{0, 0, .14},
Layer3Shadow: 10,
Layer4Color: hsl{0, 0, .14},
Layer4Shadow: 13,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -184,12 +202,16 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, 0, .30}, ScrollbarForegroundColor: hsl{0, 0, .30},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, 1}, BodyColor: hsl{0, 0, 1},
AccentColorHeaderbar: hsl{0, 0, .14}, Layer1Color: hsl{0, 0, 1},
AccentColorDark: hsl{0, 0, 1}, Layer1Shadow: 4,
AccentColorMedium: hsl{0, 0, 1}, Layer2Color: hsl{0, 0, 1},
AccentColorLight: hsl{0, 0, 1}, Layer2Shadow: 5,
Layer3Color: hsl{0, 0, 1},
Layer3Shadow: 6,
Layer4Color: hsl{0, 0, 1},
Layer4Shadow: 7,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -207,12 +229,16 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{192, .95, .30}, ScrollbarForegroundColor: hsl{192, .95, .30},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{192, 1, .05}, BackgroundColor: hsl{192, 1, .05},
BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%) BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%)
AccentColorHeaderbar: hsl{192, 1, .11}, // hsl(192, 100%, 11%) Layer1Color: hsl{192, .87, .09},
AccentColorDark: hsl{192, .87, .09}, Layer1Shadow: 4,
AccentColorMedium: hsl{192, .81, .14}, Layer2Color: hsl{192, .81, .14},
AccentColorLight: hsl{192, .95, .17}, Layer2Shadow: 7,
Layer3Color: hsl{192, .95, .17},
Layer3Shadow: 10,
Layer4Color: hsl{192, 1, .11}, // hsl(192, 100%, 11%)
Layer4Shadow: 13,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -230,12 +256,16 @@ var maroonStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, .75, .3}, ScrollbarForegroundColor: hsl{0, .75, .3},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 1, .05}, BackgroundColor: hsl{0, 1, .05},
BodyColor: hsl{0, .6, .1}, BodyColor: hsl{0, .6, .1},
AccentColorHeaderbar: hsl{0, .5, .07}, Layer1Color: hsl{0, .5, .07},
AccentColorDark: hsl{0, .5, .07}, Layer1Shadow: 4,
AccentColorMedium: hsl{0, .8, .15}, Layer2Color: hsl{0, .8, .15},
AccentColorLight: hsl{0, .9, .2}, Layer2Shadow: 7,
Layer3Color: hsl{0, .9, .2},
Layer3Shadow: 10,
Layer4Color: hsl{0, .5, .07},
Layer4Shadow: 13,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -253,12 +283,16 @@ var hackerStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{120, .5, .25}, ScrollbarForegroundColor: hsl{120, .5, .25},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, 0}, BodyColor: hsl{0, 0, 0},
AccentColorHeaderbar: hsl{0, 0, .14}, Layer1Color: hsl{120, .1, .05},
AccentColorDark: hsl{120, .1, .05}, Layer1Shadow: 4,
AccentColorMedium: hsl{120, .2, .10}, Layer2Color: hsl{120, .2, .10},
AccentColorLight: hsl{120, .3, .15}, Layer2Shadow: 7,
Layer3Color: hsl{120, .3, .15},
Layer3Shadow: 10,
Layer4Color: hsl{0, 0, .14},
Layer4Shadow: 13,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -276,12 +310,16 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{150, .02, .78}, ScrollbarForegroundColor: hsl{150, .02, .78},
ScrollbarBackgroundColor: hsl{170, .05, .26}, ScrollbarBackgroundColor: hsl{170, .05, .26},
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{172, .06, .25}, BodyColor: hsl{172, .06, .25},
AccentColorHeaderbar: hsl{172, .06, .25}, // hsl(172, 6%, 25%) Layer1Color: hsl{170, .06, .21},
AccentColorDark: hsl{170, .06, .21}, Layer1Shadow: 4,
AccentColorMedium: hsl{160, .04, .31}, Layer2Color: hsl{160, .04, .31},
AccentColorLight: hsl{170, .02, .47}, Layer2Shadow: 7,
Layer3Color: hsl{170, .02, .47},
Layer3Shadow: 10,
Layer4Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%)
Layer4Shadow: 13,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,
@@ -299,12 +337,16 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%) ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%)
ScrollbarBackgroundColor: hsl{223, .12, .2}, // hsl(223, 12%, 29%) ScrollbarBackgroundColor: hsl{223, .12, .2}, // hsl(223, 12%, 29%)
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{223, .12, .29}, BodyColor: hsl{223, .12, .29},
AccentColorHeaderbar: hsl{219, .15, .22}, // hsl(219, 15%, 22%) Layer1Color: hsl{215, .17, .19},
AccentColorDark: hsl{215, .17, .19}, Layer1Shadow: 4,
AccentColorMedium: hsl{227, .14, .25}, // hsl(227, 14%, 25%) Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%)
AccentColorLight: hsl{223, .12, .29}, Layer2Shadow: 7,
Layer3Color: hsl{223, .12, .29},
Layer3Shadow: 10,
Layer4Color: hsl{219, .15, .22}, // hsl(219, 15%, 22%)
Layer4Shadow: 13,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10, ShadowSpread: 10,