75837af412
A browser will use Unicode glyphs from other font families if the glyph in question is not present for the current typeface. This leads to unnerving situations, whereby setting content through pseudo-selectors will cause text to misalign. And no, line-height won't make a difference in this case. This happens because fonts have different heights. Another reason may reside on CSS3 having pseudo selectors but not really having a proper spec for them to begin with.
170 lines
2.4 KiB
CSS
170 lines
2.4 KiB
CSS
* {
|
|
box-sizing: border-box !important;
|
|
max-width: 100%;
|
|
}
|
|
|
|
body,html {
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
background-attachment: fixed;
|
|
background-color: var(--background-hard);
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: "var(--unit) 'Open Sans'",sans-serif;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
font-weight: normal;
|
|
}
|
|
|
|
body,input,select,textarea {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
:link,:visited {
|
|
color: currentColor;
|
|
text-decoration: none;
|
|
}
|
|
|
|
hr {
|
|
all: unset;
|
|
background-color: var(--border) !important;
|
|
display: block;
|
|
height: 1px;
|
|
}
|
|
|
|
menu,ul {
|
|
list-style: none;
|
|
margin: unset;
|
|
padding: unset;
|
|
}
|
|
|
|
blockquote,body,fieldset,form,html,input,pre,textarea {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
fieldset {
|
|
all: unset;
|
|
}
|
|
|
|
:link img,:visited img,a img {
|
|
border: 0;
|
|
}
|
|
|
|
address {
|
|
font-style: normal;
|
|
}
|
|
|
|
:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
details summary {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
details summary>* {
|
|
margin: unset;
|
|
padding: unset;
|
|
}
|
|
|
|
details>summary {
|
|
list-style: none;
|
|
}
|
|
|
|
details>summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
html {
|
|
font-size: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Open Sans',sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
p {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5 {
|
|
margin: var(--m) 0 var(--s);
|
|
font-family: 'Poppins',sans-serif;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,legend:first-child {
|
|
margin-top: initial;
|
|
}
|
|
|
|
.doc-navigation, h1 {
|
|
margin-top: 0;
|
|
font-size: 1.383rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.296rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.215rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.138rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.067rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
small,.text_small {
|
|
font-size: .937rem;
|
|
}
|
|
|
|
legend,label {
|
|
font-size: 1.067rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
input[type=password],input[type=text],textarea {
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a:focus,a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
:focus-visible {
|
|
box-shadow: var(--shadow-inset-accent);
|
|
} |