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

Update shaded background color

Browse Source
This commit is contained in:
Fornax
2022-04-04 12:37:58 +02:00
parent 78cd5b555e
commit eb89000ecf
12 changed files with 48 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,7 @@ onMount(() => {
return
}
if (document.body.clientWidth < 700) {
if (document.body.clientWidth < 700 || document.body.clientHeight < 700) {
visible = false
dispatch("visibility", false)
return

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

@@ -644,7 +644,6 @@ const keyboard_event = evt => {
display: flex;
flex-direction: row;
text-align: left;
box-shadow: none;
padding: 4px;
}
.headerbar.embedded {

3
svelte/src/file_viewer/viewers/Audio.svelte
View File

@@ -9,6 +9,7 @@ export let file = {
mime_type: "",
get_href: "",
show_ads: false,
download_speed_limit: 0,
}
$: loop = file.name.includes(".loop.")
@@ -90,7 +91,7 @@ const toggle_play = () => playing ? player.pause() : player.play()
<br/><br/>
{#if file.show_ads}
<BandwidthUsage/>
<BandwidthUsage file={file}/>
{/if}
</div>

14
svelte/src/file_viewer/viewers/BandwidthUsage.svelte
View File

@@ -4,6 +4,9 @@ import { formatDataVolume } from "../../util/Formatting.svelte";
import TextBlock from "./TextBlock.svelte";
import ProgressBar from "../../util/ProgressBar.svelte";
export let file = {
download_speed_limit: 0,
}
let limits = {
download_limit: 0,
download_limit_used: 0,
@@ -30,18 +33,19 @@ onMount(async () => {
</script>
{#if limits.transfer_limit_used > 0}
<TextBlock width="700px" center={true}>
<TextBlock width="800px" center={true}>
<p>
You have used {formatDataVolume(limits.transfer_limit_used, 3)} of
your daily {formatDataVolume(limits.transfer_limit, 3)} download
limit. When the limit is exceeded your download speed will be
reduced.
your daily {formatDataVolume(limits.transfer_limit, 3)} transfer
limit. Your download speed is currently limited to
{file.download_speed_limit/(1<<20)} MiB/s. When the transfer limit
is exceeded your download speed will be reduced.
</p>
<p>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
Support Pixeldrain on Patreon
</a>
to disable the download limit.
to disable the transfer and speed limits
</p>
<ProgressBar total={limits.transfer_limit} used={limits.transfer_limit_used}></ProgressBar>

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

@@ -12,6 +12,7 @@ let file = {
mime_type: "",
icon_href: "",
show_ads: false,
download_speed_limit: 0,
}
</script>
@@ -29,7 +30,7 @@ let file = {
<br/><br/>
{#if file.show_ads}
<BandwidthUsage/>
<BandwidthUsage file={file}/>
{/if}
<style>

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

@@ -13,6 +13,7 @@ let file = {
icon_href: "",
allow_video_player: true,
show_ads: false,
download_speed_limit: 0,
}
$: loop = file.name.includes(".loop.")
@@ -151,23 +152,26 @@ const fullscreen = () => {
{:else}
<h1>{file.name}</h1>
<img src={file.icon_href} class="video_icon" alt="Video icon">
<TextBlock width="600px">
The online video player on pixeldrain is only available when the
uploader of the file is a Patreon supporter, or if you are a Patreon
supporter. You can still download the video and watch it locally on your
computer.
<TextBlock width="650px">
The online video player on pixeldrain is only available for registered
users, or when the uploader of the video has a Pro account. You can
still download the video and watch it locally on your computer without
an account.
<br/>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" target="_blank" class="button button_highlight">
<i class="icon">bolt</i> Get Pixeldrain Pro
</a>
<button on:click={download}>
<i class="icon">download</i> Download
</button>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" class="button button_highlight">
<i class="icon">bolt</i> Support Pixeldrain on Patreon
<a href="/register" class="button">
<i class="icon">how_to_reg</i> Sign up
</a>
</TextBlock>
<br/><br/>
{#if file.show_ads}
<BandwidthUsage/>
<BandwidthUsage file={file}/>
{/if}
{/if}

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

@@ -494,7 +494,7 @@ const share = () => {
vertical-align: middle;
transition: left 0.5s;
overflow: hidden;
box-shadow: inset 2px 2px 8px var(--shadow_color);
box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
}
/* Toolbar */

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

@@ -74,7 +74,7 @@ const node_icon = node => {
padding: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 1px 1px 6px 0 var(--shadow_color);
box-shadow: 1px 1px 4px -1px var(--shadow_color);
background: var(--input_background);
text-align: center;
line-height: 1.2em;

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

@@ -279,7 +279,7 @@ onMount(() => {
.feat_table > div > .feat_label {
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
background: var(--shaded_background);
border: 2px solid var(--separator);
}
.feat_table > div > .feat_normal {
background-color: var(--card_color);

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

@@ -288,14 +288,14 @@ onMount(load_tranfer_used)
.feat_table > div > .feat_label {
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
background: var(--shaded_background);
border: 2px solid var(--separator);
font-size: 1.1em;
}
.feat_table > div > .feat_normal {
background: var(--card_color);
}
.feat_table > div > .feat_highlight {
border: 1px solid var(--highlight_color)
border: 2px solid var(--highlight_color)
}
.feat_table > div > div.round_tr { border-top-right-radius: 0.5em; }

7
webcontroller/style.go
View File

@@ -81,7 +81,6 @@ type styleSheet struct {
BodyBackground Color
BodyText hsl
Separator Color
Shaded Color
CardColor hsl
CardText hsl
@@ -120,7 +119,6 @@ func (s styleSheet) withDefaults() styleSheet {
defaultColor(&s.BodyBackground, s.BodyColor)
defaultHSL(&s.BackgroundText, s.BodyText)
defaultColor(&s.Separator, s.BodyColor.Add(0, 0, .05))
defaultColor(&s.Shaded, RGBA{0, 0, 0, 0.2})
return s
}
@@ -184,7 +182,7 @@ func (s styleSheet) String() string {
s.BodyBackground.CSS(),
s.BodyText.CSS(),
s.Separator.CSS(),
s.Shaded.CSS(),
s.BodyColor.WithAlpha(0.5).CSS(), // shaded_background
s.CardColor.CSS(),
s.Chart1.CSS(),
s.Chart2.CSS(),
@@ -393,7 +391,6 @@ var nordLightStyle = styleSheet{
ParallaxSlider: hsl{220, .16, .22}, // nord0 hsl(220, 16%, 22%)
BodyColor: hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
BodyText: hsl{220, .17, .32}, // nord2 hsl(220, 17%, 32%)
Shaded: RGBA{255, 255, 255, 0.4},
BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
CardColor: hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
@@ -448,7 +445,6 @@ var adwaitaLightStyle = styleSheet{
BackgroundColor: hsl{0, 0, .92},
BodyColor: hsl{0, 0, .98},
BodyText: hsl{0, 0, .2},
Shaded: RGBA{0, 0, 0, 0.04},
CardColor: hsl{0, 0, 1},
Shadow: hsl{0, 0, 0.36},
@@ -485,7 +481,6 @@ var solarizedLightStyle = styleSheet{
BodyColor: hsl{44, .87, .94}, // hsl(44, 87%, 94%)
BodyText: hsl{194, .14, .40}, // hsl(194, 14%, 40%)
Separator: RGBA{0, 0, 0, 0.05},
Shaded: RGBA{255, 255, 255, 0.2},
CardColor: hsl{44, .87, .96},
Shadow: hsl{0, 0, 0.36},

16
webcontroller/style_colors.go
View File

@@ -94,6 +94,22 @@ func (h hsl) Add(hue int, saturation float64, lightness float64) hsl {
return new
}
func (h hsl) WithAlpha(alpha float64) HSLA {
return HSLA{h, alpha}
}
type HSLA struct {
hsl
Alpha float64
}
func (hsla HSLA) CSS() string {
return fmt.Sprintf(
"hsla(%d, %.2f%%, %.2f%%, %.2f)",
hsla.Hue, hsla.Saturation*100, hsla.Lightness*100, hsla.Alpha,
)
}
type RGB struct {
R uint8
G uint8