From 3d3f733bf65cac5176463a94da5b764b4d7e22bc Mon Sep 17 00:00:00 2001
From: Arunan Gnanasekaran <arunan2212@gmail.com>
Date: Fri, 28 Apr 2023 11:30:52 +0200
Subject: [PATCH 1/7] style: theming on background and main color
---
src/App.vue | 2 +-
src/assets/base.css | 65 +++++----------------------------------------
src/assets/main.css | 33 ++++++++++++++---------
3 files changed, 27 insertions(+), 73 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 0dff09c..b4577fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@ const isFullScreen = computed(() => router.currentRoute.value.meta?.fullScreen);
<template>
<el-container style="height: 100vh; display: flex">
- <el-header>
+ <el-header style="margin: 0; padding: 0; height: max-content">
<TopNavBar />
</el-header>
<div v-if="collapsed">
diff --git a/src/assets/base.css b/src/assets/base.css
index a8a16c2..c146a06 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,56 +1,4 @@
/* color palette from <https://github.com/vuejs/theme> */
-:root {
- --vt-c-white: #ffffff;
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
-
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
-
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
-
- --section-gap: 160px;
-}
-
-/*
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
-
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
-}
-*/
*,
*::before,
@@ -63,8 +11,7 @@
body {
min-height: 100vh;
- color: var(--color-text);
- background: var(--color-background);
+ background: var(--el-bg-color);
transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
@@ -78,31 +25,31 @@ body {
h1 {
font-size: 4rem;
font-weight: 600;
- color: var(--color-heading);
+ color: var(--el-text-color);
}
h2 {
font-size: 2rem;
font-weight: 500;
- color: var(--color-heading);
+ color: var(--el-text-color);
}
h3 {
font-size: 1.5rem;
font-weight: 500;
- color: var(--color-heading);
+ color: var(--el-text-color);
}
h4 {
font-size: 1.25rem;
font-weight: 500;
- color: var(--color-heading);
+ color: var(--el-text-color);
}
h5 {
font-size: 1rem;
font-weight: 500;
- color: var(--color-heading);
+ color: var(--el-text-color);
}
@media only screen and (max-width: 768px) {
diff --git a/src/assets/main.css b/src/assets/main.css
index 10b6e29..dcf7fae 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,29 +1,36 @@
@import "./base.css";
body {
- margin: 0;
- padding: 0;
+ background-color: #78c4a4; /* fallback for older browsers */
+ background-image: linear-gradient(to bottom, #78c4a4, #4e9575);
+ --el-menu-bg-color: #039e32;
+ --el-menu-border-color: black;
+ --el-bg-color:linear-gradient(to bottom, #78c4a4, #4e9575);
+ --el-color-primary: green;
+ --el-border-color: black;
+ margin: 0;
+ padding: 0;
}
main {
- padding: 2rem 3rem !important;
+ padding: 2rem 3rem !important;
}
#app {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
.spacer {
- flex-grow: 1;
- margin: 0;
- width: 0;
- padding: 0;
+ flex-grow: 1;
+ margin: 0;
+ width: 0;
+ padding: 0;
}
@media only screen and (max-width: 768px) {
- main {
- padding: 1rem !important;
- }
+ main {
+ padding: 1rem !important;
+ }
}
--
GitLab
From 97128424bbfb68b1559e30045ea68b92c54de5b0 Mon Sep 17 00:00:00 2001
From: Arunan Gnanasekaran <arunan2212@gmail.com>
Date: Fri, 28 Apr 2023 11:39:02 +0200
Subject: [PATCH 2/7] temporary commit
---
src/assets/main.css | 40 ++++++++++++++++++++--------------------
1 file changed, 20 insertions(+), 20 deletions(-)
diff --git a/src/assets/main.css b/src/assets/main.css
index dcf7fae..e498354 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,36 +1,36 @@
@import "./base.css";
body {
- background-color: #78c4a4; /* fallback for older browsers */
- background-image: linear-gradient(to bottom, #78c4a4, #4e9575);
- --el-menu-bg-color: #039e32;
- --el-menu-border-color: black;
- --el-bg-color:linear-gradient(to bottom, #78c4a4, #4e9575);
- --el-color-primary: green;
- --el-border-color: black;
- margin: 0;
- padding: 0;
+ background-color: #78c4a4; /* fallback for older browsers */
+ background-image: linear-gradient(to bottom, #78c4a4, #4e9575);
+ --el-menu-bg-color: #33333;
+ --el-menu-border-color: #33333;
+ --el-bg-color: linear-gradient(to bottom, #78c4a4, #4e9575);
+ --el-color-primary: green;
+ --el-border-color: black;
+ margin: 0;
+ padding: 0;
}
main {
- padding: 2rem 3rem !important;
+ padding: 2rem 3rem !important;
}
#app {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
.spacer {
- flex-grow: 1;
- margin: 0;
- width: 0;
- padding: 0;
+ flex-grow: 1;
+ margin: 0;
+ width: 0;
+ padding: 0;
}
@media only screen and (max-width: 768px) {
- main {
- padding: 1rem !important;
- }
+ main {
+ padding: 1rem !important;
+ }
}
--
GitLab
From 9bfb9c79aaf1486b92f9b525385c17041818c9c5 Mon Sep 17 00:00:00 2001
From: Arunan Gnanasekaran <arunan2212@gmail.com>
Date: Fri, 28 Apr 2023 12:51:04 +0200
Subject: [PATCH 3/7] temporary commit
---
src/App.vue | 8 ++++++--
src/assets/main.css | 10 +++++-----
src/components/SideNavBar.vue | 2 +-
src/components/TopNavBar.vue | 6 +++++-
4 files changed, 17 insertions(+), 9 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index b4577fb..ce203f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,10 +44,10 @@ const isFullScreen = computed(() => router.currentRoute.value.meta?.fullScreen);
</div>
<el-container>
<el-aside v-if="!collapsed && !isFullScreen" width="300px">
- <SideNavBar />
+ <SideNavBar id="side-bar" />
</el-aside>
<el-drawer v-model="drawer" direction="ltr" size="306px">
- <SideNavBar @select="drawerToggle()" />
+ <SideNavBar @select="drawerToggle()" style="--el-menu-bg-color: transparent" />
</el-drawer>
<el-scrollbar style="width: 100%">
<el-main>
@@ -71,4 +71,8 @@ const isFullScreen = computed(() => router.currentRoute.value.meta?.fullScreen);
#main-view * {
overflow: auto;
}
+
+#side-bar {
+ --el-menu-bg-color: transparent;
+}
</style>
diff --git a/src/assets/main.css b/src/assets/main.css
index e498354..62f3901 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -2,13 +2,13 @@
body {
background-color: #78c4a4; /* fallback for older browsers */
- background-image: linear-gradient(to bottom, #78c4a4, #4e9575);
- --el-menu-bg-color: #33333;
+ background-image: linear-gradient(to bottom, #1a8263 , #178262);
--el-menu-border-color: #33333;
- --el-bg-color: linear-gradient(to bottom, #78c4a4, #4e9575);
- --el-color-primary: green;
+ --el-color-primary: #116149;
--el-border-color: black;
- margin: 0;
+ --el-text-color: white;
+ --el-card-bg-color: var(--el-color-primary) !important;
+ --el-card-border-color: var(--el-color-primary) !important;
padding: 0;
}
diff --git a/src/components/SideNavBar.vue b/src/components/SideNavBar.vue
index 2648644..b67cbdc 100644
--- a/src/components/SideNavBar.vue
+++ b/src/components/SideNavBar.vue
@@ -1,5 +1,5 @@
<template>
- <el-menu class="menu" :default-active="defaultActive" router @select="$emit('select')">
+ <el-menu :default-active="defaultActive" router @select="$emit('select')" class="menu">
<el-button
v-if="houseHoldStore.households?.length == 0"
style="width: calc(100% - 2rem); margin: 1rem"
diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index a70c809..e53f3fc 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -1,6 +1,6 @@
<template>
<nav>
- <el-menu :default-active="activeIndex" :ellipsis="false" mode="horizontal" router>
+ <el-menu :default-active="activeIndex" :ellipsis="false" mode="horizontal" router class="menu">
<el-menu-item :index="'/inventory'">LOGO</el-menu-item>
<div class="flex-grow" />
<el-menu-item v-if="sessionStore.isAuthenticated" index="/profile">
@@ -41,4 +41,8 @@ function logOut() {
margin: auto 1rem;
align-content: center;
}
+
+.menu {
+ --el-menu-bg-color: #0d4d39;
+}
</style>
--
GitLab
From 26976cad44113b4f3986771c68b44388094fff0c Mon Sep 17 00:00:00 2001
From: Arunan Gnanasekaran <arunan2212@gmail.com>
Date: Fri, 28 Apr 2023 12:51:39 +0200
Subject: [PATCH 4/7] temporary commit
---
src/assets/main.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/assets/main.css b/src/assets/main.css
index 62f3901..1b2bf1f 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -2,7 +2,7 @@
body {
background-color: #78c4a4; /* fallback for older browsers */
- background-image: linear-gradient(to bottom, #1a8263 , #178262);
+ background-image: linear-gradient(to bottom, #1a8263, #178262);
--el-menu-border-color: #33333;
--el-color-primary: #116149;
--el-border-color: black;
--
GitLab
From 9af57ee75ea0db559fa857bc422f029197ce4b60 Mon Sep 17 00:00:00 2001
From: aaarunan <arunan2212@gmail.com>
Date: Mon, 1 May 2023 17:10:47 +0200
Subject: [PATCH 5/7] style: add more colors
---
src/assets/main.css | 102 +++++++++++++++++++++++++++++++++++---------
1 file changed, 82 insertions(+), 20 deletions(-)
diff --git a/src/assets/main.css b/src/assets/main.css
index 1b2bf1f..3f3cdd7 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,36 +1,98 @@
@import "./base.css";
body {
- background-color: #78c4a4; /* fallback for older browsers */
- background-image: linear-gradient(to bottom, #1a8263, #178262);
- --el-menu-border-color: #33333;
- --el-color-primary: #116149;
- --el-border-color: black;
- --el-text-color: white;
- --el-card-bg-color: var(--el-color-primary) !important;
- --el-card-border-color: var(--el-color-primary) !important;
- padding: 0;
+ background-color: #78c4a4; /* fallback for older browsers */
+ background-image: linear-gradient(to bottom, #1a8263, #178262);
+ padding: 0;
+ --el-menu-text-color: white;
+ --el-menu-bg-color: #0f4a39;
+
+ --el-text-color: white;
+ --el-text-color-primary: white;
+ --el-text-color-regular: white;
+ --el-fill-color-blank: #178262;
+ --el-color-white: #ffffff;
+ --el-color-black: #000000;
+ --el-color-primary: #116149;
+ --el-color-primary-light-3: #136e52;
+ --el-color-primary-light-5: #168261;
+ --el-color-primary-light-7: #19946e;
+ --el-color-primary-light-8: #219e78;
+ --el-color-primary-light-9: #1f9c76;
+ --el-color-primary-dark-2: #0b4030;
+ --el-color-success: #67c23a;
+ --el-color-success-light-3: #95d475;
+ --el-color-success-light-5: #b3e19d;
+ --el-color-success-light-7: #d1edc4;
+ --el-color-success-light-8: #e1f3d8;
+ --el-color-success-light-9: #f0f9eb;
+ --el-color-success-dark-2: #529b2e;
+ --el-color-warning: #e6a23c;
+ --el-color-warning-light-3: #eebe77;
+ --el-color-warning-light-5: #f3d19e;
+ --el-color-warning-light-7: #f8e3c5;
+ --el-color-warning-light-8: #faecd8;
+ --el-color-warning-light-9: #fdf6ec;
+ --el-color-warning-dark-2: #b88230;
+ --el-color-danger: #f56c6c;
+ --el-color-danger-light-3: #f89898;
+ --el-color-danger-light-5: #fab6b6;
+ --el-color-danger-light-7: #fcd3d3;
+ --el-color-danger-light-8: #fde2e2;
+ --el-color-danger-light-9: #fef0f0;
+ --el-color-danger-dark-2: #c45656;
+ --el-color-error: #f56c6c;
+ --el-color-error-light-3: #f89898;
+ --el-color-error-light-5: #fab6b6;
+ --el-color-error-light-7: #fcd3d3;
+ --el-color-error-light-8: #fde2e2;
+ --el-color-error-light-9: #fef0f0;
+ --el-color-error-dark-2: #c45656;
+ --el-color-info: var(--el-color-primary);
+ --el-color-info-light-3: #b1b3b8;
+ --el-color-info-light-5: #c8c9cc;
+ --el-color-info-light-7: #dedfe0;
+ --el-color-info-light-8: #e9e9eb;
+ --el-color-info-light-9: #2cd4a3;
+ --el-color-info-dark-2: #73767a;
+ --el-bg-color: #1a8263;
+ --el-bg-color-page: #f2f3f5;
+ --el-bg-color-overlay: #ffffff;
+ --el-border-color: #064725;
+ --el-border-color-light: #064725;
+ --el-border-color-lighter: #1a7a48;
+ --el-border-color-extra-light: #239e5e;
+ --el-border-color-dark: #d4d7de;
+ --el-border-color-darker: #cdd0d6;
+ --el-fill-color: #f0f2f5;
+ --el-fill-color-light: #f5f7fa;
+ --el-fill-color-lighter: #fafafa;
+ --el-fill-color-extra-light: #fafcff;
+ --el-fill-color-dark: #ebedf0;
+ --el-fill-color-darker: #e6e8eb;
+
+
}
main {
- padding: 2rem 3rem !important;
+ padding: 2rem 3rem !important;
}
#app {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
.spacer {
- flex-grow: 1;
- margin: 0;
- width: 0;
- padding: 0;
+ flex-grow: 1;
+ margin: 0;
+ width: 0;
+ padding: 0;
}
@media only screen and (max-width: 768px) {
- main {
- padding: 1rem !important;
- }
+ main {
+ padding: 1rem !important;
+ }
}
--
GitLab
From b7da052381da12310e6288dc7c182f11141753be Mon Sep 17 00:00:00 2001
From: Arunan Gnanasekaran <arunan2212@gmail.com>
Date: Wed, 3 May 2023 12:21:49 +0200
Subject: [PATCH 6/7] feat: further theming changes
---
src/assets/base.css | 1 -
src/assets/main.css | 166 +++++++++++++++++----------------
src/components/SideNavBar.vue | 1 -
src/views/ShoppingListView.vue | 12 ++-
4 files changed, 92 insertions(+), 88 deletions(-)
diff --git a/src/assets/base.css b/src/assets/base.css
index c146a06..876884a 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -11,7 +11,6 @@
body {
min-height: 100vh;
- background: var(--el-bg-color);
transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
diff --git a/src/assets/main.css b/src/assets/main.css
index 3f3cdd7..49a0a6e 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,98 +1,100 @@
@import "./base.css";
body {
- background-color: #78c4a4; /* fallback for older browsers */
- background-image: linear-gradient(to bottom, #1a8263, #178262);
- padding: 0;
- --el-menu-text-color: white;
- --el-menu-bg-color: #0f4a39;
-
- --el-text-color: white;
- --el-text-color-primary: white;
- --el-text-color-regular: white;
- --el-fill-color-blank: #178262;
- --el-color-white: #ffffff;
- --el-color-black: #000000;
- --el-color-primary: #116149;
- --el-color-primary-light-3: #136e52;
- --el-color-primary-light-5: #168261;
- --el-color-primary-light-7: #19946e;
- --el-color-primary-light-8: #219e78;
- --el-color-primary-light-9: #1f9c76;
- --el-color-primary-dark-2: #0b4030;
- --el-color-success: #67c23a;
- --el-color-success-light-3: #95d475;
- --el-color-success-light-5: #b3e19d;
- --el-color-success-light-7: #d1edc4;
- --el-color-success-light-8: #e1f3d8;
- --el-color-success-light-9: #f0f9eb;
- --el-color-success-dark-2: #529b2e;
- --el-color-warning: #e6a23c;
- --el-color-warning-light-3: #eebe77;
- --el-color-warning-light-5: #f3d19e;
- --el-color-warning-light-7: #f8e3c5;
- --el-color-warning-light-8: #faecd8;
- --el-color-warning-light-9: #fdf6ec;
- --el-color-warning-dark-2: #b88230;
- --el-color-danger: #f56c6c;
- --el-color-danger-light-3: #f89898;
- --el-color-danger-light-5: #fab6b6;
- --el-color-danger-light-7: #fcd3d3;
- --el-color-danger-light-8: #fde2e2;
- --el-color-danger-light-9: #fef0f0;
- --el-color-danger-dark-2: #c45656;
- --el-color-error: #f56c6c;
- --el-color-error-light-3: #f89898;
- --el-color-error-light-5: #fab6b6;
- --el-color-error-light-7: #fcd3d3;
- --el-color-error-light-8: #fde2e2;
- --el-color-error-light-9: #fef0f0;
- --el-color-error-dark-2: #c45656;
- --el-color-info: var(--el-color-primary);
- --el-color-info-light-3: #b1b3b8;
- --el-color-info-light-5: #c8c9cc;
- --el-color-info-light-7: #dedfe0;
- --el-color-info-light-8: #e9e9eb;
- --el-color-info-light-9: #2cd4a3;
- --el-color-info-dark-2: #73767a;
- --el-bg-color: #1a8263;
- --el-bg-color-page: #f2f3f5;
- --el-bg-color-overlay: #ffffff;
- --el-border-color: #064725;
- --el-border-color-light: #064725;
- --el-border-color-lighter: #1a7a48;
- --el-border-color-extra-light: #239e5e;
- --el-border-color-dark: #d4d7de;
- --el-border-color-darker: #cdd0d6;
- --el-fill-color: #f0f2f5;
- --el-fill-color-light: #f5f7fa;
- --el-fill-color-lighter: #fafafa;
- --el-fill-color-extra-light: #fafcff;
- --el-fill-color-dark: #ebedf0;
- --el-fill-color-darker: #e6e8eb;
-
-
+ padding: 0;
+ --el-main-padding: 500px;
+ background-color: #78c4a4; /* fallback for older browsers */
+ background-image: linear-gradient(to bottom, #2c9576, #258266);
+ --el-bg-color-overlay: red;
+ --el-menu-text-color: white;
+ --el-menu-bg-color: #0f4a39;
+ --el-menu-border-color: #0f4a39;
+ --el-text-color: white;
+ --el-text-color-primary: white;
+ --el-text-color-regular: white;
+ --el-fill-color-blank: #176850;
+ --el-color-white: #ffffff;
+ --el-color-black: #000000;
+ --el-color-primary: #0e4534;
+ --el-color-primary-light-3: #136e52;
+ --el-color-primary-light-5: #168261;
+ --el-color-primary-light-7: #19946e;
+ --el-color-primary-light-8: #219e78;
+ --el-color-primary-light-9: #1f9c76;
+ --el-color-primary-dark-2: #0b4030;
+ --el-color-success: #67c23a;
+ --el-color-success-light-3: #95d475;
+ --el-color-success-light-5: #b3e19d;
+ --el-color-success-light-7: #d1edc4;
+ --el-color-success-light-8: #e1f3d8;
+ --el-color-success-light-9: #f0f9eb;
+ --el-color-success-dark-2: #529b2e;
+ --el-color-warning: #e6a23c;
+ --el-color-warning-light-3: #eebe77;
+ --el-color-warning-light-5: #f3d19e;
+ --el-color-warning-light-7: #f8e3c5;
+ --el-color-warning-light-8: #faecd8;
+ --el-color-warning-light-9: #fdf6ec;
+ --el-color-warning-dark-2: #b88230;
+ --el-color-danger: #f56c6c;
+ --el-color-danger-light-3: #f89898;
+ --el-color-danger-light-5: #fab6b6;
+ --el-color-danger-light-7: #fcd3d3;
+ --el-color-danger-light-8: #fde2e2;
+ --el-color-danger-light-9: #fef0f0;
+ --el-color-danger-dark-2: #c45656;
+ --el-color-error: #f56c6c;
+ --el-color-error-light-3: #f89898;
+ --el-color-error-light-5: #fab6b6;
+ --el-color-error-light-7: #fcd3d3;
+ --el-color-error-light-8: #fde2e2;
+ --el-color-error-light-9: #fef0f0;
+ --el-color-error-dark-2: #c45656;
+ --el-color-info: white;
+ --el-color-info-light-3: #b1b3b8;
+ --el-color-info-light-5: #c8c9cc;
+ --el-color-info-light-7: #dedfe0;
+ --el-color-info-light-8: #e9e9eb;
+ --el-color-info-light-9: #206450;
+ --el-color-info-dark-2: #73767a;
+ --el-bg-color: #1a8263;
+ --el-bg-color-page: #f2f3f5;
+ --el-bg-color-overlay: #ffffff;
+ --el-border-color: #064725;
+ --el-border-color-light: #064725;
+ --el-border-color-lighter: #1a7a48;
+ --el-border-color-extra-light: #239e5e;
+ --el-border-color-dark: #d4d7de;
+ --el-border-color-darker: #cdd0d6;
+ --el-fill-color: #f0f2f5;
+ --el-fill-color-light: #f5f7fa;
+ --el-fill-color-lighter: #fafafa;
+ --el-fill-color-extra-light: #fafcff;
+ --el-fill-color-dark: #ebedf0;
+ --el-fill-color-darker: #e6e8eb;
+ --el-menu-hover-bg-color: #135432;
+ --el-menu-active-color: #2cd4a3;
}
main {
- padding: 2rem 3rem !important;
+ padding: 2rem 3rem !important;
}
#app {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
.spacer {
- flex-grow: 1;
- margin: 0;
- width: 0;
- padding: 0;
+ flex-grow: 1;
+ margin: 0;
+ width: 0;
+ padding: 0;
}
@media only screen and (max-width: 768px) {
- main {
- padding: 1rem !important;
- }
+ main {
+ padding: 1rem !important;
+ }
}
diff --git a/src/components/SideNavBar.vue b/src/components/SideNavBar.vue
index b67cbdc..d41cf7b 100644
--- a/src/components/SideNavBar.vue
+++ b/src/components/SideNavBar.vue
@@ -116,6 +116,5 @@ function skipCreateHousehold() {
<style scoped>
.menu {
height: 100%;
- border-right: 1px solid #ebeef5;
}
</style>
diff --git a/src/views/ShoppingListView.vue b/src/views/ShoppingListView.vue
index a6d1c5c..1397d15 100644
--- a/src/views/ShoppingListView.vue
+++ b/src/views/ShoppingListView.vue
@@ -47,8 +47,8 @@
</el-row>
</el-form>
</el-card>
- <el-collapse v-model="drawers">
- <el-collapse-item name="active">
+ <el-collapse v-model="drawers" class="collapse-item">
+ <el-collapse-item name="active collapse-item" class="collapse-item">
<template #title>
<el-text>Varer</el-text>
</template>
@@ -70,7 +70,7 @@
<el-alert :closable="false" center title="Det er ingen varer i handlelista" type="info" />
</div>
</el-collapse-item>
- <el-collapse-item name="requested">
+ <el-collapse-item name="requested" class="collapse-item">
<template #title>
<el-text>Foreslåtte varer</el-text>
</template>
@@ -114,7 +114,7 @@
<el-alert :closable="false" center title="Det er ingen forespurte varer" type="info" />
</div>
</el-collapse-item>
- <el-collapse-item name="bought">
+ <el-collapse-item name="bought" class="collapse-item">
<template #title>
<el-text>Kjøpte varer</el-text>
</template>
@@ -475,4 +475,8 @@ function itemToKey(item: ShoppingListEntry) {
.divider-row {
margin-bottom: 1rem;
}
+.collapse-item {
+ --el-collapse-content-bg-color: transparent !important;
+ --el-collapse-header-bg-color: transparent !important;
+}
</style>
--
GitLab
From 6f6d43c37ca52a8ce379b74b48ce53920adccebe Mon Sep 17 00:00:00 2001
From: Arunan Gnanasekaran <arunan2212@gmail.com>
Date: Thu, 4 May 2023 10:16:32 +0200
Subject: [PATCH 7/7] further theming changes
---
src/assets/main.css | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/assets/main.css b/src/assets/main.css
index 49a0a6e..ffabfe5 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -4,11 +4,10 @@ body {
padding: 0;
--el-main-padding: 500px;
background-color: #78c4a4; /* fallback for older browsers */
- background-image: linear-gradient(to bottom, #2c9576, #258266);
- --el-bg-color-overlay: red;
+ background-image: linear-gradient(to bottom, #0f4a39, #258266);
--el-menu-text-color: white;
--el-menu-bg-color: #0f4a39;
- --el-menu-border-color: #0f4a39;
+ --el-menu-border-color: transparent;
--el-text-color: white;
--el-text-color-primary: white;
--el-text-color-regular: white;
--
GitLab