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

Make menu darker again

Browse Source
This commit is contained in:
Fornax
2022-01-04 15:55:20 +01:00
parent 4f17c71b56
commit f3ea67667e
10 changed files with 109 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/include/script/dependencies/Modal.js
View File

@@ -23,7 +23,7 @@ function Modal(parent, closeCallback, title, width, height) {
this.window.addEventListener("click", e => { e.stopPropagation() })
this.header = document.createElement("div")
this.header.classList = "modal_header highlight_1"
this.header.classList = "modal_header"
this.titleDiv = document.createElement("div")
this.titleDiv.classList = "modal_title"

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

@@ -53,7 +53,7 @@ body{
font-size: 17px;
line-height: 1.8em;
color: var(--text_color);
background-color: var(--layer_2_color);
background-color: var(--layer_1_color);
padding: 0;
}
.checkers {
@@ -66,7 +66,7 @@ body{
.inset {
padding-top: 70px;
box-shadow: inset 1px 1px 10px 0 var(--shadow_color);
border-radius: 16px;
border-radius: 12px;
text-align: center;
overflow: hidden;
}
@@ -106,7 +106,6 @@ body{
height: 100%;
left: 0;
float: left;
background-color: var(--layer_2_color);
padding: 20px 10px 10px 0;
overflow-y: auto;
overflow-x: hidden;
@@ -124,6 +123,9 @@ body{
overflow-y: auto;
overflow-x: hidden;
background-color: var(--layer_2_color);
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
padding: 8px;
transition: left 0.5s;
}
@media (max-width: 1000px) {
@@ -133,6 +135,7 @@ body{
.page_body {
left: 0;
width: 100%;
padding: 4px;
}
}
.limit_width {
@@ -240,7 +243,7 @@ body{
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
margin: 0.5em 10px;
margin: 0.5em 0;
font-weight: normal;
font-weight: lighter;
font-family: sans-serif;
@@ -270,9 +273,8 @@ h5 {
h6 {
font-size: 1em;
}
p, .indent {
margin: 10px;
.indent {
margin: 8px;
}
hr {
@@ -484,7 +486,7 @@ select:disabled , select.disabled {
white-space: nowrap;
text-align: center;
background-color: var(--layer_1_color);
box-shadow: inset 0 -10px 8px -12px var(--shadow_color), 0 0 10px var(--shadow_color);
box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
}
.tab_bar > button,
.tab_bar > .button {

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

@@ -32,6 +32,7 @@
flex-shrink: 0;
display: flex;
flex-direction: row;
background: var(--layer_1_color);
padding: 1px;
}

2
svelte/src/file_viewer/DetailsWindow.svelte
View File

@@ -88,7 +88,7 @@ onMount(() => {
})
</script>
<div>
<div class="indent">
<table>
<tr>
<td>Name</td>

22
svelte/src/file_viewer/EditWindow.svelte
View File

@@ -138,7 +138,7 @@ let delete_list = async e => {
</script>
<div>
<div class="indent">
{#if loading}
<div class="spinner_container">
<Spinner></Spinner>
@@ -153,7 +153,7 @@ let delete_list = async e => {
{#if list.can_edit}
<h3>Edit album</h3>
<h4>Rename</h4>
<form on:submit={rename_list} class="indent" style="display: flex;">
<form on:submit={rename_list} style="display: flex;">
<input bind:value={list_name} type="text" style="flex: 1 1 auto"/>
<button type="submit" style="flex: 0 0 auto">
<i class="icon">save</i> Save
@@ -164,17 +164,15 @@ let delete_list = async e => {
When you delete an album the files in the album will not be deleted,
only the album itself.
</p>
<div class="indent">
<button on:click={delete_list} class="button_red">
<i class="icon small">delete</i> Delete album
</button>
</div>
<button on:click={delete_list} class="button_red">
<i class="icon small">delete</i> Delete album
</button>
{/if}
{#if file.can_edit}
<h3>Edit file</h3>
<h4>Rename</h4>
<form on:submit={rename_file} class="indent" style="display: flex;">
<form on:submit={rename_file} style="display: flex;">
<input bind:value={file_name} type="text" style="flex: 1 1 auto"/>
<button type="submit" style="flex: 0 0 auto">
<i class="icon">save</i> Save
@@ -187,11 +185,9 @@ let delete_list = async e => {
stop working. The file will also disappear from any
lists it's contained in.
</p>
<div class="indent">
<button on:click={delete_file} class="button_red">
<i class="icon small">delete</i> Delete file
</button>
</div>
<button on:click={delete_file} class="button_red">
<i class="icon small">delete</i> Delete file
</button>
{/if}
</div>

155
svelte/src/file_viewer/EmbedWindow.svelte
View File

@@ -101,24 +101,27 @@ const example = () => {
</script>
<div class="container">
<p>
If you have a website you can embed pixeldrain files in your own
webpages here.
</p>
<p>
The IFrame embed gives you a frame with a slightly more minimalistic
file viewer in it. The embedded file viewer has a fullscreen button and
the toolbar is collapsed by default. If you do not have a pixeldrain Pro
account the frame will also have advertisements in it.
</p>
<p>
The hotlink embed option only works for single files uploaded with a Pro
account. You can use this to directly embed a video player, audio
player, photo element or a download button in your site. Make sure you
have bandwidth sharing enabled on your
<a href="/user/subscription">subscription page</a> or the embed will not
work.
</p>
<div class="indent">
<p>
If you have a website you can embed pixeldrain files in your own
webpages here.
</p>
<p>
The IFrame embed gives you a frame with a slightly more minimalistic
file viewer in it. The embedded file viewer has a fullscreen button
and the toolbar is collapsed by default. If you do not have a
pixeldrain Pro account the frame will also have advertisements in
it.
</p>
<p>
The hotlink embed option only works for single files uploaded with a
Pro account. You can use this to directly embed a video player,
audio player, photo element or a download button in your site. Make
sure you have bandwidth sharing enabled on your
<a href="/user/subscription">subscription page</a> or the embed will
not work.
</p>
</div>
<div class="tab_bar">
<button on:click={embed_iframe} class:button_highlight={tab === "iframe"}>
<i class="icon">code</i>
@@ -132,70 +135,72 @@ const example = () => {
{/if}
</div>
{#if tab === "iframe"}
<h3>Appearance</h3>
<div class="indent">
{#if tab === "iframe"}
<h3>Appearance</h3>
<p>
You can change the pixeldrain theme for your embedded file. Try the
available themes <a href="/appearance">here</a>.
</p>
<div class="center">
<button class:button_highlight={style===""} on:click={() => {set_style("")}}>
Default
</button>
<button class:button_highlight={style==="classic"} on:click={() => {set_style("classic")}}>
Classic
</button>
<button class:button_highlight={style==="solarized_dark"} on:click={() => {set_style("solarized_dark")}}>
Solarized
</button>
<button class:button_highlight={style==="maroon"} on:click={() => {set_style("maroon")}}>
Maroon
</button>
<button class:button_highlight={style==="hacker"} on:click={() => {set_style("hacker")}}>
Hacker
</button>
<button class:button_highlight={style==="canta"} on:click={() => {set_style("canta")}}>
Canta
</button>
<button class:button_highlight={style==="arc"} on:click={() => {set_style("arc")}}>
Arc
</button>
<button class:button_highlight={style==="deepsea"} on:click={() => {set_style("deepsea")}}>
Deep sea
</button>
</div>
{:else}
<h3>Direct link</h3>
<p>
You can directly download the file from this link without using the
file viewer:
<br/>
{domain_url()}{file.get_href}
</p>
{/if}
<h3>Code</h3>
<p>
You can change the pixeldrain theme for your embedded file. Try the
available themes <a href="/appearance">here</a>.
Put this code in your website to embed the file.
</p>
<div class="center">
<button class:button_highlight={style===""} on:click={() => {set_style("")}}>
Default
<textarea bind:value={embed_html} style="width: 99%; height: 4em;"></textarea>
<br/>
<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
<i class="icon">content_copy</i>
{#if copy_status === "success"}
Copied!
{:else if copy_status === "error"}
Error!
{:else}
Copy HTML
{/if}
</button>
<button class:button_highlight={style==="classic"} on:click={() => {set_style("classic")}}>
Classic
</button>
<button class:button_highlight={style==="solarized_dark"} on:click={() => {set_style("solarized_dark")}}>
Solarized
</button>
<button class:button_highlight={style==="maroon"} on:click={() => {set_style("maroon")}}>
Maroon
</button>
<button class:button_highlight={style==="hacker"} on:click={() => {set_style("hacker")}}>
Hacker
</button>
<button class:button_highlight={style==="canta"} on:click={() => {set_style("canta")}}>
Canta
</button>
<button class:button_highlight={style==="arc"} on:click={() => {set_style("arc")}}>
Arc
</button>
<button class:button_highlight={style==="deepsea"} on:click={() => {set_style("deepsea")}}>
Deep sea
<button on:click={example}>
<i class="icon">visibility</i> Show example
</button>
</div>
{:else}
<h3>Direct link</h3>
<p>
You can directly download the file from this link without using the
file viewer:
<br/>
{domain_url()}{file.get_href}
</p>
{/if}
<h3>Code</h3>
<p>
Put this code in your website to embed the file.
</p>
<div class="center">
<textarea bind:value={embed_html} style="width: 96%; height: 4em;"></textarea>
<br/>
<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
<i class="icon">content_copy</i>
{#if copy_status === "success"}
Copied!
{:else if copy_status === "error"}
Error!
{:else}
Copy HTML
{/if}
</button>
<button on:click={example}>
<i class="icon">visibility</i> Show example
</button>
<h3>Example</h3>
</div>
<h3>Example</h3>
<div bind:this={preview_area} style="text-align: center;"></div>
</div>

2
svelte/src/user_file_manager/DirectoryElement.svelte
View File

@@ -373,6 +373,8 @@ const node_click = (index) => {
padding: 0;
overflow-x: auto;
text-align: left;
background-color: var(--layer_2_color);
border-radius: 16px;
}
#node_container {
display: block;

16
svelte/src/user_file_manager/FileManager.svelte
View File

@@ -256,16 +256,8 @@ onMount(() => {
<svelte:window on:keydown={keydown} on:hashchange={hashChange} />
<svetle:head>
<style>
#footer {
border-top-left-radius: 16px;
}
</style>
</svetle:head>
<div id="file_manager" class="file_manager">
<div id="nav_bar" class="nav_bar" class:expanded={selecting}>
<div id="nav_bar" class="nav_bar">
<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
<i class="icon">select_all</i> Select
@@ -349,18 +341,14 @@ is collapsed */
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--layer_1_color);
}
.nav_bar {
flex-shrink: 0;
display: flex;
flex-direction: row;
border-bottom-left-radius: 16px;
background-color: var(--layer_1_color);
padding: 4px;
}
.nav_bar.expanded {
border-bottom-left-radius: 0;
}
.nav_bar > button {
flex-shrink: 0;
}

1
svelte/src/user_home/Router.svelte
View File

@@ -76,6 +76,7 @@ onMount(() => {
{/if}
</div>
</div>
<br/>
{#if page === "home"}
<Home/>

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

@@ -48,7 +48,7 @@ const keydown = e => {
{#if visible}
<div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}}>
<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true">
<div class="header highlight_1">
<div class="header">
<slot name="title">
<div class="title">{title}</div>
<button class="button button_red round" on:click={hide}>
@@ -97,6 +97,7 @@ const keydown = e => {
display: flex;
flex-direction: row;
padding: 1px;
background-color: var(--layer_1_color);
}
.title {
flex-grow: 1;