diff --git a/apps/ssb.json b/apps/ssb.json index d163e2f7..5df0743d 100644 --- a/apps/ssb.json +++ b/apps/ssb.json @@ -1,5 +1,5 @@ { "type": "tildefriends-app", "emoji": "🐌", - "previous": "&GHOyZaFBo5iHa8XumUpbdtDi2F0YhZaiF8cVsutdxTU=.sha256" + "previous": "&vEaOZjrNb0u9rhNqrQ8eU9TlOFlo4HsgW6hbI7VdIT0=.sha256" } diff --git a/apps/ssb/tf-app.js b/apps/ssb/tf-app.js index 9415f8be..7c10b8d8 100644 --- a/apps/ssb/tf-app.js +++ b/apps/ssb/tf-app.js @@ -358,7 +358,10 @@ class TfElement extends LitElement { `; let contents = !this.loaded ? this.loading - ? html`
Loading...
` + ? html`
+ Loading... +
+ ${this.render_tab()}` : html`
Select or create an identity.
` : this.render_tab(); return html` @@ -366,8 +369,8 @@ class TfElement extends LitElement { style="width: 100vw; min-height: 100vh; height: 100%" class="w3-theme-dark" > + ${tabs}
- ${tabs} ${this.tags.map( (x) => html`` )} diff --git a/apps/ssb/tf-styles.js b/apps/ssb/tf-styles.js index e29ba61c..73e041f8 100644 --- a/apps/ssb/tf-styles.js +++ b/apps/ssb/tf-styles.js @@ -286,29 +286,29 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0} `; // prettier-ignore -const w3_2016_snorkel_blue = css` -.w3-theme-l5 {color:#000 !important; background-color:#e9f5ff !important} -.w3-theme-l4 {color:#000 !important; background-color:#b5dffd !important} -.w3-theme-l3 {color:#000 !important; background-color:#6bc0fc !important} -.w3-theme-l2 {color:#fff !important; background-color:#21a0fa !important} -.w3-theme-l1 {color:#fff !important; background-color:#0479cc !important} -.w3-theme-d1 {color:#fff !important; background-color:#024575 !important} -.w3-theme-d2 {color:#fff !important; background-color:#023e68 !important} -.w3-theme-d3 {color:#fff !important; background-color:#02365b !important} -.w3-theme-d4 {color:#fff !important; background-color:#022e4e !important} -.w3-theme-d5 {color:#fff !important; background-color:#012641 !important} +const w3_2016_riverside = css` +.w3-theme-l5 {color:#000 !important; background-color:#f4f6f9 !important} +.w3-theme-l4 {color:#000 !important; background-color:#d9e1ec !important} +.w3-theme-l3 {color:#000 !important; background-color:#b4c3d8 !important} +.w3-theme-l2 {color:#fff !important; background-color:#8ea6c5 !important} +.w3-theme-l1 {color:#fff !important; background-color:#6888b1 !important} +.w3-theme-d1 {color:#fff !important; background-color:#456185 !important} +.w3-theme-d2 {color:#fff !important; background-color:#3d5676 !important} +.w3-theme-d3 {color:#fff !important; background-color:#354b68 !important} +.w3-theme-d4 {color:#fff !important; background-color:#2e4059 !important} +.w3-theme-d5 {color:#fff !important; background-color:#26364a !important} -.w3-theme-light {color:#000 !important; background-color:#e9f5ff !important} -.w3-theme-dark {color:#fff !important; background-color:#012641 !important} -.w3-theme-action {color:#fff !important; background-color:#012641 !important} +.w3-theme-light {color:#000 !important; background-color:#f4f6f9 !important} +.w3-theme-dark {color:#fff !important; background-color:#26364a !important} +.w3-theme-action {color:#fff !important; background-color:#26364a !important} -.w3-theme {color:#fff !important; background-color:#034f84 !important} -.w3-text-theme {color:#034f84 !important} -.w3-border-theme {border-color:#034f84 !important} +.w3-theme {color:#fff !important; background-color:#4c6a92 !important} +.w3-text-theme {color:#4c6a92 !important} +.w3-border-theme {border-color:#4c6a92 !important} -.w3-hover-theme:hover {color:#fff !important; background-color:#034f84 !important} -.w3-hover-text-theme:hover {color:#034f84 !important} -.w3-hover-border-theme:hover {border-color:#034f84 !important} +.w3-hover-theme:hover {color:#fff !important; background-color:#4c6a92 !important} +.w3-hover-text-theme:hover {color:#4c6a92 !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];