simplify theming
This commit is contained in:
@@ -17,17 +17,18 @@ function DirectoryElement(directoryArea, footer) {
|
||||
let makeSortButton = (field, label, width) => {
|
||||
this.sortButtons[field] = document.createElement("div")
|
||||
this.sortButtons[field].innerText = label
|
||||
this.sortButtons[field].style.width = width
|
||||
this.sortButtons[field].style.minWidth = width
|
||||
this.sortButtons[field].addEventListener("click", () => {
|
||||
this.sortBy(field)
|
||||
})
|
||||
this.directorySorters.appendChild(this.sortButtons[field])
|
||||
}
|
||||
|
||||
this.fieldNameWidth = "300px"
|
||||
this.fieldDateWidth = "160px"
|
||||
this.fieldSizeWidth = "100px"
|
||||
this.fieldSizeWidth = "90px"
|
||||
this.fieldTypeWidth = "200px"
|
||||
makeSortButton("name", "Name", "")
|
||||
makeSortButton("name", "Name", this.fieldNameWidth)
|
||||
makeSortButton("dateCreated", "Creation Date", this.fieldDateWidth)
|
||||
makeSortButton("size", "Size", this.fieldSizeWidth)
|
||||
makeSortButton("type", "Type", this.fieldTypeWidth)
|
||||
@@ -178,6 +179,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
|
||||
|
||||
{
|
||||
let cell = document.createElement("div")
|
||||
cell.style.minWidth = this.fieldNameWidth
|
||||
let thumb = document.createElement("img")
|
||||
thumb.src = file.icon
|
||||
cell.appendChild(thumb)
|
||||
@@ -189,7 +191,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
|
||||
}
|
||||
{
|
||||
let cell = document.createElement("div")
|
||||
cell.style.width = this.fieldDateWidth
|
||||
cell.style.minWidth = this.fieldDateWidth
|
||||
let label = document.createElement("span")
|
||||
label.innerText = printDate(new Date(file.dateCreated), true, true, false)
|
||||
cell.appendChild(label)
|
||||
@@ -197,7 +199,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
|
||||
}
|
||||
{
|
||||
let cell = document.createElement("div")
|
||||
cell.style.width = this.fieldSizeWidth
|
||||
cell.style.minWidth = this.fieldSizeWidth
|
||||
let label = document.createElement("span")
|
||||
label.innerText = file.sizeLabel
|
||||
cell.appendChild(label)
|
||||
@@ -205,7 +207,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
|
||||
}
|
||||
{
|
||||
let cell = document.createElement("div")
|
||||
cell.style.width = this.fieldTypeWidth
|
||||
cell.style.minWidth = this.fieldTypeWidth
|
||||
let label = document.createElement("span")
|
||||
label.innerText = file.type
|
||||
cell.appendChild(label)
|
||||
|
||||
@@ -72,7 +72,7 @@ DetailsWindow.prototype.renderGraph = function() {
|
||||
Chart.defaults.global.defaultFontColor = "#b3b3b3"
|
||||
Chart.defaults.global.defaultFontSize = 15
|
||||
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.tooltips.mode = "index"
|
||||
Chart.defaults.global.tooltips.axis = "x"
|
||||
@@ -80,25 +80,25 @@ DetailsWindow.prototype.renderGraph = function() {
|
||||
this.graph = new Chart(
|
||||
document.getElementById('bandwidth_chart'),
|
||||
{
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: "Downloads",
|
||||
backgroundColor: "rgba(64, 255, 64, .05)",
|
||||
borderColor: "rgba(128, 255, 128, 1)",
|
||||
borderWidth: 1.5,
|
||||
lineTension: 0.1,
|
||||
label: "Bandwidth",
|
||||
backgroundColor: "rgba(64, 255, 64, .01)",
|
||||
borderColor: "rgba(96, 255, 96, 1)",
|
||||
borderWidth: 2,
|
||||
lineTension: 0.2,
|
||||
fill: true,
|
||||
yAxisID: "y_bandwidth",
|
||||
yAxisID: "y_bandwidth"
|
||||
}, {
|
||||
label: "Views",
|
||||
backgroundColor: "rgba(64, 64, 255, .1)",
|
||||
borderColor: "rgba(128, 128, 255, 1)",
|
||||
borderWidth: 1.5,
|
||||
lineTension: 0.1,
|
||||
backgroundColor: "rgba(64, 64, 255, .01)",
|
||||
borderColor: "rgba(64, 64, 255, 1)",
|
||||
borderWidth: 2,
|
||||
lineTension: 0.2,
|
||||
fill: true,
|
||||
yAxisID: "y_views",
|
||||
yAxisID: "y_views"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -115,7 +115,7 @@ DetailsWindow.prototype.renderGraph = function() {
|
||||
labelString: "Downloads"
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(100, 255, 100, .1)"
|
||||
color: "rgba(100, 255, 100, .05)"
|
||||
}
|
||||
}, {
|
||||
type: "linear",
|
||||
@@ -127,7 +127,7 @@ DetailsWindow.prototype.renderGraph = function() {
|
||||
labelString: "Views"
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(128, 128, 255, .2)"
|
||||
color: "rgba(128, 128, 255, .05)"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
@@ -6,15 +6,19 @@ function ImageViewer(viewer, file) {
|
||||
this.y = 0
|
||||
this.dragging = false
|
||||
|
||||
this.zoom = 1
|
||||
|
||||
this.container = document.createElement("dv")
|
||||
this.container.classList = "image-container"
|
||||
|
||||
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.addEventListener("dblclick", (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("wheel", (e) => { return this.scroll(e) })
|
||||
document.addEventListener("mousemove", (e) => { return this.mousemove(e) })
|
||||
document.addEventListener("mouseup", (e) => { return this.mouseup(e) })
|
||||
|
||||
@@ -25,14 +29,31 @@ ImageViewer.prototype.render = function(parent) {
|
||||
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) {
|
||||
if (this.zoomed) {
|
||||
this.element.style.maxWidth = "100%"
|
||||
this.element.style.maxHeight = "100%"
|
||||
this.element.style.top = "50%"
|
||||
this.element.style.left = "auto"
|
||||
this.element.style.transform = "translateY(-50%)"
|
||||
this.container.style.overflow = "hidden"
|
||||
this.element.removeAttribute("style")
|
||||
this.container.style.overflow = ""
|
||||
this.zoomed = false
|
||||
} else {
|
||||
this.element.style.maxWidth = "none"
|
||||
|
||||
@@ -9,7 +9,7 @@ function VideoViewer(viewer, file, next) {
|
||||
this.vidElement = document.createElement("video")
|
||||
this.vidElement.autoplay = "autoplay"
|
||||
this.vidElement.controls = "controls"
|
||||
this.vidElement.classList = "center drop-shadow"
|
||||
this.vidElement.classList = "center drop_shadow"
|
||||
this.vidElement.addEventListener("ended", () => { this.next() }, false)
|
||||
|
||||
this.videoSource = document.createElement("source")
|
||||
|
||||
@@ -28,14 +28,14 @@ UploadProgressBar.prototype.onProgress = function(progress){
|
||||
this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.name
|
||||
this.uploadDiv.style.background = 'linear-gradient('
|
||||
+'to right, '
|
||||
+'var(--file_background_color) 0%, '
|
||||
+'var(--input_color_dark) 0%, '
|
||||
+'var(--highlight_color) '+ ((progress*100)) +'%, '
|
||||
+'var(--file_background_color) '+ ((progress*100)+1) +'%)'
|
||||
+'var(--input_color_dark) '+ ((progress*100)+1) +'%)'
|
||||
}
|
||||
UploadProgressBar.prototype.onFinished = function(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.target= "_blank"
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Override the menu button so it doesn't overlap the file manager when the menu
|
||||
is collapsed */
|
||||
#button_toggle_navigation {
|
||||
display: none;
|
||||
}
|
||||
@@ -10,24 +12,12 @@
|
||||
.file_manager {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
background-color: var(--layer_1_color);
|
||||
box-shadow: #000000 8px 8px 50px 5px;
|
||||
left: 24px;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
background-color: var(--layer_2_color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.file_manager {
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.file_manager > .nav_bar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
@@ -55,13 +45,14 @@
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
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 {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
margin: 4px 10px;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--input_color);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -76,12 +67,6 @@
|
||||
flex-shrink: 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 {
|
||||
flex-shrink: 1;
|
||||
@@ -97,7 +82,7 @@
|
||||
above are out of view*/
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
min-width: 750px; /* Sum of all columns */
|
||||
}
|
||||
|
||||
.file_manager > .status_bar {
|
||||
@@ -117,7 +102,6 @@
|
||||
control over the size.
|
||||
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
color: var(--text_color);
|
||||
|
||||
@@ -136,6 +120,8 @@
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: auto 10px;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -54,7 +54,7 @@ html, body {
|
||||
}
|
||||
body{
|
||||
background-color: #111111; /* Fallback */
|
||||
background-color: var(--body_color);
|
||||
background-color: var(--layer_2_color);
|
||||
background-repeat: repeat;
|
||||
margin: 0;
|
||||
font-family: system-ui, sans-serif;
|
||||
@@ -123,7 +123,7 @@ body{
|
||||
transition: left 0.5s;
|
||||
padding: 50px 0 50px 0;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 800px) {
|
||||
.page_navigation {
|
||||
left: -250px;
|
||||
}
|
||||
@@ -210,43 +210,44 @@ body, .checkers {
|
||||
.highlight_dark,
|
||||
.highlight_middle,
|
||||
.highlight_light,
|
||||
.highlight_headerbar,
|
||||
.highlight_green,
|
||||
.highlight_blue,
|
||||
.highlight_red,
|
||||
.highlight_1,
|
||||
.highlight_2,
|
||||
.highlight_3,
|
||||
.highlight_4 {
|
||||
.highlight_3{
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: .5em;
|
||||
padding: 8px;
|
||||
}
|
||||
.highlight_dark, .highlight_1 {
|
||||
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 {
|
||||
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 {
|
||||
background-color: var(--layer_3_color);
|
||||
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);}
|
||||
.highlight_headerbar, .highlight_4 {
|
||||
background-color: var(--layer_4_color);
|
||||
box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);}
|
||||
.highlight_green {
|
||||
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);
|
||||
}
|
||||
.highlight_green {
|
||||
background-color: rgba(0, 255, 0, 0.05);
|
||||
border-color: #00d000;}
|
||||
.highlight_blue {
|
||||
border-color: #00d000;
|
||||
}
|
||||
.highlight_blue {
|
||||
background-color: rgba(32, 32, 255, 0.2);
|
||||
border-color: rgb(54, 54, 255);}
|
||||
.highlight_red {
|
||||
border-color: rgb(54, 54, 255);
|
||||
}
|
||||
.highlight_red {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border-color: #B00000;}
|
||||
border-color: #B00000;
|
||||
}
|
||||
|
||||
.highlight_green,
|
||||
.highlight_blue,
|
||||
@@ -264,13 +265,15 @@ h1, h2, h3, h4, h5, h6 {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h1{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;}
|
||||
h2{font-size: 1.75em; font-family: "light", sans-serif; font-weight: normal;}
|
||||
h2, h3{ /* Differentiate it a bit, else it just looks like bold text */
|
||||
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;}
|
||||
h4{font-size: 1.25em; 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;}
|
||||
h2, h3{border-bottom: 1px var(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
|
||||
|
||||
p, .indent {
|
||||
margin: 10px;
|
||||
@@ -335,7 +338,7 @@ pre{
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
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: var(--text_color);
|
||||
word-break: break-all;
|
||||
|
||||
@@ -22,7 +22,6 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
z-index: 10;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -31,8 +30,8 @@
|
||||
.file_viewer > .file_viewer_headerbar > * {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: .4em;
|
||||
margin-right: .4em;
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
display: inline-flex;
|
||||
}
|
||||
.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
|
||||
@@ -148,7 +147,7 @@
|
||||
overflow-x: hidden;
|
||||
float: left;
|
||||
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;
|
||||
z-index: 48;
|
||||
overflow: hidden;
|
||||
@@ -193,8 +192,8 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.pannable{ cursor: move; }
|
||||
.drop-shadow{ box-shadow: var(--shadow_color) 10px 10px 50px; }
|
||||
.pannable { cursor: move; }
|
||||
.drop_shadow { box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color); }
|
||||
|
||||
/* ========================
|
||||
|| TOOLBAR COMPONENTS ||
|
||||
|
||||
@@ -76,12 +76,6 @@
|
||||
</p>
|
||||
|
||||
<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>
|
||||
When logging in to a pixeldrain account a cookie named
|
||||
'pd_auth_key' will be installed. This cookie keeps your login
|
||||
@@ -89,20 +83,26 @@
|
||||
your account.
|
||||
</p>
|
||||
<p>
|
||||
When you use the style selector at the bottom of this page a
|
||||
cookie called 'style' will be set. This cookie controls the
|
||||
appearance of the website for you.
|
||||
When you use the style selector on the <a
|
||||
href="/appearance">Appearance</a> page a cookie called 'style'
|
||||
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>
|
||||
|
||||
<h2 id="legality">Legality</h2>
|
||||
<h3 id="legality">Legality</h3>
|
||||
<p>
|
||||
I cannot be held liable for any illegal and / or copyrighted
|
||||
material that's uploaded by the users of this application.
|
||||
Files uploaded to this website are subjected to local laws. If
|
||||
laws are being broken, and I've been notified of the fact I'll
|
||||
have to delete the offending content (as the server does not
|
||||
support geo filtering yet). If you find any files on this domain
|
||||
that break the law, please contact me at
|
||||
material that's uploaded by the users of this application. Files
|
||||
uploaded to this website are subjected to local laws. If laws
|
||||
are being broken, and I've been notified of the fact I'll have
|
||||
to delete the offending content. If you find any files on this
|
||||
domain that break the law, please contact me at
|
||||
<a href="mailto:abuse@pixeldrain.com">abuse@pixeldrain.com</a>,
|
||||
and I'll take care of it.
|
||||
<br/>Please share responsibly.
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<div id="page_body" class="page_body">
|
||||
<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>
|
||||
<!-- <div class="spacer"></div>
|
||||
<button id="btn_back" >⇐</button id="btn_forward">
|
||||
@@ -32,7 +32,7 @@
|
||||
<div id="directory_area" class="directory_area">
|
||||
<div id="directory_sorters" class="directory_sorters"></div>
|
||||
</div>
|
||||
<div id="directory_footer" class="status_bar highlight_light"></div>
|
||||
<div id="directory_footer" class="status_bar highlight_1"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<button onclick="days = 182; interval = 1440; setData();">Half-year</button>
|
||||
<button onclick="days = 365; interval = 1440; setData();">Year</button>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
Chart.defaults.global.defaultFontColor = "#b3b3b3";
|
||||
Chart.defaults.global.defaultFontSize = 15;
|
||||
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.tooltips.mode = "index";
|
||||
Chart.defaults.global.tooltips.axis = "x";
|
||||
@@ -50,18 +50,18 @@
|
||||
datasets: [
|
||||
{
|
||||
label: "Bandwidth",
|
||||
backgroundColor: "rgba(64, 255, 64, .05)",
|
||||
borderColor: "rgba(128, 255, 128, 1)",
|
||||
borderWidth: 1.5,
|
||||
lineTension: 0.1,
|
||||
backgroundColor: "rgba(64, 255, 64, .01)",
|
||||
borderColor: "rgba(96, 255, 96, 1)",
|
||||
borderWidth: 2,
|
||||
lineTension: 0.2,
|
||||
fill: true,
|
||||
yAxisID: "y_bandwidth"
|
||||
}, {
|
||||
label: "Views",
|
||||
backgroundColor: "rgba(64, 64, 255, .1)",
|
||||
borderColor: "rgba(128, 128, 255, 1)",
|
||||
borderWidth: 1.5,
|
||||
lineTension: 0.1,
|
||||
backgroundColor: "rgba(64, 64, 255, .01)",
|
||||
borderColor: "rgba(64, 64, 255, 1)",
|
||||
borderWidth: 2,
|
||||
lineTension: 0.2,
|
||||
fill: true,
|
||||
yAxisID: "y_views"
|
||||
}
|
||||
@@ -85,7 +85,7 @@
|
||||
}
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(100, 255, 100, .1)"
|
||||
color: "rgba(100, 255, 100, .05)"
|
||||
}
|
||||
}, {
|
||||
type: "linear",
|
||||
@@ -97,7 +97,7 @@
|
||||
labelString: "Views"
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgba(128, 128, 255, .2)"
|
||||
color: "rgba(128, 128, 255, .05)"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
|
||||
<div class="info_about">
|
||||
<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>
|
||||
</div>
|
||||
<p style="text-align: center">
|
||||
|
||||
@@ -20,16 +20,14 @@
|
||||
</div>
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
var nav = document.getElementById("page_navigation");
|
||||
var nav = document.getElementById("page_navigation");
|
||||
var body = document.getElementById("page_body");
|
||||
if (nav.offsetLeft === 0) {
|
||||
// Menu is visible
|
||||
|
||||
// Menu is visible, hide it
|
||||
nav.style.left = -nav.offsetWidth + "px";
|
||||
body.style.left = "0";
|
||||
} else {
|
||||
// Menu is hidden
|
||||
|
||||
// Menu is hidden, show it
|
||||
nav.style.left = "0";
|
||||
body.style.left = nav.offsetWidth + "px";
|
||||
}
|
||||
|
||||
@@ -43,26 +43,18 @@ type pixeldrainStyleSheet struct {
|
||||
HighlightColor hsl // Links, highlighted buttons, list navigation
|
||||
HighlightTextColor hsl // Text on buttons
|
||||
DangerColor hsl
|
||||
FileBackgroundColor hsl
|
||||
ScrollbarForegroundColor hsl
|
||||
ScrollbarHoverColor hsl
|
||||
ScrollbarBackgroundColor hsl
|
||||
|
||||
BackgroundColor hsl
|
||||
BodyColor hsl
|
||||
|
||||
Layer1Color hsl // Deepest and darkest layer
|
||||
Layer1Shadow int // Deep layers have little shadow
|
||||
Layer2Color hsl
|
||||
Layer2Shadow int
|
||||
Layer3Color hsl
|
||||
Layer3Shadow int
|
||||
Layer4Color hsl // Highest and brightest layer
|
||||
Layer4Shadow int // High layers have lots of shadow
|
||||
Layer3Color hsl // Highest and brightest layer
|
||||
Layer3Shadow int // High layers have lots of shadow
|
||||
|
||||
ShadowColor hsl
|
||||
ShadowSpread int // Pixels
|
||||
ShadowIntensity int // Pixels
|
||||
ShadowColor hsl
|
||||
}
|
||||
|
||||
func (s pixeldrainStyleSheet) String() string {
|
||||
@@ -77,14 +69,10 @@ func (s pixeldrainStyleSheet) String() string {
|
||||
--highlight_text_color: #%s;
|
||||
--danger_color: #%s;
|
||||
--danger_color_dark: #%s;
|
||||
--file_background_color: #%s;
|
||||
--scrollbar_foreground_color: #%s;
|
||||
--scrollbar_hover_color: #%s;
|
||||
--scrollbar_background_color: #%s;
|
||||
|
||||
--background_color: #%s;
|
||||
--body_color: #%s;
|
||||
|
||||
--layer_1_color: #%s;
|
||||
--layer_1_color_border: #%s;
|
||||
--layer_1_shadow: %s;
|
||||
@@ -94,29 +82,21 @@ func (s pixeldrainStyleSheet) String() string {
|
||||
--layer_3_color: #%s;
|
||||
--layer_3_color_border: #%s;
|
||||
--layer_3_shadow: %s;
|
||||
--layer_4_color: #%s;
|
||||
--layer_4_color_border: #%s;
|
||||
--layer_4_shadow: %s;
|
||||
|
||||
--shadow_color: #%s;
|
||||
--shadow_spread: %s;
|
||||
--shadow_intensity: %s;
|
||||
}`,
|
||||
s.TextColor.RGB(),
|
||||
s.InputColor.RGB(),
|
||||
s.InputColor.add(0, 0, -.03).RGB(),
|
||||
s.InputColor.add(0, 0, -.02).RGB(),
|
||||
s.InputTextColor.RGB(),
|
||||
s.HighlightColor.RGB(),
|
||||
s.HighlightColor.add(0, 0, -.03).RGB(),
|
||||
s.HighlightColor.add(0, 0, -.02).RGB(),
|
||||
s.HighlightTextColor.RGB(),
|
||||
s.DangerColor.RGB(),
|
||||
s.DangerColor.add(0, 0, -.03).RGB(),
|
||||
s.FileBackgroundColor.RGB(),
|
||||
s.DangerColor.add(0, 0, -.02).RGB(),
|
||||
s.ScrollbarForegroundColor.RGB(),
|
||||
s.ScrollbarHoverColor.RGB(),
|
||||
s.ScrollbarBackgroundColor.RGB(),
|
||||
s.BackgroundColor.RGB(),
|
||||
s.BodyColor.RGB(),
|
||||
s.Layer1Color.RGB(),
|
||||
s.Layer1Color.add(0, 0, .05).RGB(),
|
||||
fmt.Sprintf("%dpx", s.Layer1Shadow),
|
||||
@@ -126,12 +106,7 @@ func (s pixeldrainStyleSheet) String() string {
|
||||
s.Layer3Color.RGB(),
|
||||
s.Layer3Color.add(0, 0, .05).RGB(),
|
||||
fmt.Sprintf("%dpx", s.Layer3Shadow),
|
||||
s.Layer4Color.RGB(),
|
||||
s.Layer4Color.add(0, 0, .05).RGB(),
|
||||
fmt.Sprintf("%dpx", s.Layer4Shadow),
|
||||
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{
|
||||
TextColor: hsl{0, 0, .7},
|
||||
InputColor: hsl{0, 0, .25},
|
||||
InputColor: hsl{0, 0, .2},
|
||||
InputTextColor: hsl{0, 0, 1},
|
||||
HighlightColor: hsl{89, .51, .45},
|
||||
HighlightTextColor: hsl{0, 0, 0},
|
||||
DangerColor: hsl{339, .65, .31},
|
||||
FileBackgroundColor: hsl{0, 0, .20},
|
||||
ScrollbarForegroundColor: hsl{0, 0, .35},
|
||||
ScrollbarHoverColor: hsl{0, 0, .45},
|
||||
ScrollbarBackgroundColor: hsl{0, 0, 0},
|
||||
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
BodyColor: hsl{0, 0, .07},
|
||||
Layer1Color: hsl{0, 0, .11},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{0, 0, .13},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{0, 0, .14},
|
||||
Layer3Shadow: 7,
|
||||
Layer4Color: hsl{0, 0, .14},
|
||||
Layer4Shadow: 9,
|
||||
Layer1Color: hsl{0, 0, .08},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{0, 0, .11},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{0, 0, .14},
|
||||
Layer3Shadow: 7,
|
||||
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
ShadowSpread: 7,
|
||||
ShadowIntensity: 0,
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var sunnyPixeldrainStyle = pixeldrainStyleSheet{
|
||||
TextColor: hsl{0, 0, .1},
|
||||
InputColor: hsl{0, 0, 1},
|
||||
InputColor: hsl{0, 0, .96}, // hsl(0, 0%, 96%)
|
||||
InputTextColor: hsl{0, 0, .1},
|
||||
HighlightColor: hsl{89, .51, .5},
|
||||
HighlightColor: hsl{89, .74, .5}, // hsl(89, 73%, 50%)
|
||||
HighlightTextColor: hsl{0, 0, 0},
|
||||
DangerColor: hsl{339, .65, .31},
|
||||
FileBackgroundColor: hsl{0, 0, 1},
|
||||
DangerColor: hsl{345, .99, .33}, // hsl(345, 99%, 33%)
|
||||
ScrollbarForegroundColor: hsl{0, 0, .30},
|
||||
ScrollbarHoverColor: hsl{0, 0, .40},
|
||||
ScrollbarBackgroundColor: hsl{0, 0, 0},
|
||||
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
BodyColor: hsl{0, 0, 1},
|
||||
Layer1Color: hsl{0, 0, 1},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{0, 0, 1},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{0, 0, 1},
|
||||
Layer3Shadow: 6,
|
||||
Layer4Color: hsl{0, 0, 1},
|
||||
Layer4Shadow: 5,
|
||||
Layer1Color: hsl{0, 0, .98}, // hsl(0, 0%, 13%)
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{0, 1, 1},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{0, 1, 1},
|
||||
Layer3Shadow: 6,
|
||||
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
ShadowSpread: 7,
|
||||
ShadowIntensity: 0,
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var solarizedDarkStyle = pixeldrainStyleSheet{
|
||||
@@ -284,25 +245,18 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
|
||||
HighlightColor: hsl{145, .63, .42},
|
||||
HighlightTextColor: hsl{0, 0, 0},
|
||||
DangerColor: hsl{343, .63, .42},
|
||||
FileBackgroundColor: hsl{192, .87, .05},
|
||||
ScrollbarForegroundColor: hsl{192, .95, .30},
|
||||
ScrollbarHoverColor: hsl{192, .95, .40},
|
||||
ScrollbarBackgroundColor: hsl{0, 0, 0},
|
||||
|
||||
BackgroundColor: hsl{192, 1, .05},
|
||||
BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%)
|
||||
Layer1Color: hsl{192, .87, .09},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{192, .81, .14},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{192, .95, .17},
|
||||
Layer3Shadow: 7,
|
||||
Layer4Color: hsl{192, 1, .11}, // hsl(192, 100%, 11%)
|
||||
Layer4Shadow: 9,
|
||||
Layer1Color: hsl{192, .87, .09},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{192, .81, .14},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{192, .95, .17},
|
||||
Layer3Shadow: 7,
|
||||
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
ShadowSpread: 7,
|
||||
ShadowIntensity: 0,
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var maroonStyle = pixeldrainStyleSheet{
|
||||
@@ -312,81 +266,60 @@ var maroonStyle = pixeldrainStyleSheet{
|
||||
HighlightColor: hsl{0, 1, .4},
|
||||
HighlightTextColor: hsl{0, 0, 1},
|
||||
DangerColor: hsl{0, .1, .1},
|
||||
FileBackgroundColor: hsl{0, 1, .03},
|
||||
ScrollbarForegroundColor: hsl{0, .75, .3},
|
||||
ScrollbarHoverColor: hsl{0, .75, .4},
|
||||
ScrollbarBackgroundColor: hsl{0, 0, 0},
|
||||
|
||||
BackgroundColor: hsl{0, 1, .05},
|
||||
BodyColor: hsl{0, .6, .1},
|
||||
Layer1Color: hsl{0, .5, .07},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{0, .9, .2},
|
||||
Layer3Shadow: 7,
|
||||
Layer4Color: hsl{0, .5, .07},
|
||||
Layer4Shadow: 9,
|
||||
Layer1Color: hsl{0, .5, .07},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{0, .9, .2},
|
||||
Layer3Shadow: 7,
|
||||
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
ShadowSpread: 7,
|
||||
ShadowIntensity: 0,
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var hackerStyle = pixeldrainStyleSheet{
|
||||
TextColor: hsl{0, 0, .8},
|
||||
InputColor: hsl{0, 0, .25},
|
||||
InputColor: hsl{120, .5, .1}, // hsl(120, 50%, 10%)
|
||||
InputTextColor: hsl{0, 0, 1},
|
||||
HighlightColor: hsl{120, 1, .5},
|
||||
HighlightTextColor: hsl{0, 0, 0},
|
||||
DangerColor: hsl{0, .65, .31},
|
||||
FileBackgroundColor: hsl{120, .8, .06},
|
||||
DangerColor: hsl{0, 1, .4},
|
||||
ScrollbarForegroundColor: hsl{120, .5, .25},
|
||||
ScrollbarHoverColor: hsl{120, .5, .35},
|
||||
ScrollbarBackgroundColor: hsl{0, 0, 0},
|
||||
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
BodyColor: hsl{0, 0, 0},
|
||||
Layer1Color: hsl{120, .1, .05},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{120, .2, .10},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{120, .3, .15},
|
||||
Layer3Shadow: 7,
|
||||
Layer4Color: hsl{0, 0, .14},
|
||||
Layer4Shadow: 9,
|
||||
Layer1Color: hsl{0, 0, 0},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{0, 0, .03},
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{120, .3, .15},
|
||||
Layer3Shadow: 7,
|
||||
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
ShadowSpread: 7,
|
||||
ShadowIntensity: 0,
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var cantaPixeldrainStyle = pixeldrainStyleSheet{
|
||||
TextColor: hsl{0, 0, .8},
|
||||
InputColor: hsl{167, .06, .40},
|
||||
InputColor: hsl{167, .06, .30}, // hsl(167, 6%, 30%)
|
||||
InputTextColor: hsl{0, 0, 1},
|
||||
HighlightColor: hsl{165, 1, .40},
|
||||
HighlightColor: hsl{165, 1, .40}, // hsl(165, 100%, 40%)
|
||||
HighlightTextColor: hsl{0, 0, 0},
|
||||
DangerColor: hsl{40, 1, .5},
|
||||
FileBackgroundColor: hsl{170, .04, .29},
|
||||
DangerColor: hsl{40, 1, .5}, // hsl(40, 100%, 50%)
|
||||
ScrollbarForegroundColor: hsl{204, .05, .78}, // hsl(204, 5%, 78%)
|
||||
ScrollbarHoverColor: hsl{204, .05, .88},
|
||||
ScrollbarBackgroundColor: hsl{200, .13, .27}, // hsl(200, 13%, 27%)
|
||||
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
BodyColor: hsl{172, .06, .25},
|
||||
Layer1Color: hsl{200, .19, .18}, // hsl(200, 19%, 18%)
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{199, .14, .23}, // hsl(199, 14%, 23%)
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{199, .14, .27}, // hsl(199, 14%, 27%)
|
||||
Layer3Shadow: 6,
|
||||
Layer4Color: hsl{200, .14, .30}, // hsl(200, 14%, 30%)
|
||||
Layer4Shadow: 7,
|
||||
Layer1Color: hsl{180, .04, .16}, // hsl(180, 4%, 16%)
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{170, .06, .21}, // hsl(170, 6%, 21%)
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%)
|
||||
Layer3Shadow: 6,
|
||||
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
ShadowSpread: 7,
|
||||
ShadowIntensity: 0,
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var arcPixeldrainStyle = pixeldrainStyleSheet{
|
||||
@@ -396,25 +329,18 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{
|
||||
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{222, .08, .44}, // hsl(222, 8%, 44%)
|
||||
ScrollbarHoverColor: hsl{222, .08, .54}, // hsl(222, 8%, 44%)
|
||||
ScrollbarBackgroundColor: hsl{223, .12, .2}, // hsl(223, 12%, 29%)
|
||||
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
BodyColor: hsl{223, .12, .29},
|
||||
Layer1Color: hsl{215, .17, .19},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%)
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{223, .12, .29},
|
||||
Layer3Shadow: 7,
|
||||
Layer4Color: hsl{219, .15, .22}, // hsl(219, 15%, 22%)
|
||||
Layer4Shadow: 9,
|
||||
Layer1Color: hsl{215, .17, .19},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%)
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{223, .12, .29},
|
||||
Layer3Shadow: 7,
|
||||
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
ShadowSpread: 7,
|
||||
ShadowIntensity: 0,
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var deepseaPixeldrainStyle = pixeldrainStyleSheet{
|
||||
@@ -424,23 +350,16 @@ var deepseaPixeldrainStyle = pixeldrainStyleSheet{
|
||||
HighlightColor: hsl{5, .77, .55},
|
||||
HighlightTextColor: hsl{0, 0, 0},
|
||||
DangerColor: hsl{5, .77, .55},
|
||||
FileBackgroundColor: hsl{159, .27, .17},
|
||||
ScrollbarForegroundColor: hsl{162, .28, .23}, // hsl(162, 28%, 23%)
|
||||
ScrollbarHoverColor: hsl{12, .38, .26}, // hsl(12, 38%, 26%)
|
||||
ScrollbarBackgroundColor: hsl{0, 0, .11}, // hsl(0, 0%, 11%)
|
||||
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
BodyColor: hsl{0, 0, .07},
|
||||
Layer1Color: hsl{160, .27, .09},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{163, .26, .11}, // hsl(163, 26%, 11%)
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{161, .28, .14}, // hsl(161, 28%, 14%)
|
||||
Layer3Shadow: 7,
|
||||
Layer4Color: hsl{159, .27, .17}, // hsl(159, 27%, 17%)
|
||||
Layer4Shadow: 9,
|
||||
Layer1Color: hsl{160, .27, .07},
|
||||
Layer1Shadow: 3,
|
||||
Layer2Color: hsl{163, .26, .11}, // hsl(163, 26%, 11%)
|
||||
Layer2Shadow: 5,
|
||||
Layer3Color: hsl{161, .28, .14}, // hsl(161, 28%, 14%)
|
||||
Layer3Shadow: 7,
|
||||
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
ShadowSpread: 7,
|
||||
ShadowIntensity: 0,
|
||||
ShadowColor: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user