ngx-awesomeindex/style.css

382 lines
6.2 KiB
CSS

* {
padding: 0;
margin: 0;
--color-secondary: #dedede;
--color-text-light: gray;
}
body {
font-family: sans-serif;
text-rendering: optimizespeed;
background-color: #f5f5f5;
}
a {
color: #006ed3;
text-decoration: none;
}
a:hover {
color: #319cff;
}
header,
#summary {
padding: 0 20px;
}
header {
display: flex;
flex-direction: row;
gap: 1em;
padding-top: 25px;
padding-bottom: 15px;
background-color: #f2f2f2;
}
header h1 {
font-size: 20px;
font-weight: normal;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
color: #999;
}
header h1 a {
color: #000;
margin: 0 4px;
}
header h1 a:hover,
footer a:hover {
text-decoration: underline;
}
header h1 a:first-child {
margin: 0;
}
main {
display: block;
}
.meta {
font-size: 12px;
font-family: Verdana, sans-serif;
border-bottom: 1px solid #9c9c9c;
padding-top: 10px;
padding-bottom: 10px;
}
.meta-item {
margin-right: 1em;
}
#filter {
padding: 4px;
border: 1px solid #ccc;
}
#list {
width: 100%;
border-collapse: collapse;
}
#list tr {
border-bottom: 1px dashed #dadada;
}
#list tbody tr:hover {
background-color: #ffffec;
}
#list th,
#list td {
text-align: left;
padding: 10px 0;
}
#list th {
padding-top: 15px;
padding-bottom: 15px;
font-size: 16px;
white-space: nowrap;
}
#list th a {
color: black;
}
#list th svg {
vertical-align: middle;
}
#list td {
white-space: nowrap;
font-size: 14px;
}
#list td:nth-child(1),
#list th:nth-child(1) {
padding-left: 20px;
width: 80%;
}
#list td:nth-child(2),
#list th:nth-child(2) {
text-align: right;
padding: 0 20px 0 20px;
}
#list th:nth-child(3),
#list td:nth-child(3) {
text-align: right;
padding-right: 20px;
}
#list td:nth-child(1) svg {
position: absolute;
}
#list td .name,
#list td .goup {
margin-left: 1.75em;
word-break: break-all;
overflow-wrap: break-word;
white-space: pre-wrap;
}
footer {
padding: 40px 20px;
font-size: 16px;
}
.markup {
max-width: 790px;
word-wrap: break-word;
overflow: hidden;
line-height: 1.5 !important;
}
.markup > :first-child {
margin-top: 0 !important;
}
.markup > :last-child {
margin-bottom: 0 !important;
}
.markup h1,
.markup h2,
.markup h3,
.markup h4,
.markup h5,
.markup h6 {
font-weight: 600;
margin-top: 24px;
margin-bottom: 16px;
line-height: 1.25;
}
.markup h1 tt,
.markup h1 code,
.markup h2 tt,
.markup h2 code,
.markup h3 tt,
.markup h3 code,
.markup h4 tt,
.markup h4 code,
.markup h5 tt,
.markup h5 code,
.markup h6 tt,
.markup h6 code {
font-size: inherit;
}
.markup h1 {
border-bottom: 1px solid var(--color-secondary);
padding-bottom: 0.3em;
font-size: 2em;
}
.markup h2 {
border-bottom: 1px solid var(--color-secondary);
padding-bottom: 0.3em;
font-size: 1.5em;
}
.markup h3 {
font-size: 1.25em;
}
.markup h4 {
font-size: 1em;
}
.markup h5 {
font-size: 0.875em;
}
.markup h6 {
color: var(--color-text-light);
font-size: 0.85em;
}
.markup p,
.markup blockquote,
.markup details,
.markup ul,
.markup ol,
.markup dl,
.markup table,
.markup pre {
margin-top: 0;
margin-bottom: 16px;
}
.markup hr {
background-color: var(--color-secondary);
border: 0;
height: 4px;
margin: 16px 0;
padding: 0;
}
.markup ul,
.markup ol {
padding-left: 2em;
}
.markup ul ul,
.markup ul ol,
.markup ol ol,
.markup ol ul {
margin-top: 0;
margin-bottom: 0;
}
.markup ol ol,
.markup ul ol {
list-style-type: lower-roman;
}
.markup li > p {
margin-top: 16px;
}
.markup li + li {
margin-top: 0.25em;
}
.markup dl {
padding: 0;
}
.markup dl dt {
font-size: 1em;
font-style: italic;
font-weight: 600;
margin-top: 16px;
padding: 0;
}
.markup dl dd {
margin-bottom: 16px;
padding: 0 16px;
}
.markup blockquote {
color: var(--color-text-light);
border-left: 4px solid var(--color-secondary);
margin-left: 0;
padding: 0 15px;
}
.markup blockquote > :first-child {
margin-top: 0;
}
.markup blockquote > :last-child {
margin-bottom: 0;
}
.markup table {
width: max-content;
max-width: 100%;
display: block;
overflow: auto;
}
.markup table th {
font-weight: 600;
}
.markup table th,
.markup table td {
border: 1px solid var(--color-secondary) !important;
padding: 6px 13px !important;
}
.markup table tr {
border-top: 1px solid var(--color-secondary);
}
.markup table tr:nth-child(2n) {
background-color: var(--color-secondary);
}
.markup img,
.markup video {
box-sizing: initial;
max-width: 100%;
}
.markup img[align="right"],
.markup video[align="right"] {
padding-left: 20px;
}
.markup img[align="left"],
.markup video[align="left"] {
padding-right: 28px;
}
.markup code {
white-space: break-spaces;
background-color: var(--color-secondary);
border-radius: 4px;
margin: 0;
padding: 0.2em 0.4em;
font-size: 85%;
}
.markup code br {
display: none;
}
.markup pre {
background-color: var(--color-secondary);
border-radius: 4px;
padding: 16px;
font-size: 85%;
line-height: 1.45;
margin-bottom: 16px;
word-break: normal;
word-wrap: normal;
}
.markup pre code {
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
background: 0 0;
line-height: inherit;
word-wrap: normal;
border: 0;
padding: 0;
margin: 0;
display: inline;
font-size: 100%;
}
.markup pre code:before,
.markup pre code:after {
content: normal;
}
.markup .ui.list .list,
.markup ol.ui.list ol,
.markup ul.ui.list ul {
padding-left: 2em;
}
@media (max-width: 600px) {
td:nth-child(1) {
width: auto;
}
th:nth-child(2),
td:nth-child(2) {
display: none;
}
h1 a {
margin: 0;
}
#filter {
max-width: 100px;
}
}
@media (prefers-color-scheme: dark) {
* {
--color-secondary: #082437;
--color-text-light: rgb(139, 157, 169);
}
body {
background-color: #101010;
color: #dddddd;
}
header {
background-color: #151515;
}
#list tbody tr:hover {
background-color: #252525;
}
header h1 a,
#list th a {
color: #dddddd;
}
a {
color: #5796d1;
text-decoration: none;
}
a:hover,
h1 a:hover {
color: #62b2fd;
}
#list tr {
border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
#filter {
background-color: #151515;
color: #ffffff;
border: 1px solid #212121;
}
.meta {
border-bottom: 1px solid #212121;
}
}