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

The great flattification

Browse Source
This commit is contained in:
Fornax
2022-03-29 21:41:46 +02:00
parent e5328a7d6c
commit 2b847c0456
41 changed files with 379 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/admin_panel/AbuseReport.svelte
View File

@@ -119,7 +119,7 @@ let set_status = async (action, report_type) => {
.stats {
flex: 0 0 auto;
padding: 0 4px;
border-left: 1px solid var(--layer_3_color_border);
border-left: 1px solid var(--separator);
text-align: center;
}
.details {

2
svelte/src/admin_panel/IPBans.svelte
View File

@@ -221,7 +221,7 @@ onMount(get_bans);
.stats {
flex: 0 0 auto;
padding: 0 4px;
border-left: 1px solid var(--layer_3_color_border);
border-left: 1px solid var(--separator);
text-align: center;
}
</style>

14
svelte/src/admin_panel/Router.svelte
View File

@@ -34,46 +34,46 @@ onMount(() => {
href="/admin"
class:button_highlight={page === "status"}
on:click|preventDefault={() => {navigate("status", "Status")}}>
<i class="icon">home</i>
<i class="icon">home</i><br/>
Status
</a>
<a class="button"
href="/admin/block_files"
class:button_highlight={page === "block_files"}
on:click|preventDefault={() => {navigate("block_files", "Block files")}}>
<i class="icon">block</i>
<i class="icon">block</i><br/>
Block files
</a>
<a class="button"
href="/admin/abuse_reports"
class:button_highlight={page === "abuse_reports"}
on:click|preventDefault={() => {navigate("abuse_reports", "Abuse reports")}}>
<i class="icon">flag</i>
<i class="icon">flag</i><br/>
User reports
</a>
<a class="button"
href="/admin/abuse_reporters"
class:button_highlight={page === "abuse_reporters"}
on:click|preventDefault={() => {navigate("abuse_reporters", "Abuse reporters")}}>
<i class="icon">email</i>
<i class="icon">email</i><br/>
E-mail reporters
</a>
<a class="button"
href="/admin/ip_bans"
class:button_highlight={page === "ip_bans"}
on:click|preventDefault={() => {navigate("ip_bans", "IP bans")}}>
<i class="icon">remove_circle</i>
<i class="icon">remove_circle</i><br/>
IP bans
</a>
<a class="button"
href="/admin/subscriptions"
class:button_highlight={page === "subscriptions"}
on:click|preventDefault={() => {navigate("subscriptions", "Subscriptions")}}>
<i class="icon">receipt_long</i>
<i class="icon">receipt_long</i><br/>
Subscriptions
</a>
<a class="button" href="/admin/globals">
<i class="icon">edit</i>
<i class="icon">edit</i><br/>
Global settings
</a>
</div>

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

@@ -114,7 +114,7 @@ head.valueimpression_loaded.subscribe(v => {
{:else if ad_type === "aads"}
<iframe bind:this={banner} class="banner"
data-aa="73974"
src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.layer2Color}&text_color={window.style.textColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
style="width:728px; height:90px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
title="A-ads advertisement">
</iframe>

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

@@ -91,7 +91,7 @@ head.valueimpression_loaded.subscribe(v => {
{#if ad_type === "aads"}
<iframe
data-aa="1811738"
src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.layer2Color}&text_color={window.style.textColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
style="width:160px; height:600px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
title="A-ads advertisement">
</iframe>

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

@@ -11,7 +11,7 @@ export let border_top = false;
<style>
.border_top {
border-top: solid 1px var(--layer_2_color_border);
border-top: solid 1px var(--separator);
}
.image {
display: block;

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

@@ -709,7 +709,7 @@ const keyboard_event = evt => {
transition: left 0.5s, right 0.5s;
overflow: auto;
text-align: center;
box-shadow: inset 1px 1px 8px var(--shadow_color);
box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
border-radius: 16px;
}
.file_preview.toolbar_visible { left: 8em; }
@@ -717,7 +717,6 @@ const keyboard_event = evt => {
.file_preview.custom_background {
background-size: cover;
background-position: center;
background-color: var(--layer_1_color);
}
/* Toolbars */

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

@@ -177,8 +177,8 @@ const drop = (e, index) => {
padding: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 2px 2px 8px 0 var(--shadow_color);
background-color: var(--layer_3_color);
box-shadow: 1px 1px 4px -1px var(--shadow_color);
background-color: var(--input_background);
word-break: break-all;
text-align: center;
line-height: 1.2em;
@@ -186,7 +186,7 @@ const drop = (e, index) => {
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
color: var(--text_color);
color: var(--body_text_color);
}
.file:hover, .highlight {
box-shadow: 0 0 2px 2px var(--highlight_color);
@@ -201,9 +201,12 @@ const drop = (e, index) => {
text-align: left;
}
.icon_container.editing {
box-shadow: inset 0 60px 40px -40px var(--shadow_color);
box-shadow: inset 0 60px 40px -20px var(--body_color);
}
.icon_container > i:hover {
.icon_container > .icon {
color: var(--body_text_color);
}
.icon_container > .icon:hover {
color: var(--highlight_color);
cursor: pointer;
}

4
svelte/src/file_viewer/IntroPopup.svelte
View File

@@ -56,7 +56,7 @@ onMount(() => {
max-width: 80%;
height: auto;
padding: 8px;
background-color: var(--layer_4_color);
background-color: var(--popout_color);
box-shadow: 2px 2px 16px var(--shadow_color);
border-radius: 20px;
z-index: 50;
@@ -68,7 +68,7 @@ onMount(() => {
position: absolute;
left: 30px;
top: -15px;
border-bottom: 15px solid var(--layer_4_color);
border-bottom: 15px solid var(--popout_color);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}

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

@@ -96,7 +96,7 @@ export const set_item = idx => {
display: flex;
position: relative;
width: 100%;
border-top: 1px solid var(--layer_2_color_border);
border-top: 1px solid var(--separator);
text-align: center;
line-height: 1em;

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

@@ -160,7 +160,7 @@ let submit = async e => {
}
label {
display: block;
border-bottom: 1px var(--layer_2_color_border) solid;
border-bottom: 1px var(--separator) solid;
padding: 0.5em;
}
.spinner_container {

3
svelte/src/file_viewer/Sharebar.svelte
View File

@@ -70,8 +70,7 @@ const share_tumblr = () => {
top: 0;
overflow-y: scroll;
overflow-x: hidden;
box-shadow: inset 1px 1px 5px var(--shadow_color);
background-color: var(--layer_1_color);
background: var(--shaded_background);
border-radius: 16px;
text-align: center;
overflow: hidden;

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

@@ -103,7 +103,9 @@ const code = async file => {
<style>
.container {
background: var(--layer_2_color);
background: var(--body_color);
border: 2px solid var(--separator);
border-radius: 16px;
position: relative;
text-align: left;
height: 100%;

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

@@ -191,7 +191,7 @@ h1 {
flex: 0 0 auto;
display: flex;
flex-direction: row;
background-color: var(--layer_1_color);
background-color: var(--shaded_background);
box-shadow: 1px 1px 6px var(--shadow_color);
padding: 0 2px 2px 2px;
align-items: center;

25
svelte/src/filesystem/Filesystem.svelte
View File

@@ -289,12 +289,12 @@ const share = () => {
{#each state.parents as parent}
<a
href={state.path_root+parent.path}
class="breadcrumb breadcrumb_button"
class="breadcrumb button"
on:click|preventDefault={() => {navigate(parent.path, true)}}>
{parent.name}
</a> /
{/each}
<div class="breadcrumb breadcrumb_last">{state.base.name}</div>
<div class="breadcrumb button button_highlight">{state.base.name}</div>
</div>
</div>
<div class="list_navigator"></div>
@@ -397,7 +397,7 @@ const share = () => {
bottom: 0;
left: 0;
overflow: hidden;
background-color: var(--layer_2_color);
background: var(--body_background);
}
/* Headerbar (row 1) */
@@ -437,26 +437,10 @@ const share = () => {
border-radius: 1em;
min-width: 1em;
text-align: center;
line-height: 1.2em;
padding: 3px 8px;
padding: 4px 8px;
margin: 2px 6px;
word-break: break-all;
}
.breadcrumb_button {
cursor: pointer;
text-decoration: none;
color: var(--text_color);
background-color: var(--layer_3_color);
transition: 0.2s background-color, 0.2s color;
}
.breadcrumb_button:hover, .breadcrumb_button:focus, .breadcrumb_button:active {
color: var(--input_text_color);
background-color: var(--input_color);
}
.breadcrumb_last {
color: var(--highlight_text_color);
background-color: var(--highlight_color);
}
.button_home::after {
content: "pixeldrain";
@@ -526,7 +510,6 @@ const share = () => {
padding: 0;
text-align: left;
transition: left 0.5s;
background-color: var(--layer_2_color);
}
.toolbar.toolbar_visible { left: 0; }
.file_viewer > .file_viewer_window > .file_viewer_file_preview.toolbar_visible { left: 8em; }

3
svelte/src/filesystem/Sharebar.svelte
View File

@@ -72,8 +72,7 @@ const share_tumblr = () => {
overflow-y: scroll;
overflow-x: hidden;
float: left;
background-color: var(--layer_1_color);
box-shadow: inset 1px 1px 5px var(--shadow_color);
background: var(--shaded_background);
text-align: center;
z-index: 48;
overflow: hidden;

2
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -188,6 +188,8 @@ const toggle_select = () => {
margin: 16px 0 0 0;
padding: 0;
justify-content: center;
background: var(--shaded_background);
border-radius: 6px;
}
.toolbar > * { flex: 0 0 auto; }
.toolbar_spacer { flex: 1 1 auto; }

2
svelte/src/filesystem/filemanager/FileUploader.svelte
View File

@@ -200,7 +200,7 @@ const paste = (e) => {
width: 100%;
margin: 6px 0 0 0;
padding: 0;
background-color: var(--layer_2_color);
background: var(--body_color);
box-shadow: 1px 1px 5px var(--shadow_color);
}

4
svelte/src/filesystem/filemanager/GalleryView.svelte
View File

@@ -75,14 +75,14 @@ const node_icon = node => {
overflow: hidden;
border-radius: 8px;
box-shadow: 1px 1px 6px 0 var(--shadow_color);
background-color: var(--layer_3_color);
background: var(--input_background);
text-align: center;
line-height: 1.2em;
display: inline-block;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
color: var(--text_color);
color: var(--body_text_color);
}
.file:hover {
box-shadow: 0 0 2px 2px var(--highlight_color);

8
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -76,7 +76,7 @@ const node_icon = node => {
overflow: hidden;
margin: 8px auto 16px auto;
text-align: left;
background-color: var(--layer_2_color);
background: var(--body_color);
box-shadow: 1px 1px 6px var(--shadow_color);
border-collapse: collapse;
border-radius: 8px;
@@ -97,11 +97,11 @@ const node_icon = node => {
padding: 6px;
}
.node:not(:last-child) {
border-bottom: 1px solid var(--layer_2_color_border);
border-bottom: 1px solid var(--separator);
}
.node:hover:not(.node_selected) {
background-color: var(--input_color_dark);
color: var(--input_text_color);
background: var(--input_background);
color: var(--input_text);
text-decoration: none;
}
.node.node_selected {

10
svelte/src/home_page/FeatureTable.svelte
View File

@@ -279,16 +279,14 @@ onMount(() => {
.feat_table > div > .feat_label {
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
background-color: var(--layer_1_color);
color: var(--layer_1_text_color);
background: var(--shaded_background);
}
.feat_table > div > .feat_normal {
background-color: var(--layer_3_color);
box-shadow: 1px 1px 4px -2px var(--shadow_color);
background-color: var(--popout_color);
}
.feat_table > div > .feat_pro {
background-color: var(--layer_4_color);
box-shadow: 1px 1px 4px -1px var(--shadow_color);
background-color: var(--popout_color);
box-shadow: 1px 1px 2px -1px var(--shadow_color);
}
.feat_table > div > .feat_highlight {
border: 1px solid var(--link_color)

4
svelte/src/home_page/OtherPlans.svelte
View File

@@ -199,8 +199,8 @@
hyphens: auto;
}
.feat_table > div > .feat_pro {
background-color: var(--layer_4_color);
box-shadow: 1px 1px 4px -1px var(--shadow_color);
background-color: var(--popout_color);
box-shadow: 1px 1px 2px -1px var(--shadow_color);
}
.text_highlight {
color: var(--link_color);

8
svelte/src/home_page/UploadProgressBar.svelte
View File

@@ -53,7 +53,6 @@ const on_success = (resp) => {
href = "/u/"+resp.id
target = "_blank"
file_button.style.background = 'var(--layer_3_color)'
progress_bar.style.width = "100%"
progress_bar.style.opacity = "0"
}
@@ -222,9 +221,8 @@ export const start = () => {
padding: 0;
overflow: hidden;
border-radius: 6px;
box-shadow: 2px 2px 8px -3px var(--shadow_color);
background-color: var(--layer_3_color);
color: var(--text_color);
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
@@ -277,7 +275,7 @@ export const start = () => {
display: flex;
flex-direction: row;
height: 1.4em;
border-top: 1px solid var(--layer_3_color_border);
border-top: 1px solid var(--separator);
text-align: center;
font-family: sans-serif, monospace;
font-size: 0.9em;

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

@@ -566,8 +566,8 @@ const keydown = (e) => {
font-size: 1.8em;
}
.instruction {
border-top: 1px solid var(--layer_2_color_border);
border-bottom: 1px solid var(--layer_2_color_border);
border-top: 1px solid var(--separator);
border-bottom: 1px solid var(--separator);
margin: 1.5em 0;
padding: 5px;
}

6
svelte/src/text_upload/TextUpload.svelte
View File

@@ -120,8 +120,8 @@ const keydown = e => {
display: flex;
flex-direction: row;
padding: 4px;
background-color: var(--layer_1_color);
color: var(--layer_1_text_color);
background: var(--background_color);
color: var(--background_text_color);
}
.headerbar > * {
flex: 0 0 auto;
@@ -140,7 +140,7 @@ const keydown = e => {
height: 100%;
width: 100%;
background: var(--body_background);
color: var(--text_color);
color: var(--body_text_color);
margin: 0;
border-radius: 0;
box-shadow: none;

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

@@ -361,7 +361,7 @@ const node_click = (index) => {
display: inline-block;
margin: 4px 10px;
padding: 4px;
border-bottom: 1px solid var(--input_color);
border-bottom: 1px solid var(--separator);
cursor: pointer;
}
@@ -391,7 +391,7 @@ const node_click = (index) => {
#footer {
flex-shrink: 0;
color: var(--layer_1_text_color);
color: var(--background_text_color);
padding: 4px;
}
@@ -407,12 +407,12 @@ const node_click = (index) => {
control over the size.
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
margin: 0;
color: var(--text_color);
color: var(--body_text_color);
text-decoration: none;
}
.node:hover:not(.node_selected) {
background-color: var(--input_color_dark);
color: var(--input_text_color);
background: var(--input_background);
color: var(--input_text);
text-decoration: none;
}
.node_selected {

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

@@ -42,42 +42,42 @@ onMount(() => {
href="/user"
class:button_highlight={page === "home"}
on:click|preventDefault={() => {navigate("home", "My home")}}>
<i class="icon">home</i>
<i class="icon">home</i><br/>
My home
</a>
<a class="button"
href="/user/settings"
class:button_highlight={page === "settings"}
on:click|preventDefault={() => {navigate("settings", "Settings")}}>
<i class="icon">settings</i>
<i class="icon">settings</i><br/>
Settings
</a>
<a class="button"
href="/user/connect_app"
class:button_highlight={page === "connect_app"}
on:click|preventDefault={() => {navigate("connect_app", "Apps")}}>
<i class="icon">app_registration</i>
<i class="icon">app_registration</i><br/>
Apps
</a>
<a class="button"
href="/user/api_keys"
class:button_highlight={page === "api_keys"}
on:click|preventDefault={() => {navigate("api_keys", "API keys")}}>
<i class="icon">vpn_key</i>
<i class="icon">vpn_key</i><br/>
Keys
</a>
<a class="button"
href="/user/activity"
class:button_highlight={page === "activity"}
on:click|preventDefault={() => {navigate("activity", "Activity log")}}>
<i class="icon">list</i>
<i class="icon">list</i><br/>
Activity log
</a>
<a class="button"
href="/user/subscription"
class:button_highlight={page === "subscription"}
on:click|preventDefault={() => {navigate("subscription", "Subscription")}}>
<i class="icon">shopping_cart</i>
<i class="icon">shopping_cart</i><br/>
Subscription
</a>
{#if window.user.subscription.type !== "patreon"}
@@ -85,7 +85,7 @@ onMount(() => {
href="/user/transactions"
class:button_highlight={page === "transactions"}
on:click|preventDefault={() => {navigate("transactions", "Transactions")}}>
<i class="icon">receipt_long</i>
<i class="icon">receipt_long</i><br/>
Transactions
</a>
{/if}

10
svelte/src/user_home/Subscription.svelte
View File

@@ -122,7 +122,7 @@ onMount(load_tranfer_used)
</button>
{/if}
</div>
<div class="feat_normal round_tr">
<div class="feat_normal round_tr" class:feat_highlight={subscription === "prepaid"}>
<ul>
<li>Base price of €1 per month</li>
<li>€4 per TB per month for storage</li>
@@ -269,15 +269,11 @@ onMount(load_tranfer_used)
.feat_table > div > .feat_label {
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
background-color: var(--layer_1_color);
background: var(--shaded_background);
font-size: 1.1em;
color: #ffffff;
text-shadow: 0 0 3px #000000;
}
.feat_table > div > .feat_normal {
background-color: var(--layer_3_color);
box-shadow: 1px 1px 3px -1px var(--shadow_color);
text-shadow: 1px 1px 3px var(--shadow_color);
background: var(--popout_color);
}
.feat_table > div > .feat_highlight {
border: 1px solid var(--highlight_color)

4
svelte/src/util/Chart.svelte
View File

@@ -38,7 +38,7 @@ export const update = () => {
return chart_object.update()
}
Chart.defaults.color = "#"+window.style.textColor;
Chart.defaults.color = "#"+window.style.bodyTextColor;
Chart.defaults.font.size = 15;
Chart.defaults.font.family = "system-ui, sans-serif";
Chart.defaults.maintainAspectRatio = false;
@@ -91,7 +91,7 @@ onMount(() => {
grid: {
display: true,
drawBorder: false,
color: "#"+window.style.layer3Color,
color: "#"+window.style.separatorColor,
},
},
x: {

5
svelte/src/util/Euro.svelte
View File

@@ -5,7 +5,7 @@ export let precision = 2
<span>
€
<span class:red={amount < 0} class:green={amount > 0} class:zero={amount === 0}>
<span class:red={amount < 0} class:green={amount > 0}>
{(amount / 1000000).toFixed(precision)}
</span>
</span>
@@ -17,7 +17,4 @@ export let precision = 2
.green {
color: var(--highlight_color);
}
.zero {
color: var(--layer_4_color);
}
</style>

11
svelte/src/util/Expandable.svelte
View File

@@ -41,7 +41,7 @@ export let highlight = false
<style>
.expandable {
text-decoration: none;
background-color: var(--layer_3_color);
background-color: var(--popout_color);
margin: 0.6em 0;
border-radius: 6px;
overflow: hidden;
@@ -49,11 +49,11 @@ export let highlight = false
.header {
display: flex;
flex-direction: row;
color: var(--text_color);
color: var(--body_text_color);
}
.click_expand:hover, .highlight:hover {
background-color: var(--input_color_dark);
color: var(--input_text_color);
background: var(--input_background);
color: var(--input_text);
}
.click_expand {
cursor: pointer;
@@ -72,8 +72,7 @@ export let highlight = false
padding: 0.4em;
flex-direction: column;
text-decoration: none;
border-top: 1px solid var(--layer_3_color_border);
color: var(--text_color);
border-top: 1px solid var(--separator);
}
.hidden {
display: none;

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

@@ -79,7 +79,7 @@ const keydown = e => {
z-index: inherit;
display: flex;
flex-direction: column;
background-color: var(--layer_2_color);
background: var(--body_color);
max-height: 100%;
max-width: 100%;
margin: 0 auto;
@@ -97,8 +97,8 @@ const keydown = e => {
display: flex;
flex-direction: row;
padding: 1px;
background-color: var(--layer_1_color);
color: var(--layer_1_text_color);
background: var(--background_color);
color: var(--background_text_color);
}
.title {
flex-grow: 1;

4
svelte/src/util/ProgressBar.svelte
View File

@@ -24,13 +24,13 @@ $: {
<style>
.progress_bar_outer {
display: block;
background-color: var(--layer_1_color);
background: var(--background_color);
width: 100%;
height: 3px;
margin: 6px 0 12px 0;
}
.progress_bar_inner {
background-color: var(--highlight_color);
background: var(--highlight_background);
height: 100%;
width: 0;
transition: width 1s;

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

@@ -38,9 +38,6 @@ let set = s => {
<button class:button_highlight={theme==="snowstorm"} on:click={() => {set("snowstorm")}}>
Snowstorm
</button>
<button class:button_highlight={theme==="deepsea"} on:click={() => {set("deepsea")}}>
Deep sea
</button>
<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
Skeuos
</button>