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

Make pixeldrain more round

Browse Source
This commit is contained in:
Wim Brand
2021-08-17 18:02:46 +02:00
parent a7bf875dcc
commit 05d477d53b
8 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/include/script/file_viewer/EmbedWindow.js
View File

@@ -45,7 +45,7 @@ EmbedWindow.prototype.updateCode = function () {
this.textarea.value = `<iframe ` + this.textarea.value = `<iframe ` +
`src="${url}" ` + `src="${url}" ` +
`style="border: none; width: 800px; max-width: 100%; height: 500px; border-radius: 6px;"` + `style="border: none; width: 800px; max-width: 100%; height: 500px; border-radius: 16px;"` +
`></iframe>` `></iframe>`
} }

38
res/include/style/layout.css
View File

@@ -50,10 +50,6 @@ a > svg { vertical-align: middle; }
/* Page rendering configuration */ /* Page rendering configuration */
html, body { overflow-x: hidden; } html, body { overflow-x: hidden; }
body{ body{
background-color: #111111; /* Fallback */
background-color: var(--layer_1_color);
background-repeat: repeat;
background-blend-mode: luminosity;
margin: 0; margin: 0;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
font-size: 17px; font-size: 17px;
@@ -62,6 +58,13 @@ body{
color: var(--text_color); color: var(--text_color);
padding: 0; padding: 0;
} }
body, .checkers {
background-image: url("{{bgPattern}}");
background-color: #111111; /* Fallback */
background-color: var(--layer_1_color);
background-repeat: repeat;
background-blend-mode: luminosity;
}
/* Page layout elements */ /* Page layout elements */
.page_wrapper { .page_wrapper {
@@ -181,7 +184,7 @@ body{
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: background-color 0.5s; transition: background-color 0.5s;
border-radius: 5px; border-radius: 24px;
text-decoration: none; text-decoration: none;
} }
.page_navigation a:hover { .page_navigation a:hover {
@@ -196,13 +199,6 @@ body{
box-shadow: inset 1px 1px 20px 0 #000000; box-shadow: inset 1px 1px 20px 0 #000000;
box-shadow: inset 1px 1px 20px 0 var(--shadow_color); box-shadow: inset 1px 1px 20px 0 var(--shadow_color);
} }
.checkers {
text-shadow: 0 0 20px #000000;
padding: 30px 10px 30px 10px;
}
body, .checkers {
background-image: url("{{bgPattern}}");
}
.highlight_dark, .highlight_dark,
.highlight_middle, .highlight_middle,
@@ -361,7 +357,7 @@ pre {
margin: 10px; margin: 10px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
border-radius: 2px; border-radius: 6px;
box-shadow: 2px 2px 8px -3px var(--shadow_color); box-shadow: 2px 2px 8px -3px var(--shadow_color);
background-color: var(--layer_3_color); background-color: var(--layer_3_color);
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
@@ -431,12 +427,12 @@ input[type="color"],
select { select {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border-radius: 2px; border-radius: 8px;
border: none; border: none;
margin: 3px; margin: 3px;
background: linear-gradient(var(--input_color), var(--input_color_dark)); background: linear-gradient(var(--input_color), var(--input_color_dark));
padding: 4px 5px 4px 5px; padding: 6px 7px 6px 7px;
box-shadow: 2px 2px 6px -3px var(--shadow_color); box-shadow: 1px 1px 5px -2px var(--shadow_color);
line-height: 1em; line-height: 1em;
overflow: hidden; overflow: hidden;
font-size: 1em; /* Sometimes user-agents have different font sizes for buttons and links */ font-size: 1em; /* Sometimes user-agents have different font sizes for buttons and links */
@@ -475,7 +471,7 @@ select:active{
background: linear-gradient(var(--input_color_dark), var(--input_color)); background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 4px 4px 8px var(--shadow_color); box-shadow: inset 4px 4px 8px var(--shadow_color);
/* Exactly 4px offset compared to the inactive padding to give a depth effect */ /* Exactly 4px offset compared to the inactive padding to give a depth effect */
padding: 8px 1px 0px 9px; padding: 10px 3px 2px 11px;
} }
.button_full_width {width: calc(100% - 6px);} .button_full_width {width: calc(100% - 6px);}
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;} .button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
@@ -497,6 +493,10 @@ select:disabled , select.disabled {
cursor: not-allowed; cursor: not-allowed;
} }
.round {
border-radius: 32px;
}
/* Dropdown list of the select tag */ /* Dropdown list of the select tag */
option{ option{
background-color: var(--input_color_dark); background-color: var(--input_color_dark);
@@ -516,9 +516,9 @@ input[type="date"]{
margin: 3px; /* Same as button, to make them align nicely */ margin: 3px; /* Same as button, to make them align nicely */
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
border-radius: 3px; border-radius: 8px;
background: linear-gradient(var(--input_color_dark), var(--input_color)); background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 2px 2px 6px -3px var(--shadow_color); box-shadow: inset 1px 1px 4px -2px var(--shadow_color);
padding: 3px 5px; padding: 3px 5px;
color: var(--input_text_color); color: var(--input_text_color);
font-size: 1em; font-size: 1em;

2
res/include/style/modal.css
View File

@@ -24,6 +24,8 @@
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
box-shadow: var(--shadow_color) 0px 0px 50px; box-shadow: var(--shadow_color) 0px 0px 50px;
border-radius: 8px;
overflow: hidden;
} }
.modal_header { .modal_header {

15
res/include/style/viewer.css
View File

@@ -13,6 +13,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
background-color: var(--layer_2_color);
} }
/* Headerbar (row 1) */ /* Headerbar (row 1) */
@@ -24,6 +25,7 @@
text-align: left; text-align: left;
z-index: 10; z-index: 10;
box-shadow: none; box-shadow: none;
padding: 6px;
} }
.file_viewer > .file_viewer_headerbar_embedded { .file_viewer > .file_viewer_headerbar_embedded {
padding: 2px; padding: 2px;
@@ -51,7 +53,7 @@
.file_viewer > .file_viewer_headerbar > .button_home > svg { .file_viewer > .file_viewer_headerbar > .button_home > svg {
height: 1.6em; height: 1.6em;
width: 1.6em; width: 1.6em;
margin: 0 0.2em 0 0; margin: 0;
} }
.file_viewer > .file_viewer_headerbar > .button_home::after { .file_viewer > .file_viewer_headerbar > .button_home::after {
content: "pixeldrain"; content: "pixeldrain";
@@ -81,7 +83,7 @@
z-index: 50; z-index: 50;
white-space: nowrap; white-space: nowrap;
} }
.file_viewer > .list_navigator > .list_item{ .file_viewer > .list_navigator > .list_item {
height: 2.6em !important; height: 2.6em !important;
width: 220px !important; width: 220px !important;
} }
@@ -111,11 +113,11 @@
transition: left 0.5s; transition: left 0.5s;
overflow: hidden; overflow: hidden;
box-shadow: inset 2px 2px 10px 2px var(--shadow_color); box-shadow: inset 2px 2px 10px 2px var(--shadow_color);
border-radius: 16px;
} }
/* Sponsors (row 4) */ /* Sponsors (row 4) */
.file_viewer > .sponsors { .file_viewer > .sponsors {
background-color: var(--layer_1_color);
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
} }
@@ -139,15 +141,15 @@
z-index: 49; z-index: 49;
overflow: hidden; overflow: hidden;
float: left; float: left;
background-color: var(--layer_1_color);
left: -9em; left: -9em;
bottom: 0; bottom: 0;
top: 0; top: 0;
padding: 0; padding: 0;
text-align: left; text-align: left;
transition: left 0.5s; transition: left 0.5s;
background-color: var(--layer_2_color);
} }
.file_viewer > .file_viewer_window > .file_viewer_sharebar{ .file_viewer > .file_viewer_window > .file_viewer_sharebar {
position: absolute; position: absolute;
width: 7em; width: 7em;
left: -8em; left: -8em;
@@ -156,8 +158,9 @@
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
float: left; float: left;
background-color: var(--layer_1_color);
box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color); box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color);
background-color: var(--layer_1_color);
border-radius: 16px;
text-align: center; text-align: center;
z-index: 48; z-index: 48;
overflow: hidden; overflow: hidden;

13
res/template/file_viewer.html
View File

@@ -29,9 +29,11 @@
<body> <body>
<div id="file_viewer" class="file_viewer"> <div id="file_viewer" class="file_viewer">
<div id="file_viewer_headerbar" class="highlight_1 file_viewer_headerbar"> <div id="file_viewer_headerbar" class="file_viewer_headerbar">
<button id="btn_toggle_toolbar" class="button_toggle_toolbar"><i class="icon">menu</i></button> <button id="btn_toggle_toolbar" class="button_toggle_toolbar round">
<a href="/" id="button_home" class="button button_home"> <i class="icon">menu</i>
</button>
<a href="/" id="button_home" class="button button_home round">
{{template `pixeldrain.svg` .}} {{template `pixeldrain.svg` .}}
</a> </a>
<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title"> <div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
@@ -39,7 +41,7 @@
<div id="file_viewer_file_title">loading...</div> <div id="file_viewer_file_title">loading...</div>
</div> </div>
<!-- fullscreen button becomes visible on embedded viewer --> <!-- fullscreen button becomes visible on embedded viewer -->
<button id="btn_fullscreen" class="btn_fullscreen" style="display: none;"> <button id="btn_fullscreen" class="btn_fullscreen round" style="display: none;">
<i class="icon" id="btn_fullscreen_icon">fullscreen</i> <i class="icon" id="btn_fullscreen_icon">fullscreen</i>
</button> </button>
</div> </div>
@@ -53,6 +55,7 @@
<div id="stat_size_label" class="toolbar_label">Size</div> <div id="stat_size_label" class="toolbar_label">Size</div>
<div id="stat_size" style="text-align: center;">N/A</div> <div id="stat_size" style="text-align: center;">N/A</div>
<hr/>
<button id="btn_download" class="toolbar_button button_full_width"> <button id="btn_download" class="toolbar_button button_full_width">
<i class="icon">save</i> <i class="icon">save</i>
<span>Download</span> <span>Download</span>
@@ -138,7 +141,7 @@
</button> </button>
</div> </div>
<div id="filepreview" class="file_viewer_file_preview"> <div id="filepreview" class="file_viewer_file_preview checkers">
<div class="center" style="width: 100px; height: 100px;">{{template "spinner.svg" .}}</div> <div class="center" style="width: 100px; height: 100px;">{{template "spinner.svg" .}}</div>
</div> </div>
</div> </div>

2
svelte/src/home_page/HomePage.svelte
View File

@@ -520,7 +520,7 @@ const keydown = (e) => {
min-width: 250px; min-width: 250px;
max-width: 400px; max-width: 400px;
margin: 10px !important; margin: 10px !important;
border-radius: 5px; border-radius: 32px;
font-size: 1.8em; font-size: 1.8em;
} }
.instruction { .instruction {

2
svelte/src/util/Modal.svelte
View File

@@ -83,6 +83,8 @@ const keydown = e => {
left: 50%; left: 50%;
transform: translate(-50%, -20%); transform: translate(-50%, -20%);
padding: 0; padding: 0;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
box-shadow: var(--shadow_color) 0px 0px 50px; box-shadow: var(--shadow_color) 0px 0px 50px;

6
webcontroller/file_viewer.go
View File

@@ -78,10 +78,10 @@ func (vd *viewerData) adType(files []pixelapi.ListFile) {
// Intn returns a number up to n, but never n itself. So to get a random 0 // Intn returns a number up to n, but never n itself. So to get a random 0
// or 1 we need to give it n=2. We can use this function to make other // or 1 we need to give it n=2. We can use this function to make other
// splits like 1/3 1/4, etc // splits like 1/3 1/4, etc
switch i := rand.Intn(4); i { switch i := rand.Intn(5); i {
case 0: // 25% case 0: // 20%
vd.AdBannerType = brave vd.AdBannerType = brave
case 2, 3, 4: // 75% case 1, 2, 3, 4: // 80%
vd.AdBannerType = aAds vd.AdBannerType = aAds
default: default:
panic(fmt.Errorf("random number generator returned unrecognised number: %d", i)) panic(fmt.Errorf("random number generator returned unrecognised number: %d", i))