More styling

This commit is contained in:
2019-08-11 17:16:18 +02:00
parent 7accbdef4e
commit b46280aca0
8 changed files with 40 additions and 42 deletions

View File

@@ -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");

View File

@@ -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;

View File

@@ -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;

View File

@@ -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">

View File

@@ -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>

View File

@@ -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">

View File

@@ -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>

View File

@@ -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},