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 ` +
`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>`
}

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

@@ -50,10 +50,6 @@ a > svg { vertical-align: middle; }
/* Page rendering configuration */
html, body { overflow-x: hidden; }
body{
background-color: #111111; /* Fallback */
background-color: var(--layer_1_color);
background-repeat: repeat;
background-blend-mode: luminosity;
margin: 0;
font-family: system-ui, sans-serif;
font-size: 17px;
@@ -62,6 +58,13 @@ body{
color: var(--text_color);
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_wrapper {
@@ -181,7 +184,7 @@ body{
overflow: hidden;
text-overflow: ellipsis;
transition: background-color 0.5s;
border-radius: 5px;
border-radius: 24px;
text-decoration: none;
}
.page_navigation a:hover {
@@ -196,13 +199,6 @@ body{
box-shadow: inset 1px 1px 20px 0 #000000;
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_middle,
@@ -361,7 +357,7 @@ pre {
margin: 10px;
padding: 0;
overflow: hidden;
border-radius: 2px;
border-radius: 6px;
box-shadow: 2px 2px 8px -3px var(--shadow_color);
background-color: var(--layer_3_color);
color: #bfbfbf; /* Fallback */
@@ -431,12 +427,12 @@ input[type="color"],
select {
display: inline-block;
box-sizing: border-box;
border-radius: 2px;
border-radius: 8px;
border: none;
margin: 3px;
background: linear-gradient(var(--input_color), var(--input_color_dark));
padding: 4px 5px 4px 5px;
box-shadow: 2px 2px 6px -3px var(--shadow_color);
padding: 6px 7px 6px 7px;
box-shadow: 1px 1px 5px -2px var(--shadow_color);
line-height: 1em;
overflow: hidden;
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));
box-shadow: inset 4px 4px 8px var(--shadow_color);
/* 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_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;
}
.round {
border-radius: 32px;
}
/* Dropdown list of the select tag */
option{
background-color: var(--input_color_dark);
@@ -516,9 +516,9 @@ input[type="date"]{
margin: 3px; /* Same as button, to make them align nicely */
border: none;
box-sizing: border-box;
border-radius: 3px;
border-radius: 8px;
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;
color: var(--input_text_color);
font-size: 1em;

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

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

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

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

13
res/template/file_viewer.html
View File

@@ -29,9 +29,11 @@
<body>
<div id="file_viewer" class="file_viewer">
<div id="file_viewer_headerbar" class="highlight_1 file_viewer_headerbar">
<button id="btn_toggle_toolbar" class="button_toggle_toolbar"><i class="icon">menu</i></button>
<a href="/" id="button_home" class="button button_home">
<div id="file_viewer_headerbar" class="file_viewer_headerbar">
<button id="btn_toggle_toolbar" class="button_toggle_toolbar round">
<i class="icon">menu</i>
</button>
<a href="/" id="button_home" class="button button_home round">
{{template `pixeldrain.svg` .}}
</a>
<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
@@ -39,7 +41,7 @@
<div id="file_viewer_file_title">loading...</div>
</div>
<!-- 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>
</button>
</div>
@@ -53,6 +55,7 @@
<div id="stat_size_label" class="toolbar_label">Size</div>
<div id="stat_size" style="text-align: center;">N/A</div>
<hr/>
<button id="btn_download" class="toolbar_button button_full_width">
<i class="icon">save</i>
<span>Download</span>
@@ -138,7 +141,7 @@
</button>
</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>
</div>

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

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

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

@@ -83,6 +83,8 @@ const keydown = e => {
left: 50%;
transform: translate(-50%, -20%);
padding: 0;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
text-align: left;
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
// or 1 we need to give it n=2. We can use this function to make other
// splits like 1/3 1/4, etc
switch i := rand.Intn(4); i {
case 0: // 25%
switch i := rand.Intn(5); i {
case 0: // 20%
vd.AdBannerType = brave
case 2, 3, 4: // 75%
case 1, 2, 3, 4: // 80%
vd.AdBannerType = aAds
default:
panic(fmt.Errorf("random number generator returned unrecognised number: %d", i))