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

More styling

Browse Source
This commit is contained in:
Wim Brand
2019-08-11 17:16:18 +02:00
parent 7accbdef4e
commit b46280aca0
8 changed files with 40 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@ var Toolbar = {
Sharebar.toggle(); Sharebar.toggle();
} }
document.getElementById("toolbar").style.left = "-9em"; document.getElementById("toolbar").style.left = "-8em";
document.getElementById("filepreview").style.left = "0px"; document.getElementById("filepreview").style.left = "0px";
document.getElementById("button_toggle_toolbar").classList.remove("button_highlight"); document.getElementById("button_toggle_toolbar").classList.remove("button_highlight");

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

@@ -216,13 +216,16 @@ hr{
} }
::-webkit-scrollbar{ ::-webkit-scrollbar{
width: 12px; /* for vertical scrollbars */ width: 1em; /* for vertical scrollbars */
height: 12px; /* for horizontal 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 { ::-webkit-scrollbar-thumb {
background-color: var(--scrollbar_foreground_color); 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;} ::-webkit-scrollbar-corner{background: transparent;}
@@ -293,10 +296,10 @@ pre{
.file_button{ .file_button{
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: 310px; width: 300px;
max-width: 90%; max-width: 90%;
height: 60px; height: 3.6em;
margin: 6px; margin: 10px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
border-radius: 2px; border-radius: 2px;

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

@@ -3,10 +3,6 @@
Author : Fornax Author : Fornax
*/ */
body{
overflow: hidden;
}
/* Viewer container */ /* Viewer container */
.file_viewer { .file_viewer {
position: absolute; position: absolute;
@@ -26,7 +22,7 @@ body{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
padding: 0.2em; padding: 8px;
} }
/* Headerbar components */ /* Headerbar components */
@@ -63,7 +59,7 @@ body{
white-space: nowrap; white-space: nowrap;
} }
.file_viewer > .list_navigator > .list_item{ .file_viewer > .list_navigator > .list_item{
height: 40px !important; height: 2.6em !important;
width: 250px !important; width: 250px !important;
} }
@@ -195,7 +191,7 @@ body{
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */ /* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
#toolbar > div { .file_viewer_toolbar > div {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -204,7 +200,7 @@ body{
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
} }
#toolbar > div > div { .file_viewer_toolbar > div > div {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;

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

@@ -32,14 +32,14 @@
</div> </div>
<br/> <br/>
{{range $files.Files}} {{range $files.Files}}<!--
<a class="file_button" href="/u/{{.ID}}" target="_blank"> --><a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" /> <img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
<span style="color: var(--highlight_color);">{{.Name}}</span> <span style="color: var(--highlight_color);">{{.Name}}</span>
<br/> <br/>
{{.DateUpload.Format "2006-01-02 15:04:05"}} {{.DateUpload.Format "2006-01-02 15:04:05"}}
</a> </a><!--
{{end}} -->{{end}}
<br/> <br/>
<div class="highlight_dark"> <div class="highlight_dark">

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

@@ -21,29 +21,29 @@
<h2>Your most recently uploaded files:</h2> <h2>Your most recently uploaded files:</h2>
<div class="highlight_dark"> <div class="highlight_dark">
{{$files := .PixelAPI.UserFiles 0 18}} {{$files := .PixelAPI.UserFiles 0 18}}
{{range $files.Files}} {{range $files.Files}}<!--
<a class="file_button" href="/u/{{.ID}}" target="_blank"> --><a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" /> <img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
<span style="color: var(--highlight_color);">{{.Name}}</span> <span style="color: var(--highlight_color);">{{.Name}}</span>
<br/> <br/>
{{.DateUpload.Format "2006-01-02 15:04:05"}} {{.DateUpload.Format "2006-01-02 15:04:05"}}
</a> </a><!--
{{end}} -->{{end}}
<br/> <br/>
<a href="/user/files" class="button">...All my files</a> <a href="/user/files" class="button">...All my files</a>
</div> </div>
<h2>Your most recently created lists:</h2> <h2>Your most recently created lists:</h2>
<div class="highlight_dark"> <div class="highlight_dark">
{{$lists := .PixelAPI.UserLists 0 18}} {{$lists := .PixelAPI.UserLists 0 18}}
{{range $lists.Lists}} {{range $lists.Lists}}<!--
<a class="file_button" href="/l/{{.ID}}" target="_blank"> --><a class="file_button" href="/l/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" /> <img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
<span style="color: var(--highlight_color);">{{.Title}}</span> <span style="color: var(--highlight_color);">{{.Title}}</span>
({{.FileCount}} Files) ({{.FileCount}} Files)
<br/> <br/>
{{.DateCreated.Format "2006-01-02 15:04:05"}} {{.DateCreated.Format "2006-01-02 15:04:05"}}
</a> </a><!--
{{end}} -->{{end}}
<br/> <br/>
<a href="/user/lists" class="button">...All my lists</a> <a href="/user/lists" class="button">...All my lists</a>
</div> </div>

18
res/template/account/user_lists.html
View File

@@ -26,15 +26,15 @@
</div> </div>
<br/> <br/>
{{range $lists.Lists}} {{range $lists.Lists}}<!--
<a class="file_button" href="/l/{{.ID}}" target="_blank"> --><a class="file_button" href="/l/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" /> <img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
<span style="color: var(--highlight_color);">{{.Title}}</span> <span style="color: var(--highlight_color);">{{.Title}}</span>
({{.FileCount}} Files) ({{.FileCount}} Files)
<br/> <br/>
{{.DateCreated.Format "2006-01-02 15:04:05"}} {{.DateCreated.Format "2006-01-02 15:04:05"}}
</a> </a><!--
{{end}} -->{{end}}
<br/> <br/>
<div class="highlight_dark"> <div class="highlight_dark">

1
res/template/file_viewer.html
View File

@@ -29,7 +29,6 @@
<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button> <button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button>
<a href="/" id="button_home" class="button button_home"> <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;"/> <img src="/res/img/pixeldrain_transparent.png" alt="Back to the Home page" style="height: 1.5em; margin: -0.3em;"/>
<!-- Yo -->
</a> </a>
<span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span> <span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span>
<div id="list_navigator_buttons" class="button_group"></div> <div id="list_navigator_buttons" class="button_group"></div>

8
webcontroller/user_style.go
View File

@@ -158,7 +158,7 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
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}, FileBackgroundColor: hsl{0, 0, .20},
ScrollbarForegroundColor: hsl{0, 0, .30}, ScrollbarForegroundColor: hsl{0, 0, .35},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
@@ -227,7 +227,7 @@ var maroonStyle = pixeldrainStyleSheet{
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}, FileBackgroundColor: hsl{0, 1, .03},
ScrollbarForegroundColor: hsl{0, .75, .2}, ScrollbarForegroundColor: hsl{0, .75, .3},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: hsl{0, 1, .05}, BackgroundColor: hsl{0, 1, .05},
@@ -250,7 +250,7 @@ var hackerStyle = pixeldrainStyleSheet{
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{0, .65, .31}, DangerColor: hsl{0, .65, .31},
FileBackgroundColor: hsl{120, .8, .06}, FileBackgroundColor: hsl{120, .8, .06},
ScrollbarForegroundColor: hsl{0, 0, .25}, ScrollbarForegroundColor: hsl{120, .5, .25},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
BackgroundColor: 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%) DangerColor: hsl{357, .53, .57}, // hsl(357, 53%, 57%)
FileBackgroundColor: hsl{219, .1, .2}, FileBackgroundColor: hsl{219, .1, .2},
ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%) 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}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{223, .12, .29}, BodyColor: hsl{223, .12, .29},