Minor style/layout changes.

This commit is contained in:
Cory McWilliams 2024-05-02 20:35:00 -04:00
parent 5231ec22e7
commit d7fc1c2c88
3 changed files with 27 additions and 24 deletions

View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&GHOyZaFBo5iHa8XumUpbdtDi2F0YhZaiF8cVsutdxTU=.sha256" "previous": "&vEaOZjrNb0u9rhNqrQ8eU9TlOFlo4HsgW6hbI7VdIT0=.sha256"
} }

View File

@ -358,7 +358,10 @@ class TfElement extends LitElement {
`; `;
let contents = !this.loaded let contents = !this.loaded
? this.loading ? this.loading
? html`<div>Loading...</div>` ? html`<div class="w3-panel w3-theme-l5 w3-card-4 w3-padding-large w3-round-xlarge">
Loading...
</div>
${this.render_tab()}`
: html`<div>Select or create an identity.</div>` : html`<div>Select or create an identity.</div>`
: this.render_tab(); : this.render_tab();
return html` return html`
@ -366,8 +369,8 @@ class TfElement extends LitElement {
style="width: 100vw; min-height: 100vh; height: 100%" style="width: 100vw; min-height: 100vh; height: 100%"
class="w3-theme-dark" class="w3-theme-dark"
> >
${tabs}
<div style="padding: 8px"> <div style="padding: 8px">
${tabs}
${this.tags.map( ${this.tags.map(
(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>` (x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
)} )}

View File

@ -286,29 +286,29 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
`; `;
// prettier-ignore // prettier-ignore
const w3_2016_snorkel_blue = css` const w3_2016_riverside = css`
.w3-theme-l5 {color:#000 !important; background-color:#e9f5ff !important} .w3-theme-l5 {color:#000 !important; background-color:#f4f6f9 !important}
.w3-theme-l4 {color:#000 !important; background-color:#b5dffd !important} .w3-theme-l4 {color:#000 !important; background-color:#d9e1ec !important}
.w3-theme-l3 {color:#000 !important; background-color:#6bc0fc !important} .w3-theme-l3 {color:#000 !important; background-color:#b4c3d8 !important}
.w3-theme-l2 {color:#fff !important; background-color:#21a0fa !important} .w3-theme-l2 {color:#fff !important; background-color:#8ea6c5 !important}
.w3-theme-l1 {color:#fff !important; background-color:#0479cc !important} .w3-theme-l1 {color:#fff !important; background-color:#6888b1 !important}
.w3-theme-d1 {color:#fff !important; background-color:#024575 !important} .w3-theme-d1 {color:#fff !important; background-color:#456185 !important}
.w3-theme-d2 {color:#fff !important; background-color:#023e68 !important} .w3-theme-d2 {color:#fff !important; background-color:#3d5676 !important}
.w3-theme-d3 {color:#fff !important; background-color:#02365b !important} .w3-theme-d3 {color:#fff !important; background-color:#354b68 !important}
.w3-theme-d4 {color:#fff !important; background-color:#022e4e !important} .w3-theme-d4 {color:#fff !important; background-color:#2e4059 !important}
.w3-theme-d5 {color:#fff !important; background-color:#012641 !important} .w3-theme-d5 {color:#fff !important; background-color:#26364a !important}
.w3-theme-light {color:#000 !important; background-color:#e9f5ff !important} .w3-theme-light {color:#000 !important; background-color:#f4f6f9 !important}
.w3-theme-dark {color:#fff !important; background-color:#012641 !important} .w3-theme-dark {color:#fff !important; background-color:#26364a !important}
.w3-theme-action {color:#fff !important; background-color:#012641 !important} .w3-theme-action {color:#fff !important; background-color:#26364a !important}
.w3-theme {color:#fff !important; background-color:#034f84 !important} .w3-theme {color:#fff !important; background-color:#4c6a92 !important}
.w3-text-theme {color:#034f84 !important} .w3-text-theme {color:#4c6a92 !important}
.w3-border-theme {border-color:#034f84 !important} .w3-border-theme {border-color:#4c6a92 !important}
.w3-hover-theme:hover {color:#fff !important; background-color:#034f84 !important} .w3-hover-theme:hover {color:#fff !important; background-color:#4c6a92 !important}
.w3-hover-text-theme:hover {color:#034f84 !important} .w3-hover-text-theme:hover {color:#4c6a92 !important}
.w3-hover-border-theme:hover {border-color:#034f84 !important} .w3-hover-border-theme:hover {border-color:#4c6a92 !important}
`; `;
export let styles = [tf, w3, w3_2016_snorkel_blue]; export let styles = [tf, w3, w3_2016_riverside];