Make it possible to make the header on the bottom

KTibow · Oct 9, 2020 · a11c7ca · a11c7ca
1 parent e2114da
commit a11c7ca
Show file tree

Hide file tree

Showing 12 changed files with 120 additions and 12 deletions.
diff --git a/theme.yaml b/theme.yaml
@@ -265,10 +265,14 @@ Dark Soft UI{color_name}:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI{color_name}:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-cyan.yaml b/themes/dark-soft-ui-cyan.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Cyan:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Cyan:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-fire.yaml b/themes/dark-soft-ui-fire.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Fire:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Fire:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-green.yaml b/themes/dark-soft-ui-green.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Green:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Green:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-lime.yaml b/themes/dark-soft-ui-lime.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Lime:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Lime:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-mint.yaml b/themes/dark-soft-ui-mint.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Mint:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Mint:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-orange.yaml b/themes/dark-soft-ui-orange.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Orange:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Orange:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-red.yaml b/themes/dark-soft-ui-red.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Red:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Red:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-rose.yaml b/themes/dark-soft-ui-rose.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Rose:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Rose:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-violet.yaml b/themes/dark-soft-ui-violet.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Violet:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Violet:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui-yellow.yaml b/themes/dark-soft-ui-yellow.yaml
@@ -265,10 +265,14 @@ Dark Soft UI Yellow:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI Yellow:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;

diff --git a/themes/dark-soft-ui.yaml b/themes/dark-soft-ui.yaml
@@ -265,10 +265,14 @@ Dark Soft UI:
         .not-visible {
           display: none;
         }
+        /*Uncomment this if you want the header on the bottom
+        #selectionBar {
+          bottom: unset !important;
+        }*/
     "ha-app-layout":
       $: |
         #contentContainer {
-          padding-top: 48px !important;
+          padding-top: 48px !important; /*Change this to 0px if you want the header on the bottom*/
         }
     .: |
       app-toolbar {
@@ -278,6 +282,11 @@ Dark Soft UI:
         background-color: var(--primary-background-color) !important;
         color: var(--primary-text-color) !important;
       }
+      /*Uncomment this if you want the header on the bottom
+      app-header {
+        top: calc(100vh - 48px) !important;
+      }
+      */
       app-header.edit-mode {
         border-bottom: 2px var(--primary-color) solid;
         padding-bottom: 10px;