More styling
This commit is contained in:
@@ -16,7 +16,7 @@ var Toolbar = {
|
||||
Sharebar.toggle();
|
||||
}
|
||||
|
||||
document.getElementById("toolbar").style.left = "-9em";
|
||||
document.getElementById("toolbar").style.left = "-8em";
|
||||
document.getElementById("filepreview").style.left = "0px";
|
||||
document.getElementById("button_toggle_toolbar").classList.remove("button_highlight");
|
||||
|
||||
|
@@ -216,13 +216,16 @@ hr{
|
||||
}
|
||||
|
||||
::-webkit-scrollbar{
|
||||
width: 12px; /* for vertical scrollbars */
|
||||
height: 12px; /* for horizontal scrollbars */
|
||||
width: 1em; /* for vertical scrollbars */
|
||||
height: 1em; /* for horizontal scrollbars */
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar_background_color);
|
||||
}
|
||||
::-webkit-scrollbar-track {background: var(--scrollbar_background_color);}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar_foreground_color);
|
||||
border-radius: 6px;
|
||||
border-radius: 0.5em;
|
||||
border: 0.22em solid var(--scrollbar_background_color);
|
||||
}
|
||||
::-webkit-scrollbar-corner{background: transparent;}
|
||||
|
||||
@@ -293,10 +296,10 @@ pre{
|
||||
.file_button{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 310px;
|
||||
width: 300px;
|
||||
max-width: 90%;
|
||||
height: 60px;
|
||||
margin: 6px;
|
||||
height: 3.6em;
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
|
@@ -3,10 +3,6 @@
|
||||
Author : Fornax
|
||||
*/
|
||||
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Viewer container */
|
||||
.file_viewer {
|
||||
position: absolute;
|
||||
@@ -26,7 +22,7 @@ body{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
padding: 0.2em;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Headerbar components */
|
||||
@@ -63,7 +59,7 @@ body{
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file_viewer > .list_navigator > .list_item{
|
||||
height: 40px !important;
|
||||
height: 2.6em !important;
|
||||
width: 250px !important;
|
||||
}
|
||||
|
||||
@@ -195,7 +191,7 @@ body{
|
||||
|
||||
|
||||
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
|
||||
#toolbar > div {
|
||||
.file_viewer_toolbar > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -204,7 +200,7 @@ body{
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#toolbar > div > div {
|
||||
.file_viewer_toolbar > div > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
@@ -32,14 +32,14 @@
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
{{range $files.Files}}
|
||||
<a class="file_button" href="/u/{{.ID}}" target="_blank">
|
||||
{{range $files.Files}}<!--
|
||||
--><a class="file_button" href="/u/{{.ID}}" target="_blank">
|
||||
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
|
||||
<span style="color: var(--highlight_color);">{{.Name}}</span>
|
||||
<br/>
|
||||
{{.DateUpload.Format "2006-01-02 15:04:05"}}
|
||||
</a>
|
||||
{{end}}
|
||||
</a><!--
|
||||
-->{{end}}
|
||||
|
||||
<br/>
|
||||
<div class="highlight_dark">
|
||||
|
@@ -21,29 +21,29 @@
|
||||
<h2>Your most recently uploaded files:</h2>
|
||||
<div class="highlight_dark">
|
||||
{{$files := .PixelAPI.UserFiles 0 18}}
|
||||
{{range $files.Files}}
|
||||
<a class="file_button" href="/u/{{.ID}}" target="_blank">
|
||||
{{range $files.Files}}<!--
|
||||
--><a class="file_button" href="/u/{{.ID}}" target="_blank">
|
||||
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
|
||||
<span style="color: var(--highlight_color);">{{.Name}}</span>
|
||||
<br/>
|
||||
{{.DateUpload.Format "2006-01-02 15:04:05"}}
|
||||
</a>
|
||||
{{end}}
|
||||
</a><!--
|
||||
-->{{end}}
|
||||
<br/>
|
||||
<a href="/user/files" class="button">...All my files</a>
|
||||
</div>
|
||||
<h2>Your most recently created lists:</h2>
|
||||
<div class="highlight_dark">
|
||||
{{$lists := .PixelAPI.UserLists 0 18}}
|
||||
{{range $lists.Lists}}
|
||||
<a class="file_button" href="/l/{{.ID}}" target="_blank">
|
||||
{{range $lists.Lists}}<!--
|
||||
--><a class="file_button" href="/l/{{.ID}}" target="_blank">
|
||||
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
|
||||
<span style="color: var(--highlight_color);">{{.Title}}</span>
|
||||
({{.FileCount}} Files)
|
||||
<br/>
|
||||
{{.DateCreated.Format "2006-01-02 15:04:05"}}
|
||||
</a>
|
||||
{{end}}
|
||||
</a><!--
|
||||
-->{{end}}
|
||||
<br/>
|
||||
<a href="/user/lists" class="button">...All my lists</a>
|
||||
</div>
|
||||
|
@@ -26,15 +26,15 @@
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
{{range $lists.Lists}}
|
||||
<a class="file_button" href="/l/{{.ID}}" target="_blank">
|
||||
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
|
||||
<span style="color: var(--highlight_color);">{{.Title}}</span>
|
||||
({{.FileCount}} Files)
|
||||
<br/>
|
||||
{{.DateCreated.Format "2006-01-02 15:04:05"}}
|
||||
</a>
|
||||
{{end}}
|
||||
{{range $lists.Lists}}<!--
|
||||
--><a class="file_button" href="/l/{{.ID}}" target="_blank">
|
||||
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
|
||||
<span style="color: var(--highlight_color);">{{.Title}}</span>
|
||||
({{.FileCount}} Files)
|
||||
<br/>
|
||||
{{.DateCreated.Format "2006-01-02 15:04:05"}}
|
||||
</a><!--
|
||||
-->{{end}}
|
||||
|
||||
<br/>
|
||||
<div class="highlight_dark">
|
||||
|
@@ -29,7 +29,6 @@
|
||||
<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/pixeldrain_transparent.png" alt="Back to the Home page" style="height: 1.5em; margin: -0.3em;"/>
|
||||
<!-- Yo -->
|
||||
</a>
|
||||
<span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span>
|
||||
<div id="list_navigator_buttons" class="button_group"></div>
|
||||
|
@@ -158,7 +158,7 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
|
||||
HighlightTextColor: hsl{0, 0, 0},
|
||||
DangerColor: hsl{339, .65, .31},
|
||||
FileBackgroundColor: hsl{0, 0, .20},
|
||||
ScrollbarForegroundColor: hsl{0, 0, .30},
|
||||
ScrollbarForegroundColor: hsl{0, 0, .35},
|
||||
ScrollbarBackgroundColor: hsl{0, 0, 0},
|
||||
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
@@ -227,7 +227,7 @@ var maroonStyle = pixeldrainStyleSheet{
|
||||
HighlightTextColor: hsl{0, 0, 1},
|
||||
DangerColor: hsl{0, .1, .1},
|
||||
FileBackgroundColor: hsl{0, 1, .03},
|
||||
ScrollbarForegroundColor: hsl{0, .75, .2},
|
||||
ScrollbarForegroundColor: hsl{0, .75, .3},
|
||||
ScrollbarBackgroundColor: hsl{0, 0, 0},
|
||||
|
||||
BackgroundColor: hsl{0, 1, .05},
|
||||
@@ -250,7 +250,7 @@ var hackerStyle = pixeldrainStyleSheet{
|
||||
HighlightTextColor: hsl{0, 0, 0},
|
||||
DangerColor: hsl{0, .65, .31},
|
||||
FileBackgroundColor: hsl{120, .8, .06},
|
||||
ScrollbarForegroundColor: hsl{0, 0, .25},
|
||||
ScrollbarForegroundColor: hsl{120, .5, .25},
|
||||
ScrollbarBackgroundColor: hsl{0, 0, 0},
|
||||
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
@@ -297,7 +297,7 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{
|
||||
DangerColor: hsl{357, .53, .57}, // hsl(357, 53%, 57%)
|
||||
FileBackgroundColor: hsl{219, .1, .2},
|
||||
ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%)
|
||||
ScrollbarBackgroundColor: hsl{223, .12, .29}, // hsl(223, 12%, 29%)
|
||||
ScrollbarBackgroundColor: hsl{223, .12, .2}, // hsl(223, 12%, 29%)
|
||||
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
BodyColor: hsl{223, .12, .29},
|
||||
|
Reference in New Issue
Block a user