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

Lots of style fixes

Browse Source
This commit is contained in:
Wim Brand
2019-07-17 23:19:57 +02:00
parent 67824d617d
commit 177219feb7
20 changed files with 360 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
res/static/script/ListNavigator.js
View File

@@ -67,13 +67,13 @@ var ListNavigator = {
this.addToHistory(index);
$("#listNavigatorItems").find("*").css("border-color", "#333");
$("#listNavigatorItems div").eq(this.position).css("border-color", "#fff");
$("#listNavigatorItems").find("*").removeClass("list_item_selected");
$("#listNavigatorItems div").eq(this.position).addClass("list_item_selected");
// This centers the scroll bar exactly on the selected item
$("#listNavigatorItems").animate(
{
scrollLeft: (this.position * 109) - (($("#listNavigatorItems").width() / 2) - 55)
scrollLeft: ((this.position * 109) + (109/2)) - ($("#listNavigator").width() / 2)
}, {
duration: 1000,
queue: false
@@ -110,8 +110,8 @@ var ListNavigator = {
},
loadThumbnails: function(index){
var startPos = +index - 30;
var endPos = +index + 30;
var startPos = +index - 50;
var endPos = +index + 50;
// fyi, the + is to let javascript know it's actually a number instead of a string
if(startPos < 0){
@@ -126,12 +126,17 @@ var ListNavigator = {
var navigatorItems = document.getElementById("listNavigatorItems").children
for (i = startPos; i <= endPos; i++){
if (navigatorItems[i].innerHTML.includes("listItemThumbnail")) {
console.log("skip");
continue;
}
var thumb = "/api/file/" + this.data[i].id + "/thumbnail";
var name = this.data[i].name;
var itemHtml = escapeHTML(name) + "<br>"
+ "<img src=\"" + thumb + "\" "
+ "class=\"listItemThumbnail lazy\" alt=\"" + escapeHTML(name) + "\"/>";
+ "class=\"listItemThumbnail\" alt=\"" + escapeHTML(name) + "\"/>";
navigatorItems[i].innerHTML = itemHtml;
}
@@ -165,6 +170,22 @@ var ListNavigator = {
this.setItem(0);
}
var btnLastItem = document.createElement("button");
btnLastItem.innerText = "◀";
btnLastItem.setAttribute("id", "button_last_item");
btnLastItem.setAttribute("class", "button_highlight");
btnLastItem.setAttribute("onClick", "ListNavigator.previousItem();");
var btnNextItem = document.createElement("button");
btnNextItem.innerText = "▶";
btnNextItem.setAttribute("id", "button_next_item");
btnNextItem.setAttribute("class", "button_highlight");
btnNextItem.setAttribute("onClick", "ListNavigator.nextItem();");
var headerbar = document.getElementById("list_navigator_buttons");
headerbar.appendChild(btnLastItem);
headerbar.appendChild(btnNextItem);
// Add the list download button to the toolbar
var btnDownloadList = document.createElement("button");
btnDownloadList.setAttribute("id", "btnDownloadList");
@@ -199,16 +220,8 @@ var ListNavigator = {
btnShuffle.appendChild(btnShuffleText);
document.getElementById("btnShare").after(btnShuffle);
// We need to adjust the height of some elements to make the navigation bar fit
var navHeight = $("#listNavigator").height() + 2;
window.setTimeout(function(){
document.getElementById("listNavigator").style.top = "0px";
document.getElementById("filepreview").style.top = navHeight+"px";
document.getElementById("toolbar").style.top = navHeight+"px";
document.getElementById("button-expand-toolbar").style.top = navHeight+"px";
document.getElementById("sharebar").style.top = navHeight+"px";
}, 200);
// Make the navigator visible
document.getElementById("listNavigator").style.display = "inline-block";
}
};

4
res/static/script/Toolbar.js
View File

@@ -9,7 +9,7 @@
/* global Viewer */
var Toolbar = {
visible: true,
visible: false,
toggle: function () {
if (this.visible) {
if (Sharebar.visible) {
@@ -18,11 +18,13 @@ var Toolbar = {
document.getElementById("toolbar").style.left = "-9em";
document.getElementById("filepreview").style.left = "0px";
document.getElementById("button_toggle_toolbar").classList.remove("button_highlight");
this.visible = false;
} else {
document.getElementById("toolbar").style.left = "0px";
document.getElementById("filepreview").style.left = "8em";
document.getElementById("button_toggle_toolbar").classList.add("button_highlight");
this.visible = true;
}

11
res/static/script/Viewer.js
View File

@@ -14,7 +14,7 @@ var Viewer = {
}
// On small screens the toolbar takes too much space, so it collapses automatically
if($("#filepreview").width() < 400 && Toolbar.visible){
if($("#filepreview").width() > 400 && !Toolbar.visible){
Toolbar.toggle();
}
@@ -34,7 +34,14 @@ var Viewer = {
},
setFile: function(file){
this.currentFile = file.id;
document.title = file.name + " ~ PixelDrain";
var title = "";
if (this.isList) {
title = this.title + " ~ " + file.name;
} else {
title = file.name;
}
document.title = title + " ~ PixelDrain";
document.getElementById("file_viewer_headerbar_title").innerText = title;
$.get("/u/" + file.id + "/preview", function(response){
$("#filepreview").html(response);

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

@@ -141,6 +141,7 @@ body{
}
}
.highlight_headerbar,
.highlight_dark,
.highlight_middle,
.highlight_light,
@@ -157,17 +158,17 @@ body{
padding: .5em;
z-index: 101;
}
.highlight_headerbar {
background-color: var(--accent_color_headerbar);
box-shadow: 1px 1px 3px -1px var(--shadow_color);}
.highlight_dark {
background-color: var(--accent_color_dark);
border-color: var(--accent_color_dark_border);
box-shadow: inset 1px 1px 8px -1px var(--shadow_color);}
.highlight_middle {
background-color: var(--accent_color_medium);
border-color: var(--accent_color_medium_border);
box-shadow: inset 1px 1px 6px -1px var(--shadow_color);}
.highlight_light {
background-color: var(--accent_color_light);
border-color: var(--accent_color_light_border);
box-shadow: 1px 1px 4px var(--shadow_color);}
.highlight_green {
background-color: rgba(0, 255, 0, 0.05);
@@ -179,18 +180,15 @@ body{
background-color: rgba(255, 0, 0, 0.1);
border-color: #B00000;}
body > .highlight_dark,
body > .highlight_middle,
body > .highlight_light,
body > .highlight_green,
body > .highlight_blue,
body > .highlight_red {
margin: 0;
.highlight_green,
.highlight_blue,
.highlight_red {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.border_top {border-top-width: 1px; border-top-style: solid;}
.border_bottom {border-bottom-width: 1px; border-bottom-style: solid;}
/* Common elements */
h1, h2, h3, h4, h5, h6 {
@@ -261,7 +259,7 @@ pre{
min-width: 200px;
max-width: 400px;
margin: 10px !important;
border-radius: 10px;
border-radius: 5px;
font-size: 1.9em;
font-weight: normal;
line-height: 8px;
@@ -303,8 +301,8 @@ pre{
margin: 6px;
padding: 0;
overflow: hidden;
border-radius: 0.4em;
box-shadow: 2px 2px 8px -1px var(--shadow_color);
border-radius: 5px;
box-shadow: 2px 2px 8px -3px var(--shadow_color);
/* border: 1px solid var(--accent_color_dark); */
background-color: var(--file_background_color);
color: #bfbfbf; /* Fallback */
@@ -342,12 +340,12 @@ input[type="color"],
select{
display: inline-block;
box-sizing: border-box;
border-radius: 4px;
border-radius: 2px;
border: none;
margin: 2px;
margin: 3px;
background: linear-gradient(var(--input_color), var(--input_color_dark));
padding: 6px 8px 6px 8px;
box-shadow: 2px 2px 6px -2px var(--shadow_color);
box-shadow: 2px 2px 6px -3px var(--shadow_color);
font-weight: bold;
font-size: 0.85em;
overflow: hidden;
@@ -375,7 +373,7 @@ select:focus{
color: #bfbfbf; /* Fallback */
color: var(--input_text_color);
text-decoration: none;
box-shadow: var(--highlight_border), 2px 2px 6px -2px var(--shadow_color);
box-shadow: var(--highlight_border), 2px 2px 6px -3px var(--shadow_color);
}
button:active,
.button:active,
@@ -385,13 +383,13 @@ input[type="color"]:active,
select:active{
background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 4px 4px 8px var(--shadow_color);
padding: 11px 3px 1px 13px; /* Exactly 5px offset compared to the inactive padding to give a depth effect */
padding: 10px 4px 2px 12px; /* Exactly 4px offset compared to the inactive padding to give a depth effect */
}
.button_full_width {width: calc(100% - 4px);}
.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;}
.button_red:active {background: linear-gradient(var(--danger_color_dark), var(--danger_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;}
/* Dropdown list of the select tag */
option{
@@ -411,7 +409,7 @@ input[type="number"]{
box-sizing: border-box;
border-radius: 4px;
background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 2px 2px 6px -2px var(--shadow_color);
box-shadow: inset 2px 2px 6px -3px var(--shadow_color);
padding: 3px 5px;
color: var(--input_text_color);
height: 26px;
@@ -431,7 +429,7 @@ input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus{
box-shadow: var(--highlight_border), inset 3px 3px 6px -2px var(--shadow_color);
box-shadow: var(--highlight_border), inset 3px 3px 6px -3px var(--shadow_color);
}
input[type=file]{

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

@@ -7,13 +7,82 @@ body{
overflow: hidden;
}
#filepreview{
.file_viewer {
position: absolute;
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.file_viewer > .highlight_headerbar {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
line-height: 1.9em;
text-align: left;
font-size: 1.2em;
}
.file_viewer > .highlight_headerbar > .button_toggle_toolbar {
flex-grow: 0;
flex-shrink: 0;
}
.file_viewer > .highlight_headerbar > .button_home {
flex-grow: 0;
flex-shrink: 0;
margin-right: .5em;
}
.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title {
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
font-size: 0.8em;
}
.file_viewer > .highlight_headerbar > .list_navigator_buttons {
flex-grow: 0;
flex-shrink: 0;
display: inline-flex;
}
.file_viewer > .highlight_headerbar > .button_close_file_viewer {
flex-grow: 0;
flex-shrink: 0;
margin-left: .5em;
}
.file_viewer > .list_navigator{
flex-grow: 0;
flex-shrink: 0;
position: relative;
display: none; /* Becomes visible if the page is a list */
width: 100%;
height: 100px;
background-color: var(--accent_color_dark);
box-shadow: 2px 2px 8px var(--shadow_color);
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
z-index: 50;
transition: top 1.5s;
}
.file_viewer > .file_viewer_window {
flex-grow: 1;
flex-shrink: 1;
position: relative;
display: inline-block;
width: auto;
height: auto;
margin: 0;
}
.file_viewer > .file_viewer_window > .file_viewer_file_preview {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: inline-block;
top: 0px;
left: 8em;
right: 0px;
bottom: 0px;
min-height: 100px;
min-width: 100px;
text-align: center;
@@ -21,11 +90,44 @@ body{
transition: left 1s, top 1.5s;
}
/* Toolbars */
.file_viewer > .file_viewer_window > .file_viewer_toolbar {
position: absolute;
width: 8em;
z-index: 49;
overflow: hidden;
float: left;
background-color: var(--accent_color_dark);
left: -9em;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
box-shadow: 2px 2px 8px var(--shadow_color);
transition: left 1s, top 1.5s;
}
.file_viewer > .file_viewer_window > .file_viewer_sharebar{
position: absolute;
width: 7em;
left: -8em;
bottom: 0;
top: 0;
overflow-y: scroll;
overflow-x: hidden;
float: left;
background-color: var(--accent_color_dark);
box-shadow: 2px 2px 8px var(--shadow_color);
text-align: center;
z-index: 48;
overflow: hidden;
transition: left 1s, top 1.5s;
}
/* =====================
== FILE CONTAINERS ==
=====================*/
.image-container{
position: absolute;
position: relative;
top: 0px;
left: 0px;
right: 0px;
@@ -46,7 +148,7 @@ body{
.text-container{
background: #333 none;
position: absolute;
position: relative;
overflow-y: scroll;
overflow-x: auto;
text-align: left;
@@ -94,22 +196,6 @@ body{
|| TOOLBAR COMPONENTS ||
======================== */
#toolbar {
position: absolute;
width: 8em;
z-index: 52;
overflow: hidden;
float: left;
background-color: var(--background_color);
left: 0;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
border-right: 2px ridge var(--highlight_color);
box-shadow: 2px 2px 8px var(--shadow_color);
transition: left 1s, top 1.5s;
}
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
#toolbar > div {
@@ -129,14 +215,6 @@ body{
height: auto;
}
#button-expand-toolbar{
position: absolute;
left: 0;
top: 0;
cursor: pointer;
z-index: 51;
}
.toolbar_button{
text-align: left;
}
@@ -153,38 +231,13 @@ body{
padding-left: 10px;
font-size: 0.8em;
line-height: 0.7em;
}
#sponsors{
position: relative;
height: 600px;
width: 8em;
margin: 0;
border: none;
z-index: 9;
margin-top: 0.5em;
}
/* =========================
|| SHAREBAR COMPONENTS ||
========================= */
#sharebar{
position: absolute;
width: 7em;
left: -8em;
bottom: 0;
top: 0;
overflow-y: scroll;
overflow-x: hidden;
float: left;
background-color: var(--background_color);
box-shadow: 2px 2px 8px var(--shadow_color);
text-align: center;
border-right: 2px ridge var(--highlight_color);
z-index: 50;
overflow: hidden;
transition: left 1s, top 1.5s;
}
.sharebar-button {text-align: center;}
/* =====================
@@ -192,7 +245,7 @@ body{
===================== */
.popup {
position: fixed;
position: absolute;
visibility: hidden;
display: flex;
flex-direction: column;
@@ -202,9 +255,9 @@ body{
border-color: var(--accent_color_dark_border);
max-height: 100%;
max-width: 100%;
top: 10%;
top: 20%;
left: 50%;
transform: translate(-50%, -10%);
transform: translate(-50%, -20%);
padding: 0;
box-sizing: border-box;
text-align: left;
@@ -222,12 +275,12 @@ body{
.details_popup{
width: 1500px;
height: 800px;
z-index: 100;
z-index: 200;
}
.captcha_popup{
height: auto;
width: 450px;
z-index: 101;
z-index: 201;
}
#captcha_popup_captcha > div {
display: inline-block;
@@ -287,24 +340,9 @@ table > tbody > tr {border: none !important;}
border: none;
}
#listNavigator{
position: absolute;
left: 0;
right: 0;
top: -100px;
height: 98px;
background-color: #000;
box-shadow: 2px 2px 8px #000000;
border-bottom: 2px ridge var(--highlight_color);
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
z-index: 50;
transition: top 1.5s;
}
#listNavigatorItems{
position: absolute;
position: relative;
top: 0;
left: 0;
right: 0;
@@ -313,7 +351,7 @@ table > tbody > tr {border: none !important;}
overflow-x: scroll;
overflow-y: hidden;
border: none;
padding: 0 40px;
padding: 0;
}
.listItem{
@@ -323,11 +361,15 @@ table > tbody > tr {border: none !important;}
width: 100px;
margin-right: 5px;
text-align: center;
border: #333 solid 2px;
border: var(--input_color) solid 2px;
border-radius: 2px;
font-size: 12px;
overflow: hidden;
cursor: pointer;
}
.list_item_selected{
border: var(--highlight_color) solid 2px;
}
.listItemThumbnail{
position: relative;
@@ -335,23 +377,3 @@ table > tbody > tr {border: none !important;}
max-height: 84%;
margin: 0;
}
#arrow-left,
#arrow-right{
position: absolute;
display: block;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
height: 0;
width: 0;
top: 20px;
cursor: pointer;
}
#arrow-left{
border-right: 40px solid var(--highlight_color);
left: 10px;
}
#arrow-right{
border-left: 40px solid var(--highlight_color);
right: 10px;
}

8
res/template/account/file_manager.html
View File

@@ -7,7 +7,7 @@
<style>
.file_manager {
position: absolute;
padding: 0px 8px 0px 8px;
padding: 0;
background-color: var(--body_color);
box-shadow: #000000 8px 8px 50px 5px;
left:100px;
@@ -25,7 +25,7 @@
.file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
.file_manager > .status_bar {text-align: left;}
.file_manager > .directory_area {
margin: 0 -8px 0 -8px;
margin: 0;
padding: 5px;
max-height: 500px;
overflow-x: hidden;
@@ -47,7 +47,7 @@
{{template "menu" .}}
<br/>
<div class="file_manager">
<div class="nav_bar highlight_light border_top border_bottom">
<div class="nav_bar highlight_light">
<button>⇐</button>
<button>⇑</button>
<button style="margin-right: 16px;">⇒</button>
@@ -68,7 +68,7 @@
</a>
{{end}}
</div>
<div class="status_bar highlight_light border_top border_bottom">
<div class="status_bar highlight_light">
13 items (5 directories, 7 files). Total size: 1.23 GB
</div>
</div>

2
res/template/account/logout.html
View File

@@ -9,7 +9,7 @@
{{template "menu" .}}
<h1>Please confirm that you want to log out of your pixeldrain account</h1>
<form method="POST" action="/logout" class="highlight_light border_top border_bottom">
<form method="POST" action="/logout" class="highlight_light">
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
</form>
<br/>

137
res/template/account/register.html
View File

@@ -1,137 +0,0 @@
{{define "register"}}<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" "Register"}}
{{template "user_style" .}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div id='body' class="body">
{{template "menu" .}}
<h1>Register a new Pixeldrain account</h1>
<div id="submit_result"></div>
<form onSubmit="return submitForm();" class="highlight_dark border_top border_bottom">
<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;">
<tr class="form">
<td>Username</td>
<td><input id="register_username" type="text" autocomplete="username" class="form_input"/></td>
</tr>
<tr class="form"><td colspan="2">used for logging into your account<br/><hr/></td></tr>
<tr class="form">
<td>E-mail address</td>
<td><input id="register_email" type="text" autocomplete="email" class="form_input"/></td>
</tr>
<tr class="form"><td colspan="2">
not required. your e-mail address will only be used for
password resets and important account notifications<br/>
<hr/>
</td></tr>
<tr class="form">
<td>Password</td>
<td><input id="register_password1" type="password" autocomplete="new-password" class="form_input"/></td>
</tr>
<tr class="form">
<td>Password verification</td>
<td><input id="register_password2" type="password" autocomplete="new-password" class="form_input"/></td>
</tr>
<tr class="form">
<td colspan="2">
you need to enter your password twice so we can
verify that you have not made any typing errors<br/>
<hr/>
</td>
</tr>
{{if ne .Other "none"}}<tr class="form">
<td>
Turing test<br/>
(Click the white box)
</td>
<td style="text-align: center;">
<div class="g-recaptcha" data-theme="dark" data-sitekey="{{.Other}}"></div>
</td>
</tr>
<tr class="form">
<td colspan="2">
the reCaptcha turing test verifies that you are not
an evil robot that is trying to flood the website
with fake accounts<br/><hr/>
</td>
</tr>{{end}}
<tr class="form">
<td colspan="2" style="text-align: right;">
<input type="submit" value="Register" class="button_highlight"/>
</td>
</tr>
</table>
</form>
<br/>
Welcome to the club!<br/>
{{template "footer"}}
</div>
<script type="text/javascript">
function submitForm(){
var uname = document.getElementById("register_username").value;
var email = document.getElementById("register_email").value;
var passwd1 = document.getElementById("register_password1").value;
var passwd2 = document.getElementById("register_password2").value;
var capt;
try {
capt = grecaptcha.getResponse();
} catch (err) {
console.log("Error occurred while reading captcha: "+err);
}
if (passwd1 !== passwd2) {
alert("Passwords do not match! Good thing we checked.");
return false;
}
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if (this.readyState === 4) {
var response = JSON.parse(req.responseText);
var resultDiv = document.getElementById("submit_result");
if (response.success) {
resultDiv.className = "border_top border_bottom highlight_green";
resultDiv.innerHTML = 'Registration completed! You can now <a href="/login">log in to your account</a>.<br/>'
+ "We're glad to have you on board, have fun sharing!";
} else {
resultDiv.className = "border_top border_bottom highlight_red";
var resultHtml = "Something went wrong, please correct these problems and try again:<br/><ul>";
for (err in response.errors) {
resultHtml += "<li>"+ response.errors[err].message +"</li>";
}
resultHtml += "</ul>";
resultDiv.innerHTML = resultHtml;
}
// On small screens the whole form won't fit on the screen,
// so we need to scroll up to show the user the result of
// the form submission
window.scrollTo(0, 0);
console.log(response);
}
}
req.open("POST", apiEndpoint+"/user/register", true);
var data = new FormData();
data.append("username", uname);
data.append("email", email);
data.append("password", passwd1);
data.append("recaptcha_response", capt);
req.send(data);
return false;
}
</script>
{{template "analytics"}}
</body>
</html>
{{end}}

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

@@ -8,7 +8,7 @@
<body>
{{template "menu" .}}
<div class="highlight_middle border_bottom">
<div class="highlight_middle">
These files were uploaded while logged in to your pixeldrain account,
<a href="/history">click here</a> to view files uploaded anonymously
in this browser.

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

@@ -10,7 +10,7 @@
<div id='body' class="body">
{{template "menu" .}}
<h1 class="highlight_middle border_bottom">Welcome home, {{.Username}}!</h1>
<h1 class="highlight_middle">Welcome home, {{.Username}}!</h1>
<h2>Actions</h2>
<ul>
@@ -19,7 +19,7 @@
</ul>
<h2>Your most recently uploaded files:</h2>
<div class="highlight_dark border_top border_bottom">
<div class="highlight_dark">
{{$files := .PixelAPI.UserFiles 0 18}}
{{range $files.Files}}
<a class="file_button" href="/u/{{.ID}}" target="_blank">
@@ -33,7 +33,7 @@
<a href="/user/files" class="button">...All my files</a>
</div>
<h2>Your most recently created lists:</h2>
<div class="highlight_dark border_top border_bottom">
<div class="highlight_dark">
{{$lists := .PixelAPI.UserLists 0 18}}
{{range $lists.Lists}}
<a class="file_button" href="/l/{{.ID}}" target="_blank">

1
res/template/admin.html
View File

@@ -112,7 +112,6 @@
);
function setData(){
this.class = "button_highlight";
$.get(apiEndpoint+"/admin/files/timeseries?days="+days+"&interval="+interval, function(response){
console.log(response);
if (response.success) {

165
res/template/file_viewer.html
View File

@@ -6,15 +6,13 @@
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{{template "user_style" .}}
<link rel="stylesheet" href="/res/style/viewer.css?v2"/>
<link rel="stylesheet" href="/res/style/layout.css?v2"/>
<link rel="stylesheet" href="/res/style/viewer.css?v3"/>
<link rel="stylesheet" href="/res/style/layout.css?v3"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/>
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
<meta name="theme-color" content="#75AD38"/>
<!-- <link rel="alternate" type="application/json+oembed" th:href="*{oEmbedHref}" th:title="*{ogTitle}" /> OEmbed will return soon -->
{{template "bgpattern"}}
{{.OGData}}
@@ -26,81 +24,90 @@
</head>
<body>
<div id="listNavigator">
<div id="listNavigatorItems"></div>
<div id="arrow-left" alt="Previous Item" onClick="ListNavigator.previousItem();"></div>
<div id="arrow-right" alt="Next Item" onClick="ListNavigator.nextItem();"></div>
</div>
<button id="button-expand-toolbar" onClick="Toolbar.toggle();">Show Toolbar</button>
<div id="toolbar">
<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
<div>
<div>
<button class="toolbar_button button_full_width" onClick="Toolbar.toggle();">Hide Toolbar</button>
<div id="file_viewer" class="file_viewer">
<div id="file_viewer_headerbar" class="highlight_headerbar">
<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button>
<a href="/" id="button_home" class="button button_home">
<img src="/res/img/tray32.png" alt="Back to the Home page" style="height: 1em;"/>
<!-- Yo -->
</a>
<span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span>
<div id="list_navigator_buttons" class="list_navigator_buttons"></div>
<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">X</button>
</div>
<div id="listNavigator" class="list_navigator">
<div id="listNavigatorItems"></div>
</div>
<div id="file_viewer_window" class="file_viewer_window">
<div id="toolbar" class="file_viewer_toolbar">
<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
<div>
<div>
<div id="stat_views_label" class="toolbar_label">Views</div>
<div id="stat_views" style="text-align: center;">N/A</div>
<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
<div id="stat_downloads" style="text-align: center;">N/A</div>
<div id="stat_views_label" class="toolbar_label">Views</div>
<div id="stat_views" style="text-align: center;">N/A</div>
<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
<div id="stat_downloads" style="text-align: center;">N/A</div>
<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
<img src="/res/img/floppy_small.png" alt="Download this file"/>
<span>Download</span>
</button>
<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
<img src="/res/img/clipboard_small.png" alt="Copy file URL to clipboard"/>
<span>Copy</span>
</button>
<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
<img src="/res/img/share_small.png" alt="Share this file on social media"/>
<span>Share</span>
</button>
<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
<img src="/res/img/info_small.png" alt="Help"/>
<span>Details</span>
</button>
{{template "advertisement" .}}
<a href="/" id="btnHome" class="toolbar_button button_full_width button">
<img src="/res/img/pixeldrain_small.png" alt="Back to the Home page"/>
<span>Home</span>
</a>
<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
<img src="/res/img/floppy_small.png" alt="Download this file"/>
<span>Download</span>
</button>
<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
<img src="/res/img/clipboard_small.png" alt="Copy file URL to clipboard"/>
<span>Copy</span>
</button>
<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
<img src="/res/img/share_small.png" alt="Share this file on social media"/>
<span>Share</span>
</button>
<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
<img src="/res/img/info_small.png" alt="Help"/>
<span>Details</span>
</button>
{{template "advertisement" .}}
<!-- This frame will load the download URL when a download button is pressed -->
<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
</div>
</div>
</div>
<!-- This frame will load the download URL when a download button is pressed -->
<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
<div id="sharebar" class="file_viewer_sharebar">
Share on:<br/>
<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=You%20can%20view%20it%20here%20' + window.location.href);">
<img src="/res/img/social_email.png" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
<br/>E-Mail
</button>
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
<img src="/res/img/social_reddit.png" alt="Share on Reddit" style="width:40px; height: 40px;"/>
<br/>Reddit
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?text=Check%20out%20this%20file%20on%20%23Pixeldrain&url=' + window.location.href);">
<img src="/res/img/social_twitter.png" alt="Share on Twitter" style="width:40px; height: 40px;"/>
<br/>Twitter
</button>
<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
<img src="/res/img/social_facebook.png" alt="Share on Facebook" style="width:40px; height: 40px;"/>
<br/>Facebook
</button>
<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
<img src="/res/img/social_tumblr.png" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
<br/>Tumblr
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
<img src="/res/img/social_voat.png" alt="Share on Voat" style="width:40px; height: 40px;"/>
<br/>Voat
</button>
</div>
<div id="filepreview" class="file_viewer_file_preview">
<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
</div>
</div>
</div>
<div id="sharebar" class="sidebar">
Share on:<br/>
<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=You%20can%20view%20it%20here%20' + window.location.href);">
<img src="/res/img/social_email.png" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
<br/>E-Mail
</button>
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
<img src="/res/img/social_reddit.png" alt="Share on Reddit" style="width:40px; height: 40px;"/>
<br/>Reddit
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?text=Check%20out%20this%20file%20on%20%23Pixeldrain&url=' + window.location.href);">
<img src="/res/img/social_twitter.png" alt="Share on Twitter" style="width:40px; height: 40px;"/>
<br/>Twitter
</button>
<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
<img src="/res/img/social_facebook.png" alt="Share on Facebook" style="width:40px; height: 40px;"/>
<br/>Facebook
</button>
<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
<img src="/res/img/social_tumblr.png" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
<br/>Tumblr
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
<img src="/res/img/social_voat.png" alt="Share on Voat" style="width:40px; height: 40px;"/>
<br/>Voat
</button>
</div>
<div id="details_popup" class="popup details_popup border_bottom">
<div id="details_popup_title" class="highlight_light border_top border_bottom">
<div id="details_popup" class="popup details_popup">
<div id="details_popup_title" class="highlight_headerbar">
File Info
<button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">X</button>
</div>
@@ -147,23 +154,19 @@
</span>
</div>
</div>
<div id="captcha_popup" class="popup captcha_popup border_bottom">
<div id="captcha_popup_title" class="highlight_light border_top border_bottom"></div>
<div id="captcha_popup" class="popup captcha_popup">
<div id="captcha_popup_title" class="highlight_headerbar"></div>
<div id="captcha_popup_content" class="content_area"></div>
<br/>
<div id="captcha_popup_captcha" style="text-align: center;"></div>
</div>
<div id="filepreview">
<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
</div>
<script src="/res/misc/chartjs/Chart.min.js"></script>
<script src="/res/script/jquery.js"></script>
<script src="/res/script/Keyboard.js"></script>
<script src="/res/script/Toolbar.js?v1"></script>
<script src="/res/script/Viewer.js?v1"></script>
<script src="/res/script/ListNavigator.js"></script>
<script src="/res/script/Toolbar.js?v2"></script>
<script src="/res/script/Viewer.js?v2"></script>
<script src="/res/script/ListNavigator.js?v2"></script>
<script>
// This info gets filled in on the server side to prevent having to make an API call right after the page loads.

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

@@ -1,6 +1,6 @@
{{define "footer"}}
<br/>
<div class="highlight_dark border_top border_bottom">
<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>

6
res/template/fragments/form.html
View File

@@ -3,11 +3,11 @@
{{.PreFormHTML}}
{{if eq .Submitted true}}
{{if eq .SubmitSuccess true}}
<div id="submit_result" class="highlight_green border_top border_bottom">
<div id="submit_result" class="highlight_green">
{{index .SubmitMessages 0}}
</div>
{{else}}
<div id="submit_result" class="highlight_red border_top border_bottom">
<div id="submit_result" class="highlight_red">
Something went wrong, please correct these errors before continuing:<br/>
<ul>
{{range $msg := .SubmitMessages}}
@@ -18,7 +18,7 @@
{{end}}
{{end}}
<form class="highlight_dark border_top border_bottom" method="POST">
<form class="highlight_dark" method="POST">
<input type="text" name="form" value="{{.Name}}" style="display: none;" readonly="readonly"/>
{{if ne .Username ""}}
<!-- The invisible username field is so browsers know which user the form was for -->

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

@@ -1,5 +1,5 @@
{{define "menu"}}
<div id="navigation" class="highlight_light border_top border_bottom navigation">
<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}}

7
res/template/history.html
View File

@@ -12,12 +12,13 @@
<body>
<div id='body' class="body">
{{template "menu" .}}
<br/>
<p>
Here are all files you have previously uploaded to PixelDrain using this computer.
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
<br/><br/>
</p>
<br/>
<div id="uploadedFiles" class="highlight_dark border_top border_bottom"></div>
<div id="uploadedFiles" class="highlight_dark"></div>
{{template "footer"}}
</div>
<script src="/res/script/history.js"></script>

8
res/template/home.html
View File

@@ -22,7 +22,7 @@
<br/>
<div id="body" class="body">
{{template "menu" .}}
<div class="highlight_middle border_bottom">
<div class="highlight_middle">
<input id="file_input_field" type="file" name="file" multiple="multiple"/>
<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/>
@@ -31,7 +31,7 @@
<div id="uploads_queue"></div>
</div>
<div class="highlight_dark border_bottom">
<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>
@@ -55,8 +55,8 @@
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label><br/>
<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
(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>
(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>-->
<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/>
</div>
<h2>Questions and Answers</h2>

2
res/template/maintenance.html
View File

@@ -9,7 +9,7 @@
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
<br/>
<div id='body' class="body">
<div id="header" class="highlight_light border_top border_bottom" style="font-size: 2em; line-height: 1.2em;">
<div id="header" class="highlight_light" style="font-size: 2em; line-height: 1.2em;">
Pixeldrain is under maintenanace
</div>
<p>

10
res/template/widgets.html
View File

@@ -19,13 +19,13 @@
<h5>Size 5 header</h5>
<h6>Size 6 header</h6>
<div class="highlight_light border_top">Light highlight</div>
<div class="highlight_light">Light highlight</div>
<div class="highlight_middle">Middle highlight</div>
<div class="highlight_dark border_bottom">Dark highlight</div>
<div class="highlight_dark">Dark highlight</div>
<br/>
<div class="highlight_light border_bottom border_top">Light highlight with borders</div>
<div class="highlight_middle border_bottom border_top">Middle highlight with borders</div>
<div class="highlight_dark border_bottom border_top">Dark highlight with borders</div>
<div class="highlight_light">Light highlight with borders</div>
<div class="highlight_middle">Middle highlight with borders</div>
<div class="highlight_dark ">Dark highlight with borders</div>
<br/>
Link <a href="#">A link to someplace</a>.
<hr/>

118
webcontroller/user_style.go
View File

@@ -49,12 +49,10 @@ func userStyle(r *http.Request) (style template.CSS) {
--background_color: %s;
--body_color: %s;
--accent_color_headerbar: %s;
--accent_color_dark: %s;
--accent_color_dark_border: %s;
--accent_color_medium: %s;
--accent_color_medium_border: %s;
--accent_color_light: %s;
--accent_color_light_border: %s;
--shadow_color: %s;
--shadow_spread: %s;
@@ -62,24 +60,22 @@ func userStyle(r *http.Request) (style template.CSS) {
}`,
selectedStyle.TextColor.cssString(),
selectedStyle.InputColor.cssString(),
selectedStyle.InputColor.add(0, 0, -.05).cssString(),
selectedStyle.InputColor.add(0, 0, -.03).cssString(),
selectedStyle.InputTextColor.cssString(),
selectedStyle.HighlightColor.cssString(),
selectedStyle.HighlightColor.add(0, 0, -.05).cssString(),
selectedStyle.HighlightColor.add(0, 0, -.03).cssString(),
selectedStyle.HighlightTextColor.cssString(),
selectedStyle.DangerColor.cssString(),
selectedStyle.DangerColor.add(0, 0, -.05).cssString(),
selectedStyle.DangerColor.add(0, 0, -.03).cssString(),
selectedStyle.FileBackgroundColor.cssString(),
selectedStyle.ScrollbarForegroundColor.cssString(),
selectedStyle.ScrollbarBackgroundColor.cssString(),
selectedStyle.BackgroundColor.cssString(),
selectedStyle.BodyColor.cssString(),
selectedStyle.AccentColorHeaderbar.cssString(),
selectedStyle.AccentColorDark.cssString(),
selectedStyle.AccentColorDark.add(0, 0, .1).cssString(),
selectedStyle.AccentColorMedium.cssString(),
selectedStyle.AccentColorMedium.add(0, 0, .1).cssString(),
selectedStyle.AccentColorLight.cssString(),
selectedStyle.AccentColorLight.add(0, 0, .1).cssString(),
selectedStyle.ShadowColor.cssString(),
fmt.Sprintf("%dpx", selectedStyle.ShadowSpread),
fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity),
@@ -97,11 +93,12 @@ type pixeldrainStyleSheet struct {
ScrollbarForegroundColor hsl
ScrollbarBackgroundColor hsl
BackgroundColor hsl
BodyColor hsl
AccentColorDark hsl
AccentColorMedium hsl
AccentColorLight hsl
BackgroundColor hsl
BodyColor hsl
AccentColorHeaderbar hsl
AccentColorDark hsl
AccentColorMedium hsl
AccentColorLight hsl
ShadowColor hsl
ShadowSpread int // Pixels
@@ -164,11 +161,12 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, 0, .30},
ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, .07},
AccentColorDark: hsl{0, 0, .11},
AccentColorMedium: hsl{0, 0, .13},
AccentColorLight: hsl{0, 0, .14},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, .07},
AccentColorHeaderbar: hsl{0, 0, .14},
AccentColorDark: hsl{0, 0, .11},
AccentColorMedium: hsl{0, 0, .13},
AccentColorLight: hsl{0, 0, .14},
ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10,
@@ -186,11 +184,12 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, 0, .30},
ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, 1},
AccentColorDark: hsl{0, 0, 1},
AccentColorMedium: hsl{0, 0, 1},
AccentColorLight: hsl{0, 0, 1},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, 1},
AccentColorHeaderbar: hsl{0, 0, .14},
AccentColorDark: hsl{0, 0, 1},
AccentColorMedium: hsl{0, 0, 1},
AccentColorLight: hsl{0, 0, 1},
ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10,
@@ -208,11 +207,12 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{192, .95, .30},
ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{192, 1, .05},
BodyColor: hsl{192, 1, .11},
AccentColorDark: hsl{192, .87, .09},
AccentColorMedium: hsl{192, .81, .14},
AccentColorLight: hsl{192, .95, .17},
BackgroundColor: hsl{192, 1, .05},
BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%)
AccentColorHeaderbar: hsl{192, 1, .11}, // hsl(192, 100%, 11%)
AccentColorDark: hsl{192, .87, .09},
AccentColorMedium: hsl{192, .81, .14},
AccentColorLight: hsl{192, .95, .17},
ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10,
@@ -230,11 +230,12 @@ var maroonStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, .75, .2},
ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 1, .05},
BodyColor: hsl{0, .6, .1},
AccentColorDark: hsl{0, .5, .07},
AccentColorMedium: hsl{0, .8, .15},
AccentColorLight: hsl{0, .9, .2},
BackgroundColor: hsl{0, 1, .05},
BodyColor: hsl{0, .6, .1},
AccentColorHeaderbar: hsl{0, .5, .07},
AccentColorDark: hsl{0, .5, .07},
AccentColorMedium: hsl{0, .8, .15},
AccentColorLight: hsl{0, .9, .2},
ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10,
@@ -252,11 +253,12 @@ var hackerStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{0, 0, .25},
ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, 0},
AccentColorDark: hsl{120, .1, .05},
AccentColorMedium: hsl{120, .2, .10},
AccentColorLight: hsl{120, .3, .15},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, 0},
AccentColorHeaderbar: hsl{0, 0, .14},
AccentColorDark: hsl{120, .1, .05},
AccentColorMedium: hsl{120, .2, .10},
AccentColorLight: hsl{120, .3, .15},
ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10,
@@ -274,11 +276,12 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarForegroundColor: hsl{150, .02, .78},
ScrollbarBackgroundColor: hsl{170, .05, .26},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{172, .06, .25},
AccentColorDark: hsl{170, .06, .21},
AccentColorMedium: hsl{160, .04, .31},
AccentColorLight: hsl{170, .02, .47},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{172, .06, .25},
AccentColorHeaderbar: hsl{172, .06, .25}, // hsl(172, 6%, 25%)
AccentColorDark: hsl{170, .06, .21},
AccentColorMedium: hsl{160, .04, .31},
AccentColorLight: hsl{170, .02, .47},
ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10,
@@ -286,21 +289,22 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
}
var arcPixeldrainStyle = pixeldrainStyleSheet{
TextColor: hsl{0, 0, .9},
InputColor: hsl{219, .1, .27},
InputTextColor: hsl{0, 0, 1},
HighlightColor: hsl{212, .54, .58},
HighlightTextColor: hsl{0, 0, 1},
DangerColor: hsl{357, .41, .55},
TextColor: hsl{0, 0, 1},
InputColor: hsl{218, .16, .30},
InputTextColor: hsl{215, .19, .75},
HighlightColor: hsl{212, .71, .60},
HighlightTextColor: hsl{215, .19, .9},
DangerColor: hsl{357, .53, .57}, // hsl(357, 53%, 57%)
FileBackgroundColor: hsl{219, .1, .2},
ScrollbarForegroundColor: hsl{150, .02, .78},
ScrollbarBackgroundColor: hsl{170, .05, .26},
ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%)
ScrollbarBackgroundColor: hsl{223, .12, .29}, // hsl(223, 12%, 29%)
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{223, .08, .33},
AccentColorDark: hsl{219, .1, .27},
AccentColorMedium: hsl{223, .09, .3},
AccentColorLight: hsl{223, .08, .33},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{223, .12, .29},
AccentColorHeaderbar: hsl{219, .15, .22}, // hsl(219, 15%, 22%)
AccentColorDark: hsl{215, .17, .19},
AccentColorMedium: hsl{227, .14, .25}, // hsl(227, 14%, 25%)
AccentColorLight: hsl{223, .12, .29},
ShadowColor: hsl{0, 0, 0},
ShadowSpread: 10,