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

pull/264/head
Eduardo San Martin Morote 4 years ago committed by GitHub
parent 9bc5c5c631
commit 8d915245c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -69,7 +69,7 @@ function load() {
.bsa-cpc { .bsa-cpc {
border-radius: 6px; border-radius: 6px;
background-color: #f8f8f8; background-color: var(--c-bg-accent);
} }
.bsa-cpc ::v-deep(a._default_) { .bsa-cpc ::v-deep(a._default_) {

@ -26,7 +26,7 @@ onMounted(() => {
margin: 0 auto; margin: 0 auto;
max-width: 280px; max-width: 280px;
font-size: 0.75rem; 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 */ min-height: 105.38px; /* avoid layout shift on mobile */
} }

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

@ -36,7 +36,7 @@ defineEmit(['toggle'])
border-bottom: 1px solid var(--c-divider); border-bottom: 1px solid var(--c-divider);
padding: 0.7rem 1.5rem 0.7rem 4rem; padding: 0.7rem 1.5rem 0.7rem 4rem;
height: var(--header-height); height: var(--header-height);
background-color: #ffffff; background-color: inherit;
} }
@media (min-width: 720px) { @media (min-width: 720px) {

@ -9,7 +9,7 @@
.custom-block.tip { .custom-block.tip {
background-color: #f3f5f7; background-color: #f3f5f7;
border-color: #42b983; border-color: var(--c-brand);
} }
.custom-block.warning { .custom-block.warning {

@ -5,6 +5,7 @@
* --------------------------------------------------------------------- */ * --------------------------------------------------------------------- */
--c-white: #ffffff; --c-white: #ffffff;
--c-white-dark: #f8f8f8;
--c-black: #000000; --c-black: #000000;
--c-divider-light: rgba(60, 60, 67, 0.12); --c-divider-light: rgba(60, 60, 67, 0.12);
@ -63,6 +64,7 @@
--c-text-lighter: var(--c-text-light-3); --c-text-lighter: var(--c-text-light-3);
--c-bg: var(--c-white); --c-bg: var(--c-white);
--c-bg-accent: var(--c-white-dark);
--code-line-height: 24px; --code-line-height: 24px;
--code-font-family: var(--font-family-mono); --code-font-family: var(--font-family-mono);

Loading…
Cancel
Save