diff options
Diffstat (limited to '')
| -rw-r--r-- | assets/style.scss | 1605 |
1 files changed, 1605 insertions, 0 deletions
diff --git a/assets/style.scss b/assets/style.scss new file mode 100644 index 0000000..10042c2 --- /dev/null +++ b/assets/style.scss @@ -0,0 +1,1605 @@ +/* + * SPDX-FileCopyrightText: 2025 cel <cel@bunny.garden> + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +/* App-wide styling */ +img { + display: block; +} + +::-webkit-scrollbar { + width: 8px; +} +.messages-buffer::-webkit-scrollbar { + width: 10px !important; +} + +::-webkit-scrollbar-thumb { + background: black; +} + +body { + max-width: 100vw; + max-height: 100vh; + min-width: 100vw; + min-height: 100vh; + background: linear-gradient(180deg, #392C25 40%, #71574A 100%); + color: #dcdcdc; + font-family: 'K2D', Tahoma, Geneva, Verdana, sans-serif; + padding: 0; + margin: 0; + border: 0; + word-break: break-word; + word-wrap: break-word; + text-wrap: wrap; + overflow-wrap: break-word; + display: flex; + justify-content: stretch; + align-items: stretch; + flex: 1 1 auto; +} + +html { + padding: 0; + margin: 0; + border: 0; +} + +.fill { + width: 100vw; + height: 100vh; +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} + +#hero { + display: flex; + flex-wrap: wrap; + flex: 1 1 auto; + align-items: center; + justify-content: center; + gap: 8px; +} + +#hero img { + height: 128px; + width: 128px; + max-width: 100%; +} + +#hero h1 { + font-size: 64px; + display: inline-block; + width: max(auto, min-content); +} + +.panel { + border: 2px solid black; + border-color: black; + border-style: solid; + background: linear-gradient(180deg, #364B3B 0%, #19311F 100%); +} + +#login-form { + padding: 32px; + margin: 4px; + max-width: 850px; +} + +#login-form form { + margin: auto; + max-width: 350px; + display: flex; + flex-direction: column; + /* align-items: center; */ + justify-content: center; + gap: 4px; +} + +#login-form .button { + margin-top: 16px; +} + +#login-form form>input { + min-width: 0; + width: 100%; + max-width: 100%; + font-size: 1.5rem; +} + +label { + font-weight: bold; +} + +input[type="text"], +input[type="password"] { + font-size: 1rem; + border: 2px solid black; + font-family: "k2d"; +} + +aside { + width: 500px; + max-height: 100%; +} + +main { + width: 100%; + height: 100%; +} + +button, +.button { + text-align: center; + font-size: 1rem; + background: #FACC34; + color: #000000; + text-decoration: none !important; + border: 2px solid black; + border-radius: 12px; + padding: 0.5em 1em; + font-family: K2D; + font-weight: 600; + box-shadow: inset 0px -0.75em 0.5em #ebb62e, 0 0.25em 0.25em #00000048; + cursor: pointer; +} + +.overlay .error { + color: black; +} + +button:hover, .button:hover { + background: #f9c61b; +} + +button:clicked, .button:clicked { + background: #ffc300; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Diolce; + margin: 0; +} + +p { + margin: 0; +} + +.chats-list, +.roster-list, +.settings-sidebar { + border-width: 0 2px 0 0; + border-color: black; + border-style: solid; + height: 100%; + width: 400px; + flex: 0 0 auto; + align-self: stretch; + display: flex; + flex-direction: column; +} + +.settings-sidebar { + width: 200px; + display: flex; + flex-direction: column; +} + +.settings-sidebar>* { + padding: 8px 16px; + cursor: pointer; +} + +.settings-sidebar>.open, +.settings-sidebar>*:hover { + background: #00000060; +} + +.chats-list>*, +.roster-list>*, +.settings .header { + padding: 8px 16px; +} + +.chats-list .header, +.roster-list .header, +.settings .header { + margin-top: 0.4rem; + border-bottom: 2px solid black; + display: flex; + justify-content: space-between; + align-items: center; +} + +.chats-list h2, +.roster-list h2 { + flex: 0 0 auto; +} + +.chats-list-item, +.roster-list-item, +{ + cursor: pointer; + display: flex; + align-items: start; + gap: 8px; + border-radius: 1em; + padding: 0.5em; + margin: 0.5em 0; + box-sizing: border-box; + align-items: stretch; +} + +.chats-list-item:hover, +.chats-list-item.open, +.roster-list-item:hover, +.roster-list-item.open, +{ +background: #00000060; +/* color: black; */ +/* border: 2px solid black; */ +/* box-shadow: inset 0px -0.75em 0.5em #19311F, 0 0.25em 0.25em #00000048; */ +/* background: linear-gradient(0deg, #364B3B 0%, #19311F 100%); */ +} + +.chats-list-item .item-info, +.roster-list-item .item-info { + width: 0; + display: flex; + flex: 1 1 auto; + flex-direction: column; + justify-content: space-between; +} + +.chats-list-item .main-info, +.roster-list-item .main-info { + display: flex; + justify-content: space-between; + align-items: baseline; +} + +.chats-list-item .name, +.roster-list-item .name { + font-weight: bold; + font-size: 1.1em; +} + +.chats-list-item .name, +.roster-list-item .name { + font-weight: light; +} + +.chats-list-item .sub-info, +.roster-list-item .sub-info { + display: flex; +} + +.chats-list-item .message-preview { + font-weight: light; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: auto; +} + +.roster-list-item .jid { + opacity: 0; + font-family: Diolce; + font-weight: normal; +} + +.roster-list-item:hover .jid { + opacity: 100%; +} + +.avatar { + object-fit: contain; + border-radius: 50%; + width: 48px; + height: 48px; +} + +.chats-list-item .avatar, +.roster-list-item .avatar { + width: 48px; + height: 48px; +} + +.chats-list-chats, +.roster-list-roster { + flex-grow: 1; + /* overflow-y: scroll; */ +} + +.open-chat-views { + flex: 1 1 100%; + display: flex; + flex-direction: column; + max-height: auto; +} + +.open-chat-view { + height: auto; + display: flex; + flex-direction: column; + justify-content: stretch; + max-height: auto; +} + +.chat-view-header .avatar { + width: 64px; + height: 64px; +} + +.chat-view-header { + border-width: 0 0 2px 0; + display: flex; + padding: 16px; + gap: 16px; +} + +.chat-view-header h2 { + font-family: 'K2D'; + font-weight: bold; +} + +.new-message-composer { + border-width: 2px 0 0 0; + width: auto; + padding: 16px; + max-height: auto; +} + +.new-message-composer .overlay-scroll { + max-height: min(32em, 50vh); + background-color: #dcdcdc; + border: 2px solid black; +} + +[contenteditable]:focus { + outline: 0px solid transparent; +} + +.new-message-composer .text-box { + padding: 8px; + white-space: pre-wrap; + color: black; + /* overflow-y: auto; */ + font-size: 16px; + margin: 0; + height: fit-content; +} + +.grow-wrap { + /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */ + display: grid; +} + +.grow-wrap::after { + /* Note the weird space! Needed to preventy jumpy behavior */ + content: attr(data-replicated-value) " "; + /* This is how textarea text behaves */ + white-space: pre-wrap; + /* Hidden from view, clicks, and screen readers */ + visibility: hidden; + max-height: 5em; +} + +.grow-wrap>textarea { + /* You could leave this, but after a user resizes, then it ruins the auto sizing */ + resize: none; + /* Firefox shows scrollbar on growth, you can hide like this. */ + overflow-y: scroll; +} + +.grow-wrap>textarea, +.grow-wrap::after { + /* Identical styling required!! */ + border: 2px solid black; + padding: 8px; + font: inherit; + + /* Place on top of each other */ + grid-area: 1 / 1 / 2 / 2; +} + +.open-chat-view { + flex-grow: 1; + max-height: 100%; +} + +.messages-buffer { + display: flex; + flex-direction: column-reverse; + flex-grow: 1; + overflow-y: scroll; +} + + +.messages-buffer .new-day { + display: flex; + align-items: center; + margin: 0.5em 0 0 0; + /* margin: 1em -1em; */ + + + &:before, + &:after { + content: ""; + flex: 1; + height: 2px; + margin: 0 1em; + background: black; + } +} + +.chat-message { + display: flex; + padding: 4px 0; +} + +.chat-message:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.chat-message .left { + width: 48px; + flex: none; + padding: 0 8px; +} + +.chat-message .middle { + width: auto; + flex-grow: 1; +} + +.chat-message .right { + width: 16px; + padding: 0 8px; + flex: none; + align-self: end; +} + +.message-info { + display: flex; + align-items: baseline; + gap: 8px; +} + +.message-text { + white-space: pre-wrap; +} + +.chat-message.major { + margin-top: 8px; +} + +.chat-message.major .left { + height: 48px; +} + +.chat-message.major .middle { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.message-info .message-user-name { + font-weight: bold; + font-size: 1.1em; + margin-bottom: 4px; +} + +.chat-message.major .message-timestamp { + font-weight: light; + font-size: 0.8em; +} + +.chat-message.minor .message-timestamp { + font-weight: light; + font-size: 0.7em; + /* TODO: better alignment */ + margin-top: 0.3em; +} + +.chat-message.minor:not(:hover) .message-timestamp { + opacity: 0; +} + +.light { + filter: invert(99%) sepia(1%) saturate(2689%) hue-rotate(208deg) brightness(106%) contrast(73%); +} + +.chat-message.final .message-delivery, +.visible { + opacity: 100% !important; +} + +.chat-message.final { + margin-bottom: 8px; +} + +.chat-message:not(:hover) .message-delivery { + opacity: 0; +} + +.sidebar { + display: flex; + z-index: 1; +} + +.dock { + z-index: 30; + display: flex; + flex-direction: column; + border-width: 0 2px 0 0; +} + + +.dock-item { + display: flex; + justify-content: center; + position: relative; + cursor: pointer; +} + +.dock-pill { + position: absolute; + border-radius: 50%; + left: -4px; + top: calc(50% - 4px); + width: 8px; + height: 8px; + opacity: 0; + background-color: #dcdcdc; + transition-duration: 250ms; +} + +.dock-item.open .dock-pill { + opacity: 100%; +} + +.dock-item:hover .dock-pill, +.dock-item.hovering .dock-pill { + top: calc(50% - 14px); + height: 28px; + opacity: 100%; +} + +.dock-item.focused .dock-pill { + top: calc(50% - 24px); + height: 48px; + opacity: 100%; +} + +.dock .shortcuts { + padding: 8px 0; + border-bottom: 2px solid black; +} + +.dock .shortcuts .dock-item img { + width: 64px; + height: 64px; +} + +.dock-icon { + width: 64px; + height: 64px; + padding: 4px 8px; +} + +.avatar-with-presence { + position: relative; + height: fit-content; +} + +.avatar-with-presence>.presence-show-icon { + position: absolute; + bottom: 0; + right: 0; +} + +.dock .pins { + flex: 1 1 auto; +} + +.dock .personal { + padding: 8px 0; + flex: 0 0 auto; + border-top: 2px solid black; +} + +.sidebar { + position: relative; +} + +.dock .personal .dock-item { + padding: 8px 16px +} + +.dock .personal .avatar-with-presence .avatar { + width: 48px; + height: 48px; +} + +.sidebar-drawer { + height: auto; + z-index: 5; +} + +.sidebar-hovering-drawer { + z-index: 10; +} + +.sidebar .sidebar-hovering-drawer { + position: absolute; + height: 100%; + /* must be width of dock... */ + left: 82px; + transition: left 0.2s ease-out allow-discrete; +} + +@starting-style { + .sidebar .sidebar-hovering-drawer { + /* TODO: allow to edit this width */ + left: -318px; + } +} + +.sidebar .behind-hovering { + width: 402px; + transition: width 0.2s ease-out allow-discrete; +} + +@starting-style { + .sidebar .behind-hovering { + width: 0; + } +} + +.overlay { + position: relative; + z-index: 100; +} + +.overlay-background, +.modal-background { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; +} + +.overlay-content { + z-index: 101; + position: absolute; +} + +.modal { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 150; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.4); +} + +.settings { + width: 75vw; + height: 75vh; + display: flex; + flex-direction: column; +} + +.settings-main { + height: calc(100% - 56px); + display: flex; + flex: 1 1 auto; +} + +.settings-page { + flex: 1 1 0; + overflow-y: auto; +} + +.profile-settings { + display: flex; + justify-content: flex-end; + flex-wrap: wrap; + flex-direction: row-reverse; +} + +.profile-form { + flex: 1 1 auto; + margin: 16px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +.profile-form label { + font-size: 1rem; +} + +.profile-form .change-avatar { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 16px; +} + +#client-user-avatar { + opacity: 0; + position: absolute; + z-index: -1; +} + +.profile-preview { + margin: 24px; + border: 2px solid black; + min-width: 240px; +} + +.profile-preview .preview { + display: flex; + flex-direction: column; + gap: 8px; +} + +.profile-preview h2 { + padding: 8px 16px; + border-bottom: 2px solid black; +} + +.profile-preview .avatar { + width: 64px; + height: 64px; +} + +.profile-preview .nick { + font-size: 20px; + font-weight: bold; +} + +hr { + width: 100%; + border: 1px solid black; +} + +.profile-preview .preview { + padding: 16px; +} + +.modal .overlay { + x-index: 200; +} + +.modal .overlay-content { + z-index: 201; +} + +.personal .overlay-content { + bottom: 0; + left: 100%; +} + +.menu { + border: 2px solid black; + background-color: #dcdcdc; + color: #000000; + width: 300px; +} + +.menu-item { + cursor: pointer; + padding: 4px 8px; +} + +.menu-item:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.personal-status-menu .user { + display: flex; + gap: 8px; + padding: 8px; +} + +.personal-status-menu .user .user-info { + display: flex; + flex-direction: column; +} + +.personal-status-menu .user .nick { + font-size: 1.1em; + font-weight: bold; +} + +.personal-status-menu .user .jid { + font-family: Diolce; +} + +hr { + margin: 0; +} + +.status-edit { + padding: 0 8px 8px 8px; +} + +.status-edit select { + width: 100%; +} + +.header .header-icon { + position: relative; + top: -0.2rem; + border-radius: 1em; + padding: 4px; +} + +.new-chat, .add-contact, .close { + cursor: pointer; +} + +.new-chat:hover, +.new-chat.open, +.add-contact:hover, +.add-contact.open, +.close:hover { + background: #00000060; +} + +.add-contact-panel { + flex-shrink: 0; + max-height: calc(100% - 150px); + border-bottom: 2px solid black; +} + +.new-chat-widget form { + border: 2px solid black; + padding: 4px; + gap: 4px; + background-color: #dcdcdc; + display: flex; + flex-direction: column; + align-items: end; +} + +.add-contact-menu h3 { + margin: 1em 0 0.5em; +} + +.add-contact-menu form { + display: flex; + flex-direction: column; + gap: 8px; +} + +.add-contact-menu form input { + flex: 1 1 auto; +} + +.jid-with-button { + display: flex; + align-items: center; + justify-content: space-between; +} + +.jid-with-buttons { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 4px; + margin-bottom: 8px; +} + +.jid-with-buttons .buttons { + display: flex; + align-items: center; + gap: 4px; +} + +.jid-with-buttons .buttons>* { + flex: 1 1 auto; +} + +.jid-with-button .jid { + flex: 1 1 auto; +} + +.jid-with-button .button { + flex: 0 0 auto; +} + +.icon-with-badge { + position: relative; +} + +.badge { + position: absolute; + top: 0; + right: 0; + border-radius: 50%; + background-color: #C1173C; + color: #dcdcdc; + height: 1em; + min-width: 1em; + padding: 2px; + display: flex; + justify-content: center; + align-items: center; +} + +.header-icon .badge { + height: 8px; + width: 8px; + min-width: revert; +} + +/* font-families */ + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 100; + font-display: block; + src: url('/assets/fonts/k2d-1.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 100; + font-display: block; + src: url('/assets/fonts/k2d-2.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 100; + font-display: block; + src: url('/assets/fonts/k2d-3.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 100; + font-display: block; + src: url('/assets/fonts/k2d-4.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 200; + font-display: block; + src: url('/assets/fonts/k2d-5.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 200; + font-display: block; + src: url('/assets/fonts/k2d-6.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 200; + font-display: block; + src: url('/assets/fonts/k2d-7.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 200; + font-display: block; + src: url('/assets/fonts/k2d-8.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 300; + font-display: block; + src: url('/assets/fonts/k2d-9.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 300; + font-display: block; + src: url('/assets/fonts/k2d-10.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 300; + font-display: block; + src: url('/assets/fonts/k2d-11.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 300; + font-display: block; + src: url('/assets/fonts/k2d-12.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 400; + font-display: block; + src: url('/assets/fonts/k2d-13.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 400; + font-display: block; + src: url('/assets/fonts/k2d-14.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 400; + font-display: block; + src: url('/assets/fonts/k2d-15.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 400; + font-display: block; + src: url('/assets/fonts/k2d-16.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 500; + font-display: block; + src: url('/assets/fonts/k2d-17.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 500; + font-display: block; + src: url('/assets/fonts/k2d-18.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 500; + font-display: block; + src: url('/assets/fonts/k2d-19.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 500; + font-display: block; + src: url('/assets/fonts/k2d-20.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 600; + font-display: block; + src: url('/assets/fonts/k2d-21.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 600; + font-display: block; + src: url('/assets/fonts/k2d-22.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 600; + font-display: block; + src: url('/assets/fonts/k2d-23.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 600; + font-display: block; + src: url('/assets/fonts/k2d-24.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 700; + font-display: block; + src: url('/assets/fonts/k2d-25.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 700; + font-display: block; + src: url('/assets/fonts/k2d-26.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 700; + font-display: block; + src: url('/assets/fonts/k2d-27.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 700; + font-display: block; + src: url('/assets/fonts/k2d-28.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 800; + font-display: block; + src: url('/assets/fonts/k2d-29.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 800; + font-display: block; + src: url('/assets/fonts/k2d-30.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 800; + font-display: block; + src: url('/assets/fonts/k2d-31.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: italic; + font-weight: 800; + font-display: block; + src: url('/assets/fonts/k2d-32.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 100; + font-display: block; + src: url('/assets/fonts/k2d-33.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 100; + font-display: block; + src: url('/assets/fonts/k2d-34.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 100; + font-display: block; + src: url('/assets/fonts/k2d-35.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 100; + font-display: block; + src: url('/assets/fonts/k2d-36.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 200; + font-display: block; + src: url('/assets/fonts/k2d-37.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 200; + font-display: block; + src: url('/assets/fonts/k2d-38.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 200; + font-display: block; + src: url('/assets/fonts/k2d-39.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 200; + font-display: block; + src: url('/assets/fonts/k2d-40.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 300; + font-display: block; + src: url('/assets/fonts/k2d-41.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 300; + font-display: block; + src: url('/assets/fonts/k2d-42.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 300; + font-display: block; + src: url('/assets/fonts/k2d-43.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 300; + font-display: block; + src: url('/assets/fonts/k2d-44.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url('/assets/fonts/k2d-45.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url('/assets/fonts/k2d-46.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url('/assets/fonts/k2d-47.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url('/assets/fonts/k2d-48.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 500; + font-display: block; + src: url('/assets/fonts/k2d-49.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 500; + font-display: block; + src: url('/assets/fonts/k2d-50.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 500; + font-display: block; + src: url('/assets/fonts/k2d-51.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 500; + font-display: block; + src: url('/assets/fonts/k2d-52.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 600; + font-display: block; + src: url('/assets/fonts/k2d-53.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 600; + font-display: block; + src: url('/assets/fonts/k2d-54.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 600; + font-display: block; + src: url('/assets/fonts/k2d-55.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 600; + font-display: block; + src: url('/assets/fonts/k2d-56.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 700; + font-display: block; + src: url('/assets/fonts/k2d-57.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 700; + font-display: block; + src: url('/assets/fonts/k2d-58.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 700; + font-display: block; + src: url('/assets/fonts/k2d-59.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 700; + font-display: block; + src: url('/assets/fonts/k2d-60.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* thai */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 800; + font-display: block; + src: url('/assets/fonts/k2d-61.woff2') format('woff2'); + unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; +} + +/* vietnamese */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 800; + font-display: block; + src: url('/assets/fonts/k2d-62.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 800; + font-display: block; + src: url('/assets/fonts/k2d-63.woff2') format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'K2D'; + font-style: normal; + font-weight: 800; + font-display: block; + src: url('/assets/fonts/k2d-64.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Diolce'; + src: url('/assets/fonts/Diolce-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: block; +} |
