pub-solar/keycloak-theme-react
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

add styles

Browse source
This commit is contained in:
Jakob Hoefker 2024-04-27 18:24:44 +02:00
parent 1ee87a49a3
commit 59db0b2f02
20 changed files with 960 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/keycloak-theme/resources/styles/scss/background.scss Normal file
View file

@ -0,0 +1,28 @@
.ps-background {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
speak: none;
&--logo {
width: 100px;
margin: 0.1rem;
}
&--1312 {
transform: rotate(34deg);
transform-origin: center center;
color: #eee;
position: fixed;
z-index: 1;
top: -50vh;
left: -50vw;
font-weight: 900;
font-size: 7rem;
line-height: 6rem;
width: 200vw;
height: 200vh;
}
}

32
src/keycloak-theme/resources/styles/scss/button.scss Normal file
View file

@ -0,0 +1,32 @@
.ps-button {
font-size: 1rem;
padding: 0.5em 1em;
line-height: 1.2em;
border: 0.125em solid var(--foreground);
border-radius: 1.5em;
background-color: var(--background-darker-2);
cursor: pointer;
&:hover,
&:focus {
border-color: var(--accent);
}
&_primary {
border: 0.25em solid var(--foreground);
background-color: var(--background);
color: var(--foreground);
font-weight: bold;
&:focus,
&:hover {
background-color: var(--foreground);
color: var(--background);
}
}
&_small {
font-size: 0.8rem;
padding: 0.25em 0.7em;
}
}

19
src/keycloak-theme/resources/styles/scss/card.scss Normal file
View file

@ -0,0 +1,19 @@
.ps-card {
background-color: var(--background);
display: flex;
flex-direction: column;
border: 1rem solid var(--foreground);
&--header {
padding: 2rem;
}
&--title {
margin: 0;
padding: 0;
}
&--body {
padding: 0rem 2rem;
}
}

10
src/keycloak-theme/resources/styles/scss/container.scss Normal file
View file

@ -0,0 +1,10 @@
.ps-container {
display: flex;
flex-direction: column;
align-items: stretch;
> * {
margin: 0;
margin-bottom: 1.25rem;
}
}

19
src/keycloak-theme/resources/styles/scss/footer.scss Normal file
View file

@ -0,0 +1,19 @@
.ps-footer {
display: flex;
margin-top: auto;
z-index: 1;
&--link {
&:hover {
text-shadow: 0.2vw 0px 0px var(--accent);
}
@media screen and (min-width: 700px) {
font-size: 4rem;
}
@media screen and (min-width: 1000px) {
font-size: 2rem;
}
}
}

21
src/keycloak-theme/resources/styles/scss/form-group.scss Normal file
View file

@ -0,0 +1,21 @@
.ps-form-group {
display: flex;
flex-direction: column;
&--label {
margin-bottom: 0.5rem;
display: flex;
font-weight: bold;
}
.ps-button {
align-self: flex-start;
}
&--error {
margin-top: 0.25rem;
color: var(--accent);
font-weight: bold;
// font-family: monospace;
}
}

54
src/keycloak-theme/resources/styles/scss/header.scss Normal file
View file

@ -0,0 +1,54 @@
.ps-header {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
overflow-x: auto;
z-index: 100;
&--title {
font-size: 1.5rem;
padding: 0 1rem;
margin: 0;
border-bottom: 0.5rem solid var(--foreground);
background-color: var(--background);
border-right: 0.5rem solid var(--foreground);
pointer-events: all;
}
&--i18n {
margin-left: auto;
}
&--nav {
display: flex;
border-bottom: 0.5rem solid var(--foreground);
border-left: 0.5rem solid var(--foreground);
background-color: var(--background);
padding-left: 1rem;
pointer-events: all;
}
&--nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
&--nav-item {
margin: 0;
margin-right: 1rem;
&-action {
color: var(--foreground);
text-decoration: none;
&:hover {
color: var(--accent);
}
}
}
}

25
src/keycloak-theme/resources/styles/scss/homelink.scss Normal file
View file

@ -0,0 +1,25 @@
.ps-homelink {
pointer-events: all;
color: var(--foreground);
background: white;
text-decoration: none;
text-align: center;
font-weight: 900;
font-size: 24px;
padding: 8px;
line-height: 1em;
text-shadow: 0.15vw 0px 0px white;
transition: text-shadow 0.1s ease;
border: 12px solid black;
border-top: 0;
border-left: 0;
&:hover {
text-shadow: 0.3vw 0px 0px var(--accent);
}
@media screen and (min-width: 1200px) {
font-size: 32px;
padding: 12px;
}
}

18
src/keycloak-theme/resources/styles/scss/i18n-links.scss Normal file
View file

@ -0,0 +1,18 @@
.ps-i18n-links {
display: flex;
margin: 0;
pointer-events: all;
color: var(--foreground);
background: white;
text-decoration: none;
text-align: center;
font-weight: 900;
font-size: 24px;
padding: 8px;
line-height: 1em;
text-shadow: 0.15vw 0px 0px var(--background);
transition: text-shadow 0.1s ease;
border: 12px solid var(--foreground);
border-top: 0;
border-right: 0;
}

54
src/keycloak-theme/resources/styles/scss/index.scss Normal file
View file

@ -0,0 +1,54 @@
* {
box-sizing: border-box;
}
html {
--accent: #ed1c24;
--foreground: #000;
--foreground-lighter-1: rgba(0, 0, 0, 0.7);
--foreground-lighter-2: rgba(0, 0, 0, 0.3);
--background: #fff;
--background-darker-1: #f5f5f5;
--background-darker-2: #eeeeee;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 800;
background: var(--background);
color: var(--foreground);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
width: 100vw;
height: 100vh;
margin: 0;
font-size: 16px;
@media screen and (min-width: 1200px) {
font-size: 20px;
}
}
*:focus-visible {
outline: 0.2rem solid var(--accent);
}
@import './container';
@import './link';
@import './card';
@import './button';
@import './input';
@import './table';
@import './form-group';
@import './homelink';
@import './i18n-links';
@import './main';
@import './header';
@import './page';
@import './login-flow-pre';
@import './section-nav';
@import './logo';
@import './background';
@import './footer';

23
src/keycloak-theme/resources/styles/scss/input.scss Normal file
View file

@ -0,0 +1,23 @@
.ps-input {
padding: 0.5rem 0.5rem;
border: 2px solid var(--foreground-lighter-1);
font-size: 1.2rem;
&:hover,
&:focus {
border-color: var(--accent);
}
&:focus {
color: var(--background);
background-color: var(--foreground);
}
&:disabled {
background-color: var(--background-darker-2);
&:hover {
border-color: var(--foreground-lighter-1);
}
}
}

11
src/keycloak-theme/resources/styles/scss/link.scss Normal file
View file

@ -0,0 +1,11 @@
.ps-link {
cursor: pointer;
color: var(--accent);
border-bottom: 1px solid transparent;
transition: border-bottom 0.1s ease;
text-decoration: none;
&:hover {
border-bottom: 4px solid var(--accent);
}
}

16
src/keycloak-theme/resources/styles/scss/login-flow-pre.scss Normal file
View file

@ -0,0 +1,16 @@
.ps-login-flow-pre {
margin: 2rem;
display: flex;
border-bottom: 0.25rem solid var(--foreground);
padding-bottom: 0.25rem;
&--selected {
font-weight: bold;
margin-right: 1rem;
}
&--cancel {
font-weight: normal;
}
}

45
src/keycloak-theme/resources/styles/scss/logo.scss Normal file
View file

@ -0,0 +1,45 @@
.ps-logo {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
width: 100px;
&--base {
animation-name: rotate;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-play-state: paused;
animation-iteration-count: infinite;
&:hover {
animation-play-state: running;
}
}
&:nth-child(2n) &--base { animation-delay: -0.1s; }
&:nth-child(3n) &--base { animation-delay: -0.3s; }
&:nth-child(5n) &--base { animation-delay: -0.5s; }
&:nth-child(7n) &--base { animation-delay: -7s; }
&:nth-child(11n) &--base { animation-delay: -0.9s; }
&:nth-child(13n) &--base { animation-delay: -1s; }
&--base::before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

37
src/keycloak-theme/resources/styles/scss/main.scss Normal file
View file

@ -0,0 +1,37 @@
.ps-main {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
height: 100vh;
width: 100vw;
margin: 0;
padding-top: 10vw;
padding-bottom: 2vw;
overflow: auto;
position: relative;
&--background {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
&--page {
z-index: 1;
}
&_full {
padding: 0;
}
&_full &--page {
@media screen and (min-width: 1200px) {
flex-direction: column;
flex-wrap: nowrap;
}
}
}

3
src/keycloak-theme/resources/styles/scss/nav.scss Normal file
View file

@ -0,0 +1,3 @@
.ps-nav {
display: flex;
}

150
src/keycloak-theme/resources/styles/scss/page.scss Normal file
View file

@ -0,0 +1,150 @@
.ps-page {
display: flex;
width: 100vw;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 0;
pointer-events: none;
padding-top: 4rem;
@media screen and (min-width: 1200px) {
padding: 1vw;
padding-top: 4rem;
flex-direction: row;
align-items: flex-start;
}
&_home {
flex-direction: row;
flex-wrap: wrap;
}
&--header {
width: 100%;
top: 0;
left: 0;
right: 0;
height: auto;
position: fixed;
}
&--title {
font-size: 2rem;
border-bottom: 0.5rem solid var(--foreground);
padding-bottom: 0.5rem;
margin: 2rem;
}
&--section {
border: 12px solid black;
margin-top: 2rem;
margin-bottom: 2rem;
max-width: 700px;
flex-basis: 100%;
flex-shrink: 1;
pointer-events: all;
color: var(--foreground);
background: var(--background);
overflow-wrap: break-word;
hyphens: auto;
pointer-events: all;
@media screen and (min-width: 1200px) {
margin: 1vw;
}
&_home {
padding: 5vw;
}
&_full {
max-width: unset;
width: calc(100vw - 1.6rem);
margin: 0.8rem;
@media screen and (min-width: 1200px) {
width: 96vw;
margin: 1vw;
}
}
a {
color: var(--accent);
border-bottom: 1px solid transparent;
transition: border-bottom 0.1s ease;
text-decoration: none;
&:hover {
border-bottom: 4px solid var(--accent);
}
}
img {
width: 230px;
margin-top: 1rem;
}
}
&--section-link {
position: sticky;
top: 0;
background-color: var(--background);
padding: 1rem;
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
padding-left: 132px;
@media screen and (min-width: 1200px) {
display: none;
border-bottom: 0;
}
&-icon {
margin-left: 8px;
}
}
&--section-contents {
margin: 2rem;
margin-bottom: 0;
font-weight: 500;
line-height: 1.4;
&:last-child {
margin-bottom: 5vw;
}
pre,
code {
background-color: var(--background-darker-2);
border-radius: 4px;
padding: 4px;
}
pre {
border: 1px solid var(--foreground-lighter-2);
}
> * {
margin-bottom: 0;
margin-top: 0.5rem;
}
> .ps-table {
margin-top: 1rem;
+ * {
margin-top: 1rem;
}
}
> h2, h3, h4 {
margin-top: 1.5rem;
line-height: 1.5;
}
}
}

38
src/keycloak-theme/resources/styles/scss/section-nav.scss Normal file
View file

@ -0,0 +1,38 @@
.ps-section-nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: var(--background);
border-bottom: 2px solid var(--foreground);
overflow-x: auto;
&--list {
list-style: none;
display: flex;
position: sticky;
margin: 0 -0.5rem;
}
&--link {
display: flex;
a {
padding: 1rem 0.5rem;
}
&_active {
a {
color: var(--foreground);
border-bottom: 4px solid var(--foreground);
&:hover {
border-color: var(--foreground);
}
}
}
}
}

35
src/keycloak-theme/resources/styles/scss/table.scss Normal file
View file

@ -0,0 +1,35 @@
.ps-table {
overflow: auto;
border-collapse: collapse;
margin-left: -0.25rem;
width: calc(100% + 0.25rem);
td, th {
padding: 0.1rem 0.25rem;
}
tr {
border: 0;
border-left: 0.25rem solid transparent;
&:nth-child(2n) {
background-color: var(--background-darker-1);
border-left: 0.25rem solid var(--background-darker-1);
}
&:hover {
background-color: var(--background-darker-2);
border-color: var(--accent);
}
}
thead tr {
border-bottom: 4px solid var(--foreground-lighter-1);
font-weight: bold;
text-align: center;
}
thead td, th {
padding: 0.1rem 0.5rem;
}
}

322
src/keycloak-theme/resources/styles/scss/typography.scss Normal file
View file

@ -0,0 +1,322 @@
/* To regenerate this file, run $ google-font-downloader 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,800;1,400;1,800&display=swap' */
/* cyrillic-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtE6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
// }
// /* cyrillic */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWvU6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
// }
// /* greek-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtU6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+1F00-1FFF;
// }
// /* greek */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuk6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0370-03FF;
// }
// /* hebrew */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWu06FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
// }
// /* vietnamese */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtk6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
// }
// /* latin-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
// }
// /* latin */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6FxZCJgg.woff2) format('woff2');
// unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
// }
// /* cyrillic-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtE6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
// }
// /* cyrillic */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWvU6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
// }
// /* greek-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtU6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+1F00-1FFF;
// }
// /* greek */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuk6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0370-03FF;
// }
// /* hebrew */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWu06FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
// }
// /* vietnamese */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtk6FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
// }
// /* latin-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06FxZCJgvAQ.woff2) format('woff2');
// unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
// }
// /* latin */
// @font-face {
// font-family: 'Open Sans';
// font-style: italic;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6FxZCJgg.woff2) format('woff2');
// unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
// }
// /* cyrillic-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
// }
// /* cyrillic */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
// }
// /* greek-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+1F00-1FFF;
// }
// /* greek */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0370-03FF;
// }
// /* hebrew */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
// }
// /* vietnamese */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
// }
// /* latin-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
// }
// /* latin */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 400;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
// unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
// }
// /* cyrillic-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
// }
// /* cyrillic */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
// }
// /* greek-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+1F00-1FFF;
// }
// /* greek */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0370-03FF;
// }
// /* hebrew */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
// }
// /* vietnamese */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
// }
// /* latin-ext */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
// unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
// }
// /* latin */
// @font-face {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 800;
// font-stretch: 100%;
// font-display: swap;
// src: url(fonts/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
// unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
// }