@dovenv/docs
Version:
Documentation utils for dovenv
418 lines (386 loc) • 9.38 kB
CSS
a[aria-label="RSS"]{
display:none ;
}
.VPLocalNav {
border-color: var(--vp-c-divider) ;
}
.dark .VPSidebar {
border-right: 1px solid var(--vp-c-divider) ;
}
.Layout:not(.dovenv-home) .VPNavBar .divider-line {
background-color: var(--vp-c-divider) ;
}
.Layout.dovenv-home .VPNavBar.top {
background-color: transparent ;
}
.Layout.dovenv-home .VPNavBar:not(.top) .divider-line {
background-color: var(--vp-c-divider) ;
}
table {
max-width: 100% ;
}
img,
video,
.vp-code-group {
border-radius: var(--pp-radius);
}
.pager-link {
border-radius: var(--pp-radius) ;
}
.medium-zoom-overlay {
z-index: 20;
}
.medium-zoom-image {
z-index: 21;
}
.image-container .image-bg {
opacity: 0.6;
}
.theme {
background-color: var(--vp-c-bg);
}
.vp-doc h2 {
margin-top: 0;
border-top: none;
}
.VPDocOutlineDropdown {
display: none ;
}
.articles .VPHero.VPHomeHero {
display:flex;
}
.articles .VPHero.VPHomeHero .main {
display: flex;
flex-direction: column;
align-items: center;
}
.VPHome:before {
background-image: var(--vp-home-hero-image-background-image);
filter: var(--vp-home-hero-image-filter);
content: '';
position: absolute;
inset: 0;
opacity: 0.1;
}
@media (max-width: 640px) {
.VPHome .vp-doc > div{
padding: 25px;
}
}
/* .tagline {
text-align: center;
} */
.steps, .step {
padding-left: 20px;
margin-left: 5px;
position: relative;
.header-anchor {
opacity: 1;
border: 2px solid var(--pp-brand-2);
background: var(--vp-c-bg);
width: 25px;
height: 25px;
border-radius: 100%;
left: -34px;
font-size: 0;
}
.header-anchor:hover{
background: var(--pp-brand-2);
transition: background 0.45s;
}
}
.steps:hover::before,
.step:hover::before {
background: var(--pp-brand-2);
transition: background 0.45s, opacity 0.45s;
opacity:1;
}
.steps::before,
.step::before {
content: '';
position: absolute;
border-radius:5px;
opacity:0.2;
top: 30px;
left: -2px;
width: 2px;
height: 100%;
background: var(--vp-c-text-3);
}
.step-number {
position: absolute;
top: 25px;
left: -5px;
z-index: 2;
font-size: 10px;
}
.edit-link-button {
border: 1px solid var(--vp-c-divider) ;
border-radius: var(--pp-radius);
padding: 10px 20px;
transition: border-color 0.25s, color 0.25s ;
}
.edit-link-button:hover {
border-color: var(--vp-c-brand-2) ;
color: var(--vp-c-brand-2) ;
}
.shell {
box-shadow: 0 0 20px 10px var(--pp-brand-shadow);
backdrop-filter: blur(40px);
/* background: var(--vp-c-bg-alt) !important; */
}
.shell, .search-bar, .shell .result {
border: 1px solid var(--vp-c-divider);
border-radius: var(--pp-radius) ;
}
.shell .result {
background: var(--vp-c-bg-soft);
}
.custom-block {
border-radius: var(--pp-radius) ;
}
.VPFeature,
.card {
background-color: var(--vp-c-bg-soft) ;
backdrop-filter: blur(40px);
border-radius: var(--pp-radius) ;
border: 2px solid var(--vp-c-divider) ;
box-shadow: 0 0 20px 10px var(--pp-brand-shadow);
.icon{
border-radius: 100%;
}
}
.VPFeature:hover {
border-color: var(--vp-c-brand-1) ;
}
div:not(.blocks) > div[class*='language-'],
.vp-code-group,
.vp-code-block-title {
background: transparent;
border-radius: var(--pp-radius);
}
.vp-code-group,
.vp-code-block-title,
div:not(.blocks) > div[class*='language-'] {
box-shadow: 0 0 20px 10px var(--pp-brand-shadow);
}
.vp-code-group > div:not(.blocks),
.vp-code-block-title > div,
div:not(.blocks) > div[class*='language-'],
.blocks > div[class*='language-'] {
background-color: var(--vp-c-bg-soft) ;
backdrop-filter: blur(40px);
border: 1px solid var(--vp-c-divider);
}
.vp-code-group > div:first-child,
.vp-code-block-title > div:first-child {
border-radius: var(--pp-radius) var(--pp-radius) 0 0 ;
}
.vp-code-block-title > div:nth-child(2),
.vp-code-group > .blocks > div[class*='language-'] {
background: transparent;
border-radius: 0 0 var(--pp-radius) var(--pp-radius) ;
}
.vp-doc [class*='language-'] > span.lang {
padding: 5px;
}
.VPDocAsideOutline {
background-color: var(--vp-c-bg-soft);
backdrop-filter: blur(40px);
/* border: 1px solid var(--vp-c-divider); */
border-radius: var(--pp-radius);
padding: 10px 0 20px 05px;
}
.VPDocAside > nav > div {
border-color: transparent ;
border-radius: var(--pp-radius);
.outline-marker {
left: -5px;
margin-top: 10px;
}
}
.details {
background-color: var(--vp-c-bg-soft) ;
backdrop-filter: blur(40px);
}
.dovenv-home header .divider {
display:none;
}
header .home .divider {
display:none;
}
.VPMenu {
border-radius: var(--pp-radius) ;
background-color: var(--vp-c-bg-soft) ;
backdrop-filter: blur(40px);
.link:hover {
background-color: var(--vp-c-bg-alt) ;
border-radius: var(--pp-radius) ;
}
}
.menu + .translations::before,
.menu + .appearance::before,
.menu + .social-links::before,
.translations + .appearance::before,
.appearance + .social-links::before {
height: 0px ;
}
.VPSwitch {
border-color: transparent ;
}
.VPTeamMembersItem {
border-radius: 20px ;
border: 1px solid var(--vp-c-divider);
box-shadow: var(--vp-shadow-3);
background-color: var(--vp-c-bg-alt) ;
}
.VPTeamMembersItem .profile {
background-color: transparent ;
}
.VPTeamMembersItem .profile .avatar {
box-shadow: none;
}
.VPTeamMembersItem .profile .avatar-img {
width: 100%;
height: 100%;
padding: 10px;
border: 1px solid var(--vp-c-divider);
}
.VPSidebar {
border-right: 1px solid var(--vp-c-divider);
}
.VPNav .content,
.VPNav .content-body {
/* background: transparent !important; */
transition: none ;
}
img.VPImage.image-src {
width: 100% ;
}
:root {
--dm-color-brand: var(--vp-c-brand-1) ;
--dm-color-bg-alt: var(--vp-c-bg-alt) ;
--dm-color-hint: var(--vp-c-text-1) ;
--dm-c-white: var(--vp-c-text-1) ;
--dm-text-color: var(--vp-c-text-1) ;
--dm-modal-bg-color: var(--vp-c-bg-alt) ;
--dm-mask-bg-color: rgba(101, 108, 133, .8);
--dm-divider-color: var(--vp-c-divider) ;
--dm-highlight-color: var(--vp-c-brand-2) ;
}
.documate-button{
justify-content: flex-end;
padding: 2px 15px ;
height: 100%;
border: 1px solid var(--vp-c-divider);
border-radius: var(--pp-radius) ;
}
/* Table */
table {
border-spacing: 0;
border-collapse: separate;
border-radius: var(--pp-radius);
border: 1px solid var(--vp-c-divider);
width: fit-content;
}
table th:not(:last-child),
table td:not(:last-child) {
border-right: 1px solid var(--vp-c-divider);
}
/* Apply a border to the bottom of all but the last row */
table>thead>tr:not(:last-child)>th,
table>thead>tr:not(:last-child)>td,
table>tbody>tr:not(:last-child)>th,
table>tbody>tr:not(:last-child)>td,
table>tfoot>tr:not(:last-child)>th,
table>tfoot>tr:not(:last-child)>td,
table>tr:not(:last-child)>td,
table>tr:not(:last-child)>th,
table>thead:not(:last-child),
table>tbody:not(:last-child),
table>tfoot:not(:last-child) {
border-bottom: 1px solid var(--vp-c-divider);
}
table tr {
background-color: var(--vp-c-bg-opacity) ;
}
table th {
background-color: var(--vp-c-bg-alt) ;
}
/* Sidebar */
.VPNavBarTitle.has-sidebar .title {
border-color: transparent ;
}
/* .VPSidebar .group {
background: var(--vp-c-bg-alt);
border: 1px solid var(--vp-c-divider) !important;
border-radius: var(--pp-radius);
margin: 10px 0;
padding: 10px 20px !important;
> div {
padding: 0 20px;
}
.VPSidebarItem {
padding: 0 !important;
}
} */
/* Search */
.DocSearch-Button {
border: 1px solid var(--vp-c-divider);
border-radius: var(--pp-radius);
}
.DocSearch-Button:hover .vp-icon {
color: var(--vp-c-brand-1) ;
transition: opacity 0.25s, color 0.25s ;
}
.VPNavBarSearch {
justify-content: flex-end;
margin-right: 20px;
button {
padding: 2px 15px;
height: 100%;
}
}
@media (max-width: 768px) {
.VPNavBarSearch {
margin-right: 0px ;
}
.DocSearch-Button {
border: none ;
}
}
/* exteranl link icon, carets etc */
:is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(.no-icon)::after, .vpi-chevron-right {
color: var(--vp-c-brand-1) ;
opacity: 0.5 ;
}
.VPDocAsideOutline {
border: 1px solid var(--vp-c-divider);
}
/* Switch */
.VPSwitch {
border: 1px solid var(--vp-c-divider) ;
}
.VPSwitch:hover {
border-color: var(--vp-c-brand-1) ;
}
.VPSwitch:hover .icon > span {
color: var(--vp-c-brand-1) ;
transition: opacity 0.25s, color 0.25s ;
}
/* nav */
.button:hover .vpi-chevron-down {
color: var(--vp-c-brand-1) ;
transition: opacity 0.25s, color 0.25s ;
}
/* svgs */
.svg-donate:hover {
color: var(--vp-c-brand-1);
transition: color 0.45s, shadow 0.45s;
animation: 1.5s ease-in-out 0s infinite beat;
box-shadow: 0 0 20px 10px var(--pp-brand-shadow);
}
@keyframes beat {
0%, 50%, 100% { transform: scale(1, 1); }
30%, 80% { transform: scale(0.92, 0.95); }
}