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

Replace some shadows with borders

Browse Source
This commit is contained in:
Fornax
2022-06-21 14:00:03 +02:00
parent 75f56decbb
commit 467e92c7a3
13 changed files with 275 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,7 +85,7 @@ footer,
header, header,
footer { footer {
box-shadow: inset 0 0 3px -1px var(--shadow_color); border: 2px solid var(--separator);
border-radius: 12px; border-radius: 12px;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@@ -101,7 +101,7 @@ footer>.footer_content {
background-color: var(--shaded_background); background-color: var(--shaded_background);
display: inline-block; display: inline-block;
border-radius: 8px; border-radius: 8px;
margin: 300px 0 69px 0; margin: 200px 0 60px 0;
} }
/* Page layout elements */ /* Page layout elements */
@@ -173,11 +173,12 @@ footer>.footer_content {
section { section {
position: relative; position: relative;
display: inline-block; display: block;
max-width: 1000px; max-width: 1000px;
width: 100%; width: 100%;
height: auto; height: auto;
padding: 0; padding: 0;
margin: auto;
text-align: initial; text-align: initial;
clear: both; clear: both;
} }
@@ -367,46 +368,6 @@ pre {
overflow-x: auto; overflow-x: auto;
} }
.file_button {
position: relative;
width: 400px;
max-width: 90%;
height: 3.6em;
margin: 8px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: box-shadow 0.3s, opacity 2s, background 0.2s;
white-space: normal;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
max-height: 100%;
max-width: 25%;
margin-right: 5px;
float: left;
display: block;
}
.file_button>.file_button_title {
color: var(--link_color);
}
/* API documentation markup */ /* API documentation markup */
details { details {

2
res/template/appearance.html
View File

@@ -25,8 +25,6 @@
<br/> <br/>
<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label> <input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
<br/> <br/>
Hue:
<br/>
<br/> <br/>
<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label> <input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>) (Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)

42
res/template/history.html
View File

@@ -2,6 +2,48 @@
<html lang="en"> <html lang="en">
<head> <head>
{{template "meta_tags" "Upload History"}} {{template "meta_tags" "Upload History"}}
<style>
.file_button {
position: relative;
width: 400px;
max-width: 90%;
height: 3.6em;
margin: 8px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: box-shadow 0.3s, opacity 2s, background 0.2s;
white-space: normal;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
max-height: 100%;
max-width: 25%;
margin-right: 5px;
float: left;
display: block;
}
.file_button>.file_button_title {
color: var(--link_color);
}
</style>
</head> </head>
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}

2
res/template/home.html
View File

@@ -15,6 +15,8 @@
background-position: center top; background-position: center top;
background-size: cover; background-size: cover;
color: #ffffff; color: #ffffff;
box-shadow: inset 0 0 2px 0 var(--shadow_color);
border: none;
} }
</style> </style>

18
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -429,7 +429,7 @@ const keyboard_event = evt => {
<div id="toolbar" class="toolbar" class:toolbar_visible> <div id="toolbar" class="toolbar" class:toolbar_visible>
{#if view === "file"} {#if view === "file"}
<FileStats file={file}></FileStats> <FileStats file={file}></FileStats>
<hr/> <div class="separator"></div>
{/if} {/if}
{#if file.abuse_type === "" && view === "file"} {#if file.abuse_type === "" && view === "file"}
@@ -514,7 +514,7 @@ const keyboard_event = evt => {
</button> </button>
{/if} {/if}
<hr/> <div class="separator"></div>
{#if file.can_edit || list.can_edit} {#if file.can_edit || list.can_edit}
<button <button
@@ -690,8 +690,8 @@ const keyboard_event = evt => {
} }
.file_preview { .file_preview {
position: absolute; position: absolute;
left: 4px; left: 0;
right: 4px; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
display: block; display: block;
@@ -700,8 +700,8 @@ const keyboard_event = evt => {
transition: left 0.5s; transition: left 0.5s;
overflow: auto; overflow: auto;
text-align: center; text-align: center;
box-shadow: inset 0 0 3px -1px var(--shadow_color); border-radius: 12px;
border-radius: 16px; border: 2px solid var(--separator);
} }
.file_preview.toolbar_visible { left: 8em; } .file_preview.toolbar_visible { left: 8em; }
.file_preview.skyscraper_visible { right: 160px; } .file_preview.skyscraper_visible { right: 160px; }
@@ -737,4 +737,10 @@ const keyboard_event = evt => {
.toolbar_button > span { .toolbar_button > span {
vertical-align: middle; vertical-align: middle;
} }
.toolbar > .separator {
height: 2px;
width: 100%;
margin: 10px 0;
background-color: var(--separator);
}
</style> </style>

12
svelte/src/file_viewer/GalleryView.svelte
View File

@@ -162,7 +162,6 @@ const drop = (e, index) => {
<style> <style>
.gallery{ .gallery{
padding: 16px;
width: 100%; width: 100%;
max-height: 100%; max-height: 100%;
overflow: auto; overflow: auto;
@@ -171,15 +170,12 @@ const drop = (e, index) => {
justify-content: center; justify-content: center;
} }
.file{ .file{
position: relative;
width: 200px; width: 200px;
max-width: 45%; max-width: 42%;
height: 200px; height: 200px;
margin: 8px; margin: 8px;
padding: 0;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
box-shadow: 1px 1px 3px -1px var(--shadow_color);
background: var(--input_background); background: var(--input_background);
word-break: break-all; word-break: break-all;
text-align: center; text-align: center;
@@ -194,13 +190,15 @@ const drop = (e, index) => {
.file:hover { .file:hover {
background: var(--input_hover_background); background: var(--input_hover_background);
} }
.highlight { .highlight {
box-shadow: 0 0 2px 2px var(--highlight_color); box-shadow: 0 0 2px 2px var(--highlight_color);
text-decoration: none; text-decoration: none;
} }
.icon_container { .icon_container {
width: 100%; margin: 3px;
height: 136px; height: 154px;
border-radius: 6px;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;

51
svelte/src/file_viewer/ListNavigator.svelte
View File

@@ -81,9 +81,9 @@ export const set_item = idx => {
<a <a
href="#item={index}" href="#item={index}"
title="Open {file.name}" title="Open {file.name}"
class="list_item file_button" class="file_button"
class:file_selected={file.selected}> class:file_selected={file.selected}>
<img src={file.icon_href+"?width=48&height=48"} alt={file.name} class="list_item_thumbnail" loading="lazy"/> <img src={file.icon_href+"?width=64&height=64"} alt={file.name} class="list_item_thumbnail" loading="lazy"/>
{file.name} {file.name}
</a> </a>
{/each} {/each}
@@ -97,7 +97,7 @@ export const set_item = idx => {
display: flex; display: flex;
position: relative; position: relative;
width: 100%; width: 100%;
border-top: 1px solid var(--separator); border-top: 2px solid var(--separator);
text-align: center; text-align: center;
line-height: 1em; line-height: 1em;
@@ -105,13 +105,9 @@ export const set_item = idx => {
.nav_button{ .nav_button{
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-top: 8px; margin: 6px;
} }
.list_item {
height: 2.6em !important;
width: 220px !important;
}
.list_navigator { .list_navigator {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@@ -120,8 +116,43 @@ export const set_item = idx => {
white-space: nowrap; white-space: nowrap;
} }
.file_selected { .file_button {
box-shadow: 0 0 2px 2px var(--highlight_color); position: relative;
height: 50px;
width: 220px;
margin: 6px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: background 0.2s;
white-space: normal;
text-decoration: none; text-decoration: none;
vertical-align: top;
cursor: pointer;
border-width: 2px;
border-style: solid;
border-color: var(--input_background);
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
height: 100%;
margin-right: 5px;
float: left;
display: block;
}
.file_selected {
text-decoration: none;
border-color: var(--highlight_color);
} }
</style> </style>

2
svelte/src/file_viewer/viewers/Image.svelte
View File

@@ -85,7 +85,7 @@ const mouseup = (e) => {
top: 50%; top: 50%;
cursor: pointer; cursor: pointer;
transform: translateY(-50%); transform: translateY(-50%);
box-shadow: 1px 1px 6px var(--shadow_color); box-shadow: 0 0 4px var(--shadow_color);
} }
.image.zoom { .image.zoom {
max-width: none; max-width: none;

6
svelte/src/file_viewer/viewers/Text.svelte
View File

@@ -104,13 +104,9 @@ const code = async file => {
<style> <style>
.container { .container {
background: var(--body_color); background: var(--body_color);
border: 2px solid var(--separator);
border-radius: 16px;
position: relative;
text-align: left; text-align: left;
height: 100%; height: 100%;
width: 100%; width: 100%;
font-size: 0.9em;
line-height: 1.5em; line-height: 1.5em;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@@ -121,10 +117,12 @@ const code = async file => {
white-space: pre-wrap; white-space: pre-wrap;
overflow: hidden; overflow: hidden;
border: none; border: none;
font-size: 0.9em;
} }
.container > .md { .container > .md {
display: block; display: block;
padding: 10px; padding: 10px;
margin: auto; margin: auto;
text-align: justify;
} }
</style> </style>

3
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -194,7 +194,6 @@ h1 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: var(--shaded_background); background-color: var(--shaded_background);
box-shadow: 1px 1px 6px var(--shadow_color);
padding: 0 2px 2px 2px; padding: 0 2px 2px 2px;
align-items: center; align-items: center;
} }
@@ -212,7 +211,7 @@ h1 {
max-height: 100%; max-height: 100%;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
box-shadow: 1px 1px 6px var(--shadow_color); box-shadow: 0 0 4px var(--shadow_color);
} }
.video_icon { .video_icon {
display: inline-block; display: inline-block;

6
svelte/src/home_page/UploadWidget.svelte
View File

@@ -390,7 +390,6 @@ const keydown = (e) => {
<Konami></Konami> <Konami></Konami>
<div>
<!-- If the user is logged in and has used more than 50% of their storage space we will show a progress bar --> <!-- If the user is logged in and has used more than 50% of their storage space we will show a progress bar -->
{#if window.user.username !== "" && window.user.storage_space_used/window.user.subscription.storage_space > 0.5} {#if window.user.username !== "" && window.user.storage_space_used/window.user.subscription.storage_space > 0.5}
<section> <section>
@@ -398,7 +397,7 @@ const keydown = (e) => {
</section> </section>
{/if} {/if}
<section class="instruction" style="margin-top: 0; border-top: none;"> <section class="instruction" style="border-top: none;">
<span class="big_number">1</span> <span class="big_number">1</span>
<span class="instruction_text">Select files to upload</span> <span class="instruction_text">Select files to upload</span>
<br/> <br/>
@@ -556,7 +555,6 @@ const keydown = (e) => {
{/if} {/if}
<br/> <br/>
</div>
<style> <style>
.big_button{ .big_button{
@@ -569,7 +567,7 @@ const keydown = (e) => {
} }
.instruction { .instruction {
border-top: 1px solid var(--separator); border-top: 1px solid var(--separator);
margin: 1.5em 0; margin: 1em auto;
padding: 5px; padding: 5px;
} }
.big_number { .big_number {

5
webcontroller/filesystem.go
View File

@@ -14,6 +14,11 @@ func (wc *WebController) serveDirectory(w http.ResponseWriter, r *http.Request,
var td = wc.newTemplateData(w, r) var td = wc.newTemplateData(w, r)
var path = strings.TrimPrefix(p.ByName("path"), "/") var path = strings.TrimPrefix(p.ByName("path"), "/")
if path == "" {
wc.templates.Get().ExecuteTemplate(w, "404", td)
return
}
node, err := td.PixelAPI.GetFilesystemPath(path) node, err := td.PixelAPI.GetFilesystemPath(path)
if err != nil { if err != nil {
if err.Error() == "not_found" || err.Error() == "path_not_found" { if err.Error() == "not_found" || err.Error() == "path_not_found" {

10
webcontroller/style.go
View File

@@ -123,7 +123,7 @@ type styleSheet struct {
BodyColor HSL BodyColor HSL
BodyBackground CSS BodyBackground CSS
BodyText HSL BodyText HSL
Separator CSS Separator HSL
CardColor HSL CardColor HSL
CardText HSL CardText HSL
@@ -161,7 +161,7 @@ func (s styleSheet) withDefaults() styleSheet {
defaultCSS(&s.Navigation, RawCSS("none")) defaultCSS(&s.Navigation, RawCSS("none"))
defaultCSS(&s.BodyBackground, s.BodyColor) defaultCSS(&s.BodyBackground, s.BodyColor)
defaultHSL(&s.BackgroundText, s.BodyText) defaultHSL(&s.BackgroundText, s.BodyText)
defaultCSS(&s.Separator, s.BodyColor.Add(0, 0, .05)) defaultHSL(&s.Separator, s.BodyColor.Add(0, 0, .03))
return s return s
} }
@@ -193,7 +193,7 @@ func (s styleSheet) withHue(hue int) styleSheet {
s.BodyColor.Hue = hue s.BodyColor.Hue = hue
s.BodyBackground = setHue(s.BodyBackground) s.BodyBackground = setHue(s.BodyBackground)
s.BodyText.Hue = hue s.BodyText.Hue = hue
s.Separator = setHue(s.Separator) s.Separator.Hue = hue
s.CardColor.Hue = hue s.CardColor.Hue = hue
s.CardText.Hue = hue s.CardText.Hue = hue
s.Shadow.Hue = hue s.Shadow.Hue = hue
@@ -484,7 +484,6 @@ var sweetPixeldrainStyle = styleSheet{
BackgroundColor: HSL{225, .25, .06}, // hsl(225, 25%, 6%) BackgroundColor: HSL{225, .25, .06}, // hsl(225, 25%, 6%)
BodyColor: HSL{228, .25, .12}, // hsl(228, 25%, 12%) BodyColor: HSL{228, .25, .12}, // hsl(228, 25%, 12%)
BodyText: HSL{223, .13, .79}, // hsl(223, 13%, 79%) BodyText: HSL{223, .13, .79}, // hsl(223, 13%, 79%)
Separator: RGBA{255, 255, 255, 0.05},
CardColor: HSL{229, .25, .14}, // hsl(229, 25%, 14%) CardColor: HSL{229, .25, .14}, // hsl(229, 25%, 14%)
Shadow: HSL{0, 0, 0}, Shadow: HSL{0, 0, 0},
@@ -502,7 +501,6 @@ var adwaitaDarkStyle = styleSheet{
BackgroundColor: HSL{0, 0, .19}, BackgroundColor: HSL{0, 0, .19},
BodyColor: HSL{0, 0, .14}, BodyColor: HSL{0, 0, .14},
BodyText: HSL{0, 0, 1}, BodyText: HSL{0, 0, 1},
Separator: RGBA{255, 255, 255, 0.04},
CardColor: HSL{0, 0, .08}, CardColor: HSL{0, 0, .08},
Shadow: HSL{0, 0, 0}, Shadow: HSL{0, 0, 0},
@@ -537,7 +535,6 @@ var solarizedDarkStyle = styleSheet{
BackgroundColor: HSL{192, 1, .11}, //hsl(192, 100%, 11%) BackgroundColor: HSL{192, 1, .11}, //hsl(192, 100%, 11%)
BodyColor: HSL{192, .81, .14}, // hsl(192, 81%, 14%) BodyColor: HSL{192, .81, .14}, // hsl(192, 81%, 14%)
BodyText: HSL{180, .07, .60}, // hsl(180, 7%, 60%) BodyText: HSL{180, .07, .60}, // hsl(180, 7%, 60%)
Separator: RGBA{255, 255, 255, 0.05},
CardColor: HSL{192, .81, .16}, CardColor: HSL{192, .81, .16},
Shadow: HSL{0, 0, 0}, Shadow: HSL{0, 0, 0},
@@ -555,7 +552,6 @@ var solarizedLightStyle = styleSheet{
BackgroundColor: HSL{46, .42, .88}, // hsl(46, 42%, 88%) BackgroundColor: HSL{46, .42, .88}, // hsl(46, 42%, 88%)
BodyColor: HSL{44, .87, .94}, // hsl(44, 87%, 94%) BodyColor: HSL{44, .87, .94}, // hsl(44, 87%, 94%)
BodyText: HSL{194, .14, .40}, // hsl(194, 14%, 40%) BodyText: HSL{194, .14, .40}, // hsl(194, 14%, 40%)
Separator: RGBA{0, 0, 0, 0.05},
CardColor: HSL{44, .87, .96}, CardColor: HSL{44, .87, .96},
Shadow: HSL{0, 0, 0.36}, Shadow: HSL{0, 0, 0.36},