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

simplify theming

Browse Source
This commit is contained in:
Wim Brand
2020-03-10 17:06:52 +01:00
parent b4524ded62
commit 75486d62d8
14 changed files with 202 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
res/include/script/file_manager/DirectoryElement.js
View File

@@ -17,17 +17,18 @@ function DirectoryElement(directoryArea, footer) {
let makeSortButton = (field, label, width) => { let makeSortButton = (field, label, width) => {
this.sortButtons[field] = document.createElement("div") this.sortButtons[field] = document.createElement("div")
this.sortButtons[field].innerText = label this.sortButtons[field].innerText = label
this.sortButtons[field].style.width = width this.sortButtons[field].style.minWidth = width
this.sortButtons[field].addEventListener("click", () => { this.sortButtons[field].addEventListener("click", () => {
this.sortBy(field) this.sortBy(field)
}) })
this.directorySorters.appendChild(this.sortButtons[field]) this.directorySorters.appendChild(this.sortButtons[field])
} }
this.fieldNameWidth = "300px"
this.fieldDateWidth = "160px" this.fieldDateWidth = "160px"
this.fieldSizeWidth = "100px" this.fieldSizeWidth = "90px"
this.fieldTypeWidth = "200px" this.fieldTypeWidth = "200px"
makeSortButton("name", "Name", "") makeSortButton("name", "Name", this.fieldNameWidth)
makeSortButton("dateCreated", "Creation Date", this.fieldDateWidth) makeSortButton("dateCreated", "Creation Date", this.fieldDateWidth)
makeSortButton("size", "Size", this.fieldSizeWidth) makeSortButton("size", "Size", this.fieldSizeWidth)
makeSortButton("type", "Type", this.fieldTypeWidth) makeSortButton("type", "Type", this.fieldTypeWidth)
@@ -178,6 +179,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
{ {
let cell = document.createElement("div") let cell = document.createElement("div")
cell.style.minWidth = this.fieldNameWidth
let thumb = document.createElement("img") let thumb = document.createElement("img")
thumb.src = file.icon thumb.src = file.icon
cell.appendChild(thumb) cell.appendChild(thumb)
@@ -189,7 +191,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
} }
{ {
let cell = document.createElement("div") let cell = document.createElement("div")
cell.style.width = this.fieldDateWidth cell.style.minWidth = this.fieldDateWidth
let label = document.createElement("span") let label = document.createElement("span")
label.innerText = printDate(new Date(file.dateCreated), true, true, false) label.innerText = printDate(new Date(file.dateCreated), true, true, false)
cell.appendChild(label) cell.appendChild(label)
@@ -197,7 +199,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
} }
{ {
let cell = document.createElement("div") let cell = document.createElement("div")
cell.style.width = this.fieldSizeWidth cell.style.minWidth = this.fieldSizeWidth
let label = document.createElement("span") let label = document.createElement("span")
label.innerText = file.sizeLabel label.innerText = file.sizeLabel
cell.appendChild(label) cell.appendChild(label)
@@ -205,7 +207,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
} }
{ {
let cell = document.createElement("div") let cell = document.createElement("div")
cell.style.width = this.fieldTypeWidth cell.style.minWidth = this.fieldTypeWidth
let label = document.createElement("span") let label = document.createElement("span")
label.innerText = file.type label.innerText = file.type
cell.appendChild(label) cell.appendChild(label)

30
res/include/script/file_viewer/DetailsWindow.js
View File

@@ -72,7 +72,7 @@ DetailsWindow.prototype.renderGraph = function() {
Chart.defaults.global.defaultFontColor = "#b3b3b3" Chart.defaults.global.defaultFontColor = "#b3b3b3"
Chart.defaults.global.defaultFontSize = 15 Chart.defaults.global.defaultFontSize = 15
Chart.defaults.global.defaultFontFamily = "Ubuntu" Chart.defaults.global.defaultFontFamily = "Ubuntu"
Chart.defaults.global.aspectRatio = 2.5 Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.elements.point.radius = 0 Chart.defaults.global.elements.point.radius = 0
Chart.defaults.global.tooltips.mode = "index" Chart.defaults.global.tooltips.mode = "index"
Chart.defaults.global.tooltips.axis = "x" Chart.defaults.global.tooltips.axis = "x"
@@ -80,25 +80,25 @@ DetailsWindow.prototype.renderGraph = function() {
this.graph = new Chart( this.graph = new Chart(
document.getElementById('bandwidth_chart'), document.getElementById('bandwidth_chart'),
{ {
type: 'line', type: 'bar',
data: { data: {
datasets: [ datasets: [
{ {
label: "Downloads", label: "Bandwidth",
backgroundColor: "rgba(64, 255, 64, .05)", backgroundColor: "rgba(64, 255, 64, .01)",
borderColor: "rgba(128, 255, 128, 1)", borderColor: "rgba(96, 255, 96, 1)",
borderWidth: 1.5, borderWidth: 2,
lineTension: 0.1, lineTension: 0.2,
fill: true, fill: true,
yAxisID: "y_bandwidth", yAxisID: "y_bandwidth"
}, { }, {
label: "Views", label: "Views",
backgroundColor: "rgba(64, 64, 255, .1)", backgroundColor: "rgba(64, 64, 255, .01)",
borderColor: "rgba(128, 128, 255, 1)", borderColor: "rgba(64, 64, 255, 1)",
borderWidth: 1.5, borderWidth: 2,
lineTension: 0.1, lineTension: 0.2,
fill: true, fill: true,
yAxisID: "y_views", yAxisID: "y_views"
} }
] ]
}, },
@@ -115,7 +115,7 @@ DetailsWindow.prototype.renderGraph = function() {
labelString: "Downloads" labelString: "Downloads"
}, },
gridLines: { gridLines: {
color: "rgba(100, 255, 100, .1)" color: "rgba(100, 255, 100, .05)"
} }
}, { }, {
type: "linear", type: "linear",
@@ -127,7 +127,7 @@ DetailsWindow.prototype.renderGraph = function() {
labelString: "Views" labelString: "Views"
}, },
gridLines: { gridLines: {
color: "rgba(128, 128, 255, .2)" color: "rgba(128, 128, 255, .05)"
} }
} }
], ],

35
res/include/script/file_viewer/viewer_scripts/ImageViewer.js
View File

@@ -6,15 +6,19 @@ function ImageViewer(viewer, file) {
this.y = 0 this.y = 0
this.dragging = false this.dragging = false
this.zoom = 1
this.container = document.createElement("dv") this.container = document.createElement("dv")
this.container.classList = "image-container" this.container.classList = "image-container"
this.element = document.createElement("img") this.element = document.createElement("img")
this.element.classList = "pannable center drop-shadow" this.element.classList = "pannable center drop_shadow"
this.element.src = this.file.get_href this.element.src = this.file.get_href
this.element.addEventListener("dblclick", (e) => { return this.doubleclick(e) }) this.element.addEventListener("dblclick", (e) => { return this.doubleclick(e) })
this.element.addEventListener("doubletap", (e) => { return this.doubleclick(e) }) this.element.addEventListener("doubletap", (e) => { return this.doubleclick(e) })
this.element.addEventListener("mousedown", (e) => { return this.mousedown(e) }) this.element.addEventListener("mousedown", (e) => { return this.mousedown(e) })
this.element.addEventListener("mousedown", (e) => { return this.mousedown(e) })
this.element.addEventListener("wheel", (e) => { return this.scroll(e) })
document.addEventListener("mousemove", (e) => { return this.mousemove(e) }) document.addEventListener("mousemove", (e) => { return this.mousemove(e) })
document.addEventListener("mouseup", (e) => { return this.mouseup(e) }) document.addEventListener("mouseup", (e) => { return this.mouseup(e) })
@@ -25,14 +29,31 @@ ImageViewer.prototype.render = function(parent) {
parent.appendChild(this.container) parent.appendChild(this.container)
} }
ImageViewer.prototype.scroll = function(e) {
if (!this.zoomed) {
this.doubleclick(e)
}
console.log(e.deltaY)
this.zoom = this.zoom - (e.deltaY * 0.01);
if (this.zoom < 1) { this.zoom = 1 }
if (this.zoom > 10) { this.zoom = 10 }
this.element.style.width = this.zoom * 100 + "%"
this.element.style.height = "auto"
this.element.style.maxWidth = "1000%"
this.element.style.maxHeight = "1000%"
e.preventDefault()
e.stopPropagation()
return false
}
ImageViewer.prototype.doubleclick = function(e) { ImageViewer.prototype.doubleclick = function(e) {
if (this.zoomed) { if (this.zoomed) {
this.element.style.maxWidth = "100%" this.element.removeAttribute("style")
this.element.style.maxHeight = "100%" this.container.style.overflow = ""
this.element.style.top = "50%"
this.element.style.left = "auto"
this.element.style.transform = "translateY(-50%)"
this.container.style.overflow = "hidden"
this.zoomed = false this.zoomed = false
} else { } else {
this.element.style.maxWidth = "none" this.element.style.maxWidth = "none"

2
res/include/script/file_viewer/viewer_scripts/VideoViewer.js
View File

@@ -9,7 +9,7 @@ function VideoViewer(viewer, file, next) {
this.vidElement = document.createElement("video") this.vidElement = document.createElement("video")
this.vidElement.autoplay = "autoplay" this.vidElement.autoplay = "autoplay"
this.vidElement.controls = "controls" this.vidElement.controls = "controls"
this.vidElement.classList = "center drop-shadow" this.vidElement.classList = "center drop_shadow"
this.vidElement.addEventListener("ended", () => { this.next() }, false) this.vidElement.addEventListener("ended", () => { this.next() }, false)
this.videoSource = document.createElement("source") this.videoSource = document.createElement("source")

6
res/include/script/homepage.js
View File

@@ -28,14 +28,14 @@ UploadProgressBar.prototype.onProgress = function(progress){
this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.name this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.name
this.uploadDiv.style.background = 'linear-gradient(' this.uploadDiv.style.background = 'linear-gradient('
+'to right, ' +'to right, '
+'var(--file_background_color) 0%, ' +'var(--input_color_dark) 0%, '
+'var(--highlight_color) '+ ((progress*100)) +'%, ' +'var(--highlight_color) '+ ((progress*100)) +'%, '
+'var(--file_background_color) '+ ((progress*100)+1) +'%)' +'var(--input_color_dark) '+ ((progress*100)+1) +'%)'
} }
UploadProgressBar.prototype.onFinished = function(id){ UploadProgressBar.prototype.onFinished = function(id){
console.log("Upload finished: "+this.file.name+" "+id) console.log("Upload finished: "+this.file.name+" "+id)
this.uploadDiv.style.background = 'var(--file_background_color)' this.uploadDiv.style.background = 'var(--input_color_dark)'
this.uploadDiv.href = '/u/'+id this.uploadDiv.href = '/u/'+id
this.uploadDiv.target= "_blank" this.uploadDiv.target= "_blank"

38
res/include/style/file_manager.css
View File

@@ -3,6 +3,8 @@
padding: 0; padding: 0;
} }
/* Override the menu button so it doesn't overlap the file manager when the menu
is collapsed */
#button_toggle_navigation { #button_toggle_navigation {
display: none; display: none;
} }
@@ -10,24 +12,12 @@
.file_manager { .file_manager {
position: absolute; position: absolute;
padding: 0; padding: 0;
background-color: var(--layer_1_color); background-color: var(--layer_2_color);
box-shadow: #000000 8px 8px 50px 5px; width: 100%;
left: 24px; height: 100%;
top: 24px;
right: 24px;
bottom: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@media (max-width: 1000px) {
.file_manager {
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
.file_manager > .nav_bar { .file_manager > .nav_bar {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
@@ -55,13 +45,14 @@
overflow: hidden; overflow: hidden;
top: 0; top: 0;
z-index: 1; z-index: 1;
background-color: var(--layer_1_color); background-color: var(--layer_2_color);
min-width: 750px; /* Sum of all columns */
} }
.file_manager > .directory_area > .directory_sorters > div { .file_manager > .directory_area > .directory_sorters > div {
flex-shrink: 0;
flex-grow: 1;
display: inline-block; display: inline-block;
margin: 4px 10px; margin: 4px 10px;
padding: 4px;
box-sizing: border-box;
border-bottom: 1px solid var(--input_color); border-bottom: 1px solid var(--input_color);
cursor: pointer; cursor: pointer;
} }
@@ -76,12 +67,6 @@
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
} }
@media (max-width: 1000px) {
.file_manager > .directory_area > .directory_sorters > :not(:first-child),
.node > :not(:first-child) {
display: none;
}
}
.file_manager > .directory_area { .file_manager > .directory_area {
flex-shrink: 1; flex-shrink: 1;
@@ -97,7 +82,7 @@
above are out of view*/ above are out of view*/
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
overflow: hidden; min-width: 750px; /* Sum of all columns */
} }
.file_manager > .status_bar { .file_manager > .status_bar {
@@ -117,7 +102,6 @@
control over the size. control over the size.
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/ Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
margin: 0; margin: 0;
padding: 4px;
box-sizing: border-box; box-sizing: border-box;
color: var(--text_color); color: var(--text_color);
@@ -136,6 +120,8 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
margin: auto 10px; margin: auto 10px;
padding: 4px;
box-sizing: border-box;
display: inline-block; display: inline-block;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

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

@@ -54,7 +54,7 @@ html, body {
} }
body{ body{
background-color: #111111; /* Fallback */ background-color: #111111; /* Fallback */
background-color: var(--body_color); background-color: var(--layer_2_color);
background-repeat: repeat; background-repeat: repeat;
margin: 0; margin: 0;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
@@ -123,7 +123,7 @@ body{
transition: left 0.5s; transition: left 0.5s;
padding: 50px 0 50px 0; padding: 50px 0 50px 0;
} }
@media (max-width: 600px) { @media (max-width: 800px) {
.page_navigation { .page_navigation {
left: -250px; left: -250px;
} }
@@ -210,43 +210,44 @@ body, .checkers {
.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,
.highlight_1, .highlight_1,
.highlight_2, .highlight_2,
.highlight_3, .highlight_3{
.highlight_4 {
position: relative; position: relative;
width: auto; width: auto;
height: auto; height: auto;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
padding: .5em; padding: 8px;
} }
.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 var(--layer_1_shadow) 0 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 var(--layer_2_shadow) 0 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 var(--layer_3_shadow) 0 var(--shadow_color);
.highlight_headerbar, .highlight_4 { }
background-color: var(--layer_4_color); .highlight_green {
box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);}
.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: rgb(54, 54, 255);
.highlight_red { }
.highlight_red {
background-color: rgba(255, 0, 0, 0.1); background-color: rgba(255, 0, 0, 0.1);
border-color: #B00000;} border-color: #B00000;
}
.highlight_green, .highlight_green,
.highlight_blue, .highlight_blue,
@@ -264,13 +265,15 @@ h1, h2, h3, h4, h5, h6 {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
h1{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;} h2, h3{ /* Differentiate it a bit, else it just looks like bold text */
h2{font-size: 1.75em; font-family: "light", sans-serif; font-weight: normal;} border-bottom: 1px var(--layer_3_color_border) solid;
}
h1{font-size: 2.25em; font-family: "light", sans-serif; font-weight: normal;}
h2{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;}
h3{font-size: 1.5em; font-family: "light", sans-serif; font-weight: normal;} h3{font-size: 1.5em; font-family: "light", sans-serif; font-weight: normal;}
h4{font-size: 1.25em; font-family: sans-serif; font-weight: normal;} h4{font-size: 1.25em; font-family: sans-serif; font-weight: normal;}
h5{font-size: 1em; font-family: sans-serif; font-weight: normal;} h5{font-size: 1em; font-family: sans-serif; font-weight: normal;}
h6{font-size: .75em; font-family: sans-serif; font-weight: normal;} h6{font-size: .75em; font-family: sans-serif; font-weight: normal;}
h2, h3{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;
@@ -335,7 +338,7 @@ pre{
overflow: hidden; overflow: hidden;
border-radius: 2px; border-radius: 2px;
box-shadow: 2px 2px 8px -3px var(--shadow_color); box-shadow: 2px 2px 8px -3px var(--shadow_color);
background-color: var(--file_background_color); background-color: var(--input_color_dark);
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
color: var(--text_color); color: var(--text_color);
word-break: break-all; word-break: break-all;

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

@@ -22,7 +22,6 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
padding: 8px;
z-index: 10; z-index: 10;
box-shadow: none; box-shadow: none;
} }
@@ -31,8 +30,8 @@
.file_viewer > .file_viewer_headerbar > * { .file_viewer > .file_viewer_headerbar > * {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-left: .4em; margin-left: 6px;
margin-right: .4em; margin-right: 6px;
display: inline-flex; display: inline-flex;
} }
.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title { .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
@@ -148,7 +147,7 @@
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 6px var(--shadow_color); box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color);
text-align: center; text-align: center;
z-index: 48; z-index: 48;
overflow: hidden; overflow: hidden;
@@ -193,8 +192,8 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
.pannable{ cursor: move; } .pannable { cursor: move; }
.drop-shadow{ box-shadow: var(--shadow_color) 10px 10px 50px; } .drop_shadow { box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color); }
/* ======================== /* ========================
|| TOOLBAR COMPONENTS || || TOOLBAR COMPONENTS ||

32
res/template/about.html
View File

@@ -76,12 +76,6 @@
</p> </p>
<h3>What cookies does pixeldrain use?</h3> <h3>What cookies does pixeldrain use?</h3>
<p>
When uploading a file pixeldrain will install a cookie named
'pduploads'. This cookie keeps a dot-separated list of all files
you have uploaded anonymously in this browser. This cookie is
<b>only</b> used for viewing your upload history.
</p>
<p> <p>
When logging in to a pixeldrain account a cookie named When logging in to a pixeldrain account a cookie named
'pd_auth_key' will be installed. This cookie keeps your login 'pd_auth_key' will be installed. This cookie keeps your login
@@ -89,20 +83,26 @@
your account. your account.
</p> </p>
<p> <p>
When you use the style selector at the bottom of this page a When you use the style selector on the <a
cookie called 'style' will be set. This cookie controls the href="/appearance">Appearance</a> page a cookie called 'style'
appearance of the website for you. will be set. This cookie controls the appearance of the website
for you.
</p>
<p>
When uploading a file pixeldrain will save a list of file links
on your browser's local storage. This data is
<b>only</b> used for viewing your upload history on the <a
href="/history">history page</a>.
</p> </p>
<h2 id="legality">Legality</h2> <h3 id="legality">Legality</h3>
<p> <p>
I cannot be held liable for any illegal and / or copyrighted I cannot be held liable for any illegal and / or copyrighted
material that's uploaded by the users of this application. material that's uploaded by the users of this application. Files
Files uploaded to this website are subjected to local laws. If uploaded to this website are subjected to local laws. If laws
laws are being broken, and I've been notified of the fact I'll are being broken, and I've been notified of the fact I'll have
have to delete the offending content (as the server does not to delete the offending content. If you find any files on this
support geo filtering yet). If you find any files on this domain domain that break the law, please contact me at
that break the law, please contact me at
<a href="mailto:abuse@pixeldrain.com">abuse@pixeldrain.com</a>, <a href="mailto:abuse@pixeldrain.com">abuse@pixeldrain.com</a>,
and I'll take care of it. and I'll take care of it.
<br/>Please share responsibly. <br/>Please share responsibly.

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

@@ -13,7 +13,7 @@
<div id="page_body" class="page_body"> <div id="page_body" class="page_body">
<div id="file_manager" class="file_manager"> <div id="file_manager" class="file_manager">
<div id="nav_bar" class="nav_bar highlight_light"> <div id="nav_bar" class="nav_bar highlight_1">
<button id="btn_menu" onclick="toggleMenu()">☰</button> <button id="btn_menu" onclick="toggleMenu()">☰</button>
<!-- <div class="spacer"></div> <!-- <div class="spacer"></div>
<button id="btn_back" >⇐</button id="btn_forward"> <button id="btn_back" >⇐</button id="btn_forward">
@@ -32,7 +32,7 @@
<div id="directory_area" class="directory_area"> <div id="directory_area" class="directory_area">
<div id="directory_sorters" class="directory_sorters"></div> <div id="directory_sorters" class="directory_sorters"></div>
</div> </div>
<div id="directory_footer" class="status_bar highlight_light"></div> <div id="directory_footer" class="status_bar highlight_1"></div>
</div> </div>
</div> </div>

24
res/template/admin.html
View File

@@ -21,7 +21,7 @@
<button onclick="days = 182; interval = 1440; setData();">Half-year</button> <button onclick="days = 182; interval = 1440; setData();">Half-year</button>
<button onclick="days = 365; interval = 1440; setData();">Year</button> <button onclick="days = 365; interval = 1440; setData();">Year</button>
</div> </div>
<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;"> <div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: 500px;">
<canvas id="bandwidth_chart"></canvas> <canvas id="bandwidth_chart"></canvas>
</div> </div>
@@ -34,7 +34,7 @@
Chart.defaults.global.defaultFontColor = "#b3b3b3"; Chart.defaults.global.defaultFontColor = "#b3b3b3";
Chart.defaults.global.defaultFontSize = 15; Chart.defaults.global.defaultFontSize = 15;
Chart.defaults.global.defaultFontFamily = "Ubuntu"; Chart.defaults.global.defaultFontFamily = "Ubuntu";
Chart.defaults.global.aspectRatio = 2.5; Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.elements.point.radius = 0; Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.tooltips.mode = "index"; Chart.defaults.global.tooltips.mode = "index";
Chart.defaults.global.tooltips.axis = "x"; Chart.defaults.global.tooltips.axis = "x";
@@ -50,18 +50,18 @@
datasets: [ datasets: [
{ {
label: "Bandwidth", label: "Bandwidth",
backgroundColor: "rgba(64, 255, 64, .05)", backgroundColor: "rgba(64, 255, 64, .01)",
borderColor: "rgba(128, 255, 128, 1)", borderColor: "rgba(96, 255, 96, 1)",
borderWidth: 1.5, borderWidth: 2,
lineTension: 0.1, lineTension: 0.2,
fill: true, fill: true,
yAxisID: "y_bandwidth" yAxisID: "y_bandwidth"
}, { }, {
label: "Views", label: "Views",
backgroundColor: "rgba(64, 64, 255, .1)", backgroundColor: "rgba(64, 64, 255, .01)",
borderColor: "rgba(128, 128, 255, 1)", borderColor: "rgba(64, 64, 255, 1)",
borderWidth: 1.5, borderWidth: 2,
lineTension: 0.1, lineTension: 0.2,
fill: true, fill: true,
yAxisID: "y_views" yAxisID: "y_views"
} }
@@ -85,7 +85,7 @@
} }
}, },
gridLines: { gridLines: {
color: "rgba(100, 255, 100, .1)" color: "rgba(100, 255, 100, .05)"
} }
}, { }, {
type: "linear", type: "linear",
@@ -97,7 +97,7 @@
labelString: "Views" labelString: "Views"
}, },
gridLines: { gridLines: {
color: "rgba(128, 128, 255, .2)" color: "rgba(128, 128, 255, .05)"
} }
} }
], ],

2
res/template/file_viewer.html
View File

@@ -111,7 +111,7 @@
<div class="info_about"> <div class="info_about">
<h3>Downloads and views</h3> <h3>Downloads and views</h3>
<div class="chart-container" style="position: relative; width: 100%; height: auto;"> <div class="chart-container" style="position: relative; width: 100%; height: 400px;">
<canvas id="bandwidth_chart"></canvas> <canvas id="bandwidth_chart"></canvas>
</div> </div>
<p style="text-align: center"> <p style="text-align: center">

8
res/template/fragments/page_wrap.html
View File

@@ -20,16 +20,14 @@
</div> </div>
<script> <script>
function toggleMenu() { function toggleMenu() {
var nav = document.getElementById("page_navigation"); var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body"); var body = document.getElementById("page_body");
if (nav.offsetLeft === 0) { if (nav.offsetLeft === 0) {
// Menu is visible // Menu is visible, hide it
nav.style.left = -nav.offsetWidth + "px"; nav.style.left = -nav.offsetWidth + "px";
body.style.left = "0"; body.style.left = "0";
} else { } else {
// Menu is hidden // Menu is hidden, show it
nav.style.left = "0"; nav.style.left = "0";
body.style.left = nav.offsetWidth + "px"; body.style.left = nav.offsetWidth + "px";
} }

223
webcontroller/user_style.go
View File

@@ -43,26 +43,18 @@ type pixeldrainStyleSheet struct {
HighlightColor hsl // Links, highlighted buttons, list navigation HighlightColor hsl // Links, highlighted buttons, list navigation
HighlightTextColor hsl // Text on buttons HighlightTextColor hsl // Text on buttons
DangerColor hsl DangerColor hsl
FileBackgroundColor hsl
ScrollbarForegroundColor hsl ScrollbarForegroundColor hsl
ScrollbarHoverColor hsl ScrollbarHoverColor hsl
ScrollbarBackgroundColor hsl ScrollbarBackgroundColor hsl
BackgroundColor hsl
BodyColor hsl
Layer1Color hsl // Deepest and darkest layer Layer1Color hsl // Deepest and darkest layer
Layer1Shadow int // Deep layers have little shadow Layer1Shadow int // Deep layers have little shadow
Layer2Color hsl Layer2Color hsl
Layer2Shadow int Layer2Shadow int
Layer3Color hsl Layer3Color hsl // Highest and brightest layer
Layer3Shadow int Layer3Shadow int // High layers have lots of shadow
Layer4Color hsl // Highest and brightest layer
Layer4Shadow int // High layers have lots of shadow
ShadowColor hsl ShadowColor hsl
ShadowSpread int // Pixels
ShadowIntensity int // Pixels
} }
func (s pixeldrainStyleSheet) String() string { func (s pixeldrainStyleSheet) String() string {
@@ -77,14 +69,10 @@ func (s pixeldrainStyleSheet) String() string {
--highlight_text_color: #%s; --highlight_text_color: #%s;
--danger_color: #%s; --danger_color: #%s;
--danger_color_dark: #%s; --danger_color_dark: #%s;
--file_background_color: #%s;
--scrollbar_foreground_color: #%s; --scrollbar_foreground_color: #%s;
--scrollbar_hover_color: #%s; --scrollbar_hover_color: #%s;
--scrollbar_background_color: #%s; --scrollbar_background_color: #%s;
--background_color: #%s;
--body_color: #%s;
--layer_1_color: #%s; --layer_1_color: #%s;
--layer_1_color_border: #%s; --layer_1_color_border: #%s;
--layer_1_shadow: %s; --layer_1_shadow: %s;
@@ -94,29 +82,21 @@ func (s pixeldrainStyleSheet) String() string {
--layer_3_color: #%s; --layer_3_color: #%s;
--layer_3_color_border: #%s; --layer_3_color_border: #%s;
--layer_3_shadow: %s; --layer_3_shadow: %s;
--layer_4_color: #%s;
--layer_4_color_border: #%s;
--layer_4_shadow: %s;
--shadow_color: #%s; --shadow_color: #%s;
--shadow_spread: %s;
--shadow_intensity: %s;
}`, }`,
s.TextColor.RGB(), s.TextColor.RGB(),
s.InputColor.RGB(), s.InputColor.RGB(),
s.InputColor.add(0, 0, -.03).RGB(), s.InputColor.add(0, 0, -.02).RGB(),
s.InputTextColor.RGB(), s.InputTextColor.RGB(),
s.HighlightColor.RGB(), s.HighlightColor.RGB(),
s.HighlightColor.add(0, 0, -.03).RGB(), s.HighlightColor.add(0, 0, -.02).RGB(),
s.HighlightTextColor.RGB(), s.HighlightTextColor.RGB(),
s.DangerColor.RGB(), s.DangerColor.RGB(),
s.DangerColor.add(0, 0, -.03).RGB(), s.DangerColor.add(0, 0, -.02).RGB(),
s.FileBackgroundColor.RGB(),
s.ScrollbarForegroundColor.RGB(), s.ScrollbarForegroundColor.RGB(),
s.ScrollbarHoverColor.RGB(), s.ScrollbarHoverColor.RGB(),
s.ScrollbarBackgroundColor.RGB(), s.ScrollbarBackgroundColor.RGB(),
s.BackgroundColor.RGB(),
s.BodyColor.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), fmt.Sprintf("%dpx", s.Layer1Shadow),
@@ -126,12 +106,7 @@ func (s pixeldrainStyleSheet) String() string {
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), fmt.Sprintf("%dpx", s.Layer3Shadow),
s.Layer4Color.RGB(),
s.Layer4Color.add(0, 0, .05).RGB(),
fmt.Sprintf("%dpx", s.Layer4Shadow),
s.ShadowColor.RGB(), s.ShadowColor.RGB(),
fmt.Sprintf("%dpx", s.ShadowSpread),
fmt.Sprintf("%dpx", s.ShadowIntensity),
) )
} }
@@ -223,58 +198,44 @@ func (h hsl) add(hue int, saturation float64, lightness float64) hsl {
var defaultPixeldrainStyle = pixeldrainStyleSheet{ var defaultPixeldrainStyle = pixeldrainStyleSheet{
TextColor: hsl{0, 0, .7}, TextColor: hsl{0, 0, .7},
InputColor: hsl{0, 0, .25}, InputColor: hsl{0, 0, .2},
InputTextColor: hsl{0, 0, 1}, InputTextColor: hsl{0, 0, 1},
HighlightColor: hsl{89, .51, .45}, HighlightColor: hsl{89, .51, .45},
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{339, .65, .31}, DangerColor: hsl{339, .65, .31},
FileBackgroundColor: hsl{0, 0, .20},
ScrollbarForegroundColor: hsl{0, 0, .35}, ScrollbarForegroundColor: hsl{0, 0, .35},
ScrollbarHoverColor: hsl{0, 0, .45}, ScrollbarHoverColor: hsl{0, 0, .45},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, Layer1Color: hsl{0, 0, .08},
BodyColor: hsl{0, 0, .07}, Layer1Shadow: 3,
Layer1Color: hsl{0, 0, .11}, Layer2Color: hsl{0, 0, .11},
Layer1Shadow: 3, Layer2Shadow: 5,
Layer2Color: hsl{0, 0, .13}, Layer3Color: hsl{0, 0, .14},
Layer2Shadow: 5, Layer3Shadow: 7,
Layer3Color: hsl{0, 0, .14},
Layer3Shadow: 7,
Layer4Color: hsl{0, 0, .14},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7,
ShadowIntensity: 0,
} }
var sunnyPixeldrainStyle = pixeldrainStyleSheet{ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
TextColor: hsl{0, 0, .1}, TextColor: hsl{0, 0, .1},
InputColor: hsl{0, 0, 1}, InputColor: hsl{0, 0, .96}, // hsl(0, 0%, 96%)
InputTextColor: hsl{0, 0, .1}, InputTextColor: hsl{0, 0, .1},
HighlightColor: hsl{89, .51, .5}, HighlightColor: hsl{89, .74, .5}, // hsl(89, 73%, 50%)
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{339, .65, .31}, DangerColor: hsl{345, .99, .33}, // hsl(345, 99%, 33%)
FileBackgroundColor: hsl{0, 0, 1},
ScrollbarForegroundColor: hsl{0, 0, .30}, ScrollbarForegroundColor: hsl{0, 0, .30},
ScrollbarHoverColor: hsl{0, 0, .40}, ScrollbarHoverColor: hsl{0, 0, .40},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, Layer1Color: hsl{0, 0, .98}, // hsl(0, 0%, 13%)
BodyColor: hsl{0, 0, 1}, Layer1Shadow: 3,
Layer1Color: hsl{0, 0, 1}, Layer2Color: hsl{0, 1, 1},
Layer1Shadow: 3, Layer2Shadow: 5,
Layer2Color: hsl{0, 0, 1}, Layer3Color: hsl{0, 1, 1},
Layer2Shadow: 5, Layer3Shadow: 6,
Layer3Color: hsl{0, 0, 1},
Layer3Shadow: 6,
Layer4Color: hsl{0, 0, 1},
Layer4Shadow: 5,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7,
ShadowIntensity: 0,
} }
var solarizedDarkStyle = pixeldrainStyleSheet{ var solarizedDarkStyle = pixeldrainStyleSheet{
@@ -284,25 +245,18 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
HighlightColor: hsl{145, .63, .42}, HighlightColor: hsl{145, .63, .42},
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{343, .63, .42}, DangerColor: hsl{343, .63, .42},
FileBackgroundColor: hsl{192, .87, .05},
ScrollbarForegroundColor: hsl{192, .95, .30}, ScrollbarForegroundColor: hsl{192, .95, .30},
ScrollbarHoverColor: hsl{192, .95, .40}, ScrollbarHoverColor: hsl{192, .95, .40},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{192, 1, .05}, Layer1Color: hsl{192, .87, .09},
BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%) Layer1Shadow: 3,
Layer1Color: hsl{192, .87, .09}, Layer2Color: hsl{192, .81, .14},
Layer1Shadow: 3, Layer2Shadow: 5,
Layer2Color: hsl{192, .81, .14}, Layer3Color: hsl{192, .95, .17},
Layer2Shadow: 5, Layer3Shadow: 7,
Layer3Color: hsl{192, .95, .17},
Layer3Shadow: 7,
Layer4Color: hsl{192, 1, .11}, // hsl(192, 100%, 11%)
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7,
ShadowIntensity: 0,
} }
var maroonStyle = pixeldrainStyleSheet{ var maroonStyle = pixeldrainStyleSheet{
@@ -312,81 +266,60 @@ var maroonStyle = pixeldrainStyleSheet{
HighlightColor: hsl{0, 1, .4}, HighlightColor: hsl{0, 1, .4},
HighlightTextColor: hsl{0, 0, 1}, HighlightTextColor: hsl{0, 0, 1},
DangerColor: hsl{0, .1, .1}, DangerColor: hsl{0, .1, .1},
FileBackgroundColor: hsl{0, 1, .03},
ScrollbarForegroundColor: hsl{0, .75, .3}, ScrollbarForegroundColor: hsl{0, .75, .3},
ScrollbarHoverColor: hsl{0, .75, .4}, ScrollbarHoverColor: hsl{0, .75, .4},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 1, .05}, Layer1Color: hsl{0, .5, .07},
BodyColor: hsl{0, .6, .1}, Layer1Shadow: 3,
Layer1Color: hsl{0, .5, .07}, Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15},
Layer1Shadow: 3, Layer2Shadow: 5,
Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15}, Layer3Color: hsl{0, .9, .2},
Layer2Shadow: 5, Layer3Shadow: 7,
Layer3Color: hsl{0, .9, .2},
Layer3Shadow: 7,
Layer4Color: hsl{0, .5, .07},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7,
ShadowIntensity: 0,
} }
var hackerStyle = pixeldrainStyleSheet{ var hackerStyle = pixeldrainStyleSheet{
TextColor: hsl{0, 0, .8}, TextColor: hsl{0, 0, .8},
InputColor: hsl{0, 0, .25}, InputColor: hsl{120, .5, .1}, // hsl(120, 50%, 10%)
InputTextColor: hsl{0, 0, 1}, InputTextColor: hsl{0, 0, 1},
HighlightColor: hsl{120, 1, .5}, HighlightColor: hsl{120, 1, .5},
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{0, .65, .31}, DangerColor: hsl{0, 1, .4},
FileBackgroundColor: hsl{120, .8, .06},
ScrollbarForegroundColor: hsl{120, .5, .25}, ScrollbarForegroundColor: hsl{120, .5, .25},
ScrollbarHoverColor: hsl{120, .5, .35}, ScrollbarHoverColor: hsl{120, .5, .35},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, Layer1Color: hsl{0, 0, 0},
BodyColor: hsl{0, 0, 0}, Layer1Shadow: 3,
Layer1Color: hsl{120, .1, .05}, Layer2Color: hsl{0, 0, .03},
Layer1Shadow: 3, Layer2Shadow: 5,
Layer2Color: hsl{120, .2, .10}, Layer3Color: hsl{120, .3, .15},
Layer2Shadow: 5, Layer3Shadow: 7,
Layer3Color: hsl{120, .3, .15},
Layer3Shadow: 7,
Layer4Color: hsl{0, 0, .14},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7,
ShadowIntensity: 0,
} }
var cantaPixeldrainStyle = pixeldrainStyleSheet{ var cantaPixeldrainStyle = pixeldrainStyleSheet{
TextColor: hsl{0, 0, .8}, TextColor: hsl{0, 0, .8},
InputColor: hsl{167, .06, .40}, InputColor: hsl{167, .06, .30}, // hsl(167, 6%, 30%)
InputTextColor: hsl{0, 0, 1}, InputTextColor: hsl{0, 0, 1},
HighlightColor: hsl{165, 1, .40}, HighlightColor: hsl{165, 1, .40}, // hsl(165, 100%, 40%)
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{40, 1, .5}, DangerColor: hsl{40, 1, .5}, // hsl(40, 100%, 50%)
FileBackgroundColor: hsl{170, .04, .29},
ScrollbarForegroundColor: hsl{204, .05, .78}, // hsl(204, 5%, 78%) ScrollbarForegroundColor: hsl{204, .05, .78}, // hsl(204, 5%, 78%)
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%)
BackgroundColor: hsl{0, 0, 0}, Layer1Color: hsl{180, .04, .16}, // hsl(180, 4%, 16%)
BodyColor: hsl{172, .06, .25}, Layer1Shadow: 3,
Layer1Color: hsl{200, .19, .18}, // hsl(200, 19%, 18%) Layer2Color: hsl{170, .06, .21}, // hsl(170, 6%, 21%)
Layer1Shadow: 3, Layer2Shadow: 5,
Layer2Color: hsl{199, .14, .23}, // hsl(199, 14%, 23%) Layer3Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%)
Layer2Shadow: 5, Layer3Shadow: 6,
Layer3Color: hsl{199, .14, .27}, // hsl(199, 14%, 27%)
Layer3Shadow: 6,
Layer4Color: hsl{200, .14, .30}, // hsl(200, 14%, 30%)
Layer4Shadow: 7,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7,
ShadowIntensity: 0,
} }
var arcPixeldrainStyle = pixeldrainStyleSheet{ var arcPixeldrainStyle = pixeldrainStyleSheet{
@@ -396,25 +329,18 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{
HighlightColor: hsl{212, .71, .60}, HighlightColor: hsl{212, .71, .60},
HighlightTextColor: hsl{215, .19, .9}, HighlightTextColor: hsl{215, .19, .9},
DangerColor: hsl{357, .53, .57}, // hsl(357, 53%, 57%) DangerColor: hsl{357, .53, .57}, // hsl(357, 53%, 57%)
FileBackgroundColor: hsl{219, .1, .2},
ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%) ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%)
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%)
BackgroundColor: hsl{0, 0, 0}, Layer1Color: hsl{215, .17, .19},
BodyColor: hsl{223, .12, .29}, Layer1Shadow: 3,
Layer1Color: hsl{215, .17, .19}, Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%)
Layer1Shadow: 3, Layer2Shadow: 5,
Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%) Layer3Color: hsl{223, .12, .29},
Layer2Shadow: 5, Layer3Shadow: 7,
Layer3Color: hsl{223, .12, .29},
Layer3Shadow: 7,
Layer4Color: hsl{219, .15, .22}, // hsl(219, 15%, 22%)
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7,
ShadowIntensity: 0,
} }
var deepseaPixeldrainStyle = pixeldrainStyleSheet{ var deepseaPixeldrainStyle = pixeldrainStyleSheet{
@@ -424,23 +350,16 @@ var deepseaPixeldrainStyle = pixeldrainStyleSheet{
HighlightColor: hsl{5, .77, .55}, HighlightColor: hsl{5, .77, .55},
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{5, .77, .55}, DangerColor: hsl{5, .77, .55},
FileBackgroundColor: hsl{159, .27, .17},
ScrollbarForegroundColor: hsl{162, .28, .23}, // hsl(162, 28%, 23%) ScrollbarForegroundColor: hsl{162, .28, .23}, // hsl(162, 28%, 23%)
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%)
BackgroundColor: hsl{0, 0, 0}, Layer1Color: hsl{160, .27, .07},
BodyColor: hsl{0, 0, .07}, Layer1Shadow: 3,
Layer1Color: hsl{160, .27, .09}, Layer2Color: hsl{163, .26, .11}, // hsl(163, 26%, 11%)
Layer1Shadow: 3, Layer2Shadow: 5,
Layer2Color: hsl{163, .26, .11}, // hsl(163, 26%, 11%) Layer3Color: hsl{161, .28, .14}, // hsl(161, 28%, 14%)
Layer2Shadow: 5, Layer3Shadow: 7,
Layer3Color: hsl{161, .28, .14}, // hsl(161, 28%, 14%)
Layer3Shadow: 7,
Layer4Color: hsl{159, .27, .17}, // hsl(159, 27%, 17%)
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7,
ShadowIntensity: 0,
} }