msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

refactor(theme): refactor variaous styles

Browse Source
pull/139/head
Kia Ishii 5 years ago
parent 5f57365edf
commit afc40e61cd
13 changed files with 222 additions and 175 deletions
Show Stats Download Patch File Download Diff File

9
src/client/theme-default/components/EditLink.vue
Unescape View File

@ -35,20 +35,17 @@ export default defineComponent({
}
.link {
display: inline-block;
font-weight: 500;
color: var(--text-color-light);
color: var(--c-text-light);
}
.link:hover {
text-decoration: none;
color: var(--accent-color);
color: var(--c-brand);
}
.icon {
display: inline-block;
margin-left: 4px;
width: 1rem;
height: 1rem;
transform: translateY(-1px);
}
</style>

18
src/client/theme-default/components/Home.vue
Unescape View File

@ -114,7 +114,7 @@ export default defineComponent({
max-width: 35rem;
font-size: 1.6rem;
line-height: 1.3;
/* TODO: calculating lighten 40% color with using style :vars from `--text-color` */
/* TODO: calculating lighten 40% color with using style :vars from `--c-text` */
color: #6a8bad;
}
@ -122,23 +122,23 @@ export default defineComponent({
display: inline-block;
font-size: 1.2rem;
color: #fff;
background-color: var(--accent-color);
background-color: var(--c-brand);
margin-left: 0;
padding: 0.8rem 1.6rem;
border-radius: 4px;
transition: background-color .1s ease;
box-sizing: border-box;
/* TODO: calculating darken 10% color with using style vars from `--accent-color` */
/* TODO: calculating darken 10% color with using style vars from `--c-brand` */
border-bottom: 1px solid #389d70;
}
::v-deep(.nav-link:hover) {
/* TODO: calculating lighten 10% color with using style vars from `--accent-color` */
/* TODO: calculating lighten 10% color with using style vars from `--c-brand` */
background-color: #4abf8a;
}
.features {
border-top: 1px solid var(--border-color);
border-top: 1px solid var(--c-divider);
padding: 1.2rem 0;
margin-top: 2.5rem;
display: flex;
@ -159,20 +159,20 @@ export default defineComponent({
font-weight: 500;
border-bottom: none;
padding-bottom: 0;
/* TODO: calculating lighten 10% color with using style :vars from `--text-color` */
/* TODO: calculating lighten 10% color with using style :vars from `--c-text` */
color: #3a5169;
}
.feature p {
/* TODO: calculating lighten 25% color with using style :vars from `--text-color` */
/* TODO: calculating lighten 25% color with using style :vars from `--c-text` */
color: #4e6e8e;
}
.footer {
padding: 2.5rem;
border-top: 1px solid var(--border-color);
border-top: 1px solid var(--c-divider);
text-align: center;
/* TODO: calculating lighten 25% color with using style :vars from `--text-color` */
/* TODO: calculating lighten 25% color with using style :vars from `--c-text` */
color: #4e6e8e;
}

2
src/client/theme-default/components/NavBar.vue
Unescape View File

@ -23,7 +23,7 @@
.title {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-color);
color: var(--c-text);
}
.title:hover {

6
src/client/theme-default/components/NavBarLink.vue
Unescape View File

@ -39,13 +39,13 @@
font-size: 0.9rem;
font-weight: 500;
line-height: 1.4rem;
color: var(--text-color);
color: var(--c-text);
white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
border-bottom-color: var(--accent-color);
border-bottom-color: var(--c-brand);
text-decoration: none;
}
@ -64,7 +64,7 @@
.nav-link:hover,
.nav-link.active {
color: var(--accent-color);
color: var(--c-brand);
}
}
</style>

2
src/client/theme-default/components/NavBarLinks.vue
Unescape View File

@ -27,7 +27,7 @@
display: block;
height: auto;
padding: 0.5rem 0 1rem;
border-bottom: 1px solid var(--border-color);
border-bottom: 1px solid var(--c-divider);
}
}
</style>

8
src/client/theme-default/components/NavDropdownLink.vue
Unescape View File

@ -52,7 +52,7 @@
.dropdown-wrapper .dropdown-title {
font: inherit;
color: var(--text-color);
color: var(--c-text);
font-size: 0.9rem;
font-weight: 500;
display: inline-block;
@ -114,18 +114,18 @@
}
.dropdown-wrapper .nav-dropdown .dropdown-item a:hover {
color: var(--accent-color);
color: var(--c-brand);
}
.dropdown-wrapper .nav-dropdown .dropdown-item a.active {
color: var(--accent-color);
color: var(--c-brand);
}
.dropdown-wrapper .nav-dropdown .dropdown-item a.active::after {
content: '';
width: 0;
height: 0;
border-left: 5px solid var(--accent-color);
border-left: 5px solid var(--c-brand);
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
position: absolute;

4
src/client/theme-default/components/NextAndPrevLinks.vue
Unescape View File

@ -49,7 +49,7 @@ export default defineComponent({
.container {
display: flex;
justify-content: space-between;
border-top: 1px solid var(--border-color);
border-top: 1px solid var(--c-divider);
padding-top: 1rem;
}
@ -90,7 +90,7 @@ export default defineComponent({
flex-shrink: 0;
width: 16px;
height: 16px;
fill: var(--text-color);
fill: var(--c-text);
}
.icon-prev { margin-right: 8px; }

8
src/client/theme-default/components/SideBar.vue
Unescape View File

@ -80,17 +80,17 @@
line-height: 1.7;
font-size: 1.05em;
font-weight: 700;
color: var(--text-color);
color: var(--c-text);
}
a.sidebar-link:hover {
text-decoration: none;
color: var(--accent-color);
color: var(--c-brand);
}
a.sidebar-link.active {
border-left-color: var(--accent-color);
border-left-color: var(--c-brand);
font-weight: 600;
color: var(--accent-color);
color: var(--c-brand);
}
</style>

8
src/client/theme-default/components/icons/OutboundLink.vue
Unescape View File

@ -1,13 +1,13 @@
<template functional>
<svg
class="icon outbound"
class="icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
x="0px"
y="0px"
viewBox="0 0 100 100"
width="15"
height="15"
width="16"
height="16"
>
<path
fill="currentColor"
@ -21,7 +21,7 @@
</template>
<style>
.icon.outbound {
.icon {
position: relative;
top: -1px;
display: inline-block;

4
src/client/theme-default/styles/code.css
Unescape View File

@ -1,7 +1,7 @@
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
font-size: 0.85em;
color: var(--text-color-light);
color: var(--c-text-light);
background-color: rgba(27, 31, 35, 0.05);
padding: 0.25rem 0.5rem;
border-radius: 3px;
@ -13,7 +13,7 @@ code .token.deleted {
}
code .token.inserted {
color: var(--accent-color);
color: var(--c-brand);
}
div[class*='language-'] {

4
src/client/theme-default/styles/custom-blocks.css
Unescape View File

@ -28,7 +28,7 @@
}
.custom-block.warning a {
color: var(--text-color);
color: var(--c-text);
}
.custom-block.danger {
@ -42,7 +42,7 @@
}
.custom-block.danger a {
color: var(--text-color);
color: var(--c-text);
}
.custom-block.details {

275
src/client/theme-default/styles/layout.css
Unescape View File

@ -15,11 +15,11 @@ body {
min-width: 320px;
min-height: 100vh;
line-height: 1.4;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-family: var(--font-family-base);
font-size: 16px;
font-weight: 400;
color: var(--text-color);
background-color: #ffffff;
color: var(--c-text);
background-color: var(--c-bg);
direction: ltr;
font-synthesis: none;
text-rendering: optimizeLegibility;
@ -31,9 +31,150 @@ main {
display: block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
line-height: 1.25;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
font-weight: 600;
}
h1:hover .header-anchor,
h1:focus .header-anchor,
h2:hover .header-anchor,
h2:focus .header-anchor,
h3:hover .header-anchor,
h3:focus .header-anchor,
h4:hover .header-anchor,
h4:focus .header-anchor,
h5:hover .header-anchor,
h5:focus .header-anchor,
h6:hover .header-anchor,
h6:focus .header-anchor {
opacity: 1;
}
h1 {
margin-top: 1.5rem;
font-size: 1.9rem;
}
@media screen and (min-width: 420px) {
h1 {
font-size: 2.2rem;
}
}
h2 {
margin-top: 2.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--c-divider);
padding-bottom: .3rem;
line-height: 1.25;
font-size: 1.65rem;
}
h2 + h3 {
margin-top: 1.5rem;
}
h3 {
margin-top: 2rem;
font-size: 1.35rem;
}
h4 {
font-size: 1.15rem;
}
p,
ol,
ul {
margin: 1rem 0;
line-height: 1.7;
}
a {
text-decoration: none;
color: var(--c-brand);
}
a:hover {
text-decoration: underline;
}
a.header-anchor {
float: left;
margin-top: .125em;
margin-left: -.87em;
padding-right: .23em;
font-size: .85em;
opacity: 0;
}
a.header-anchor:hover,
a.header-anchor:focus {
text-decoration: none;
}
img {
max-width: 100%;
}
ul,
ol {
padding-left: 1.25em;
}
table {
display: block;
border-collapse: collapse;
margin: 1rem 0;
overflow-x: auto;
}
tr {
border-top: 1px solid #dfe2e5;
}
tr:nth-child(2n) {
background-color: #f6f8fa;
}
th,
td {
border: 1px solid #dfe2e5;
padding: 0.6em 1em;
}
blockquote {
margin: 1rem 0;
border-left: 0.2rem solid #dfe2e5;
padding: 0.25rem 0 0.25rem 1rem;
font-size: 1rem;
color: #999;
}
blockquote > p {
margin: 0;
}
.theme {
font-size: 16px;
color: var(--text-color);
color: var(--c-text);
}
.theme .navbar {
@ -43,7 +184,7 @@ main {
right: 0;
height: var(--header-height);
background-color: #fff;
border-bottom: 1px solid var(--border-color);
border-bottom: 1px solid var(--c-divider);
z-index: 4;
display: flex;
align-items: center;
@ -63,7 +204,7 @@ main {
bottom: 0;
left: 0;
width: var(--sidebar-width);
border-right: 1px solid var(--border-color);
border-right: 1px solid var(--c-divider);
background-color: #fff;
z-index: 3;
overflow-y: auto;
@ -156,125 +297,3 @@ main {
padding-right: 1.5rem;
}
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
font-weight: 600;
line-height: 1.6;
}
h1:hover .header-anchor,
h1:focus .header-anchor,
h2:hover .header-anchor,
h2:focus .header-anchor,
h3:hover .header-anchor,
h3:focus .header-anchor,
h4:hover .header-anchor,
h4:focus .header-anchor,
h5:hover .header-anchor,
h5:focus .header-anchor,
h6:hover .header-anchor,
h6:focus .header-anchor {
opacity: 1;
}
h1 {
font-size: 1.9rem;
}
@media screen and (min-width: 420px) {
h1 {
font-size: 2.2rem;
}
}
h2 {
font-size: 1.65rem;
padding-bottom: .3rem;
border-bottom: 1px solid var(--border-color);
}
h3 {
font-size: 1.35rem;
}
h4 {
font-size: 1.15rem;
}
p,
ol,
ul {
line-height: 1.7;
}
a {
text-decoration: none;
color: var(--accent-color);
}
a:hover {
text-decoration: underline;
}
a.header-anchor {
float: left;
margin-top: .125em;
margin-left: -.87em;
padding-right: .23em;
font-size: .85em;
opacity: 0;
}
a.header-anchor:hover,
a.header-anchor:focus {
text-decoration: none;
}
img {
max-width: 100%;
}
ul,
ol {
padding-left: 1.25em;
}
table {
display: block;
border-collapse: collapse;
margin: 1rem 0;
overflow-x: auto;
}
tr {
border-top: 1px solid #dfe2e5;
}
tr:nth-child(2n) {
background-color: #f6f8fa;
}
th,
td {
border: 1px solid #dfe2e5;
padding: 0.6em 1em;
}
blockquote {
margin: 1rem 0;
border-left: 0.2rem solid #dfe2e5;
padding: 0.25rem 0 0.25rem 1rem;
font-size: 1rem;
color: #999;
}
blockquote > p {
margin: 0;
}

49
src/client/theme-default/styles/vars.css
Unescape View File

@ -1,14 +1,45 @@
.theme {
--border-color: rgb(226, 232, 240);
/** Base styles */
:root {
/**
* Colors
* --------------------------------------------------------------------- */
--c-white: #ffffff;
--c-black: #000000;
--c-divider-light: rgba(60, 60, 67, .12);
--c-divider-dark: rgba(84, 84, 88, .48);
--c-text-light-1: #2c3e50;
--c-text-light-2: #476582;
--c-brand: #3eaf7c;
/**
* Typography
* --------------------------------------------------------------------- */
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
/**
* Sizes
* --------------------------------------------------------------------- */
--header-height: 3.6rem;
--sidebar-width: 16.4rem;
--text-color: #2c3e50;
--text-color-light: #476582;
}
/** Fallback Styles */
:root {
--c-divider: var(--c-divider-light);
--c-text: var(--c-text-light-1);
--c-text-light: var(--c-text-light-2);
--c-bg: var(--c-white);
--code-bg-color: #282c34;
--accent-color: #3eaf7c;
/* responsive breakpoints */
/* --mq-narrow: 959px; */
/* --mq-mobile: 719px; */
/* --mq-mobile-narrow: 419px; */
}

Write Preview
Loading…
Cancel
Save