diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss index f8fe35895..ba42978e3 100644 --- a/assets/styles/layout/layout.scss +++ b/assets/styles/layout/layout.scss @@ -15,13 +15,13 @@ @import './_responsive'; @import './_animation'; @import './landing/_landing'; +@import './templates/_templates'; @import './templates/_apollo'; @import './templates/_atlantis'; -@import './templates/_ultima'; -@import './templates/_freya'; -@import './templates/_verona'; -@import './templates/_diamond'; @import './templates/_avalon'; +@import './templates/_diamond'; +@import './templates/_freya'; @import './templates/_poseidon'; @import './templates/_sakai'; -@import './templates/_templates'; +@import './templates/_ultima'; +@import './templates/_verona'; diff --git a/assets/styles/layout/templates/_templates.scss b/assets/styles/layout/templates/_templates.scss index f7a3a18fd..0b3b696e2 100644 --- a/assets/styles/layout/templates/_templates.scss +++ b/assets/styles/layout/templates/_templates.scss @@ -9,7 +9,7 @@ &-youtube { &-wrapper { padding: 5rem 0; - background-color: var(--surface-card); + background-color: var(--card-background); border-radius: 2rem; } @@ -19,7 +19,7 @@ text-align: center; font-size: 3rem; font-weight: 600; - color: var(--surface-900); + color: var(--p-surface-900); @include mobile { font-size: 1.5rem; @@ -48,7 +48,7 @@ font-weight: 400; line-height: 1.25rem; text-align: center; - color: var(--surface-900); + color: var(--p-surface-900); width: 45rem; margin: 1.25rem auto 0; @@ -66,7 +66,7 @@ box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.02); cursor: pointer; position: relative; - background-color: var(--primary-100); + background-color: var(--p-primary-100); padding: 1.88rem 1.88rem 0; border-radius: 1.5rem; overflow: hidden; @@ -169,7 +169,7 @@ &-wrapper { padding: 5rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } display: flex; @@ -183,13 +183,13 @@ width: 21.125rem; padding: 1.25rem; border-radius: 1.3125rem; - border: 1px solid var(--surface-border, #EEE); - background: var(--surface-0, #FFF); + border: 1px solid var(--border-color, #EEE); + background: var(--p-surface-0, #FFF); &-top { width: 100%; margin-bottom: 1.25rem; - background: var(--surface-100, #FFF); + background: var(--p-surface-100, #FFF); border-radius: 0.65625rem; overflow: hidden; display: flex; @@ -202,7 +202,7 @@ &-bottom { &-title { - color: var(--surface-900); + color: var(--p-surface-900); font-size: 1.09375rem; font-weight: 600; line-height: 1.3125rem; @@ -211,7 +211,7 @@ } &-description { - color: var(--surface-600); + color: var(--p-surface-600); font-size: 0.875rem; font-weight: 400; line-height: 1.3125rem; @@ -260,7 +260,7 @@ &-wrapper { padding: 7rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } margin: 0 auto; @@ -286,12 +286,12 @@ width: 100%; padding: 1.25rem; border-radius: 1.3125rem; - border: 1px solid var(--surface-border); - background: var(--surface-0); + border: 1px solid var(--border-color); + background: var(--p-surface-0); &-image { width: auto; - background: var(--surface-100); + background: var(--p-surface-100); border-radius: 0.65625rem; display: flex; @@ -304,7 +304,7 @@ h2 { margin: 1.25rem 0 0; - color: var(--surface-900, var(--surface-900, #212121)); + color: var(--p-surface-900, var(--p-surface-900, #212121)); font-size: 1.09375rem; font-weight: 600; line-height: 1.3125rem; @@ -312,7 +312,7 @@ p { margin: 0.75rem 0 0; - color: var(--surface-600, #757575); + color: var(--p-surface-600, #757575); font-size: 0.875rem; font-weight: 400; line-height: 1.3125rem; @@ -386,12 +386,12 @@ &-wrapper { padding: 5rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } &-title { text-align: center; - color: var(--surface-900); + color: var(--p-surface-900); font-size: 3rem; font-weight: 600; } @@ -407,8 +407,8 @@ &-card { border-radius: 1.3125rem; - border: 1px solid var(--surface-border, #EEE); - background: var(--surface-0, #FFF); + border: 1px solid var(--border-color, #EEE); + background: var(--p-surface-0, #FFF); padding: 1.25rem; display: flex; img { @@ -478,17 +478,125 @@ } // TEMPLATE CONFIGURATION -.layout-dark { +.p-dark { .template { &-configuration { + background-color: var(--p-surface-900); + &-screen { &-bottom { - background: var(--surface-card) !important; + background: var(--card-background) !important; p { - color: var(--surface-900); + color: var(--p-surface-0); } } + + &-top { + background: var(--card-background); + } + } + + &-title { + color: var(--p-surface-0); + } + + &-description { + color: var(--p-surface-200); + } + } + + &-license { + &-card { + border-color: var(--p-surface-800); + + span, h2 { + color: var(--p-surface-0); + } + + button { + background-color: var(--p-surface-0); + color: var(--p-surface-900); + + &:hover { + background-color: var(--p-surface-100); + } + } + + &-included { + p { + color: var(--p-surface-300); + } + } + } + + &-description { + color: var(--p-surface-300); + } + } + + &-features { + &-animation { + &-left-card { + &-active { + background-color: var(--p-surface-700); + } + + &-content { + h5 { + color: var(--p-surface-0); + } + + p { + color: var(--p-surface-400); + } + } + + &:hover { + background-color: var(--p-surface-700); + } + } + } + + &-horizontal { + &-card { + background-color: var(--p-surface-900); + + &-bottom-title { + color: var(--p-surface-0); + } + + p { + color: var(--p-surface-200); + } + } + } + + &-vertical { + &-card { + background-color: var(--p-surface-900); + + &-image { + background-color: var(--p-surface-700); + } + + h2 { + color: var(--p-surface-0); + } + + p { + color: var(--p-surface-200); + } + } + } + } + + &-related { + h2 { + color: var(--p-surface-0); + } + &-slide-card { + background-color: var(--p-surface-900); } } } @@ -499,13 +607,13 @@ &-wrapper { padding: 5rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } padding: 2rem; border-radius: 1.75rem; - border: 1px solid var(--surface-border, #EEE); - background: var(--surface-0, #FFF); + border: 1px solid var(--border-color, #EEE); + background: var(--p-surface-0, #FFF); width: 49.25rem; margin: 0 auto; @@ -513,11 +621,11 @@ font-size: 1.53125rem; font-weight: 700; line-height: 1.8125rem; - color: var(--surface-900, var(--surface-900, #212121)); + color: var(--p-surface-900, var(--p-surface-900, #212121)); } &-description { - color: var(--surface-600, #757575); + color: var(--p-surface-600, #757575); font-size: 1.09375rem; font-weight: 400; line-height: 1.64375rem; @@ -526,11 +634,11 @@ &-screen { border-radius: 0.875rem; - border: 1px solid var(--surface-border, #DFE7EF); + border: 1px solid var(--border-color, #DFE7EF); &-top { border-radius: 0.75rem 0.75rem 0rem 0rem; - background: var(--surface-0, #FFF); + background: var(--p-surface-0, #FFF); padding: 0.25rem 1.5rem; height: 3.5rem; display: flex; @@ -558,7 +666,7 @@ &-bottom { padding: 1.5rem; - background: var(--surface-900); + background: var(--p-surface-900); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; display: flex; @@ -567,7 +675,7 @@ position: relative; p { - color: var(--surface-0); + color: var(--p-surface-0); font-size: 0.875rem; font-weight: 400; line-height: 1.0625rem; @@ -652,7 +760,7 @@ &-features-animation { &-wrapper { border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); padding: 5rem 2rem; } @@ -662,7 +770,7 @@ h2 { margin: 0; - color: var(--surface-900); + color: var(--p-surface-900); text-align: center; font-size: 3rem; font-weight: 600; @@ -676,7 +784,7 @@ margin: 0 auto; padding: 1.75rem; border-radius: 1.75rem; - border: 1px solid var(--surface-border, #EEE); + border: 1px solid var(--border-color, #EEE); &-left { width: 100%; @@ -695,26 +803,26 @@ &-active { border-radius: 0.75rem; - background: var(--surface-100, #F5F5F5); + background: var(--p-surface-100, #F5F5F5); transition: all 0.2s ease; } &:hover { border-radius: 0.75rem; - background: var(--surface-100, #F5F5F5); + background: var(--p-surface-100, #F5F5F5); } &:hover &-order { div { &:nth-child(2) { - color: var(--surface-100); + color: var(--p-surface-100); } &:nth-child(3) { animation: FeaturesOrderAnimation 2.5s ease-in-out; - color: var(--primary-400); + color: var(--p-primary-400); } } } @@ -722,13 +830,13 @@ &-active &-order { div { &:nth-child(2) { - color: var(--surface-100); + color: var(--p-surface-100); } &:nth-child(3) { animation: FeaturesOrderAnimation 2.5s ease-in-out; - color: var(--primary-400); + color: var(--p-primary-400); } } } @@ -748,12 +856,12 @@ left: 0; &:nth-child(1) { - color: var(--primary-400); - -webkit-text-stroke: 1.2px var(--primary-400); + color: var(--p-primary-400); + -webkit-text-stroke: 1.2px var(--p-primary-400); } &:nth-child(2) { - color: var(--surface-card); + color: var(--card-background); transition: all 0.2s ease; } @@ -769,7 +877,7 @@ flex: 1; h5 { - color: var(--surface-900, var(--color-surface-900, #212121)); + color: var(--p-surface-900, var(--color-surface-900, #212121)); font-size: 1.09375rem; font-weight: 600; line-height: 1.3125rem; @@ -777,14 +885,14 @@ } p { - color: var(--surface-600, #757575); + color: var(--p-surface-600, #757575); font-size: 0.875rem; font-weight: 400; line-height: 1.3125rem; margin: 0.38rem 0 0; a { - color: var(--primary-400); + color: var(--p-primary-400); &:hover { text-decoration: underline; @@ -800,7 +908,7 @@ width: 30rem; height: fit-content; border-radius: 0.875rem; - background-color: var(--surface-100); + background-color: var(--p-surface-100); display: flex; overflow: hidden; img { @@ -812,7 +920,7 @@ width: 100%; padding: 2rem 0; border-radius: 0.75rem; - background: var(--surface-100); + background: var(--p-surface-100); position: relative; display: flex; flex-direction: column; @@ -838,8 +946,8 @@ align-items: center; gap: 0.25rem; border-radius: 2.5rem; - border: 1px solid var(--surface-border); - background: var(--surface-0); + border: 1px solid var(--border-color); + background: var(--p-surface-0); padding: 0.25rem; width: 90%; @@ -848,8 +956,8 @@ width: 100%; padding: 0.21875rem 0.5rem; border-radius: 2.25rem; - color: var(--surface-900); - background: var(--surface-0); + color: var(--p-surface-900); + background: var(--p-surface-0); border: none; outline: none; font-size: 0.75rem; @@ -860,14 +968,14 @@ transition: all 0.15s ease; &:hover { - background: var(--surface-100); + background: var(--p-surface-100); } } &-btnActive { - background: var(--surface-100) !important; + background: var(--p-surface-100) !important; } } @@ -1004,7 +1112,7 @@ &-hero { width: 100%; height: 36.25rem; - background: var(--primary-500); + background: var(--p-primary-500); border-radius: 2rem; position: relative; overflow: hidden; @@ -1017,7 +1125,7 @@ margin-top: 9.81rem; border-radius: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.24); - background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, var(--primary-400)/0.8 100%), rgba(255, 255, 255, 0.10); + background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, var(--p-primary-400)/0.8 100%), rgba(255, 255, 255, 0.10); box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.24) inset, 0px 48px 80px 0px rgba(0, 0, 0, 0.08), 0px -5px 13px -2px rgba(255, 255, 255, 0.55) inset; backdrop-filter: blur(2px); padding: 2.25rem 1.75rem; @@ -1037,7 +1145,7 @@ font-weight: 400; line-height: normal; margin: 1rem 0 0; - color: var(--surface-0); + color: var(--p-primary-inverse-color); } &-buttons { @@ -1073,12 +1181,13 @@ } &-btn2 { - background-color: var(--primary-600); - border-color: var(--primary-600); + background-color: var(--p-primary-600); + border-color: var(--p-primary-600); + color: var(--p-primary-inverse-color); &:hover { - background-color: var(--primary-700); - border-color: var(--primary-700); + background-color: var(--p-primary-700); + border-color: var(--p-primary-700); } } @@ -1094,7 +1203,7 @@ display: flex; align-items: flex-end; gap: 0.5rem; - color: var(--surface-0); + color: var(--p-primary-inverse-color); span { font-size: 0.75rem; @@ -1251,11 +1360,11 @@ .template { &-intro { border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); padding: 5rem 2rem; h2 { - color: var(--surface-900); + color: var(--p-surface-900); text-align: center; font-size: 3.42857rem; font-weight: 600; @@ -1264,7 +1373,7 @@ } p { - color: var(--surface-900); + color: var(--p-surface-900); text-align: center; font-size: 1rem; font-weight: 400; @@ -1275,7 +1384,7 @@ &-image { position: relative; - background-color: var(--primary-600); + background-color: var(--p-primary-600); max-width: 75rem; margin: 3.5rem auto 0; border-radius: 1.15rem; @@ -1286,7 +1395,7 @@ position: absolute; inset: 0; z-index: 5; - background-color: var(--primary-100); + background-color: var(--p-primary-100); opacity: 0.15; border-radius: inherit; } @@ -1299,7 +1408,6 @@ } } - @media only screen and (max-width: 992px) { .template { &-intro { @@ -1335,7 +1443,6 @@ } } - // TEMPALTE SEPARATOR .template { &-separator { @@ -1349,14 +1456,14 @@ content: ''; flex: 1; height: 1px; - background-color: var(--surface-border) + background-color: var(--border-color) } &::after { content: ''; flex: 1; height: 1px; - background-color: var(--surface-border) + background-color: var(--border-color) } &-icon { @@ -1365,9 +1472,9 @@ display: flex; align-items: center; justify-content: center; - border: 1px solid var(--surface-border); + border: 1px solid var(--border-color); border-radius: 100%; - background-color: var(--surface-card); + background-color: var(--card-background); } } @@ -1375,13 +1482,12 @@ } //TEMPLATE LICENCE - .template { &-license { &-wrapper { padding: 5rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } &-cards { @@ -1396,16 +1502,17 @@ width: 21.25rem; padding: 1.5rem; border-radius: 1rem; - border: 1px solid var(--surface-200); - background-color: var(--surface-card); + border: 1px solid var(--p-surface-200); + background-color: var(--card-background); + span { - color: var(--surface-900); + color: var(--p-surface-900); font-weight: 600; line-height: 1.5rem; } h2 { - color: var(--surface-900); + color: var(--p-surface-900); font-size: 2.5rem; font-weight: 600; line-height: 3rem; @@ -1416,7 +1523,7 @@ button { padding: 0.25rem 0.75rem; border-radius: 0.375rem; - background: var(--surface-900); + background: var(--p-surface-900); text-align: center; width: 100%; outline: none; @@ -1426,10 +1533,10 @@ transition: all 0.2s ease; &:hover { - background: var(--surface-700); + background: var(--p-surface-700); } - color: var(--surface-0); + color: var(--p-surface-0); text-align: center; font-size: 0.875rem; font-weight: 500; @@ -1444,7 +1551,7 @@ margin-bottom: 1.25rem; p { - color: var(--surface-500); + color: var(--p-surface-500); font-size: 0.875rem; font-weight: 400; line-height: 1.5rem; @@ -1455,7 +1562,7 @@ } &-description { - color: var(--surface-500); + color: var(--p-surface-500); text-align: center; font-size: 0.875rem; line-height: 1.5rem; @@ -1473,13 +1580,13 @@ margin: 1.5rem auto 0; a { - color: var(--primary-500); + color: var(--p-primary-500); text-decoration-line: underline; cursor: pointer; transition: all 0.2s ease; &:hover { - color: var(--primary-300); + color: var(--p-primary-300); } } } @@ -1499,6 +1606,7 @@ } } } + @media only screen and (max-width: 721px) { .template { &-license { diff --git a/components/template/Hero/index.vue b/components/template/Hero/index.vue index 9162de39b..595ee5336 100644 --- a/components/template/Hero/index.vue +++ b/components/template/Hero/index.vue @@ -16,11 +16,11 @@
diff --git a/components/template/License.vue b/components/template/License.vue index 1b6a27f55..274986f7d 100644 --- a/components/template/License.vue +++ b/components/template/License.vue @@ -20,7 +20,7 @@{{ license.description }}
Visit the - official documentation for more information. + official documentation for more information.
diff --git a/doc/templates/ApolloSeparator.vue b/doc/templates/ApolloSeparator.vue index 0ae0e3ad7..ea52c4250 100644 --- a/doc/templates/ApolloSeparator.vue +++ b/doc/templates/ApolloSeparator.vue @@ -1,9 +1,19 @@