You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
CameraView/docs/css/main.css

275 lines
4.8 KiB

@import "fonts.css";
@import "colors.css";
@import "syntax.css";
:root {
--color-footer: var(--color-code-background);
--color-table-head: var(--color-code-background);
--color-divider: rgba(230, 230, 230, 0.7);
--header-height: 65px; /* kind of */
--cards-radius: 4px;
}
html, body {
height: 100%;
}
/* dividers */
.has-divider {
border-color: var(--color-divider) !important;
}
/* header */
header {
5 years ago
background: linear-gradient(-45deg, var(--color-secondary), var(--color-primary)) fixed;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
header .left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
header .right {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
header a {
color: white !important;
}
header a:hover {
color: white !important;
}
header .logo {
height: 32px;
width: auto;
}
header .version {
font-size: 0.9em;
color: rgba(255, 255, 255, 0.8);
}
body {
/* to offset wrt sticky header */
padding-top: var(--header-height);
}
/* footer */
footer {
background-color: var(--color-footer);
color: var(--color-text-muted);
font-size: 0.9em;
}
/* drawer */
.drawer-toggle:hover {
background-color: rgba(240, 240, 240, 0.25);
border-radius: 50%;
}
@media (max-width: 768px) {
.drawer {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--color-background);
transition: transform 0.4s cubic-bezier(0.4, 0, 0, 1);
z-index: 5;
padding-top: var(--header-height);
}
.drawer-closed {
transform: translateX(-100%);
}
}
@media (max-width: 480px) {
.drawer {
width: 100%;
}
}
.drawer ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 100%;
}
.drawer a {
color: inherit;
}
.drawer a:hover {
color: var(--color-primary-hover) !important;
}
.drawer li.active a {
color: var(--color-primary);
position: relative;
}
/* .drawer li.active a:hover {
color: var(--color-primary-active) !important;
text-decoration: none;
} */
.drawer li.active {
position: relative;
}
.drawer li.active::after {
content: '';
display: inline-block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background-color: var(--color-primary);
border-radius: 50%;
}
/* tables */
table {
/* same margins that reboot gives to pre */
margin-top: 0;
margin-bottom: 1rem;
border-collapse: collapse;
/* make it scrollable if needed */
display: block;
overflow-x: auto;
}
thead {
background-color: var(--color-table-head);
}
th {
padding: 8px;
border: 1px solid var(--color-divider);
font-family: var(--font-display), sans-serif;
font-weight: 700;
}
td {
padding: 8px;
border: 1px solid var(--color-divider);
}
/* page and content */
.content a, footer a {
color: var(--color-accent);
}
.content a:hover, footer a:hover {
color: var(--color-accent) !important;
}
.content ul {
padding-left: 24px;
}
.content blockquote {
background-color: var(--color-code-background);
border-radius: var(--cards-radius);
border-left: 4px;
border-left-style: solid;
border-left-color: var(--color-accent);
font-size: 0.9em;
color: var(--color-text-muted);
padding: 0.8rem;
/* text-align: justify;
position: relative;
padding: 0.5rem 32px 0.5rem 0.5rem;
text-justify: inter-word; */
}
/* .content blockquote::after {
content: '!';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--color-accent);
} */
.content blockquote p, .content blockquote ul {
margin: 0;
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
margin-top: 1.4rem;
margin-bottom: 0.8rem;
}
.page-header span {
font-size: 0.9em;
color: var(--color-text-muted);
}
/* code */
pre {
border-radius: var(--cards-radius);
padding: 0.8rem;
font-size: 0.8rem !important;
line-height: 1.6;
}
:not(pre) > code {
border-radius: var(--cards-radius);
padding: 2px;
font-weight: 700 !important;
font-size: 0.8rem !important;
}
.language-java, .language-xml, .language-groovy {
position: relative;
}
.language-java::after, .language-xml::after, .language-groovy::after {
position: absolute;
top: 0;
right: 0;
padding: 6px;
font-size: 0.65rem;
color: var(--color-text-muted);
}
.language-java::after {
content: 'java';
}
.language-xml::after {
content: 'xml';
}
.language-groovy::after {
content: 'groovy';
}