Replace some shadows with borders

This commit is contained in:
2022-06-21 14:00:03 +02:00
parent 75f56decbb
commit 467e92c7a3
13 changed files with 275 additions and 241 deletions

View File

@@ -85,7 +85,7 @@ footer,
header,
footer {
box-shadow: inset 0 0 3px -1px var(--shadow_color);
border: 2px solid var(--separator);
border-radius: 12px;
text-align: center;
overflow: hidden;
@@ -101,7 +101,7 @@ footer>.footer_content {
background-color: var(--shaded_background);
display: inline-block;
border-radius: 8px;
margin: 300px 0 69px 0;
margin: 200px 0 60px 0;
}
/* Page layout elements */
@@ -173,11 +173,12 @@ footer>.footer_content {
section {
position: relative;
display: inline-block;
display: block;
max-width: 1000px;
width: 100%;
height: auto;
padding: 0;
margin: auto;
text-align: initial;
clear: both;
}
@@ -367,46 +368,6 @@ pre {
overflow-x: auto;
}
.file_button {
position: relative;
width: 400px;
max-width: 90%;
height: 3.6em;
margin: 8px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: box-shadow 0.3s, opacity 2s, background 0.2s;
white-space: normal;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
max-height: 100%;
max-width: 25%;
margin-right: 5px;
float: left;
display: block;
}
.file_button>.file_button_title {
color: var(--link_color);
}
/* API documentation markup */
details {

View File

@@ -25,8 +25,6 @@
<br/>
<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
<br/>
Hue:
<br/>
<br/>
<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)

View File

@@ -2,6 +2,48 @@
<html lang="en">
<head>
{{template "meta_tags" "Upload History"}}
<style>
.file_button {
position: relative;
width: 400px;
max-width: 90%;
height: 3.6em;
margin: 8px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: box-shadow 0.3s, opacity 2s, background 0.2s;
white-space: normal;
text-overflow: ellipsis;
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
max-height: 100%;
max-width: 25%;
margin-right: 5px;
float: left;
display: block;
}
.file_button>.file_button_title {
color: var(--link_color);
}
</style>
</head>
<body>
{{template "page_top" .}}

View File

@@ -15,6 +15,8 @@
background-position: center top;
background-size: cover;
color: #ffffff;
box-shadow: inset 0 0 2px 0 var(--shadow_color);
border: none;
}
</style>

View File

@@ -429,7 +429,7 @@ const keyboard_event = evt => {
<div id="toolbar" class="toolbar" class:toolbar_visible>
{#if view === "file"}
<FileStats file={file}></FileStats>
<hr/>
<div class="separator"></div>
{/if}
{#if file.abuse_type === "" && view === "file"}
@@ -514,7 +514,7 @@ const keyboard_event = evt => {
</button>
{/if}
<hr/>
<div class="separator"></div>
{#if file.can_edit || list.can_edit}
<button
@@ -690,8 +690,8 @@ const keyboard_event = evt => {
}
.file_preview {
position: absolute;
left: 4px;
right: 4px;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
@@ -700,8 +700,8 @@ const keyboard_event = evt => {
transition: left 0.5s;
overflow: auto;
text-align: center;
box-shadow: inset 0 0 3px -1px var(--shadow_color);
border-radius: 16px;
border-radius: 12px;
border: 2px solid var(--separator);
}
.file_preview.toolbar_visible { left: 8em; }
.file_preview.skyscraper_visible { right: 160px; }
@@ -737,4 +737,10 @@ const keyboard_event = evt => {
.toolbar_button > span {
vertical-align: middle;
}
.toolbar > .separator {
height: 2px;
width: 100%;
margin: 10px 0;
background-color: var(--separator);
}
</style>

View File

@@ -162,7 +162,6 @@ const drop = (e, index) => {
<style>
.gallery{
padding: 16px;
width: 100%;
max-height: 100%;
overflow: auto;
@@ -171,15 +170,12 @@ const drop = (e, index) => {
justify-content: center;
}
.file{
position: relative;
width: 200px;
max-width: 45%;
max-width: 42%;
height: 200px;
margin: 8px;
padding: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 1px 1px 3px -1px var(--shadow_color);
background: var(--input_background);
word-break: break-all;
text-align: center;
@@ -194,13 +190,15 @@ const drop = (e, index) => {
.file:hover {
background: var(--input_hover_background);
}
.highlight {
box-shadow: 0 0 2px 2px var(--highlight_color);
text-decoration: none;
}
.icon_container {
width: 100%;
height: 136px;
margin: 3px;
height: 154px;
border-radius: 6px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;

View File

@@ -81,9 +81,9 @@ export const set_item = idx => {
<a
href="#item={index}"
title="Open {file.name}"
class="list_item file_button"
class="file_button"
class:file_selected={file.selected}>
<img src={file.icon_href+"?width=48&height=48"} alt={file.name} class="list_item_thumbnail" loading="lazy"/>
<img src={file.icon_href+"?width=64&height=64"} alt={file.name} class="list_item_thumbnail" loading="lazy"/>
{file.name}
</a>
{/each}
@@ -97,7 +97,7 @@ export const set_item = idx => {
display: flex;
position: relative;
width: 100%;
border-top: 1px solid var(--separator);
border-top: 2px solid var(--separator);
text-align: center;
line-height: 1em;
@@ -105,13 +105,9 @@ export const set_item = idx => {
.nav_button{
flex-grow: 0;
flex-shrink: 0;
margin-top: 8px;
margin: 6px;
}
.list_item {
height: 2.6em !important;
width: 220px !important;
}
.list_navigator {
flex-grow: 1;
flex-shrink: 1;
@@ -120,8 +116,43 @@ export const set_item = idx => {
white-space: nowrap;
}
.file_selected {
box-shadow: 0 0 2px 2px var(--highlight_color);
.file_button {
position: relative;
height: 50px;
width: 220px;
margin: 6px;
padding: 0;
overflow: hidden;
border-radius: 6px;
background: var(--input_background);
color: var(--body_text_color);
word-break: break-all;
text-align: left;
line-height: 1.2em;
display: inline-block;
transition: background 0.2s;
white-space: normal;
text-decoration: none;
vertical-align: top;
cursor: pointer;
border-width: 2px;
border-style: solid;
border-color: var(--input_background);
}
.file_button:hover {
text-decoration: none;
background: var(--input_hover_background);
}
.file_button>img {
height: 100%;
margin-right: 5px;
float: left;
display: block;
}
.file_selected {
text-decoration: none;
border-color: var(--highlight_color);
}
</style>

View File

@@ -85,7 +85,7 @@ const mouseup = (e) => {
top: 50%;
cursor: pointer;
transform: translateY(-50%);
box-shadow: 1px 1px 6px var(--shadow_color);
box-shadow: 0 0 4px var(--shadow_color);
}
.image.zoom {
max-width: none;

View File

@@ -104,13 +104,9 @@ const code = async file => {
<style>
.container {
background: var(--body_color);
border: 2px solid var(--separator);
border-radius: 16px;
position: relative;
text-align: left;
height: 100%;
width: 100%;
font-size: 0.9em;
line-height: 1.5em;
overflow-y: auto;
overflow-x: hidden;
@@ -121,10 +117,12 @@ const code = async file => {
white-space: pre-wrap;
overflow: hidden;
border: none;
font-size: 0.9em;
}
.container > .md {
display: block;
padding: 10px;
margin: auto;
text-align: justify;
}
</style>

View File

@@ -194,7 +194,6 @@ h1 {
display: flex;
flex-direction: row;
background-color: var(--shaded_background);
box-shadow: 1px 1px 6px var(--shadow_color);
padding: 0 2px 2px 2px;
align-items: center;
}
@@ -212,7 +211,7 @@ h1 {
max-height: 100%;
top: 50%;
transform: translateY(-50%);
box-shadow: 1px 1px 6px var(--shadow_color);
box-shadow: 0 0 4px var(--shadow_color);
}
.video_icon {
display: inline-block;

View File

@@ -390,173 +390,171 @@ const keydown = (e) => {
<Konami></Konami>
<div>
<!-- If the user is logged in and has used more than 50% of their storage space we will show a progress bar -->
{#if window.user.username !== "" && window.user.storage_space_used/window.user.subscription.storage_space > 0.5}
<section>
<StorageProgressBar used={window.user.storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
</section>
{/if}
<section class="instruction" style="margin-top: 0; border-top: none;">
<span class="big_number">1</span>
<span class="instruction_text">Select files to upload</span>
<br/>
You can also drop files on this page from your file manager or
paste an image from your clipboard
<!-- If the user is logged in and has used more than 50% of their storage space we will show a progress bar -->
{#if window.user.username !== "" && window.user.storage_space_used/window.user.subscription.storage_space > 0.5}
<section>
<StorageProgressBar used={window.user.storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
</section>
{/if}
<section class="instruction" style="border-top: none;">
<span class="big_number">1</span>
<span class="instruction_text">Select files to upload</span>
<br/>
You can also drop files on this page from your file manager or
paste an image from your clipboard
</section>
<br/>
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
<button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
<i class="icon small">cloud_upload</i>
<u>U</u>pload Files
</button>
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
<button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
<i class="icon small">cloud_upload</i>
<u>U</u>pload Files
</button>
<a bind:this={btn_upload_text} href="/t" id="upload_text_button" class="button big_button button_highlight">
<i class="icon small">text_fields</i>
Upload <u>T</u>ext
</a>
<a bind:this={btn_upload_text} href="/t" id="upload_text_button" class="button big_button button_highlight">
<i class="icon small">text_fields</i>
Upload <u>T</u>ext
</a>
<br/>
<p>
By uploading files to pixeldrain you acknowledge and accept our
<a href="/about#content-policy">content policy</a>.
<p>
<section class="instruction" style="margin-bottom: 0;">
<span class="big_number">2</span>
<span class="instruction_text">Wait for the files to finish uploading</span>
<br/>
<p>
By uploading files to pixeldrain you acknowledge and accept our
<a href="/about#content-policy">content policy</a>.
<p>
<section class="instruction" style="margin-bottom: 0;">
<span class="big_number">2</span>
<span class="instruction_text">Wait for the files to finish uploading</span>
<br/>
<div class="stats_box">
<div>Size {formatDataVolume(total_size, 3)}</div>
<div>Progress {(total_progress*100).toPrecision(3)}%</div>
<div>ETA {formatDuration(remaining_time, 0)}</div>
<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
</div>
<ProgressBar total={total_size} used={total_loaded} animation="linear" speed={stats_interval_ms}/>
</section>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/>
Drop your files to upload them
<div class="stats_box">
<div>Size {formatDataVolume(total_size, 3)}</div>
<div>Progress {(total_progress*100).toPrecision(3)}%</div>
<div>ETA {formatDuration(remaining_time, 0)}</div>
<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
</div>
<br/>
{#each upload_queue as file}
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
{/each}
<ProgressBar total={total_size} used={total_loaded} animation="linear" speed={stats_interval_ms}/>
</section>
<br/>
<section class="instruction">
<span class="big_number">3</span>
<span class="instruction_text">Share the files</span>
</section>
<br/>
{#if upload_queue.length > 1}
You can create an album to group your files together into one link<br/>
Name:
<form class="album_name_form" on:submit|preventDefault={create_album}>
<input bind:value={input_album_name} type="text" disabled={state !== "finished"} placeholder="My album"/>
<button type="submit" disabled={state !== "finished"}>
<i class="icon">create_new_folder</i> Create
</button>
</form>
<br/><br/>
Other sharing methods:
<br/>
{/if}
<div class="social_buttons" class:hide={!navigator_share}>
<button id="btn_social_share" on:click={share_navigator} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">share</i><br/>
Share
</button>
</div>
<button bind:this={btn_copy_link} on:click={copy_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">content_copy</i><br/>
<span><u>C</u>opy link</span>
</button>
<button bind:this={btn_open_link} on:click={open_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">open_in_new</i><br/>
<span><u>O</u>pen link</span>
</button>
<button bind:this={btn_show_qr} on:click={show_qr_code} class="social_buttons" disabled={state !== "finished"} class:button_highlight={qr_visible}>
<i class="icon">qr_code</i><br/>
<span><u>Q</u>R code</span>
</button>
<div class="social_buttons" class:hide={navigator_share}>
<button bind:this={btn_share_email} on:click={share_mail} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">email</i><br/>
<u>E</u>-Mail
</button>
<button bind:this={btn_share_twitter} on:click={share_twitter} class="social_buttons" disabled={state !== "finished"}>
<Twitter style="width: 40px; height: 40px; margin: 5px 15px;"></Twitter><br/>
T<u>w</u>itter
</button>
<button bind:this={btn_share_facebook} on:click={share_facebook} class="social_buttons" disabled={state !== "finished"}>
<Facebook style="width: 40px; height: 40px; margin: 5px 15px;"></Facebook><br/>
<u>F</u>acebook
</button>
<button bind:this={btn_share_reddit} on:click={share_reddit} class="social_buttons" disabled={state !== "finished"}>
<Reddit style="width: 40px; height: 40px; margin: 5px 15px;"></Reddit><br/>
<u>R</u>eddit
</button>
<button bind:this={btn_share_tumblr} on:click={share_tumblr} class="social_buttons" disabled={state !== "finished"}>
<Tumblr style="width: 40px; height: 40px; margin: 5px 15px;"></Tumblr><br/>
Tu<u>m</u>blr
</button>
</div>
<br/>
{#if qr_visible}
<img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;">
<br/>
{/if}
<button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard
</button>
<button bind:this={btn_copy_markdown} on:click={copy_markdown} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy mark<u>d</u>own to clipboard
</button>
<button bind:this={btn_copy_bbcode} on:click={copy_bbcode} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>B</u>BCode to clipboard
</button>
<br/>
{#if window.user.subscription.name === ""}
<section>
<div class="instruction">
<span class="big_number">4</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
<p>
Pixeldrain is struggling to get by financially. Because anyone
can upload anything it's hard to find reputable advertisers who
want to advertise on pixeldrain. Every month the ad revenue just
barely covers the bandwidth costs. If this continues I will have
to reduce the file size and bandwidth limits even more. That's
not something I would like to do.
</p>
<p>
Pro costs only <b>€20 per year</b> or €2 per month. You will get
some nice benefits and more features are on the way. You can
help with making pixeldrain the easiest and fastest way to share
files online!
</p>
<br/>
<div style="text-align: center;">
<a href="#pro" class="button big_button" style="min-width: 350px;">
<i class="icon">arrow_downward</i>
Check out Pro
<i class="icon">arrow_downward</i>
</a>
</div>
</section>
{/if}
<br/>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/>
Drop your files to upload them
</div>
<br/>
{#each upload_queue as file}
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
{/each}
<br/>
<section class="instruction">
<span class="big_number">3</span>
<span class="instruction_text">Share the files</span>
</section>
<br/>
{#if upload_queue.length > 1}
You can create an album to group your files together into one link<br/>
Name:
<form class="album_name_form" on:submit|preventDefault={create_album}>
<input bind:value={input_album_name} type="text" disabled={state !== "finished"} placeholder="My album"/>
<button type="submit" disabled={state !== "finished"}>
<i class="icon">create_new_folder</i> Create
</button>
</form>
<br/><br/>
Other sharing methods:
<br/>
{/if}
<div class="social_buttons" class:hide={!navigator_share}>
<button id="btn_social_share" on:click={share_navigator} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">share</i><br/>
Share
</button>
</div>
<button bind:this={btn_copy_link} on:click={copy_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">content_copy</i><br/>
<span><u>C</u>opy link</span>
</button>
<button bind:this={btn_open_link} on:click={open_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">open_in_new</i><br/>
<span><u>O</u>pen link</span>
</button>
<button bind:this={btn_show_qr} on:click={show_qr_code} class="social_buttons" disabled={state !== "finished"} class:button_highlight={qr_visible}>
<i class="icon">qr_code</i><br/>
<span><u>Q</u>R code</span>
</button>
<div class="social_buttons" class:hide={navigator_share}>
<button bind:this={btn_share_email} on:click={share_mail} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">email</i><br/>
<u>E</u>-Mail
</button>
<button bind:this={btn_share_twitter} on:click={share_twitter} class="social_buttons" disabled={state !== "finished"}>
<Twitter style="width: 40px; height: 40px; margin: 5px 15px;"></Twitter><br/>
T<u>w</u>itter
</button>
<button bind:this={btn_share_facebook} on:click={share_facebook} class="social_buttons" disabled={state !== "finished"}>
<Facebook style="width: 40px; height: 40px; margin: 5px 15px;"></Facebook><br/>
<u>F</u>acebook
</button>
<button bind:this={btn_share_reddit} on:click={share_reddit} class="social_buttons" disabled={state !== "finished"}>
<Reddit style="width: 40px; height: 40px; margin: 5px 15px;"></Reddit><br/>
<u>R</u>eddit
</button>
<button bind:this={btn_share_tumblr} on:click={share_tumblr} class="social_buttons" disabled={state !== "finished"}>
<Tumblr style="width: 40px; height: 40px; margin: 5px 15px;"></Tumblr><br/>
Tu<u>m</u>blr
</button>
</div>
<br/>
{#if qr_visible}
<img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;">
<br/>
{/if}
<button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard
</button>
<button bind:this={btn_copy_markdown} on:click={copy_markdown} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy mark<u>d</u>own to clipboard
</button>
<button bind:this={btn_copy_bbcode} on:click={copy_bbcode} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>B</u>BCode to clipboard
</button>
<br/>
{#if window.user.subscription.name === ""}
<section>
<div class="instruction">
<span class="big_number">4</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
<p>
Pixeldrain is struggling to get by financially. Because anyone
can upload anything it's hard to find reputable advertisers who
want to advertise on pixeldrain. Every month the ad revenue just
barely covers the bandwidth costs. If this continues I will have
to reduce the file size and bandwidth limits even more. That's
not something I would like to do.
</p>
<p>
Pro costs only <b>€20 per year</b> or €2 per month. You will get
some nice benefits and more features are on the way. You can
help with making pixeldrain the easiest and fastest way to share
files online!
</p>
<br/>
<div style="text-align: center;">
<a href="#pro" class="button big_button" style="min-width: 350px;">
<i class="icon">arrow_downward</i>
Check out Pro
<i class="icon">arrow_downward</i>
</a>
</div>
</section>
{/if}
<br/>
<style>
.big_button{
@@ -569,7 +567,7 @@ const keydown = (e) => {
}
.instruction {
border-top: 1px solid var(--separator);
margin: 1.5em 0;
margin: 1em auto;
padding: 5px;
}
.big_number {

View File

@@ -14,6 +14,11 @@ func (wc *WebController) serveDirectory(w http.ResponseWriter, r *http.Request,
var td = wc.newTemplateData(w, r)
var path = strings.TrimPrefix(p.ByName("path"), "/")
if path == "" {
wc.templates.Get().ExecuteTemplate(w, "404", td)
return
}
node, err := td.PixelAPI.GetFilesystemPath(path)
if err != nil {
if err.Error() == "not_found" || err.Error() == "path_not_found" {

View File

@@ -123,7 +123,7 @@ type styleSheet struct {
BodyColor HSL
BodyBackground CSS
BodyText HSL
Separator CSS
Separator HSL
CardColor HSL
CardText HSL
@@ -161,7 +161,7 @@ func (s styleSheet) withDefaults() styleSheet {
defaultCSS(&s.Navigation, RawCSS("none"))
defaultCSS(&s.BodyBackground, s.BodyColor)
defaultHSL(&s.BackgroundText, s.BodyText)
defaultCSS(&s.Separator, s.BodyColor.Add(0, 0, .05))
defaultHSL(&s.Separator, s.BodyColor.Add(0, 0, .03))
return s
}
@@ -193,7 +193,7 @@ func (s styleSheet) withHue(hue int) styleSheet {
s.BodyColor.Hue = hue
s.BodyBackground = setHue(s.BodyBackground)
s.BodyText.Hue = hue
s.Separator = setHue(s.Separator)
s.Separator.Hue = hue
s.CardColor.Hue = hue
s.CardText.Hue = hue
s.Shadow.Hue = hue
@@ -484,7 +484,6 @@ var sweetPixeldrainStyle = styleSheet{
BackgroundColor: HSL{225, .25, .06}, // hsl(225, 25%, 6%)
BodyColor: HSL{228, .25, .12}, // hsl(228, 25%, 12%)
BodyText: HSL{223, .13, .79}, // hsl(223, 13%, 79%)
Separator: RGBA{255, 255, 255, 0.05},
CardColor: HSL{229, .25, .14}, // hsl(229, 25%, 14%)
Shadow: HSL{0, 0, 0},
@@ -502,7 +501,6 @@ var adwaitaDarkStyle = styleSheet{
BackgroundColor: HSL{0, 0, .19},
BodyColor: HSL{0, 0, .14},
BodyText: HSL{0, 0, 1},
Separator: RGBA{255, 255, 255, 0.04},
CardColor: HSL{0, 0, .08},
Shadow: HSL{0, 0, 0},
@@ -537,7 +535,6 @@ var solarizedDarkStyle = styleSheet{
BackgroundColor: HSL{192, 1, .11}, //hsl(192, 100%, 11%)
BodyColor: HSL{192, .81, .14}, // hsl(192, 81%, 14%)
BodyText: HSL{180, .07, .60}, // hsl(180, 7%, 60%)
Separator: RGBA{255, 255, 255, 0.05},
CardColor: HSL{192, .81, .16},
Shadow: HSL{0, 0, 0},
@@ -555,7 +552,6 @@ var solarizedLightStyle = styleSheet{
BackgroundColor: HSL{46, .42, .88}, // hsl(46, 42%, 88%)
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},
CardColor: HSL{44, .87, .96},
Shadow: HSL{0, 0, 0.36},