fix(css): reuse css vars (#256)

vuejs · Mar 18, 2021 · 8d91524 · 8d91524
1 parent 9bc5c5c
commit 8d91524
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 7 deletions.
diff --git a/src/client/theme-default/components/BuySellAds.vue b/src/client/theme-default/components/BuySellAds.vue
@@ -69,7 +69,7 @@ function load() {
 
 .bsa-cpc {
  border-radius: 6px;
- background-color: #f8f8f8;
+ background-color: var(--c-bg-accent);
 }
 
 .bsa-cpc ::v-deep(a._default_) {

diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue
@@ -26,7 +26,7 @@ onMounted(() => {
  margin: 0 auto;
  max-width: 280px;
  font-size: 0.75rem;
- background-color: rgba(255, 255, 255, 0.8);
+ background-color: var(--c-bg-accent);
  min-height: 105.38px; /* avoid layout shift on mobile */
 }
 

diff --git a/src/client/theme-default/components/HomeHero.vue b/src/client/theme-default/components/HomeHero.vue
@@ -140,20 +140,20 @@ const hasAltAction = computed(
  line-height: 44px;
  font-size: 1rem;
  font-weight: 500;
- color: #ffffff;
+ color: var(--c-bg);
  background-color: var(--c-brand);
  border: 2px solid var(--c-brand);
  transition: background-color 0.1s ease;
 }
 
 .action.alt :deep(.item) {
- background-color: #fff;
+ background-color: var(--c-bg);
  color: var(--c-brand);
 }
 
 .action :deep(.item:hover) {
  text-decoration: none;
- color: #ffffff;
+ color: var(--c-bg);
  background-color: var(--c-brand-light);
 }
 

diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue
@@ -36,7 +36,7 @@ defineEmit(['toggle'])
  border-bottom: 1px solid var(--c-divider);
  padding: 0.7rem 1.5rem 0.7rem 4rem;
  height: var(--header-height);
- background-color: #ffffff;
+ background-color: inherit;
 }
 
 @media (min-width: 720px) {

diff --git a/src/client/theme-default/styles/custom-blocks.css b/src/client/theme-default/styles/custom-blocks.css
@@ -9,7 +9,7 @@
 
 .custom-block.tip {
  background-color: #f3f5f7;
- border-color: #42b983;
+ border-color: var(--c-brand);
 }
 
 .custom-block.warning {

diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
@@ -5,6 +5,7 @@
  * --------------------------------------------------------------------- */
 
  --c-white: #ffffff;
+ --c-white-dark: #f8f8f8;
  --c-black: #000000;
 
  --c-divider-light: rgba(60, 60, 67, 0.12);
@@ -63,6 +64,7 @@
  --c-text-lighter: var(--c-text-light-3);
 
  --c-bg: var(--c-white);
+ --c-bg-accent: var(--c-white-dark);
 
  --code-line-height: 24px;
  --code-font-family: var(--font-family-mono);