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.window.addEventListener("click", e => { e.stopPropagation() })
this.header = document.createElement("div") this.header = document.createElement("div")
this.header.classList = "modal_header highlight_1" this.header.classList = "modal_header"
this.titleDiv = document.createElement("div") this.titleDiv = document.createElement("div")
this.titleDiv.classList = "modal_title" this.titleDiv.classList = "modal_title"

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

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

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

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

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

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

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

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

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

@@ -101,24 +101,27 @@ const example = () => {
</script> </script>
<div class="container"> <div class="container">
<div class="indent">
<p> <p>
If you have a website you can embed pixeldrain files in your own If you have a website you can embed pixeldrain files in your own
webpages here. webpages here.
</p> </p>
<p> <p>
The IFrame embed gives you a frame with a slightly more minimalistic 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 file viewer in it. The embedded file viewer has a fullscreen button
the toolbar is collapsed by default. If you do not have a pixeldrain Pro and the toolbar is collapsed by default. If you do not have a
account the frame will also have advertisements in it. pixeldrain Pro account the frame will also have advertisements in
it.
</p> </p>
<p> <p>
The hotlink embed option only works for single files uploaded with a Pro The hotlink embed option only works for single files uploaded with a
account. You can use this to directly embed a video player, audio Pro account. You can use this to directly embed a video player,
player, photo element or a download button in your site. Make sure you audio player, photo element or a download button in your site. Make
have bandwidth sharing enabled on your sure you have bandwidth sharing enabled on your
<a href="/user/subscription">subscription page</a> or the embed will not <a href="/user/subscription">subscription page</a> or the embed will
work. not work.
</p> </p>
</div>
<div class="tab_bar"> <div class="tab_bar">
<button on:click={embed_iframe} class:button_highlight={tab === "iframe"}> <button on:click={embed_iframe} class:button_highlight={tab === "iframe"}>
<i class="icon">code</i> <i class="icon">code</i>
@@ -132,6 +135,7 @@ const example = () => {
{/if} {/if}
</div> </div>
<div class="indent">
{#if tab === "iframe"} {#if tab === "iframe"}
<h3>Appearance</h3> <h3>Appearance</h3>
<p> <p>
@@ -179,7 +183,7 @@ const example = () => {
Put this code in your website to embed the file. Put this code in your website to embed the file.
</p> </p>
<div class="center"> <div class="center">
<textarea bind:value={embed_html} style="width: 96%; height: 4em;"></textarea> <textarea bind:value={embed_html} style="width: 99%; height: 4em;"></textarea>
<br/> <br/>
<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}> <button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
<i class="icon">content_copy</i> <i class="icon">content_copy</i>
@@ -196,6 +200,7 @@ const example = () => {
</button> </button>
</div> </div>
<h3>Example</h3> <h3>Example</h3>
</div>
<div bind:this={preview_area} style="text-align: center;"></div> <div bind:this={preview_area} style="text-align: center;"></div>
</div> </div>

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

@@ -373,6 +373,8 @@ const node_click = (index) => {
padding: 0; padding: 0;
overflow-x: auto; overflow-x: auto;
text-align: left; text-align: left;
background-color: var(--layer_2_color);
border-radius: 16px;
} }
#node_container { #node_container {
display: block; 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} /> <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="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 id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}> <button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
<i class="icon">select_all</i> Select <i class="icon">select_all</i> Select
@@ -349,18 +341,14 @@ is collapsed */
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--layer_1_color);
} }
.nav_bar { .nav_bar {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-bottom-left-radius: 16px;
background-color: var(--layer_1_color);
padding: 4px; padding: 4px;
} }
.nav_bar.expanded {
border-bottom-left-radius: 0;
}
.nav_bar > button { .nav_bar > button {
flex-shrink: 0; flex-shrink: 0;
} }

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

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

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

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