115 lines
2.2 KiB
CSS
115 lines
2.2 KiB
CSS
@import "./_styles/tailwind.css";
|
|
@import "./_styles/debug.css";
|
|
@import "./_styles/components.css";
|
|
@import "./_styles/fonts.css";
|
|
@import "./_styles/highlight.css";
|
|
@import "./_styles/docsearch.css";
|
|
|
|
/* Gradients */
|
|
.bgtb-white-pure-moon {
|
|
background-image: linear-gradient(#fff, #f5f5fa);
|
|
}
|
|
.bgtb-moon-white-pure {
|
|
background-image: linear-gradient(#f5f5fa, #fff);
|
|
}
|
|
|
|
/* Global styles */
|
|
a,
|
|
a:active {
|
|
@apply .cursor-pointer;
|
|
@apply .text-nebula .no-underline;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
@apply .underline;
|
|
}
|
|
code {
|
|
@apply .code .text--1 .text-mars-2;
|
|
@apply .p-0x;
|
|
@apply .bg-moon;
|
|
@apply .rounded-1;
|
|
}
|
|
|
|
/* Content converted form markdown */
|
|
.documentation-content {
|
|
/* Paragraphs */
|
|
p {
|
|
@apply .leading-2 my-1;
|
|
}
|
|
ul {
|
|
@apply .leading-2 my-1;
|
|
}
|
|
/* Titles */
|
|
h2 {
|
|
@apply .text-solstice .text-5 .normal;
|
|
@apply .mb-1;
|
|
/* Trick to have heading scroll into view and not being hidden by header */
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
@apply .h-3;
|
|
}
|
|
.anchor {
|
|
@apply .hidden;
|
|
&:after {
|
|
content: "#";
|
|
}
|
|
}
|
|
&:hover .anchor {
|
|
@apply .inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Custom styles */
|
|
.custom-community-projects {
|
|
width: 400px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition-property: opacity;
|
|
transition-duration: 0.25s;
|
|
will-change: opacity;
|
|
}
|
|
.custom-community-link:hover .custom-community-projects {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Demo on the homepage */
|
|
.custom-demo-mask {
|
|
opacity: 1;
|
|
transition-property: opacity;
|
|
transition-duration: 0.25s;
|
|
will-change: opacity;
|
|
}
|
|
.custom-demo:hover {
|
|
.custom-demo-mask {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* When we need to show code in action, we often need to show screenshots or
|
|
* screencasts. This class will still an element to make it look like a browser
|
|
* window.
|
|
**/
|
|
.fake-browser {
|
|
padding: 24px 1px 1px 1px;
|
|
@apply bg-grey;
|
|
border-radius: 6px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 16px;
|
|
@apply bg-red;
|
|
display: block;
|
|
border-radius: 50%;
|
|
width: 14px;
|
|
height: 14px;
|
|
box-shadow: 25px 0 0 rgba(58, 178, 189, 0.5),
|
|
50px 0 0 rgba(236, 139, 99, 0.5);
|
|
}
|
|
}
|