5585 lines
178 KiB
HTML
5585 lines
178 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0055)https://open-xz.wps.cn/pages/client/robot/custom-robot/ -->
|
||
<html lang="en-US" class=" "><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
|
||
<title>自定义机器人 | WPS协作开放平台</title>
|
||
|
||
<link rel="icon" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/favicon.ico">
|
||
<script nonce="4b9bc4f41501ca2b23731e7513ed5ad1">
|
||
if ( global === undefined ) {
|
||
var global = window ;
|
||
}
|
||
</script>
|
||
<script nonce="4b9bc4f41501ca2b23731e7513ed5ad1">
|
||
window.onload = function() {
|
||
document.addEventListener('touchstart', function(event) {
|
||
if (event.touches.length > 1) {
|
||
event.preventDefault()
|
||
}
|
||
})
|
||
document.addEventListener('gesturestart', function(event) {
|
||
event.preventDefault()
|
||
})
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<style type="text/css">.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}</style><script charset="utf-8" src="./自定义机器人 _ WPS协作开放平台_files/26.e4d520dc.js.下载"></script><script charset="utf-8" src="./自定义机器人 _ WPS协作开放平台_files/1.451dd8dd.js.下载"></script><script charset="utf-8" src="./自定义机器人 _ WPS协作开放平台_files/2.482357bb.js.下载"></script><script charset="utf-8" src="./自定义机器人 _ WPS协作开放平台_files/3.7bc7c3df.js.下载"></script><style data-id="immersive-translate-input-injected-css">.immersive-translate-input {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 2147483647;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.immersive-translate-attach-loading::after {
|
||
content: " ";
|
||
|
||
--loading-color: #f78fb6;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
display: block;
|
||
margin: 12px auto;
|
||
position: relative;
|
||
color: white;
|
||
left: -100px;
|
||
box-sizing: border-box;
|
||
animation: immersiveTranslateShadowRolling 1.5s linear infinite;
|
||
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-2000%, -50%);
|
||
z-index: 100;
|
||
}
|
||
|
||
.immersive-translate-loading-spinner {
|
||
vertical-align: middle !important;
|
||
width: 10px !important;
|
||
height: 10px !important;
|
||
display: inline-block !important;
|
||
margin: 0 4px !important;
|
||
border: 2px rgba(221, 244, 255, 0.6) solid !important;
|
||
border-top: 2px rgba(0, 0, 0, 0.375) solid !important;
|
||
border-left: 2px rgba(0, 0, 0, 0.375) solid !important;
|
||
border-radius: 50% !important;
|
||
padding: 0 !important;
|
||
-webkit-animation: immersive-translate-loading-animation 0.6s infinite linear !important;
|
||
animation: immersive-translate-loading-animation 0.6s infinite linear !important;
|
||
}
|
||
|
||
@-webkit-keyframes immersive-translate-loading-animation {
|
||
from {
|
||
-webkit-transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: rotate(359deg);
|
||
}
|
||
}
|
||
|
||
@keyframes immersive-translate-loading-animation {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(359deg);
|
||
}
|
||
}
|
||
|
||
.immersive-translate-input-loading {
|
||
--loading-color: #f78fb6;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
display: block;
|
||
margin: 12px auto;
|
||
position: relative;
|
||
color: white;
|
||
left: -100px;
|
||
box-sizing: border-box;
|
||
animation: immersiveTranslateShadowRolling 1.5s linear infinite;
|
||
}
|
||
|
||
@keyframes immersiveTranslateShadowRolling {
|
||
0% {
|
||
box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
|
||
0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
12% {
|
||
box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0),
|
||
0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
25% {
|
||
box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color),
|
||
0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
36% {
|
||
box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color),
|
||
100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
50% {
|
||
box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color),
|
||
110px 0 var(--loading-color), 100px 0 var(--loading-color);
|
||
}
|
||
|
||
62% {
|
||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color),
|
||
120px 0 var(--loading-color), 110px 0 var(--loading-color);
|
||
}
|
||
|
||
75% {
|
||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
|
||
130px 0 var(--loading-color), 120px 0 var(--loading-color);
|
||
}
|
||
|
||
87% {
|
||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
|
||
200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color);
|
||
}
|
||
|
||
100% {
|
||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
|
||
200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
}
|
||
|
||
.immersive-translate-toast {
|
||
display: flex;
|
||
position: fixed;
|
||
z-index: 2147483647;
|
||
left: 0;
|
||
right: 0;
|
||
top: 1%;
|
||
width: fit-content;
|
||
padding: 12px 20px;
|
||
margin: auto;
|
||
overflow: auto;
|
||
background: #fef6f9;
|
||
box-shadow: 0px 4px 10px 0px rgba(0, 10, 30, 0.06);
|
||
font-size: 15px;
|
||
border-radius: 8px;
|
||
color: #333;
|
||
}
|
||
|
||
.immersive-translate-toast-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.immersive-translate-toast-hidden {
|
||
margin: 0 20px 0 72px;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.immersive-translate-toast-close {
|
||
color: #666666;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
padding: 0 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.immersive-translate-toast {
|
||
top: 0;
|
||
padding: 12px 0px 0 10px;
|
||
}
|
||
.immersive-translate-toast-content {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
.immersive-translate-toast-hidden {
|
||
margin: 10px auto;
|
||
}
|
||
}
|
||
|
||
.immersive-translate-dialog {
|
||
position: fixed;
|
||
z-index: 2147483647;
|
||
left: 0;
|
||
top: 0;
|
||
display: flex;
|
||
width: 300px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 15px;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
height: fit-content;
|
||
border-radius: 20px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.immersive-translate-modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 2147483647;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: rgb(0, 0, 0);
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
font-size: 15px;
|
||
}
|
||
|
||
.immersive-translate-modal-content {
|
||
background-color: #fefefe;
|
||
margin: 10% auto;
|
||
padding: 40px 24px 24px;
|
||
border-radius: 12px;
|
||
width: 350px;
|
||
font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
|
||
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||
"Segoe UI Symbol", "Noto Color Emoji";
|
||
position: relative;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.immersive-translate-modal-content {
|
||
margin: 25% auto !important;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 480px) {
|
||
.immersive-translate-modal-content {
|
||
width: 80vw !important;
|
||
margin: 20vh auto !important;
|
||
padding: 20px 12px 12px !important;
|
||
}
|
||
|
||
.immersive-translate-modal-title {
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
.immersive-translate-modal-body {
|
||
font-size: 13px !important;
|
||
max-height: 60vh !important;
|
||
}
|
||
|
||
.immersive-translate-btn {
|
||
font-size: 13px !important;
|
||
padding: 8px 16px !important;
|
||
margin: 0 4px !important;
|
||
}
|
||
|
||
.immersive-translate-modal-footer {
|
||
gap: 6px !important;
|
||
margin-top: 16px !important;
|
||
}
|
||
}
|
||
|
||
.immersive-translate-modal .immersive-translate-modal-content-in-input {
|
||
max-width: 500px;
|
||
}
|
||
.immersive-translate-modal-content-in-input .immersive-translate-modal-body {
|
||
text-align: left;
|
||
max-height: unset;
|
||
}
|
||
|
||
.immersive-translate-modal-title {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
|
||
.immersive-translate-modal-body {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-top: 24px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.immersive-translate-modal-body {
|
||
max-height: 250px;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
|
||
.immersive-translate-close {
|
||
color: #666666;
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 16px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.immersive-translate-close:hover,
|
||
.immersive-translate-close:focus {
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.immersive-translate-modal-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.immersive-translate-btn {
|
||
width: fit-content;
|
||
color: #fff;
|
||
background-color: #ea4c89;
|
||
border: none;
|
||
font-size: 14px;
|
||
margin: 0 8px;
|
||
padding: 9px 30px;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.immersive-translate-btn-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.immersive-translate-btn:hover {
|
||
background-color: #f082ac;
|
||
}
|
||
.immersive-translate-btn:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
.immersive-translate-btn:disabled:hover {
|
||
background-color: #ea4c89;
|
||
}
|
||
|
||
.immersive-translate-link-btn {
|
||
background-color: transparent;
|
||
color: #ea4c89;
|
||
border: none;
|
||
cursor: pointer;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.immersive-translate-cancel-btn {
|
||
/* gray color */
|
||
background-color: rgb(89, 107, 120);
|
||
}
|
||
|
||
.immersive-translate-cancel-btn:hover {
|
||
background-color: hsl(205, 20%, 32%);
|
||
}
|
||
|
||
.immersive-translate-action-btn {
|
||
background-color: transparent;
|
||
color: #ea4c89;
|
||
border: 1px solid #ea4c89;
|
||
}
|
||
|
||
.immersive-translate-btn svg {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.immersive-translate-link {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
-webkit-user-drag: none;
|
||
text-decoration: none;
|
||
color: #ea4c89;
|
||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.immersive-translate-primary-link {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
-webkit-user-drag: none;
|
||
text-decoration: none;
|
||
color: #ea4c89;
|
||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.immersive-translate-modal input[type="radio"] {
|
||
margin: 0 6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.immersive-translate-modal label {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.immersive-translate-close-action {
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 0px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-image-status {
|
||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
border-radius: 16px !important;
|
||
}
|
||
.imt-image-status img,
|
||
.imt-image-status svg,
|
||
.imt-img-loading {
|
||
width: 28px !important;
|
||
height: 28px !important;
|
||
margin: 0 0 8px 0 !important;
|
||
min-height: 28px !important;
|
||
min-width: 28px !important;
|
||
position: relative !important;
|
||
}
|
||
.imt-img-loading {
|
||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////oK74hAAAAPHRSTlMABBMIDyQXHwyBfFdDMSw+OjXCb+5RG51IvV/k0rOqlGRM6KKMhdvNyZBz9MaupmxpWyj437iYd/yJVNZeuUC7AAACt0lEQVRIx53T2XKiUBCA4QYOiyCbiAsuuGBcYtxiYtT3f6/pbqoYHVFO5r+iivpo6DpAWYpqeoFfr9f90DsYAuRSWkFnPO50OgR9PwiCUFcl2GEcx+N/YBh6pvKaefHlUgZd1zVe0NbYcQjGBfzrPE8Xz8aF+71D8gG6DHFPpc4a7xFiCDuhaWgKgGIJQ3d5IMGDrpS4S5KgpIm+en9f6PlAhKby4JwEIxlYJV9h5k5nee9GoxHJ2IDSNB0dwdad1NAxDJ/uXDHYmebdk4PdbkS58CIVHdYSUHTYYRWOJblWSyu2lmy3KNFVJNBhxcuGW4YBVCbYGRZwIooipHsNqjM4FbgOQqQqSKQQU9V8xmi1QlgHqQQ6DDBvRUVCDirs+EzGDGOQTCATgtYTnbCVLgsVgRE0T1QE0qHCFAht2z6dLvJQs3Lo2FQoDxWNUiBhaP4eRgwNkI+dAjVOA/kUrIDwf3CG8NfNOE0eiFotSuo+rBiq8tD9oY4Qzc6YJw99hl1wzpQvD7ef2M8QgnOGJfJw+EltQc+oX2yn907QB22WZcvlUpd143dqQu+8pCJZuGE4xCuPXJqqcs5sNpsI93Rmzym1k4Npk+oD1SH3/a3LOK/JpUBpWfqNySxWzCfNCUITuDG5dtuphrUJ1myeIE9bIsPiKrfqTai5WZxbhtNphYx6GEIHihyGFTI69lje/rxajdh0s0msZ0zYxyPLhYCb1CyHm9Qsd2H37Y3lugVwL9kNh8Ot8cha6fUNQ8nuXi5z9/ExsAO4zQrb/ev1yrCB7lGyQzgYDGuxq1toDN/JGvN+HyWNHKB7zEoK+PX11e12G431erGYzwmytAWU56fkMHY5JJnDRR2eZji3AwtIcrEV8Cojat/BdQ7XOwGV1e1hDjGGjXbdArm8uJZtCH5MbcctVX8A1WpqumJHwckAAAAASUVORK5CYII=");
|
||
background-size: 28px 28px;
|
||
animation: image-loading-rotate 1s linear infinite !important;
|
||
}
|
||
|
||
.imt-image-status span {
|
||
color: var(--bg-2, #fff) !important;
|
||
font-size: 14px !important;
|
||
line-height: 14px !important;
|
||
font-weight: 500 !important;
|
||
font-family: "PingFang SC", Arial, sans-serif !important;
|
||
}
|
||
|
||
.imt-primary-button {
|
||
display: flex;
|
||
padding: 12px 80px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-radius: 8px;
|
||
background: #ea4c89;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
line-height: 24px;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-retry-text {
|
||
color: #999;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 21px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-action-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.imt-modal-content-text {
|
||
text-align: left;
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
line-height: 24px;
|
||
}
|
||
|
||
@keyframes image-loading-rotate {
|
||
from {
|
||
transform: rotate(360deg);
|
||
}
|
||
to {
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
.imt-linear-gradient-text {
|
||
background: linear-gradient(90deg, #00a6ff 0%, #c369ff 52.4%, #ff4590 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.imt-flex-center {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.imt-linear-black-btn {
|
||
border-radius: 50px;
|
||
background: linear-gradient(66deg, #222 19%, #696969 94.25%);
|
||
height: 48px;
|
||
width: 100%;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
justify-content: center;
|
||
}
|
||
</style><script charset="utf-8" src="./自定义机器人 _ WPS协作开放平台_files/123.f1badad7.js.下载"></script><meta name="description" content="WPS协作开放平台"><meta name="viewport" conetent="width=device-width,initial-scale=1,user-scalable=no"><meta name="renderer" conetent="webkit"><meta http-equiv="X-UA-Compatible" conetent="IE=edge, chrome=1"><meta name="keywords" conetent="WPS协作, WPS协作平台, WPS协作开放平台, 开放能力, WPS协作生态体系"></head>
|
||
<body>
|
||
<div id="app"><div data-v-50b0ec12="" class="theme-container"><div data-v-f95e7406="" data-v-50b0ec12="" id="header" class=""><div data-v-2c291465="" data-v-f95e7406="" class="full-wrap header-wrap"><div data-v-2c291465="" class="full-content-wrap"><div data-v-f95e7406="" data-v-2c291465="" class="header-content"><a data-v-f95e7406="" href="https://open-xz.wps.cn/" class="logo-wrap router-link-active" data-v-2c291465=""><img data-v-f95e7406="" src="./自定义机器人 _ WPS协作开放平台_files/logo.png" class="logo"> <span data-v-f95e7406="">WPS协作开放平台</span></a> <div data-v-f95e7406="" data-v-2c291465="" class="sidebar-menu"><ul data-v-f95e7406="" role="menubar" class="el-menu--horizontal el-menu" data-v-2c291465=""><li data-v-f95e7406="" role="menuitem" tabindex="0" class="el-menu-item" style="border-bottom-color: transparent;">能力中心</li> <li data-v-f95e7406="" role="menuitem" tabindex="0" class="el-menu-item" style="border-bottom-color: transparent;">生态伙伴</li> <li data-v-f95e7406="" role="menuitem" tabindex="0" class="el-menu-item is-active">开发文档</li></ul></div> <div data-v-f95e7406="" data-v-2c291465="" class="sidebar-menu"><ul data-v-f95e7406="" role="menubar" class="el-menu--horizontal el-menu" data-v-2c291465=""><li data-v-f95e7406="" role="menuitem" aria-haspopup="true" class="el-submenu" tabindex="0"><div class="el-submenu__title" style="border-bottom-color: transparent;">管理后台<i class="el-submenu__icon-arrow el-icon-arrow-down"></i></div><div class="el-menu--horizontal sidebar-menu-subtitle" style="display: none;"><ul role="menu" class="el-menu el-menu--popup el-menu--popup-bottom-start"> <li data-v-f95e7406="" role="menuitem" tabindex="-1" class="el-menu-item admin">
|
||
开发者后台
|
||
</li><li data-v-f95e7406="" role="menuitem" tabindex="-1" class="el-menu-item admin">
|
||
ISV认证
|
||
</li></ul></div></li> <li data-v-f95e7406="" role="menuitem" aria-haspopup="true" class="el-submenu"><div class="el-submenu__title" style="border-bottom-color: transparent;"><img data-v-f95e7406="" src="./自定义机器人 _ WPS协作开放平台_files/66668e2fc00bdf65" class="avtar"> <span data-v-f95e7406="" class="el-tooltip username" aria-describedby="el-tooltip-3930" tabindex="0">揭英飙</span><i class="el-submenu__icon-arrow el-icon-arrow-down"></i></div><div class="el-menu--horizontal sidebar-menu-subtitle" style="display: none;"><ul role="menu" class="el-menu el-menu--popup el-menu--popup-bottom-start"> <li data-v-f95e7406="" role="menuitem" aria-haspopup="true" class="switch-corp el-submenu"><div class="el-submenu__title" style="border-bottom-color: transparent;">切换身份<i class="el-submenu__icon-arrow el-icon-arrow-right"></i></div><div class="el-menu--horizontal" style="display: none;"><ul role="menu" class="el-menu el-menu--popup el-menu--popup-right-start"> <li data-v-f95e7406="" role="menuitem" tabindex="-1" class="el-menu-item active-corp">
|
||
西山居
|
||
</li></ul></div></li> <li data-v-f95e7406="" role="menuitem" tabindex="-1" class="el-menu-item admin"> 退出登录 </li></ul></div></li></ul></div></div></div></div> <div data-v-f95e7406="" class="gpu-on"></div></div> <main data-v-50b0ec12="" class="main"><div data-v-ec5e855c="" data-v-50b0ec12="" class="develop-docs"><div data-v-2c291465="" data-v-ec5e855c="" class="full-wrap sticky-header" style="background: rgb(255, 255, 255);"><div data-v-2c291465="" class="full-content-wrap"><div data-v-ec5e855c="" data-v-2c291465="" class="header-tabs"><div data-v-ec5e855c="" class="el-select app-type-filter el-select--small" data-v-2c291465=""><!----><div class="el-input el-input--small el-input--suffix"><!----><input type="text" readonly="readonly" autocomplete="off" placeholder="请选择" class="el-input__inner"><!----><span class="el-input__suffix"><span class="el-input__suffix-inner"><i class="el-select__caret el-input__icon el-icon-arrow-up"></i><!----><!----><!----><!----><!----></span><!----></span><!----><!----></div><div class="el-select-dropdown el-popper" style="display: none; min-width: 150px;"><div class="el-scrollbar" style=""><div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -6px; margin-right: -6px;"><ul class="el-scrollbar__view el-select-dropdown__list"><!----><li data-v-ec5e855c="" class="el-select-dropdown__item selected"><span>企业应用</span></li><li data-v-ec5e855c="" class="el-select-dropdown__item"><span>协作中台</span></li></ul></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div></div></div><!----></div></div> <a data-v-ec5e855c="" href="https://open-xz.wps.cn/pages/start/app-introduce/" class="tab-item" data-v-2c291465="">
|
||
快速入门
|
||
</a><a data-v-ec5e855c="" href="https://open-xz.wps.cn/pages/server/start/notice/" class="tab-item" data-v-2c291465="">
|
||
服务端
|
||
</a><a data-v-ec5e855c="" href="https://open-xz.wps.cn/pages/client/web-apps/JSAPI-introduce/" class="tab-item is-active" data-v-2c291465="">
|
||
客户端
|
||
</a><a data-v-ec5e855c="" href="https://open-xz.wps.cn/pages/general/app-login/Web-app-login/login-process/" class="tab-item" data-v-2c291465="">
|
||
通用能力
|
||
</a><a data-v-ec5e855c="" href="https://open-xz.wps.cn/pages/develop-guide/self-built-app/develop-process/" class="tab-item" data-v-2c291465="">
|
||
开发指南
|
||
</a><a data-v-ec5e855c="" href="https://open-xz.wps.cn/pages/isv/shelves/release-guide/" class="tab-item" data-v-2c291465="">
|
||
服务商指南
|
||
</a> <div data-v-364e1eca="" data-v-ec5e855c="" class="search-box search-box" data-v-2c291465=""><input data-v-364e1eca="" aria-label="Search" autocomplete="off" spellcheck="false" class="" placeholder=""> <!----></div></div></div></div> <div data-v-2c291465="" data-v-ec5e855c="" class="full-wrap doc-wrap"><div data-v-2c291465="" class="full-content-wrap"><div data-v-ec5e855c="" data-v-2c291465="" class="left-menu"><ul data-v-ec5e855c="" role="menubar" class="el-menu" data-v-2c291465=""><div data-v-0d62cde1="" data-v-ec5e855c="" class="docs-menu"><li data-v-0d62cde1="" role="menuitem" aria-haspopup="true" class="el-submenu title-0"><div class="el-submenu__title" style="padding-left: 20px;"><i data-v-0d62cde1="" class="el-icon-arrow-right"></i>网页应用 <i class="el-submenu__icon-arrow el-icon-arrow-down"></i></div><ul role="menu" class="el-menu el-menu--inline" style="display: none;"> <div data-v-0d62cde1="" class="docs-menu menu-item"><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-1" style="padding-left: 40px;">
|
||
JSAPI 概述
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-1" style="padding-left: 40px;">
|
||
JSAPI 鉴权流程
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-1" style="padding-left: 40px;">
|
||
JSAPI用户授权
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-1" style="padding-left: 40px;">
|
||
JSAPI 总览
|
||
</li><li data-v-0d62cde1="" role="menuitem" aria-haspopup="true" class="el-submenu title-1"><div class="el-submenu__title" style="padding-left: 40px;"><i data-v-0d62cde1="" class="el-icon-arrow-right"></i>JSAPI详细内容 <i class="el-submenu__icon-arrow el-icon-arrow-down"></i></div><ul role="menu" class="el-menu el-menu--inline" style="display: none;"> <div data-v-0d62cde1="" class="docs-menu menu-item"><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
设备
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
导航栏
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
通讯录
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
业务
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
地理位置
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
Wi-Fi
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
图片
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
视频
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
文件
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
打开新页面
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
旋转界面
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
弹窗
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
页面事件监听
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
运动与健康
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-2" style="padding-left: 60px;">
|
||
蓝牙
|
||
</li></div></ul></li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-1" style="padding-left: 40px;">
|
||
错误码说明
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-1" style="padding-left: 40px;">
|
||
WPS协作 Deeplink 协议
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-1" style="padding-left: 40px;">
|
||
网页开放能力
|
||
</li></div></ul></li><li data-v-0d62cde1="" role="menuitem" aria-haspopup="true" class="el-submenu is-active is-opened title-0" aria-expanded="true"><div class="el-submenu__title" style="padding-left: 20px;"><i data-v-0d62cde1="" class="el-icon-arrow-right"></i>机器人 <i class="el-submenu__icon-arrow el-icon-arrow-down"></i></div><ul role="menu" class="el-menu el-menu--inline" data-old-padding-top="" data-old-padding-bottom="" data-old-overflow="" style=""> <div data-v-0d62cde1="" class="docs-menu menu-item"><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-1" style="padding-left: 40px;">
|
||
值班机器人
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item is-active title-1" style="padding-left: 40px;">
|
||
自定义机器人
|
||
</li><li data-v-0d62cde1="" role="menuitem" tabindex="-1" class="el-menu-item title-1" style="padding-left: 40px;">
|
||
自建应用机器人
|
||
</li></div></ul></li></div></ul></div> <div data-v-ec5e855c="" data-v-2c291465="" class="doc-content"><!----> <div data-v-72337836="" data-v-ec5e855c="" class="right-menu-wrapper right-menu-inner" data-v-2c291465=""><div data-v-72337836="" class="right-menu-margin"><div data-v-ec5e855c="" data-v-72337836="" class="inner-menu_top">本文内容</div> <div data-v-72337836="" class="right-menu-content"><div data-v-72337836="" class="right-menu-item level0"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b71005b8" class="text-over">
|
||
自定义机器人使用指南
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#f4cbe959" class="text-over">
|
||
自定义机器人添加入口
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#d8e8fd63" class="text-over">
|
||
如何使用自定义机器人
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#fb0fc453" class="text-over">
|
||
文本类型
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8851fbab" class="text-over">
|
||
参数说明
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#bd170557" class="text-over">
|
||
代码示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b00def17" class="text-over">
|
||
展示示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#43cf76f7" class="text-over">
|
||
Markdown 类型
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8851fbab-2" class="text-over">
|
||
参数说明
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#bd170557-2" class="text-over">
|
||
代码示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b00def17-2" class="text-over">
|
||
展示示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#808929d9" class="text-over">
|
||
链接类型
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8851fbab-3" class="text-over">
|
||
参数说明
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#bd170557-3" class="text-over">
|
||
代码示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b00def17-3" class="text-over">
|
||
展示示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8b1556b9" class="text-over">
|
||
卡片类型
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8851fbab-4" class="text-over">
|
||
参数说明
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#bd170557-4" class="text-over">
|
||
代码示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b00def17-4" class="text-over">
|
||
展示示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#337f84a5" class="text-over">
|
||
自定义机器人添加 callback
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#9353188e" class="text-over">
|
||
机器人添加 callback
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#49e65652" class="text-over">
|
||
callback 可用性校验
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#fc4fa5a5" class="text-over">
|
||
callback 发送消息
|
||
</a></div><div data-v-72337836="" class="right-menu-item level3"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#99fb7c62" class="text-over">
|
||
请求参数
|
||
</a></div><div data-v-72337836="" class="right-menu-item level3"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8a29b6c4" class="text-over">
|
||
请求参数示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level3"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#4d5e22fe" class="text-over">
|
||
返回结果示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#d3b1b09c" class="text-over">
|
||
自定义机器人安全设置
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#1f7a8e77" class="text-over">
|
||
自定义关键词
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#2e8eb2c8" class="text-over">
|
||
IP 白名单
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#65b6bbee" class="text-over">
|
||
签名校验
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#32e95f58" class="text-over">
|
||
特权用户设置
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#a78e802b" class="text-over">
|
||
完整 HTTP 实例
|
||
</a></div></div></div></div> <div data-v-ec5e855c="" class="content__default" data-v-2c291465=""><h1 id="b71005b8">自定义机器人使用指南</h1> <h2 id="f4cbe959">自定义机器人添加入口</h2> <ol><li>在群聊中点击右上角的「···」图标，点击群机器人；</li> <li>点击添加 webhook 机器人；</li> <li>填写机器人名称和简介，即可添加自定义机器人到群聊中。</li></ol> <p><img src="./自定义机器人 _ WPS协作开放平台_files/WOA20211207-142212.ea220b.png" alt="WOA20211207-142212" class="medium-zoom-image"></p> <div style="text-align: center;">（图1：自定义机器人添加入口）</div> <br> <h2 id="d8e8fd63">如何使用自定义机器人</h2> <ol><li>在终端某个群组添加机器人之后，可以获取到 webhook 地址，然后开发者用户按以下说明构造 post data 向这个地址发起 HTTP POST 请求，即可实现给该群组发送消息</li> <li>webhook 格式是：https://xz.wps.cn/api/v1/webhook/send?key=xxxxxxx</li> <li><strong>特别特别要注意</strong>：一定要保护好机器人的 webhook 地址，避免泄漏！不要分享到 github、博客等可被公开查阅的地方，否则坏人就可以用你的机器人来发垃圾消息了</li></ol> <p>相关限制</p> <ol><li>消息发送频率限制：每个机器人发送的消息不能超过 20 条/分钟</li> <li>消息内容阈值：每条消息不超过 5000 个字符</li></ol> <br> <h2 id="fb0fc453">文本类型</h2> <h3 id="8851fbab">参数说明</h3> <table><thead><tr><th style="text-align: left;">参数</th> <th style="text-align: center;">是否必填</th> <th>说明</th></tr></thead> <tbody><tr><td style="text-align: left;">msgtype</td> <td style="text-align: center;">是</td> <td>消息类型。text-表示文本类型</td></tr> <tr><td style="text-align: left;">text</td> <td style="text-align: center;">是</td> <td>文本消息</td></tr> <tr><td style="text-align: left;"> ∟ content</td> <td style="text-align: center;">是</td> <td>消息内容</td></tr></tbody></table> <p>支持通过在消息体 content 中插入<at>标签的方式@人，如果不填写姓名，则服务端将自动填充姓名至@人位置：</p> <ul><li>使用 id@人：<at user_id="12345">姓名</at></li> <li>使用 email@人：<at email="<a href="mailto:somebody@wps.cn">somebody@wps.cn</a>">姓名</at></li> <li>@所有人：<at user_id="-1">所有人</at></li></ul> <h3 id="bd170557">代码示例</h3> <div class="language- extra-class"><pre class="language-text"><code>{
|
||
"msgtype":"text",
|
||
"text":{
|
||
"content":"每日数据监控报告：\n今日数据统计结果请相关同事注意<at user_id=\"17856\">李三</at><at user_id=\"-1\">所有人</at>"
|
||
}
|
||
}
|
||
</code></pre></div><h3 id="b00def17">展示示例</h3> <p><img src="./自定义机器人 _ WPS协作开放平台_files/WOA20211207-140051.1f5dc7.png" alt="WOA20211207-140051" class="medium-zoom-image"></p> <div style="text-align: center;">（图2：文本消息示例）</div> <br> <h2 id="43cf76f7">Markdown 类型</h2> <h3 id="8851fbab-2">参数说明</h3> <table><thead><tr><th style="text-align: left;">参数</th> <th style="text-align: center;">是否必填</th> <th>说明</th></tr></thead> <tbody><tr><td style="text-align: left;">msgtype</td> <td style="text-align: center;">是</td> <td>消息类型</td></tr> <tr><td style="text-align: left;">markdown</td> <td style="text-align: center;">是</td> <td>markdown 消息</td></tr> <tr><td style="text-align: left;"> ∟ text</td> <td style="text-align: center;">是</td> <td>消息内容</td></tr></tbody></table> <h3 id="bd170557-2">代码示例</h3> <div class="language- extra-class"><pre class="language-text"><code>{
|
||
"msgtype": "markdown",
|
||
"markdown": {
|
||
"text":"## KAE监控报警\n\n报警内容：网关入口\n\n> 备注：严重程度中等"
|
||
}
|
||
}
|
||
</code></pre></div><h3 id="b00def17-2">展示示例</h3> <p><img src="./自定义机器人 _ WPS协作开放平台_files/WOA20211207-140209.8ccecb.png" alt="WOA20211207-140209" class="medium-zoom-image"></p> <div style="text-align: center;">（图3：Markdown消息示例）</div> <br> <p>说明：目前只支持 md 语法的子集，具体支持的元素如下（换行可以使用“双空格+\n”或“\n\n”方式），不同语法之间的组合（颜色+标题等）。</p> <table><thead><tr><th style="text-align: center;">名称</th> <th>语法</th> <th>说明</th></tr></thead> <tbody><tr><td style="text-align: center;">@人</td> <td>使用 id@人：<at user_id="12345">姓名</at> <br> 使用 email@人：<at email="somebody@wps.cn">姓名</at> <br> @所有人：<at user_id="-1">所有人</at></td> <td>/</td></tr> <tr><td style="text-align: center;">标题</td> <td># 一级标题<br>## 二级标题<br>### 三级标题<br>#### 四级标题<br>##### 五级标题<br>###### 六级标题</td> <td>/</td></tr> <tr><td style="text-align: center;">引用</td> <td>> 引用内容</td> <td>/</td></tr> <tr><td style="text-align: center;">加粗</td> <td>**加粗**</td> <td>如移动端显示有问题可尝试在后面加空格</td></tr> <tr><td style="text-align: center;">颜色</td> <td><font color='#FF0000'>颜色</font><br><font color='red'>颜色</font></td> <td>支持使用十六进制颜色值或对应颜色的英文表示</td></tr> <tr><td style="text-align: center;">斜体</td> <td>*斜体* <br> _斜体_</td> <td>/</td></tr> <tr><td style="text-align: center;">删除线</td> <td>~~删除线~~</td> <td>/</td></tr> <tr><td style="text-align: center;">链接</td> <td><链接地址> <br> [链接名称](链接地址)</td> <td>/</td></tr> <tr><td style="text-align: center;"><span style="white-space: nowrap;">有序列表</span></td> <td>1. 内容 1 <br> 2. 内容 2</td> <td>/</td></tr> <tr><td style="text-align: center;">无序列表</td> <td>- 内容 1 <br> - 内容 2</td> <td>/</td></tr> <tr><td style="text-align: center;">图片</td> <td></td> <td>/</td></tr></tbody></table> <br> <h2 id="808929d9">链接类型</h2> <h3 id="8851fbab-3">参数说明</h3> <table><thead><tr><th style="text-align: center;">参数</th> <th style="text-align: center;">是否必填</th> <th>说明</th></tr></thead> <tbody><tr><td style="text-align: center;">msgtype</td> <td style="text-align: center;">是</td> <td>消息类型。link-表示链接类型</td></tr> <tr><td style="text-align: center;">title</td> <td style="text-align: center;">是</td> <td>标题内容</td></tr> <tr><td style="text-align: center;">text</td> <td style="text-align: center;">是</td> <td>markdown 格式的消息。换行可以使用“双空格+\n”或“\n\n”方式。</td></tr> <tr><td style="text-align: center;">messageUrl</td> <td style="text-align: center;">否</td> <td>跳转 url</td></tr> <tr><td style="text-align: center;">btnTitle</td> <td style="text-align: center;">否</td> <td>按钮标题，默认为“查看详情”，长度限制 12 个字符</td></tr></tbody></table> <h3 id="bd170557-3">代码示例</h3> <div class="language- extra-class"><pre class="language-text"><code>{
|
||
"msgtype": "link",
|
||
"link": {
|
||
"title": "日程提醒",
|
||
"text": "需求评审会将于15分钟后开始↵2F-201会议室",
|
||
"messageUrl": "https://kdocs.cn",
|
||
"btnTitle": "查看详情"
|
||
}
|
||
}
|
||
</code></pre></div><h3 id="b00def17-3">展示示例</h3> <p><img src="./自定义机器人 _ WPS协作开放平台_files/WOA20211207-140255.ac7b07.png" alt="WOA20211207-140255" class="medium-zoom-image"></p> <div style="text-align: center;">（图4：链接消息示例）</div> <br> <h2 id="8b1556b9">卡片类型</h2> <h3 id="8851fbab-4">参数说明</h3> <table><thead><tr><th style="text-align: left;">参数</th> <th style="text-align: center;">是否必填</th> <th>说明</th></tr></thead> <tbody><tr><td style="text-align: left;">msgtype</td> <td style="text-align: center;">是</td> <td>消息类型。card-表示卡片类型</td></tr> <tr><td style="text-align: left;">card</td> <td style="text-align: center;">是</td> <td>卡片消息，具体内容见<a href="https://open-xz.wps.cn/pages/develop-guide/card/structure/" class="">搭建卡片消息</a>，备注：目前 webhook 不支持回传型交互组件， 包括回传型按钮、列表选择器、日期选择器、输入框</td></tr></tbody></table> <h3 id="bd170557-4">代码示例</h3> <div class="language- extra-class"><pre class="language-text"><code>{
|
||
"msgtype":"card",
|
||
"card":{
|
||
"header":{
|
||
"title":{
|
||
"tag":"text",
|
||
"content":{
|
||
"type":"plainText",
|
||
"text":"标题"
|
||
}
|
||
},
|
||
"subtitle":{
|
||
"tag":"text",
|
||
"content":{
|
||
"type":"plainText",
|
||
"text":"副标题"
|
||
}
|
||
}
|
||
},
|
||
"elements":[
|
||
{
|
||
"tag":"text",
|
||
"content":{
|
||
"type":"markdown",
|
||
"text":"普通文本"
|
||
}
|
||
}
|
||
],
|
||
"i18n":{
|
||
"zh-TW":{
|
||
"header":{
|
||
"title":{
|
||
"tag":"text",
|
||
"content":{
|
||
"type":"plainText",
|
||
"text":"標題"
|
||
}
|
||
},
|
||
"subtitle":{
|
||
"tag":"text",
|
||
"content":{
|
||
"type":"plainText",
|
||
"text":"副標題"
|
||
}
|
||
}
|
||
},
|
||
"elements":[
|
||
{
|
||
"tag":"text",
|
||
"content":{
|
||
"type":"markdown",
|
||
"text":"普通文本"
|
||
}
|
||
}
|
||
]
|
||
},
|
||
"en-US":{
|
||
"header":{
|
||
"title":{
|
||
"tag":"text",
|
||
"content":{
|
||
"type":"plainText",
|
||
"text":"title"
|
||
}
|
||
},
|
||
"subtitle":{
|
||
"tag":"text",
|
||
"content":{
|
||
"type":"plainText",
|
||
"text":"sub title"
|
||
}
|
||
}
|
||
},
|
||
"elements":[
|
||
{
|
||
"tag":"text",
|
||
"content":{
|
||
"type":"markdown",
|
||
"text":"common text"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</code></pre></div><h3 id="b00def17-4">展示示例</h3> <p><img src="./自定义机器人 _ WPS协作开放平台_files/WOA20231219-155646.d6ef58.png" alt="WOA20231219-155646" class="medium-zoom-image"></p> <div style="text-align: center;">（图5：卡片消息示例）</div> <br> <h2 id="337f84a5">自定义机器人添加 callback</h2> <h3 id="9353188e">机器人添加 callback</h3> <p><img src="./自定义机器人 _ WPS协作开放平台_files/WOA20211207-140336.8eb26a.png" alt="WOA20211207-140336" class="medium-zoom-image"></p> <div style="text-align: center;">（图5：机器人添加callback）</div> <br> <h3 id="49e65652">callback 可用性校验</h3> <p>创建者在输入框中输入 url，点击保存。服务端会对该地址进行一次 GET 请求，例如：</p> <p>[GET] https://xz.wps.cn/api/v1/test</p> <p>第三方收到请求后返回以下 response 数据即可：</p> <div class="language- extra-class"><pre class="language-text"><code>{"result":"ok"}
|
||
</code></pre></div><p>即代表该请求可用。</p> <h3 id="fc4fa5a5">callback 发送消息</h3> <p>当群聊中用户 at 创建者所配置的 webhook 机器人时，服务端会把该条 at 消息通过 POST 请求发送给第三方，例如：</p> <p>[POST] https://xz.wps.cn/api/v1/test</p> <h4 id="99fb7c62">请求参数</h4> <table><thead><tr><th style="text-align: center;">参数</th> <th style="text-align: center;">类型</th> <th style="text-align: center;">位置</th> <th>说明</th></tr></thead> <tbody><tr><td style="text-align: center;">chatid</td> <td style="text-align: center;">int64</td> <td style="text-align: center;">body</td> <td>会话 id</td></tr> <tr><td style="text-align: center;">creator</td> <td style="text-align: center;">int64</td> <td style="text-align: center;">body</td> <td>发送者 id</td></tr> <tr><td style="text-align: center;">content</td> <td style="text-align: center;">string</td> <td style="text-align: center;">body</td> <td>内容</td></tr> <tr><td style="text-align: center;">reply</td> <td style="text-align: center;">object</td> <td style="text-align: center;">body</td> <td>回复内容</td></tr> <tr><td style="text-align: center;">robot_key</td> <td style="text-align: center;">string</td> <td style="text-align: center;">body</td> <td>机器人 key</td></tr> <tr><td style="text-align: center;">url</td> <td style="text-align: center;">string</td> <td style="text-align: center;">body</td> <td>callback 地址创建者所填的 url 地址</td></tr> <tr><td style="text-align: center;">ctime</td> <td style="text-align: center;">int64</td> <td style="text-align: center;">body</td> <td>发送时间</td></tr></tbody></table> <table><thead><tr><th style="text-align: center;">参数 reply</th> <th style="text-align: center;">类型</th> <th style="text-align: center;">位置</th> <th style="text-align: center;">说明</th></tr></thead> <tbody><tr><td style="text-align: center;">reply_content</td> <td style="text-align: center;">string</td> <td style="text-align: center;">body</td> <td style="text-align: center;">回复内容</td></tr> <tr><td style="text-align: center;">reply_creator</td> <td style="text-align: center;">int64</td> <td style="text-align: center;">body</td> <td style="text-align: center;">回复消息发送者 id</td></tr></tbody></table> <h4 id="8a29b6c4">请求参数示例</h4> <div class="language- extra-class"><pre class="language-text"><code>{
|
||
"chatid": 12345,
|
||
"creator": 2324234,
|
||
"content": "@webhook机器人 111",
|
||
"reply": {
|
||
"reply_content": "回复内容",
|
||
"reply_creator": 1234
|
||
},
|
||
"robot_key": "xxx",
|
||
"url": "https://xxxx",
|
||
"ctime": 3452452
|
||
}
|
||
</code></pre></div><h4 id="4d5e22fe">返回结果示例</h4> <div class="language- extra-class"><pre class="language-text"><code>{"result":"ok"}
|
||
</code></pre></div><br> <h2 id="d3b1b09c">自定义机器人安全设置</h2> <p>如果开发者未保管好 webhook 地址，可能存在地址泄漏后被恶意用来发送垃圾信息的风险，建议开发者至少选择配置一个安全设置。</p> <h3 id="1f7a8e77">自定义关键词</h3> <p>设置后，发送的消息需包含至少一个关键词，最多设置 10 个关键词。</p> <p>示例：设置了关键词：报警、告警后，通过 webhook 机器人发送的消息需带有至少一个关键词，才可以发送成功。</p> <h3 id="2e8eb2c8">IP 白名单</h3> <p>设置后，只处理来自 IP 白名单地址范围内的请求，最多设置 10 个 IP 地址/地址段，如：192.168.1.1 或 192.168.1.1/24 或 192.168.1.*。</p> <h3 id="65b6bbee">签名校验</h3> <p>设置后，发送请求时需要签名验证来保障信息来源可信。</p> <ul><li>用户可以在 HTTP Header 中包含签名 （Authorization）。</li> <li>签名头 （Authorization）验证码计算方法如下：Authorization:" key + ":" + sha1( secret_key + Content-Md5 + Content-Type + DATE)。</li></ul> <p>注意: HTTP Header 中必须包含以下字段</p> <ul><li>Content-Md5 HTTP Body 中数据的 md5 值十六进制表达方式, 必需小写。</li> <li>Content-Type 目前固定为: application/json。</li> <li>DATE 取当前时间, 格式: Wed, 23 Jan 2013 06:43:08 GMT,签名默认有效时间为 15 分钟。</li> <li>Authorization 上面所说的签名头。</li></ul> <h3 id="32e95f58">特权用户设置</h3> <p>设置后，只有群主、管理员和 webhook 机器人的添加者，可以编辑或移除此机器人。</p> <p><img src="./自定义机器人 _ WPS协作开放平台_files/WOA20220113-210131.0762ba.png" alt="WOA20211207-140412" class="medium-zoom-image"></p> <div style="text-align: center;">（图6：自定义机器人安全设置）</div> <br> <h3 id="a78e802b">完整 HTTP 实例</h3> <p>Header</p> <div class="language- extra-class"><pre class="language-text"><code>POST https://xz.wps.cn/api/v1/webhook/send
|
||
Content-Md5: d41d8cd98f00b204e9800998ecf8427e
|
||
Content-Type: application/json
|
||
DATE: Wed, 19 Oct 2021 02:16:08 GMT
|
||
Authorization:63840ea636369968f9e0de63c0ee02a1:2b9725f94fcf45216edb5392fa540e2083c25b6f
|
||
</code></pre></div><p>go 示例代码</p> <div class="language- extra-class"><pre class="language-text"><code>var calcContentMD5 string
|
||
// 检查Date是否超过15分钟
|
||
dateTime, err := time.Parse(layout, webhookSendRequest.Date)
|
||
if err != nil {
|
||
return robot.ErrWebhookSendByTimestamp
|
||
|
||
}
|
||
deltaTime := time.Now().Sub(dateTime)
|
||
if deltaTime < -15*time.Minute || deltaTime > 15*time.Minute {
|
||
return robot.ErrWebhookSendByTimestamp
|
||
|
||
}
|
||
|
||
// 检查Content-Md5
|
||
contentMD5Array := md5.Sum(webhookSendRequest.Content)
|
||
calcContentMD5 = hex.EncodeToString(contentMD5Array[:])
|
||
if webhookSendRequest.ContentMD5 != calcContentMD5 {
|
||
return robot.ErrWebhookSendBySign
|
||
}
|
||
|
||
//获取sign
|
||
splits := strings.Split(webhookSendRequest.Auth, ":")
|
||
if len(splits) != 2 {
|
||
return robot.ErrWebhookSendBySign
|
||
|
||
}
|
||
// 计算签名
|
||
str := secretKey + webhookSendRequest.ContentMD5 + webhookSendRequest.ContentType + webhookSendRequest.Date
|
||
sigBytes := sha1.Sum([]byte(str))
|
||
sig := hex.EncodeToString(sigBytes[:])
|
||
if sig != splits[1] {
|
||
return robot.ErrWebhookSendBySign
|
||
}
|
||
</code></pre></div><br></div></div> <div data-v-72337836="" data-v-ec5e855c="" class="right-menu-wrapper right-menu" data-v-2c291465=""><div data-v-72337836="" class="right-menu-margin"><div data-v-ec5e855c="" data-v-72337836="" class="inner-menu_top">本文内容</div> <div data-v-72337836="" class="right-menu-content"><div data-v-72337836="" class="right-menu-item level0"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b71005b8" class="text-over">
|
||
自定义机器人使用指南
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#f4cbe959" class="text-over">
|
||
自定义机器人添加入口
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#d8e8fd63" class="text-over">
|
||
如何使用自定义机器人
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#fb0fc453" class="text-over">
|
||
文本类型
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8851fbab" class="text-over">
|
||
参数说明
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#bd170557" class="text-over">
|
||
代码示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b00def17" class="text-over">
|
||
展示示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#43cf76f7" class="text-over">
|
||
Markdown 类型
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8851fbab-2" class="text-over">
|
||
参数说明
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#bd170557-2" class="text-over">
|
||
代码示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b00def17-2" class="text-over">
|
||
展示示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#808929d9" class="text-over">
|
||
链接类型
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8851fbab-3" class="text-over">
|
||
参数说明
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#bd170557-3" class="text-over">
|
||
代码示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b00def17-3" class="text-over">
|
||
展示示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8b1556b9" class="text-over">
|
||
卡片类型
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8851fbab-4" class="text-over">
|
||
参数说明
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#bd170557-4" class="text-over">
|
||
代码示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#b00def17-4" class="text-over">
|
||
展示示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#337f84a5" class="text-over">
|
||
自定义机器人添加 callback
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#9353188e" class="text-over">
|
||
机器人添加 callback
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#49e65652" class="text-over">
|
||
callback 可用性校验
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#fc4fa5a5" class="text-over">
|
||
callback 发送消息
|
||
</a></div><div data-v-72337836="" class="right-menu-item level3"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#99fb7c62" class="text-over">
|
||
请求参数
|
||
</a></div><div data-v-72337836="" class="right-menu-item level3"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#8a29b6c4" class="text-over">
|
||
请求参数示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level3"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#4d5e22fe" class="text-over">
|
||
返回结果示例
|
||
</a></div><div data-v-72337836="" class="right-menu-item level1"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#d3b1b09c" class="text-over">
|
||
自定义机器人安全设置
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#1f7a8e77" class="text-over">
|
||
自定义关键词
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#2e8eb2c8" class="text-over">
|
||
IP 白名单
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#65b6bbee" class="text-over">
|
||
签名校验
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#32e95f58" class="text-over">
|
||
特权用户设置
|
||
</a></div><div data-v-72337836="" class="right-menu-item level2"><a data-v-72337836="" href="https://open-xz.wps.cn/pages/client/robot/custom-robot/#a78e802b" class="text-over">
|
||
完整 HTTP 实例
|
||
</a></div></div></div></div></div></div></div></main> <!----></div><div class="global-ui"></div></div>
|
||
<script nonce="4b9bc4f41501ca2b23731e7513ed5ad1" src="./自定义机器人 _ WPS协作开放平台_files/app.4c3ace53.js.下载" defer=""></script><script nonce="4b9bc4f41501ca2b23731e7513ed5ad1" src="./自定义机器人 _ WPS协作开放平台_files/8.0e1630a9.js.下载" defer=""></script>
|
||
|
||
|
||
</body><div id="immersive-translate-popup" style="all: initial"><template shadowrootmode="open"><style>@charset "UTF-8";
|
||
/*!
|
||
* Pico.css v1.5.6 (https://picocss.com)
|
||
* Copyright 2019-2022 - Licensed under MIT
|
||
*/
|
||
/**
|
||
* Theme: default
|
||
*/
|
||
#mount {
|
||
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
|
||
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||
"Segoe UI Symbol", "Noto Color Emoji";
|
||
--line-height: 1.5;
|
||
--font-weight: 400;
|
||
--font-size: 16px;
|
||
--border-radius: 0.25rem;
|
||
--border-width: 1px;
|
||
--outline-width: 3px;
|
||
--spacing: 1rem;
|
||
--typography-spacing-vertical: 1.5rem;
|
||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||
--block-spacing-horizontal: var(--spacing);
|
||
--grid-spacing-vertical: 0;
|
||
--grid-spacing-horizontal: var(--spacing);
|
||
--form-element-spacing-vertical: 0.75rem;
|
||
--form-element-spacing-horizontal: 1rem;
|
||
--nav-element-spacing-vertical: 1rem;
|
||
--nav-element-spacing-horizontal: 0.5rem;
|
||
--nav-link-spacing-vertical: 0.5rem;
|
||
--nav-link-spacing-horizontal: 0.5rem;
|
||
--form-label-font-weight: var(--font-weight);
|
||
--transition: 0.2s ease-in-out;
|
||
--modal-overlay-backdrop-filter: blur(0.25rem);
|
||
}
|
||
@media (min-width: 576px) {
|
||
#mount {
|
||
--font-size: 17px;
|
||
}
|
||
}
|
||
@media (min-width: 768px) {
|
||
#mount {
|
||
--font-size: 18px;
|
||
}
|
||
}
|
||
@media (min-width: 992px) {
|
||
#mount {
|
||
--font-size: 19px;
|
||
}
|
||
}
|
||
@media (min-width: 1200px) {
|
||
#mount {
|
||
--font-size: 20px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 576px) {
|
||
#mount > header,
|
||
#mount > main,
|
||
#mount > footer,
|
||
section {
|
||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||
}
|
||
}
|
||
@media (min-width: 768px) {
|
||
#mount > header,
|
||
#mount > main,
|
||
#mount > footer,
|
||
section {
|
||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||
}
|
||
}
|
||
@media (min-width: 992px) {
|
||
#mount > header,
|
||
#mount > main,
|
||
#mount > footer,
|
||
section {
|
||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||
}
|
||
}
|
||
@media (min-width: 1200px) {
|
||
#mount > header,
|
||
#mount > main,
|
||
#mount > footer,
|
||
section {
|
||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 576px) {
|
||
article {
|
||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||
}
|
||
}
|
||
@media (min-width: 768px) {
|
||
article {
|
||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||
}
|
||
}
|
||
@media (min-width: 992px) {
|
||
article {
|
||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||
}
|
||
}
|
||
@media (min-width: 1200px) {
|
||
article {
|
||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||
}
|
||
}
|
||
|
||
dialog > article {
|
||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||
--block-spacing-horizontal: var(--spacing);
|
||
}
|
||
@media (min-width: 576px) {
|
||
dialog > article {
|
||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||
}
|
||
}
|
||
@media (min-width: 768px) {
|
||
dialog > article {
|
||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||
}
|
||
}
|
||
|
||
a {
|
||
--text-decoration: none;
|
||
}
|
||
a.secondary,
|
||
a.contrast {
|
||
--text-decoration: underline;
|
||
}
|
||
|
||
small {
|
||
--font-size: 0.875em;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
--font-weight: 700;
|
||
}
|
||
|
||
h1 {
|
||
--font-size: 2rem;
|
||
--typography-spacing-vertical: 3rem;
|
||
}
|
||
|
||
h2 {
|
||
--font-size: 1.75rem;
|
||
--typography-spacing-vertical: 2.625rem;
|
||
}
|
||
|
||
h3 {
|
||
--font-size: 1.5rem;
|
||
--typography-spacing-vertical: 2.25rem;
|
||
}
|
||
|
||
h4 {
|
||
--font-size: 1.25rem;
|
||
--typography-spacing-vertical: 1.874rem;
|
||
}
|
||
|
||
h5 {
|
||
--font-size: 1.125rem;
|
||
--typography-spacing-vertical: 1.6875rem;
|
||
}
|
||
|
||
[type="checkbox"],
|
||
[type="radio"] {
|
||
--border-width: 2px;
|
||
}
|
||
|
||
[type="checkbox"][role="switch"] {
|
||
--border-width: 2px;
|
||
}
|
||
|
||
thead th,
|
||
thead td,
|
||
tfoot th,
|
||
tfoot td {
|
||
--border-width: 3px;
|
||
}
|
||
|
||
:not(thead, tfoot) > * > td {
|
||
--font-size: 0.875em;
|
||
}
|
||
|
||
pre,
|
||
code,
|
||
kbd,
|
||
samp {
|
||
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
|
||
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
|
||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||
}
|
||
|
||
kbd {
|
||
--font-weight: bolder;
|
||
}
|
||
|
||
[data-theme="light"],
|
||
#mount:not([data-theme="dark"]) {
|
||
--background-color: #fff;
|
||
--background-light-green: #f5f7f9;
|
||
--color: hsl(205deg, 20%, 32%);
|
||
--h1-color: hsl(205deg, 30%, 15%);
|
||
--h2-color: #24333e;
|
||
--h3-color: hsl(205deg, 25%, 23%);
|
||
--h4-color: #374956;
|
||
--h5-color: hsl(205deg, 20%, 32%);
|
||
--h6-color: #4d606d;
|
||
--muted-color: hsl(205deg, 10%, 50%);
|
||
--muted-border-color: hsl(205deg, 20%, 94%);
|
||
--primary: hsl(195deg, 85%, 41%);
|
||
--primary-hover: hsl(195deg, 90%, 32%);
|
||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||
--primary-inverse: #fff;
|
||
--secondary: hsl(205deg, 15%, 41%);
|
||
--secondary-hover: hsl(205deg, 20%, 32%);
|
||
--secondary-focus: rgba(89, 107, 120, 0.125);
|
||
--secondary-inverse: #fff;
|
||
--contrast: hsl(205deg, 30%, 15%);
|
||
--contrast-hover: #000;
|
||
--contrast-focus: rgba(89, 107, 120, 0.125);
|
||
--contrast-inverse: #fff;
|
||
--mark-background-color: #fff2ca;
|
||
--mark-color: #543a26;
|
||
--ins-color: #388e3c;
|
||
--del-color: #c62828;
|
||
--blockquote-border-color: var(--muted-border-color);
|
||
--blockquote-footer-color: var(--muted-color);
|
||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||
--form-element-background-color: transparent;
|
||
--form-element-border-color: hsl(205deg, 14%, 68%);
|
||
--form-element-color: var(--color);
|
||
--form-element-placeholder-color: var(--muted-color);
|
||
--form-element-active-background-color: transparent;
|
||
--form-element-active-border-color: var(--primary);
|
||
--form-element-focus-color: var(--primary-focus);
|
||
--form-element-disabled-background-color: hsl(205deg, 18%, 86%);
|
||
--form-element-disabled-border-color: hsl(205deg, 14%, 68%);
|
||
--form-element-disabled-opacity: 0.5;
|
||
--form-element-invalid-border-color: #c62828;
|
||
--form-element-invalid-active-border-color: #d32f2f;
|
||
--form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
|
||
--form-element-valid-border-color: #388e3c;
|
||
--form-element-valid-active-border-color: #43a047;
|
||
--form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
|
||
--switch-background-color: hsl(205deg, 16%, 77%);
|
||
--switch-color: var(--primary-inverse);
|
||
--switch-checked-background-color: var(--primary);
|
||
--range-border-color: hsl(205deg, 18%, 86%);
|
||
--range-active-border-color: hsl(205deg, 16%, 77%);
|
||
--range-thumb-border-color: var(--background-color);
|
||
--range-thumb-color: var(--secondary);
|
||
--range-thumb-hover-color: var(--secondary-hover);
|
||
--range-thumb-active-color: var(--primary);
|
||
--table-border-color: var(--muted-border-color);
|
||
--table-row-stripped-background-color: #f6f8f9;
|
||
--code-background-color: hsl(205deg, 20%, 94%);
|
||
--code-color: var(--muted-color);
|
||
--code-kbd-background-color: var(--contrast);
|
||
--code-kbd-color: var(--contrast-inverse);
|
||
--code-tag-color: hsl(330deg, 40%, 50%);
|
||
--code-property-color: hsl(185deg, 40%, 40%);
|
||
--code-value-color: hsl(40deg, 20%, 50%);
|
||
--code-comment-color: hsl(205deg, 14%, 68%);
|
||
--accordion-border-color: var(--muted-border-color);
|
||
--accordion-close-summary-color: var(--color);
|
||
--accordion-open-summary-color: var(--muted-color);
|
||
--card-background-color: var(--background-color);
|
||
--card-border-color: var(--muted-border-color);
|
||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
|
||
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
|
||
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
|
||
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
|
||
0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
|
||
0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
|
||
0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
|
||
--card-sectionning-background-color: #fbfbfc;
|
||
--dropdown-background-color: #fbfbfc;
|
||
--dropdown-border-color: #e1e6eb;
|
||
--dropdown-box-shadow: var(--card-box-shadow);
|
||
--dropdown-color: var(--color);
|
||
--dropdown-hover-background-color: hsl(205deg, 20%, 94%);
|
||
--modal-overlay-background-color: rgba(213, 220, 226, 0.7);
|
||
--progress-background-color: hsl(205deg, 18%, 86%);
|
||
--progress-color: var(--primary);
|
||
--loading-spinner-opacity: 0.5;
|
||
--tooltip-background-color: var(--contrast);
|
||
--tooltip-color: var(--contrast-inverse);
|
||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTguOTM0OCA4LjY0ODQ0QzIwLjg5NDEgOC42NDg0NCAyMi40ODU1IDcuMDU0NjkgMjIuNDg1NSA1LjA5NzY2QzIyLjQ4NTUgMy4xNDA2MiAyMC44OTE4IDEuNTQ2ODggMTguOTM0OCAxLjU0Njg4QzE2Ljk3NTQgMS41NDY4OCAxNS4zODQgMy4xNDA2MiAxNS4zODQgNS4wOTc2NkMxNS4zODQgNS4yOTkyMiAxNS40MDA0IDUuNDkzNzUgMTUuNDMzMiA1LjY4NTk0TDcuMzIzODMgOS4zNTM5MUM2LjcwOTc3IDguODQ1MzEgNS45MjIyNyA4LjU0MDYyIDUuMDY0NDUgOC41NDA2MkMzLjEwNTA4IDguNTQwNjIgMS41MTM2NyAxMC4xMzQ0IDEuNTEzNjcgMTIuMDkxNEMxLjUxMzY3IDE0LjA0ODQgMy4xMDc0MiAxNS42NDIyIDUuMDY0NDUgMTUuNjQyMkM1LjgzMzIgMTUuNjQyMiA2LjU0NTcgMTUuMzk2MSA3LjEyNjk1IDE0Ljk4MTNMMTIuNDk0MSAxNy45OTUzQzEyLjQxNjggMTguMjg1OSAxMi4zNzcgMTguNTg4MyAxMi4zNzcgMTguOTAyM0MxMi4zNzcgMjAuODYxNyAxMy45NzA3IDIyLjQ1MzEgMTUuOTI3NyAyMi40NTMxQzE3Ljg4NzEgMjIuNDUzMSAxOS40Nzg1IDIwLjg1OTQgMTkuNDc4NSAxOC45MDIzQzE5LjQ3ODUgMTYuOTQzIDE3Ljg4NDggMTUuMzUxNiAxNS45Mjc3IDE1LjM1MTZDMTQuOTU3NCAxNS4zNTE2IDE0LjA3ODUgMTUuNzQzIDEzLjQzNjMgMTYuMzczNEw4LjMyMjI3IDEzLjUwNDdDOC41MDk3NyAxMy4wNzExIDguNjE1MjMgMTIuNTk1MyA4LjYxNTIzIDEyLjA5MzhDOC42MTUyMyAxMS42ODEyIDguNTQ0OTIgMTEuMjg3NSA4LjQxNjAyIDEwLjkxOTVMMTYuMjIzIDcuMzg3NUMxNi44NzQ2IDguMTU2MjUgMTcuODQ5NiA4LjY0ODQ0IDE4LjkzNDggOC42NDg0NFpNNS4wNjQ0NSAxMy43Njk1QzQuMTQxMDIgMTMuNzY5NSAzLjM4ODY3IDEzLjAxNzIgMy4zODg2NyAxMi4wOTM4QzMuMzg4NjcgMTEuMTcwMyA0LjE0MTAyIDEwLjQxOCA1LjA2NDQ1IDEwLjQxOEM1Ljk4Nzg5IDEwLjQxOCA2Ljc0MDIzIDExLjE3MDMgNi43NDAyMyAxMi4wOTM4QzYuNzQwMjMgMTMuMDE3MiA1Ljk4Nzg5IDEzLjc2OTUgNS4wNjQ0NSAxMy43Njk1Wk0xNS45Mjc3IDE3LjIyNjZDMTYuODUxMiAxNy4yMjY2IDE3LjYwMzUgMTcuOTc4OSAxNy42MDM1IDE4LjkwMjNDMTcuNjAzNSAxOS44MjU4IDE2Ljg1MTIgMjAuNTc4MSAxNS45Mjc3IDIwLjU3ODFDMTUuMDA0MyAyMC41NzgxIDE0LjI1MiAxOS44MjU4IDE0LjI1MiAxOC45MDIzQzE0LjI1MiAxNy45Nzg5IDE1LjAwMiAxNy4yMjY2IDE1LjkyNzcgMTcuMjI2NlpNMTguOTM0OCAzLjQxOTUzQzE5Ljg1ODIgMy40MTk1MyAyMC42MTA1IDQuMTcxODcgMjAuNjEwNSA1LjA5NTMxQzIwLjYxMDUgNi4wMTg3NSAxOS44NTgyIDYuNzcxMDkgMTguOTM0OCA2Ljc3MTA5QzE4LjAxMTMgNi43NzEwOSAxNy4yNTkgNi4wMTg3NSAxNy4yNTkgNS4wOTUzMUMxNy4yNTkgNC4xNzE4NyAxOC4wMTEzIDMuNDE5NTMgMTguOTM0OCAzLjQxOTUzWicgZmlsbD0nIzgzODM4MycvPjwvc3ZnPiA=");
|
||
--float-ball-more-button-border-color: #f6f6f6;
|
||
--float-ball-more-button-background-color: #ffffff;
|
||
--float-ball-more-button-svg-color: #6c6f73;
|
||
color-scheme: light;
|
||
--service-bg-hover: #f7faff;
|
||
--service-bg: #fafbfb;
|
||
}
|
||
|
||
@media only screen and (prefers-color-scheme: dark) {
|
||
#mount:not([data-theme="light"]) {
|
||
--background-color: #11191f;
|
||
--float-ball-more-button-background-color: #ffffff;
|
||
--background-light-green: #141e26;
|
||
--color: hsl(205deg, 16%, 77%);
|
||
--h1-color: hsl(205deg, 20%, 94%);
|
||
--h2-color: #e1e6eb;
|
||
--h3-color: hsl(205deg, 18%, 86%);
|
||
--h4-color: #c8d1d8;
|
||
--h5-color: hsl(205deg, 16%, 77%);
|
||
--h6-color: #afbbc4;
|
||
--muted-color: hsl(205deg, 10%, 50%);
|
||
--muted-border-color: #1f2d38;
|
||
--primary: hsl(195deg, 85%, 41%);
|
||
--primary-hover: hsl(195deg, 80%, 50%);
|
||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||
--primary-inverse: #fff;
|
||
--secondary: hsl(205deg, 15%, 41%);
|
||
--secondary-hover: hsl(205deg, 10%, 50%);
|
||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||
--secondary-inverse: #fff;
|
||
--contrast: hsl(205deg, 20%, 94%);
|
||
--contrast-hover: #fff;
|
||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||
--contrast-inverse: #000;
|
||
--mark-background-color: #d1c284;
|
||
--mark-color: #11191f;
|
||
--ins-color: #388e3c;
|
||
--del-color: #c62828;
|
||
--blockquote-border-color: var(--muted-border-color);
|
||
--blockquote-footer-color: var(--muted-color);
|
||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||
--form-element-background-color: #11191f;
|
||
--form-element-border-color: #374956;
|
||
--form-element-color: var(--color);
|
||
--form-element-placeholder-color: var(--muted-color);
|
||
--form-element-active-background-color: var(
|
||
--form-element-background-color
|
||
);
|
||
--form-element-active-border-color: var(--primary);
|
||
--form-element-focus-color: var(--primary-focus);
|
||
--form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
||
--form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
||
--form-element-disabled-opacity: 0.5;
|
||
--form-element-invalid-border-color: #b71c1c;
|
||
--form-element-invalid-active-border-color: #c62828;
|
||
--form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
||
--form-element-valid-border-color: #2e7d32;
|
||
--form-element-valid-active-border-color: #388e3c;
|
||
--form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
||
--switch-background-color: #374956;
|
||
--switch-color: var(--primary-inverse);
|
||
--switch-checked-background-color: var(--primary);
|
||
--range-border-color: #24333e;
|
||
--range-active-border-color: hsl(205deg, 25%, 23%);
|
||
--range-thumb-border-color: var(--background-color);
|
||
--range-thumb-color: var(--secondary);
|
||
--range-thumb-hover-color: var(--secondary-hover);
|
||
--range-thumb-active-color: var(--primary);
|
||
--table-border-color: var(--muted-border-color);
|
||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||
--code-background-color: #18232c;
|
||
--code-color: var(--muted-color);
|
||
--code-kbd-background-color: var(--contrast);
|
||
--code-kbd-color: var(--contrast-inverse);
|
||
--code-tag-color: hsl(330deg, 30%, 50%);
|
||
--code-property-color: hsl(185deg, 30%, 50%);
|
||
--code-value-color: hsl(40deg, 10%, 50%);
|
||
--code-comment-color: #4d606d;
|
||
--accordion-border-color: var(--muted-border-color);
|
||
--accordion-active-summary-color: var(--primary);
|
||
--accordion-close-summary-color: var(--color);
|
||
--accordion-open-summary-color: var(--muted-color);
|
||
--card-background-color: #141e26;
|
||
--card-border-color: var(--card-background-color);
|
||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
|
||
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
|
||
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
|
||
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
|
||
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
||
--card-sectionning-background-color: #18232c;
|
||
--dropdown-background-color: hsl(205deg, 30%, 15%);
|
||
--dropdown-border-color: #24333e;
|
||
--dropdown-box-shadow: var(--card-box-shadow);
|
||
--dropdown-color: var(--color);
|
||
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
||
--modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
||
--progress-background-color: #24333e;
|
||
--progress-color: var(--primary);
|
||
--loading-spinner-opacity: 0.5;
|
||
--tooltip-background-color: var(--contrast);
|
||
--tooltip-color: var(--contrast-inverse);
|
||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA=");
|
||
color-scheme: dark;
|
||
--service-bg-hover: #22292f;
|
||
--service-bg: rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
[data-theme="dark"] {
|
||
--background-color: #11191f;
|
||
--float-ball-more-button-background-color: #191919;
|
||
--background-light-green: #141e26;
|
||
--color: hsl(205deg, 16%, 77%);
|
||
--h1-color: hsl(205deg, 20%, 94%);
|
||
--h2-color: #e1e6eb;
|
||
--h3-color: hsl(205deg, 18%, 86%);
|
||
--h4-color: #c8d1d8;
|
||
--h5-color: hsl(205deg, 16%, 77%);
|
||
--h6-color: #afbbc4;
|
||
--muted-color: hsl(205deg, 10%, 50%);
|
||
--muted-border-color: #1f2d38;
|
||
--primary: hsl(195deg, 85%, 41%);
|
||
--primary-hover: hsl(195deg, 80%, 50%);
|
||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||
--primary-inverse: #fff;
|
||
--secondary: hsl(205deg, 15%, 41%);
|
||
--secondary-hover: hsl(205deg, 10%, 50%);
|
||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||
--secondary-inverse: #fff;
|
||
--contrast: hsl(205deg, 20%, 94%);
|
||
--contrast-hover: #fff;
|
||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||
--contrast-inverse: #000;
|
||
--mark-background-color: #d1c284;
|
||
--mark-color: #11191f;
|
||
--ins-color: #388e3c;
|
||
--del-color: #c62828;
|
||
--blockquote-border-color: var(--muted-border-color);
|
||
--blockquote-footer-color: var(--muted-color);
|
||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||
--form-element-background-color: #11191f;
|
||
--form-element-border-color: #374956;
|
||
--form-element-color: var(--color);
|
||
--form-element-placeholder-color: var(--muted-color);
|
||
--form-element-active-background-color: var(--form-element-background-color);
|
||
--form-element-active-border-color: var(--primary);
|
||
--form-element-focus-color: var(--primary-focus);
|
||
--form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
||
--form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
||
--form-element-disabled-opacity: 0.5;
|
||
--form-element-invalid-border-color: #b71c1c;
|
||
--form-element-invalid-active-border-color: #c62828;
|
||
--form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
||
--form-element-valid-border-color: #2e7d32;
|
||
--form-element-valid-active-border-color: #388e3c;
|
||
--form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
||
--switch-background-color: #374956;
|
||
--switch-color: var(--primary-inverse);
|
||
--switch-checked-background-color: var(--primary);
|
||
--range-border-color: #24333e;
|
||
--range-active-border-color: hsl(205deg, 25%, 23%);
|
||
--range-thumb-border-color: var(--background-color);
|
||
--range-thumb-color: var(--secondary);
|
||
--range-thumb-hover-color: var(--secondary-hover);
|
||
--range-thumb-active-color: var(--primary);
|
||
--table-border-color: var(--muted-border-color);
|
||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||
--code-background-color: #18232c;
|
||
--code-color: var(--muted-color);
|
||
--code-kbd-background-color: var(--contrast);
|
||
--code-kbd-color: var(--contrast-inverse);
|
||
--code-tag-color: hsl(330deg, 30%, 50%);
|
||
--code-property-color: hsl(185deg, 30%, 50%);
|
||
--code-value-color: hsl(40deg, 10%, 50%);
|
||
--code-comment-color: #4d606d;
|
||
--accordion-border-color: var(--muted-border-color);
|
||
--accordion-active-summary-color: var(--primary);
|
||
--accordion-close-summary-color: var(--color);
|
||
--accordion-open-summary-color: var(--muted-color);
|
||
--card-background-color: #141e26;
|
||
--card-border-color: var(--card-background-color);
|
||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
|
||
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
|
||
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
|
||
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
|
||
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
||
--card-sectionning-background-color: #18232c;
|
||
--dropdown-background-color: hsl(205deg, 30%, 15%);
|
||
--dropdown-border-color: #24333e;
|
||
--dropdown-box-shadow: var(--card-box-shadow);
|
||
--dropdown-color: var(--color);
|
||
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
||
--modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
||
--progress-background-color: #24333e;
|
||
--progress-color: var(--primary);
|
||
--loading-spinner-opacity: 0.5;
|
||
--tooltip-background-color: var(--contrast);
|
||
--tooltip-color: var(--contrast-inverse);
|
||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||
--icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA=");
|
||
color-scheme: dark;
|
||
--service-bg: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
progress,
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="range"] {
|
||
accent-color: var(--primary);
|
||
}
|
||
|
||
/**
|
||
* Document
|
||
* Content-box & Responsive typography
|
||
*/
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
::before,
|
||
::after {
|
||
text-decoration: inherit;
|
||
vertical-align: inherit;
|
||
}
|
||
|
||
:where(#mount) {
|
||
-webkit-tap-highlight-color: transparent;
|
||
-webkit-text-size-adjust: 100%;
|
||
-moz-text-size-adjust: 100%;
|
||
text-size-adjust: 100%;
|
||
background-color: var(--background-color);
|
||
color: var(--color);
|
||
font-weight: var(--font-weight);
|
||
font-size: var(--font-size);
|
||
line-height: var(--line-height);
|
||
font-family: var(--font-family);
|
||
text-rendering: optimizeLegibility;
|
||
overflow-wrap: break-word;
|
||
cursor: default;
|
||
-moz-tab-size: 4;
|
||
-o-tab-size: 4;
|
||
tab-size: 4;
|
||
}
|
||
|
||
/**
|
||
* Sectioning
|
||
* Container and responsive spacings for header, main, footer
|
||
*/
|
||
main {
|
||
display: block;
|
||
}
|
||
|
||
#mount {
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
#mount > header,
|
||
#mount > main,
|
||
#mount > footer {
|
||
width: 100%;
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||
}
|
||
@media (min-width: 576px) {
|
||
#mount > header,
|
||
#mount > main,
|
||
#mount > footer {
|
||
padding: 2px !important;
|
||
}
|
||
}
|
||
@media (min-width: 992px) {
|
||
#mount > header,
|
||
#mount > main,
|
||
#mount > footer {
|
||
padding: 0 12px !important;
|
||
}
|
||
}
|
||
@media (min-width: 1200px) {
|
||
#mount > header,
|
||
#mount > main,
|
||
#mount > footer {
|
||
padding: 0 24px !important;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Container
|
||
*/
|
||
.container,
|
||
.container-fluid {
|
||
width: 100%;
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
padding-right: var(--spacing);
|
||
padding-left: var(--spacing);
|
||
}
|
||
/*
|
||
@media (min-width: 576px) {
|
||
.container {
|
||
max-width: 510px;
|
||
padding-right: 0;
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
@media (min-width: 768px) {
|
||
.container {
|
||
max-width: 700px;
|
||
}
|
||
} */
|
||
@media (min-width: 992px) {
|
||
.container {
|
||
max-width: 920px;
|
||
}
|
||
}
|
||
@media (min-width: 1200px) {
|
||
.container {
|
||
max-width: 1130px;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Section
|
||
* Responsive spacings for section
|
||
*/
|
||
section {
|
||
margin-bottom: var(--block-spacing-vertical);
|
||
}
|
||
|
||
/**
|
||
* Grid
|
||
* Minimal grid system with auto-layout columns
|
||
*/
|
||
.grid {
|
||
grid-column-gap: var(--grid-spacing-horizontal);
|
||
grid-row-gap: var(--grid-spacing-vertical);
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
margin: 0;
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.grid {
|
||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
||
}
|
||
}
|
||
.grid > * {
|
||
min-width: 0;
|
||
}
|
||
|
||
/**
|
||
* Horizontal scroller (<figure>)
|
||
*/
|
||
figure {
|
||
display: block;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow-x: auto;
|
||
}
|
||
figure figcaption {
|
||
padding: calc(var(--spacing) * 0.5) 0;
|
||
color: var(--muted-color);
|
||
}
|
||
|
||
/**
|
||
* Typography
|
||
*/
|
||
b,
|
||
strong {
|
||
font-weight: bolder;
|
||
}
|
||
|
||
sub,
|
||
sup {
|
||
position: relative;
|
||
font-size: 0.75em;
|
||
line-height: 0;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
sub {
|
||
bottom: -0.25em;
|
||
}
|
||
|
||
sup {
|
||
top: -0.5em;
|
||
}
|
||
|
||
address,
|
||
blockquote,
|
||
dl,
|
||
figure,
|
||
form,
|
||
ol,
|
||
p,
|
||
pre,
|
||
table,
|
||
ul {
|
||
margin-top: 0;
|
||
margin-bottom: var(--typography-spacing-vertical);
|
||
color: var(--color);
|
||
font-style: normal;
|
||
font-weight: var(--font-weight);
|
||
font-size: var(--font-size);
|
||
}
|
||
|
||
a,
|
||
[role="link"] {
|
||
--color: var(--primary);
|
||
--background-color: transparent;
|
||
outline: none;
|
||
background-color: var(--background-color);
|
||
color: var(--color);
|
||
-webkit-text-decoration: var(--text-decoration);
|
||
text-decoration: var(--text-decoration);
|
||
transition: background-color var(--transition), color var(--transition),
|
||
box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||
transition: background-color var(--transition), color var(--transition),
|
||
text-decoration var(--transition), box-shadow var(--transition);
|
||
transition: background-color var(--transition), color var(--transition),
|
||
text-decoration var(--transition), box-shadow var(--transition),
|
||
-webkit-text-decoration var(--transition);
|
||
}
|
||
a:is([aria-current], :hover, :active, :focus),
|
||
[role="link"]:is([aria-current], :hover, :active, :focus) {
|
||
--color: var(--primary-hover);
|
||
--text-decoration: underline;
|
||
}
|
||
a:focus,
|
||
[role="link"]:focus {
|
||
--background-color: var(--primary-focus);
|
||
}
|
||
a.secondary,
|
||
[role="link"].secondary {
|
||
--color: var(--secondary);
|
||
}
|
||
a.secondary:is([aria-current], :hover, :active, :focus),
|
||
[role="link"].secondary:is([aria-current], :hover, :active, :focus) {
|
||
--color: var(--secondary-hover);
|
||
}
|
||
a.secondary:focus,
|
||
[role="link"].secondary:focus {
|
||
--background-color: var(--secondary-focus);
|
||
}
|
||
a.contrast,
|
||
[role="link"].contrast {
|
||
--color: var(--contrast);
|
||
}
|
||
a.contrast:is([aria-current], :hover, :active, :focus),
|
||
[role="link"].contrast:is([aria-current], :hover, :active, :focus) {
|
||
--color: var(--contrast-hover);
|
||
}
|
||
a.contrast:focus,
|
||
[role="link"].contrast:focus {
|
||
--background-color: var(--contrast-focus);
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
margin-top: 0;
|
||
margin-bottom: var(--typography-spacing-vertical);
|
||
color: var(--color);
|
||
font-weight: var(--font-weight);
|
||
font-size: var(--font-size);
|
||
font-family: var(--font-family);
|
||
}
|
||
|
||
h1 {
|
||
--color: var(--h1-color);
|
||
}
|
||
|
||
h2 {
|
||
--color: var(--h2-color);
|
||
}
|
||
|
||
h3 {
|
||
--color: var(--h3-color);
|
||
}
|
||
|
||
h4 {
|
||
--color: var(--h4-color);
|
||
}
|
||
|
||
h5 {
|
||
--color: var(--h5-color);
|
||
}
|
||
|
||
h6 {
|
||
--color: var(--h6-color);
|
||
}
|
||
|
||
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul)
|
||
~ :is(h1, h2, h3, h4, h5, h6) {
|
||
margin-top: var(--typography-spacing-vertical);
|
||
}
|
||
|
||
hgroup,
|
||
.headings {
|
||
margin-bottom: var(--typography-spacing-vertical);
|
||
}
|
||
hgroup > *,
|
||
.headings > * {
|
||
margin-bottom: 0;
|
||
}
|
||
hgroup > *:last-child,
|
||
.headings > *:last-child {
|
||
--color: var(--muted-color);
|
||
--font-weight: unset;
|
||
font-size: 1rem;
|
||
font-family: unset;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: var(--typography-spacing-vertical);
|
||
}
|
||
|
||
small {
|
||
font-size: var(--font-size);
|
||
}
|
||
|
||
:where(dl, ol, ul) {
|
||
padding-right: 0;
|
||
padding-left: var(--spacing);
|
||
-webkit-padding-start: var(--spacing);
|
||
padding-inline-start: var(--spacing);
|
||
-webkit-padding-end: 0;
|
||
padding-inline-end: 0;
|
||
}
|
||
:where(dl, ol, ul) li {
|
||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||
}
|
||
|
||
:where(dl, ol, ul) :is(dl, ol, ul) {
|
||
margin: 0;
|
||
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||
}
|
||
|
||
ul li {
|
||
list-style: square;
|
||
}
|
||
|
||
mark {
|
||
padding: 0.125rem 0.25rem;
|
||
background-color: var(--mark-background-color);
|
||
color: var(--mark-color);
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
blockquote {
|
||
display: block;
|
||
margin: var(--typography-spacing-vertical) 0;
|
||
padding: var(--spacing);
|
||
border-right: none;
|
||
border-left: 0.25rem solid var(--blockquote-border-color);
|
||
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||
-webkit-border-end: none;
|
||
border-inline-end: none;
|
||
}
|
||
blockquote footer {
|
||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||
color: var(--blockquote-footer-color);
|
||
}
|
||
|
||
abbr[title] {
|
||
border-bottom: 1px dotted;
|
||
text-decoration: none;
|
||
cursor: help;
|
||
}
|
||
|
||
ins {
|
||
color: var(--ins-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
del {
|
||
color: var(--del-color);
|
||
}
|
||
|
||
::-moz-selection {
|
||
background-color: var(--primary-focus);
|
||
}
|
||
|
||
::selection {
|
||
background-color: var(--primary-focus);
|
||
}
|
||
|
||
/**
|
||
* Embedded content
|
||
*/
|
||
:where(audio, canvas, iframe, img, svg, video) {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
audio,
|
||
video {
|
||
display: inline-block;
|
||
}
|
||
|
||
audio:not([controls]) {
|
||
display: none;
|
||
height: 0;
|
||
}
|
||
|
||
:where(iframe) {
|
||
border-style: none;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-style: none;
|
||
}
|
||
|
||
:where(svg:not([fill])) {
|
||
fill: currentColor;
|
||
}
|
||
|
||
svg:not(#mount) {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/**
|
||
* Button
|
||
*/
|
||
button {
|
||
margin: 0;
|
||
overflow: visible;
|
||
font-family: inherit;
|
||
text-transform: none;
|
||
}
|
||
|
||
button,
|
||
[type="button"],
|
||
[type="reset"],
|
||
[type="submit"] {
|
||
-webkit-appearance: button;
|
||
}
|
||
|
||
button {
|
||
display: block;
|
||
width: 100%;
|
||
margin-bottom: var(--spacing);
|
||
}
|
||
|
||
[role="button"] {
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
}
|
||
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
input[type="reset"],
|
||
[role="button"] {
|
||
--background-color: var(--primary);
|
||
--border-color: var(--primary);
|
||
--color: var(--primary-inverse);
|
||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||
padding: var(--form-element-spacing-vertical)
|
||
var(--form-element-spacing-horizontal);
|
||
border: var(--border-width) solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
outline: none;
|
||
background-color: var(--background-color);
|
||
box-shadow: var(--box-shadow);
|
||
color: var(--color);
|
||
font-weight: var(--font-weight);
|
||
font-size: 1rem;
|
||
line-height: var(--line-height);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: background-color var(--transition), border-color var(--transition),
|
||
color var(--transition), box-shadow var(--transition);
|
||
}
|
||
button:is([aria-current], :hover, :active, :focus),
|
||
input[type="submit"]:is([aria-current], :hover, :active, :focus),
|
||
input[type="button"]:is([aria-current], :hover, :active, :focus),
|
||
input[type="reset"]:is([aria-current], :hover, :active, :focus),
|
||
[role="button"]:is([aria-current], :hover, :active, :focus) {
|
||
--background-color: var(--primary-hover);
|
||
--border-color: var(--primary-hover);
|
||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||
--color: var(--primary-inverse);
|
||
}
|
||
button:focus,
|
||
input[type="submit"]:focus,
|
||
input[type="button"]:focus,
|
||
input[type="reset"]:focus,
|
||
[role="button"]:focus {
|
||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||
0 0 0 var(--outline-width) var(--primary-focus);
|
||
}
|
||
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).secondary,
|
||
input[type="reset"] {
|
||
--background-color: var(--secondary);
|
||
--border-color: var(--secondary);
|
||
--color: var(--secondary-inverse);
|
||
cursor: pointer;
|
||
}
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).secondary:is([aria-current], :hover, :active, :focus),
|
||
input[type="reset"]:is([aria-current], :hover, :active, :focus) {
|
||
--background-color: var(--secondary-hover);
|
||
--border-color: var(--secondary-hover);
|
||
--color: var(--secondary-inverse);
|
||
}
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).secondary:focus,
|
||
input[type="reset"]:focus {
|
||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||
}
|
||
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).contrast {
|
||
--background-color: var(--contrast);
|
||
--border-color: var(--contrast);
|
||
--color: var(--contrast-inverse);
|
||
}
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).contrast:is([aria-current], :hover, :active, :focus) {
|
||
--background-color: var(--contrast-hover);
|
||
--border-color: var(--contrast-hover);
|
||
--color: var(--contrast-inverse);
|
||
}
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).contrast:focus {
|
||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||
0 0 0 var(--outline-width) var(--contrast-focus);
|
||
}
|
||
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).outline,
|
||
input[type="reset"].outline {
|
||
--background-color: transparent;
|
||
--color: var(--primary);
|
||
}
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).outline:is([aria-current], :hover, :active, :focus),
|
||
input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
|
||
--background-color: transparent;
|
||
--color: var(--primary-hover);
|
||
}
|
||
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).outline.secondary,
|
||
input[type="reset"].outline {
|
||
--color: var(--secondary);
|
||
}
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).outline.secondary:is([aria-current], :hover, :active, :focus),
|
||
input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
|
||
--color: var(--secondary-hover);
|
||
}
|
||
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).outline.contrast {
|
||
--color: var(--contrast);
|
||
}
|
||
:is(
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
[role="button"]
|
||
).outline.contrast:is([aria-current], :hover, :active, :focus) {
|
||
--color: var(--contrast-hover);
|
||
}
|
||
|
||
:where(
|
||
button,
|
||
[type="submit"],
|
||
[type="button"],
|
||
[type="reset"],
|
||
[role="button"]
|
||
)[disabled],
|
||
:where(fieldset[disabled])
|
||
:is(
|
||
button,
|
||
[type="submit"],
|
||
[type="button"],
|
||
[type="reset"],
|
||
[role="button"]
|
||
),
|
||
a[role="button"]:not([href]) {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/**
|
||
* Form elements
|
||
*/
|
||
input,
|
||
optgroup,
|
||
select,
|
||
textarea {
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
line-height: var(--line-height);
|
||
font-family: inherit;
|
||
letter-spacing: inherit;
|
||
}
|
||
|
||
input {
|
||
overflow: visible;
|
||
}
|
||
|
||
select {
|
||
text-transform: none;
|
||
}
|
||
|
||
legend {
|
||
max-width: 100%;
|
||
padding: 0;
|
||
color: inherit;
|
||
white-space: normal;
|
||
}
|
||
|
||
textarea {
|
||
overflow: auto;
|
||
}
|
||
|
||
[type="checkbox"],
|
||
[type="radio"] {
|
||
padding: 0;
|
||
}
|
||
|
||
::-webkit-inner-spin-button,
|
||
::-webkit-outer-spin-button {
|
||
height: auto;
|
||
}
|
||
|
||
[type="search"] {
|
||
-webkit-appearance: textfield;
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
[type="search"]::-webkit-search-decoration {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
::-webkit-file-upload-button {
|
||
-webkit-appearance: button;
|
||
font: inherit;
|
||
}
|
||
|
||
::-moz-focus-inner {
|
||
padding: 0;
|
||
border-style: none;
|
||
}
|
||
|
||
:-moz-focusring {
|
||
outline: none;
|
||
}
|
||
|
||
:-moz-ui-invalid {
|
||
box-shadow: none;
|
||
}
|
||
|
||
::-ms-expand {
|
||
display: none;
|
||
}
|
||
|
||
[type="file"],
|
||
[type="range"] {
|
||
padding: 0;
|
||
border-width: 0;
|
||
}
|
||
|
||
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
||
height: calc(
|
||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
||
var(--border-width) * 2
|
||
);
|
||
}
|
||
|
||
fieldset {
|
||
margin: 0;
|
||
margin-bottom: var(--spacing);
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
|
||
label,
|
||
fieldset legend {
|
||
display: block;
|
||
margin-bottom: calc(var(--spacing) * 0.25);
|
||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||
}
|
||
|
||
input:not([type="checkbox"], [type="radio"]),
|
||
select,
|
||
textarea {
|
||
width: 100%;
|
||
}
|
||
|
||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||
select,
|
||
textarea {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
padding: var(--form-element-spacing-vertical)
|
||
var(--form-element-spacing-horizontal);
|
||
}
|
||
|
||
input,
|
||
select,
|
||
textarea {
|
||
--background-color: var(--form-element-background-color);
|
||
--border-color: var(--form-element-border-color);
|
||
--color: var(--form-element-color);
|
||
--box-shadow: none;
|
||
border: var(--border-width) solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
outline: none;
|
||
background-color: var(--background-color);
|
||
box-shadow: var(--box-shadow);
|
||
color: var(--color);
|
||
font-weight: var(--font-weight);
|
||
transition: background-color var(--transition), border-color var(--transition),
|
||
color var(--transition), box-shadow var(--transition);
|
||
}
|
||
|
||
input:not(
|
||
[type="submit"],
|
||
[type="button"],
|
||
[type="reset"],
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[readonly]
|
||
):is(:active, :focus),
|
||
:where(select, textarea):is(:active, :focus) {
|
||
--background-color: var(--form-element-active-background-color);
|
||
}
|
||
|
||
input:not(
|
||
[type="submit"],
|
||
[type="button"],
|
||
[type="reset"],
|
||
[role="switch"],
|
||
[readonly]
|
||
):is(:active, :focus),
|
||
:where(select, textarea):is(:active, :focus) {
|
||
--border-color: var(--form-element-active-border-color);
|
||
}
|
||
|
||
input:not(
|
||
[type="submit"],
|
||
[type="button"],
|
||
[type="reset"],
|
||
[type="range"],
|
||
[type="file"],
|
||
[readonly]
|
||
):focus,
|
||
select:focus,
|
||
textarea:focus {
|
||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||
}
|
||
|
||
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||
select[disabled],
|
||
textarea[disabled],
|
||
:where(fieldset[disabled])
|
||
:is(
|
||
input:not([type="submit"], [type="button"], [type="reset"]),
|
||
select,
|
||
textarea
|
||
) {
|
||
--background-color: var(--form-element-disabled-background-color);
|
||
--border-color: var(--form-element-disabled-border-color);
|
||
opacity: var(--form-element-disabled-opacity);
|
||
pointer-events: none;
|
||
}
|
||
|
||
:where(input, select, textarea):not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="date"],
|
||
[type="datetime-local"],
|
||
[type="month"],
|
||
[type="time"],
|
||
[type="week"]
|
||
)[aria-invalid] {
|
||
padding-right: calc(
|
||
var(--form-element-spacing-horizontal) + 1.5rem
|
||
) !important;
|
||
padding-left: var(--form-element-spacing-horizontal);
|
||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||
-webkit-padding-end: calc(
|
||
var(--form-element-spacing-horizontal) + 1.5rem
|
||
) !important;
|
||
padding-inline-end: calc(
|
||
var(--form-element-spacing-horizontal) + 1.5rem
|
||
) !important;
|
||
background-position: center right 0.75rem;
|
||
background-size: 1rem auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
:where(input, select, textarea):not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="date"],
|
||
[type="datetime-local"],
|
||
[type="month"],
|
||
[type="time"],
|
||
[type="week"]
|
||
)[aria-invalid="false"] {
|
||
background-image: var(--icon-valid);
|
||
}
|
||
:where(input, select, textarea):not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="date"],
|
||
[type="datetime-local"],
|
||
[type="month"],
|
||
[type="time"],
|
||
[type="week"]
|
||
)[aria-invalid="true"] {
|
||
background-image: var(--icon-invalid);
|
||
}
|
||
:where(input, select, textarea)[aria-invalid="false"] {
|
||
--border-color: var(--form-element-valid-border-color);
|
||
}
|
||
:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
|
||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||
}
|
||
:where(input, select, textarea)[aria-invalid="true"] {
|
||
--border-color: var(--form-element-invalid-border-color);
|
||
}
|
||
:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
|
||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||
--box-shadow: 0 0 0 var(--outline-width)
|
||
var(--form-element-invalid-focus-color) !important;
|
||
}
|
||
|
||
[dir="rtl"]
|
||
:where(input, select, textarea):not([type="checkbox"], [type="radio"]):is(
|
||
[aria-invalid],
|
||
[aria-invalid="true"],
|
||
[aria-invalid="false"]
|
||
) {
|
||
background-position: center left 0.75rem;
|
||
}
|
||
|
||
input::placeholder,
|
||
input::-webkit-input-placeholder,
|
||
textarea::placeholder,
|
||
textarea::-webkit-input-placeholder,
|
||
select:invalid {
|
||
color: var(--form-element-placeholder-color);
|
||
opacity: 1;
|
||
}
|
||
|
||
input:not([type="checkbox"], [type="radio"]),
|
||
select,
|
||
textarea {
|
||
margin-bottom: var(--spacing);
|
||
}
|
||
|
||
select::-ms-expand {
|
||
border: 0;
|
||
background-color: transparent;
|
||
}
|
||
select:not([multiple], [size]) {
|
||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||
padding-left: var(--form-element-spacing-horizontal);
|
||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||
background-image: var(--icon-chevron);
|
||
background-position: center right 0.75rem;
|
||
background-size: 1rem auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
[dir="rtl"] select:not([multiple], [size]) {
|
||
background-position: center left 0.75rem;
|
||
}
|
||
|
||
:where(input, select, textarea) + small {
|
||
display: block;
|
||
width: 100%;
|
||
margin-top: calc(var(--spacing) * -0.75);
|
||
margin-bottom: var(--spacing);
|
||
color: var(--muted-color);
|
||
}
|
||
|
||
label > :where(input, select, textarea) {
|
||
margin-top: calc(var(--spacing) * 0.25);
|
||
}
|
||
|
||
/**
|
||
* Form elements
|
||
* Checkboxes & Radios
|
||
*/
|
||
[type="checkbox"],
|
||
[type="radio"] {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
width: 1.25em;
|
||
height: 1.25em;
|
||
margin-top: -0.125em;
|
||
margin-right: 0.375em;
|
||
margin-left: 0;
|
||
-webkit-margin-start: 0;
|
||
margin-inline-start: 0;
|
||
-webkit-margin-end: 0.375em;
|
||
margin-inline-end: 0.375em;
|
||
border-width: var(--border-width);
|
||
font-size: inherit;
|
||
vertical-align: middle;
|
||
cursor: pointer;
|
||
}
|
||
[type="checkbox"]::-ms-check,
|
||
[type="radio"]::-ms-check {
|
||
display: none;
|
||
}
|
||
[type="checkbox"]:checked,
|
||
[type="checkbox"]:checked:active,
|
||
[type="checkbox"]:checked:focus,
|
||
[type="radio"]:checked,
|
||
[type="radio"]:checked:active,
|
||
[type="radio"]:checked:focus {
|
||
--background-color: var(--primary);
|
||
--border-color: var(--primary);
|
||
background-image: var(--icon-checkbox);
|
||
background-position: center;
|
||
background-size: 0.75em auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
[type="checkbox"] ~ label,
|
||
[type="radio"] ~ label {
|
||
display: inline-block;
|
||
margin-right: 0.375em;
|
||
margin-bottom: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
[type="checkbox"]:indeterminate {
|
||
--background-color: var(--primary);
|
||
--border-color: var(--primary);
|
||
background-image: var(--icon-minus);
|
||
background-position: center;
|
||
background-size: 0.75em auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
[type="radio"] {
|
||
border-radius: 50%;
|
||
}
|
||
[type="radio"]:checked,
|
||
[type="radio"]:checked:active,
|
||
[type="radio"]:checked:focus {
|
||
--background-color: var(--primary-inverse);
|
||
border-width: 0.35em;
|
||
background-image: none;
|
||
}
|
||
|
||
[type="checkbox"][role="switch"] {
|
||
--background-color: var(--switch-background-color);
|
||
--border-color: var(--switch-background-color);
|
||
--color: var(--switch-color);
|
||
width: 2.25em;
|
||
height: 1.25em;
|
||
border: var(--border-width) solid var(--border-color);
|
||
border-radius: 1.25em;
|
||
background-color: var(--background-color);
|
||
line-height: 1.25em;
|
||
}
|
||
[type="checkbox"][role="switch"]:focus {
|
||
--background-color: var(--switch-background-color);
|
||
--border-color: var(--switch-background-color);
|
||
}
|
||
[type="checkbox"][role="switch"]:checked {
|
||
--background-color: var(--switch-checked-background-color);
|
||
--border-color: var(--switch-checked-background-color);
|
||
}
|
||
[type="checkbox"][role="switch"]:before {
|
||
display: block;
|
||
width: calc(1.25em - (var(--border-width) * 2));
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
background-color: var(--color);
|
||
content: "";
|
||
transition: margin 0.1s ease-in-out;
|
||
}
|
||
[type="checkbox"][role="switch"]:checked {
|
||
background-image: none;
|
||
}
|
||
[type="checkbox"][role="switch"]:checked::before {
|
||
margin-left: calc(1.125em - var(--border-width));
|
||
-webkit-margin-start: calc(1.125em - var(--border-width));
|
||
margin-inline-start: calc(1.125em - var(--border-width));
|
||
}
|
||
|
||
[type="checkbox"][aria-invalid="false"],
|
||
[type="checkbox"]:checked[aria-invalid="false"],
|
||
[type="radio"][aria-invalid="false"],
|
||
[type="radio"]:checked[aria-invalid="false"],
|
||
[type="checkbox"][role="switch"][aria-invalid="false"],
|
||
[type="checkbox"][role="switch"]:checked[aria-invalid="false"] {
|
||
--border-color: var(--form-element-valid-border-color);
|
||
}
|
||
[type="checkbox"][aria-invalid="true"],
|
||
[type="checkbox"]:checked[aria-invalid="true"],
|
||
[type="radio"][aria-invalid="true"],
|
||
[type="radio"]:checked[aria-invalid="true"],
|
||
[type="checkbox"][role="switch"][aria-invalid="true"],
|
||
[type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
|
||
--border-color: var(--form-element-invalid-border-color);
|
||
}
|
||
|
||
/**
|
||
* Form elements
|
||
* Alternatives input types (Not Checkboxes & Radios)
|
||
*/
|
||
[type="color"]::-webkit-color-swatch-wrapper {
|
||
padding: 0;
|
||
}
|
||
[type="color"]::-moz-focus-inner {
|
||
padding: 0;
|
||
}
|
||
[type="color"]::-webkit-color-swatch {
|
||
border: 0;
|
||
border-radius: calc(var(--border-radius) * 0.5);
|
||
}
|
||
[type="color"]::-moz-color-swatch {
|
||
border: 0;
|
||
border-radius: calc(var(--border-radius) * 0.5);
|
||
}
|
||
|
||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is(
|
||
[type="date"],
|
||
[type="datetime-local"],
|
||
[type="month"],
|
||
[type="time"],
|
||
[type="week"]
|
||
) {
|
||
--icon-position: 0.75rem;
|
||
--icon-width: 1rem;
|
||
padding-right: calc(var(--icon-width) + var(--icon-position));
|
||
background-image: var(--icon-date);
|
||
background-position: center right var(--icon-position);
|
||
background-size: var(--icon-width) auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
input:not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="range"],
|
||
[type="file"]
|
||
)[type="time"] {
|
||
background-image: var(--icon-time);
|
||
}
|
||
|
||
[type="date"]::-webkit-calendar-picker-indicator,
|
||
[type="datetime-local"]::-webkit-calendar-picker-indicator,
|
||
[type="month"]::-webkit-calendar-picker-indicator,
|
||
[type="time"]::-webkit-calendar-picker-indicator,
|
||
[type="week"]::-webkit-calendar-picker-indicator {
|
||
width: var(--icon-width);
|
||
margin-right: calc(var(--icon-width) * -1);
|
||
margin-left: var(--icon-position);
|
||
opacity: 0;
|
||
}
|
||
|
||
[dir="rtl"]
|
||
:is(
|
||
[type="date"],
|
||
[type="datetime-local"],
|
||
[type="month"],
|
||
[type="time"],
|
||
[type="week"]
|
||
) {
|
||
text-align: right;
|
||
}
|
||
|
||
[type="file"] {
|
||
--color: var(--muted-color);
|
||
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: none;
|
||
}
|
||
[type="file"]::file-selector-button {
|
||
--background-color: var(--secondary);
|
||
--border-color: var(--secondary);
|
||
--color: var(--secondary-inverse);
|
||
margin-right: calc(var(--spacing) / 2);
|
||
margin-left: 0;
|
||
-webkit-margin-start: 0;
|
||
margin-inline-start: 0;
|
||
-webkit-margin-end: calc(var(--spacing) / 2);
|
||
margin-inline-end: calc(var(--spacing) / 2);
|
||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||
calc(var(--form-element-spacing-horizontal) * 0.5);
|
||
border: var(--border-width) solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
outline: none;
|
||
background-color: var(--background-color);
|
||
box-shadow: var(--box-shadow);
|
||
color: var(--color);
|
||
font-weight: var(--font-weight);
|
||
font-size: 1rem;
|
||
line-height: var(--line-height);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: background-color var(--transition), border-color var(--transition),
|
||
color var(--transition), box-shadow var(--transition);
|
||
}
|
||
[type="file"]::file-selector-button:is(:hover, :active, :focus) {
|
||
--background-color: var(--secondary-hover);
|
||
--border-color: var(--secondary-hover);
|
||
}
|
||
[type="file"]::-webkit-file-upload-button {
|
||
--background-color: var(--secondary);
|
||
--border-color: var(--secondary);
|
||
--color: var(--secondary-inverse);
|
||
margin-right: calc(var(--spacing) / 2);
|
||
margin-left: 0;
|
||
-webkit-margin-start: 0;
|
||
margin-inline-start: 0;
|
||
-webkit-margin-end: calc(var(--spacing) / 2);
|
||
margin-inline-end: calc(var(--spacing) / 2);
|
||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||
calc(var(--form-element-spacing-horizontal) * 0.5);
|
||
border: var(--border-width) solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
outline: none;
|
||
background-color: var(--background-color);
|
||
box-shadow: var(--box-shadow);
|
||
color: var(--color);
|
||
font-weight: var(--font-weight);
|
||
font-size: 1rem;
|
||
line-height: var(--line-height);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
-webkit-transition: background-color var(--transition),
|
||
border-color var(--transition), color var(--transition),
|
||
box-shadow var(--transition);
|
||
transition: background-color var(--transition), border-color var(--transition),
|
||
color var(--transition), box-shadow var(--transition);
|
||
}
|
||
[type="file"]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||
--background-color: var(--secondary-hover);
|
||
--border-color: var(--secondary-hover);
|
||
}
|
||
[type="file"]::-ms-browse {
|
||
--background-color: var(--secondary);
|
||
--border-color: var(--secondary);
|
||
--color: var(--secondary-inverse);
|
||
margin-right: calc(var(--spacing) / 2);
|
||
margin-left: 0;
|
||
margin-inline-start: 0;
|
||
margin-inline-end: calc(var(--spacing) / 2);
|
||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||
calc(var(--form-element-spacing-horizontal) * 0.5);
|
||
border: var(--border-width) solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
outline: none;
|
||
background-color: var(--background-color);
|
||
box-shadow: var(--box-shadow);
|
||
color: var(--color);
|
||
font-weight: var(--font-weight);
|
||
font-size: 1rem;
|
||
line-height: var(--line-height);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
-ms-transition: background-color var(--transition),
|
||
border-color var(--transition), color var(--transition),
|
||
box-shadow var(--transition);
|
||
transition: background-color var(--transition), border-color var(--transition),
|
||
color var(--transition), box-shadow var(--transition);
|
||
}
|
||
[type="file"]::-ms-browse:is(:hover, :active, :focus) {
|
||
--background-color: var(--secondary-hover);
|
||
--border-color: var(--secondary-hover);
|
||
}
|
||
|
||
[type="range"] {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
width: 100%;
|
||
height: 1.25rem;
|
||
background: none;
|
||
}
|
||
[type="range"]::-webkit-slider-runnable-track {
|
||
width: 100%;
|
||
height: 0.25rem;
|
||
border-radius: var(--border-radius);
|
||
background-color: var(--range-border-color);
|
||
-webkit-transition: background-color var(--transition),
|
||
box-shadow var(--transition);
|
||
transition: background-color var(--transition), box-shadow var(--transition);
|
||
}
|
||
[type="range"]::-moz-range-track {
|
||
width: 100%;
|
||
height: 0.25rem;
|
||
border-radius: var(--border-radius);
|
||
background-color: var(--range-border-color);
|
||
-moz-transition: background-color var(--transition),
|
||
box-shadow var(--transition);
|
||
transition: background-color var(--transition), box-shadow var(--transition);
|
||
}
|
||
[type="range"]::-ms-track {
|
||
width: 100%;
|
||
height: 0.25rem;
|
||
border-radius: var(--border-radius);
|
||
background-color: var(--range-border-color);
|
||
-ms-transition: background-color var(--transition),
|
||
box-shadow var(--transition);
|
||
transition: background-color var(--transition), box-shadow var(--transition);
|
||
}
|
||
[type="range"]::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
margin-top: -0.5rem;
|
||
border: 2px solid var(--range-thumb-border-color);
|
||
border-radius: 50%;
|
||
background-color: var(--range-thumb-color);
|
||
cursor: pointer;
|
||
-webkit-transition: background-color var(--transition),
|
||
transform var(--transition);
|
||
transition: background-color var(--transition), transform var(--transition);
|
||
}
|
||
[type="range"]::-moz-range-thumb {
|
||
-webkit-appearance: none;
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
margin-top: -0.5rem;
|
||
border: 2px solid var(--range-thumb-border-color);
|
||
border-radius: 50%;
|
||
background-color: var(--range-thumb-color);
|
||
cursor: pointer;
|
||
-moz-transition: background-color var(--transition),
|
||
transform var(--transition);
|
||
transition: background-color var(--transition), transform var(--transition);
|
||
}
|
||
[type="range"]::-ms-thumb {
|
||
-webkit-appearance: none;
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
margin-top: -0.5rem;
|
||
border: 2px solid var(--range-thumb-border-color);
|
||
border-radius: 50%;
|
||
background-color: var(--range-thumb-color);
|
||
cursor: pointer;
|
||
-ms-transition: background-color var(--transition),
|
||
transform var(--transition);
|
||
transition: background-color var(--transition), transform var(--transition);
|
||
}
|
||
[type="range"]:hover,
|
||
[type="range"]:focus {
|
||
--range-border-color: var(--range-active-border-color);
|
||
--range-thumb-color: var(--range-thumb-hover-color);
|
||
}
|
||
[type="range"]:active {
|
||
--range-thumb-color: var(--range-thumb-active-color);
|
||
}
|
||
[type="range"]:active::-webkit-slider-thumb {
|
||
transform: scale(1.25);
|
||
}
|
||
[type="range"]:active::-moz-range-thumb {
|
||
transform: scale(1.25);
|
||
}
|
||
[type="range"]:active::-ms-thumb {
|
||
transform: scale(1.25);
|
||
}
|
||
|
||
input:not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="range"],
|
||
[type="file"]
|
||
)[type="search"] {
|
||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||
border-radius: 5rem;
|
||
background-image: var(--icon-search);
|
||
background-position: center left 1.125rem;
|
||
background-size: 1rem auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
input:not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="range"],
|
||
[type="file"]
|
||
)[type="search"][aria-invalid] {
|
||
-webkit-padding-start: calc(
|
||
var(--form-element-spacing-horizontal) + 1.75rem
|
||
) !important;
|
||
padding-inline-start: calc(
|
||
var(--form-element-spacing-horizontal) + 1.75rem
|
||
) !important;
|
||
background-position: center left 1.125rem, center right 0.75rem;
|
||
}
|
||
input:not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="range"],
|
||
[type="file"]
|
||
)[type="search"][aria-invalid="false"] {
|
||
background-image: var(--icon-search), var(--icon-valid);
|
||
}
|
||
input:not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="range"],
|
||
[type="file"]
|
||
)[type="search"][aria-invalid="true"] {
|
||
background-image: var(--icon-search), var(--icon-invalid);
|
||
}
|
||
|
||
[type="search"]::-webkit-search-cancel-button {
|
||
-webkit-appearance: none;
|
||
display: none;
|
||
}
|
||
|
||
[dir="rtl"]
|
||
:where(input):not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="range"],
|
||
[type="file"]
|
||
)[type="search"] {
|
||
background-position: center right 1.125rem;
|
||
}
|
||
[dir="rtl"]
|
||
:where(input):not(
|
||
[type="checkbox"],
|
||
[type="radio"],
|
||
[type="range"],
|
||
[type="file"]
|
||
)[type="search"][aria-invalid] {
|
||
background-position: center right 1.125rem, center left 0.75rem;
|
||
}
|
||
|
||
/**
|
||
* Table
|
||
*/
|
||
:where(table) {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
text-indent: 0;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||
border-bottom: var(--border-width) solid var(--table-border-color);
|
||
color: var(--color);
|
||
font-weight: var(--font-weight);
|
||
font-size: var(--font-size);
|
||
text-align: left;
|
||
text-align: start;
|
||
}
|
||
|
||
tfoot th,
|
||
tfoot td {
|
||
border-top: var(--border-width) solid var(--table-border-color);
|
||
border-bottom: 0;
|
||
}
|
||
|
||
table[role="grid"] tbody tr:nth-child(odd) {
|
||
background-color: var(--table-row-stripped-background-color);
|
||
}
|
||
|
||
/**
|
||
* Code
|
||
*/
|
||
pre,
|
||
code,
|
||
kbd,
|
||
samp {
|
||
font-size: 0.875em;
|
||
font-family: var(--font-family);
|
||
}
|
||
|
||
pre {
|
||
-ms-overflow-style: scrollbar;
|
||
overflow: auto;
|
||
}
|
||
|
||
pre,
|
||
code,
|
||
kbd {
|
||
border-radius: var(--border-radius);
|
||
background: var(--code-background-color);
|
||
color: var(--code-color);
|
||
font-weight: var(--font-weight);
|
||
line-height: initial;
|
||
}
|
||
|
||
code,
|
||
kbd {
|
||
display: inline-block;
|
||
padding: 0.375rem 0.5rem;
|
||
}
|
||
|
||
pre {
|
||
display: block;
|
||
margin-bottom: var(--spacing);
|
||
overflow-x: auto;
|
||
}
|
||
pre > code {
|
||
display: block;
|
||
padding: var(--spacing);
|
||
background: none;
|
||
font-size: 14px;
|
||
line-height: var(--line-height);
|
||
}
|
||
|
||
code b {
|
||
color: var(--code-tag-color);
|
||
font-weight: var(--font-weight);
|
||
}
|
||
code i {
|
||
color: var(--code-property-color);
|
||
font-style: normal;
|
||
}
|
||
code u {
|
||
color: var(--code-value-color);
|
||
text-decoration: none;
|
||
}
|
||
code em {
|
||
color: var(--code-comment-color);
|
||
font-style: normal;
|
||
}
|
||
|
||
kbd {
|
||
background-color: var(--code-kbd-background-color);
|
||
color: var(--code-kbd-color);
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
/**
|
||
* Miscs
|
||
*/
|
||
hr {
|
||
height: 0;
|
||
border: 0;
|
||
border-top: 1px solid var(--muted-border-color);
|
||
color: inherit;
|
||
}
|
||
|
||
[hidden],
|
||
template {
|
||
display: none !important;
|
||
}
|
||
|
||
canvas {
|
||
display: inline-block;
|
||
}
|
||
|
||
/**
|
||
* Accordion (<details>)
|
||
*/
|
||
details {
|
||
display: block;
|
||
margin-bottom: var(--spacing);
|
||
padding-bottom: var(--spacing);
|
||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||
}
|
||
details summary {
|
||
line-height: 1rem;
|
||
list-style-type: none;
|
||
cursor: pointer;
|
||
transition: color var(--transition);
|
||
}
|
||
details summary:not([role]) {
|
||
color: var(--accordion-close-summary-color);
|
||
}
|
||
details summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
details summary::marker {
|
||
display: none;
|
||
}
|
||
details summary::-moz-list-bullet {
|
||
list-style-type: none;
|
||
}
|
||
details summary::after {
|
||
display: block;
|
||
width: 1rem;
|
||
height: 1rem;
|
||
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
|
||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||
float: right;
|
||
transform: rotate(-90deg);
|
||
background-image: var(--icon-chevron);
|
||
background-position: right center;
|
||
background-size: 1rem auto;
|
||
background-repeat: no-repeat;
|
||
content: "";
|
||
transition: transform var(--transition);
|
||
}
|
||
details summary:focus {
|
||
outline: none;
|
||
}
|
||
details summary:focus:not([role="button"]) {
|
||
color: var(--accordion-active-summary-color);
|
||
}
|
||
details summary[role="button"] {
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
details summary[role="button"]::after {
|
||
height: calc(1rem * var(--line-height, 1.5));
|
||
background-image: var(--icon-chevron-button);
|
||
}
|
||
details summary[role="button"]:not(.outline).contrast::after {
|
||
background-image: var(--icon-chevron-button-inverse);
|
||
}
|
||
details[open] > summary {
|
||
margin-bottom: calc(var(--spacing));
|
||
}
|
||
details[open] > summary:not([role]):not(:focus) {
|
||
color: var(--accordion-open-summary-color);
|
||
}
|
||
details[open] > summary::after {
|
||
transform: rotate(0);
|
||
}
|
||
|
||
[dir="rtl"] details summary {
|
||
text-align: right;
|
||
}
|
||
[dir="rtl"] details summary::after {
|
||
float: left;
|
||
background-position: left center;
|
||
}
|
||
|
||
/**
|
||
* Card (<article>)
|
||
*/
|
||
article {
|
||
margin: var(--block-spacing-vertical) 0;
|
||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||
border-radius: var(--border-radius);
|
||
background: var(--card-background-color);
|
||
box-shadow: var(--card-box-shadow);
|
||
}
|
||
article > header,
|
||
article > footer {
|
||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||
padding: calc(var(--block-spacing-vertical) * 0.66)
|
||
var(--block-spacing-horizontal);
|
||
background-color: var(--card-sectionning-background-color);
|
||
}
|
||
article > header {
|
||
margin-top: calc(var(--block-spacing-vertical) * -1);
|
||
margin-bottom: var(--block-spacing-vertical);
|
||
border-bottom: var(--border-width) solid var(--card-border-color);
|
||
border-top-right-radius: var(--border-radius);
|
||
border-top-left-radius: var(--border-radius);
|
||
}
|
||
article > footer {
|
||
margin-top: var(--block-spacing-vertical);
|
||
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||
border-top: var(--border-width) solid var(--card-border-color);
|
||
border-bottom-right-radius: var(--border-radius);
|
||
border-bottom-left-radius: var(--border-radius);
|
||
}
|
||
|
||
/**
|
||
* Modal (<dialog>)
|
||
*/
|
||
#mount {
|
||
--scrollbar-width: 0px;
|
||
}
|
||
|
||
dialog {
|
||
display: flex;
|
||
z-index: 999;
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: inherit;
|
||
min-width: 100%;
|
||
height: inherit;
|
||
min-height: 100%;
|
||
padding: var(--spacing);
|
||
border: 0;
|
||
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
|
||
backdrop-filter: var(--modal-overlay-backdrop-filter);
|
||
background-color: var(--modal-overlay-background-color);
|
||
color: var(--color);
|
||
}
|
||
dialog article {
|
||
max-height: calc(100vh - var(--spacing) * 2);
|
||
overflow: auto;
|
||
}
|
||
@media (min-width: 576px) {
|
||
dialog article {
|
||
max-width: 510px;
|
||
}
|
||
}
|
||
@media (min-width: 768px) {
|
||
dialog article {
|
||
max-width: 700px;
|
||
}
|
||
}
|
||
dialog article > header,
|
||
dialog article > footer {
|
||
padding: calc(var(--block-spacing-vertical) * 0.5)
|
||
var(--block-spacing-horizontal);
|
||
}
|
||
dialog article > header .close {
|
||
margin: 0;
|
||
margin-left: var(--spacing);
|
||
float: right;
|
||
}
|
||
dialog article > footer {
|
||
text-align: right;
|
||
}
|
||
dialog article > footer [role="button"] {
|
||
margin-bottom: 0;
|
||
}
|
||
dialog article > footer [role="button"]:not(:first-of-type) {
|
||
margin-left: calc(var(--spacing) * 0.5);
|
||
}
|
||
dialog article p:last-of-type {
|
||
margin: 0;
|
||
}
|
||
dialog article .close {
|
||
display: block;
|
||
width: 1rem;
|
||
height: 1rem;
|
||
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||
margin-bottom: var(--typography-spacing-vertical);
|
||
margin-left: auto;
|
||
background-image: var(--icon-close);
|
||
background-position: center;
|
||
background-size: auto 1rem;
|
||
background-repeat: no-repeat;
|
||
opacity: 0.5;
|
||
transition: opacity var(--transition);
|
||
}
|
||
dialog article .close:is([aria-current], :hover, :active, :focus) {
|
||
opacity: 1;
|
||
}
|
||
dialog:not([open]),
|
||
dialog[open="false"] {
|
||
display: none;
|
||
}
|
||
|
||
.modal-is-open {
|
||
padding-right: var(--scrollbar-width, 0px);
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
.modal-is-open dialog {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
:where(.modal-is-opening, .modal-is-closing) dialog,
|
||
:where(.modal-is-opening, .modal-is-closing) dialog > article {
|
||
animation-duration: 0.2s;
|
||
animation-timing-function: ease-in-out;
|
||
animation-fill-mode: both;
|
||
}
|
||
:where(.modal-is-opening, .modal-is-closing) dialog {
|
||
animation-duration: 0.8s;
|
||
animation-name: modal-overlay;
|
||
}
|
||
:where(.modal-is-opening, .modal-is-closing) dialog > article {
|
||
animation-delay: 0.2s;
|
||
animation-name: modal;
|
||
}
|
||
|
||
.modal-is-closing dialog,
|
||
.modal-is-closing dialog > article {
|
||
animation-delay: 0s;
|
||
animation-direction: reverse;
|
||
}
|
||
|
||
@keyframes modal-overlay {
|
||
from {
|
||
-webkit-backdrop-filter: none;
|
||
backdrop-filter: none;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
@keyframes modal {
|
||
from {
|
||
transform: translateY(-100%);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
/**
|
||
* Nav
|
||
*/
|
||
:where(nav li)::before {
|
||
float: left;
|
||
content: "";
|
||
}
|
||
|
||
nav,
|
||
nav ul {
|
||
display: flex;
|
||
}
|
||
|
||
nav {
|
||
justify-content: space-between;
|
||
}
|
||
nav ol,
|
||
nav ul {
|
||
align-items: center;
|
||
margin-bottom: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
nav ol:first-of-type,
|
||
nav ul:first-of-type {
|
||
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
|
||
}
|
||
nav ol:last-of-type,
|
||
nav ul:last-of-type {
|
||
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
|
||
}
|
||
nav li {
|
||
display: inline-block;
|
||
margin: 0;
|
||
padding: var(--nav-element-spacing-vertical)
|
||
var(--nav-element-spacing-horizontal);
|
||
}
|
||
nav li > * {
|
||
--spacing: 0;
|
||
}
|
||
nav :where(a, [role="link"]) {
|
||
display: inline-block;
|
||
margin: calc(var(--nav-link-spacing-vertical) * -1)
|
||
calc(var(--nav-link-spacing-horizontal) * -1);
|
||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||
border-radius: var(--border-radius);
|
||
text-decoration: none;
|
||
}
|
||
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
|
||
text-decoration: none;
|
||
}
|
||
nav[aria-label="breadcrumb"] {
|
||
align-items: center;
|
||
justify-content: start;
|
||
}
|
||
nav[aria-label="breadcrumb"] ul li:not(:first-child) {
|
||
-webkit-margin-start: var(--nav-link-spacing-horizontal);
|
||
margin-inline-start: var(--nav-link-spacing-horizontal);
|
||
}
|
||
nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
|
||
position: absolute;
|
||
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
||
content: "/";
|
||
color: var(--muted-color);
|
||
text-align: center;
|
||
}
|
||
nav[aria-label="breadcrumb"] a[aria-current] {
|
||
background-color: transparent;
|
||
color: inherit;
|
||
text-decoration: none;
|
||
pointer-events: none;
|
||
}
|
||
nav [role="button"] {
|
||
margin-right: inherit;
|
||
margin-left: inherit;
|
||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||
}
|
||
|
||
aside nav,
|
||
aside ol,
|
||
aside ul,
|
||
aside li {
|
||
display: block;
|
||
}
|
||
aside li {
|
||
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
|
||
var(--nav-element-spacing-horizontal);
|
||
}
|
||
aside li a {
|
||
display: block;
|
||
}
|
||
aside li [role="button"] {
|
||
margin: inherit;
|
||
}
|
||
|
||
[dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
|
||
content: "\\";
|
||
}
|
||
|
||
/**
|
||
* Progress
|
||
*/
|
||
progress {
|
||
display: inline-block;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
progress {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
display: inline-block;
|
||
appearance: none;
|
||
width: 100%;
|
||
height: 0.5rem;
|
||
margin-bottom: calc(var(--spacing) * 0.5);
|
||
overflow: hidden;
|
||
border: 0;
|
||
border-radius: var(--border-radius);
|
||
background-color: var(--progress-background-color);
|
||
color: var(--progress-color);
|
||
}
|
||
progress::-webkit-progress-bar {
|
||
border-radius: var(--border-radius);
|
||
background: none;
|
||
}
|
||
progress[value]::-webkit-progress-value {
|
||
background-color: var(--progress-color);
|
||
}
|
||
progress::-moz-progress-bar {
|
||
background-color: var(--progress-color);
|
||
}
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
progress:indeterminate {
|
||
background: var(--progress-background-color)
|
||
linear-gradient(
|
||
to right,
|
||
var(--progress-color) 30%,
|
||
var(--progress-background-color) 30%
|
||
)
|
||
top left/150% 150% no-repeat;
|
||
animation: progress-indeterminate 1s linear infinite;
|
||
}
|
||
progress:indeterminate[value]::-webkit-progress-value {
|
||
background-color: transparent;
|
||
}
|
||
progress:indeterminate::-moz-progress-bar {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
[dir="rtl"] progress:indeterminate {
|
||
animation-direction: reverse;
|
||
}
|
||
}
|
||
|
||
@keyframes progress-indeterminate {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
/**
|
||
* Dropdown ([role="list"])
|
||
*/
|
||
details[role="list"],
|
||
li[role="list"] {
|
||
position: relative;
|
||
}
|
||
|
||
details[role="list"] summary + ul,
|
||
li[role="list"] > ul {
|
||
display: flex;
|
||
z-index: 99;
|
||
position: absolute;
|
||
top: auto;
|
||
right: 0;
|
||
left: 0;
|
||
flex-direction: column;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: var(--border-width) solid var(--dropdown-border-color);
|
||
border-radius: var(--border-radius);
|
||
border-top-right-radius: 0;
|
||
border-top-left-radius: 0;
|
||
background-color: var(--dropdown-background-color);
|
||
box-shadow: var(--card-box-shadow);
|
||
color: var(--dropdown-color);
|
||
white-space: nowrap;
|
||
}
|
||
details[role="list"] summary + ul li,
|
||
li[role="list"] > ul li {
|
||
width: 100%;
|
||
margin-bottom: 0;
|
||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||
var(--form-element-spacing-horizontal);
|
||
list-style: none;
|
||
}
|
||
details[role="list"] summary + ul li:first-of-type,
|
||
li[role="list"] > ul li:first-of-type {
|
||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||
}
|
||
details[role="list"] summary + ul li:last-of-type,
|
||
li[role="list"] > ul li:last-of-type {
|
||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||
}
|
||
details[role="list"] summary + ul li a,
|
||
li[role="list"] > ul li a {
|
||
display: block;
|
||
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
||
calc(var(--form-element-spacing-horizontal) * -1);
|
||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||
var(--form-element-spacing-horizontal);
|
||
overflow: hidden;
|
||
color: var(--dropdown-color);
|
||
text-decoration: none;
|
||
text-overflow: ellipsis;
|
||
}
|
||
details[role="list"] summary + ul li a:hover,
|
||
li[role="list"] > ul li a:hover {
|
||
background-color: var(--dropdown-hover-background-color);
|
||
}
|
||
|
||
details[role="list"] summary::after,
|
||
li[role="list"] > a::after {
|
||
display: block;
|
||
width: 1rem;
|
||
height: calc(1rem * var(--line-height, 1.5));
|
||
-webkit-margin-start: 0.5rem;
|
||
margin-inline-start: 0.5rem;
|
||
float: right;
|
||
transform: rotate(0deg);
|
||
background-position: right center;
|
||
background-size: 1rem auto;
|
||
background-repeat: no-repeat;
|
||
content: "";
|
||
}
|
||
|
||
details[role="list"] {
|
||
padding: 0;
|
||
border-bottom: none;
|
||
}
|
||
details[role="list"] summary {
|
||
margin-bottom: 0;
|
||
}
|
||
details[role="list"] summary:not([role]) {
|
||
height: calc(
|
||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
||
var(--border-width) * 2
|
||
);
|
||
padding: var(--form-element-spacing-vertical)
|
||
var(--form-element-spacing-horizontal);
|
||
border: var(--border-width) solid var(--form-element-border-color);
|
||
border-radius: var(--border-radius);
|
||
background-color: var(--form-element-background-color);
|
||
color: var(--form-element-placeholder-color);
|
||
line-height: inherit;
|
||
cursor: pointer;
|
||
transition: background-color var(--transition), border-color var(--transition),
|
||
color var(--transition), box-shadow var(--transition);
|
||
}
|
||
details[role="list"] summary:not([role]):active,
|
||
details[role="list"] summary:not([role]):focus {
|
||
border-color: var(--form-element-active-border-color);
|
||
background-color: var(--form-element-active-background-color);
|
||
}
|
||
details[role="list"] summary:not([role]):focus {
|
||
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||
}
|
||
details[role="list"][open] summary {
|
||
border-bottom-right-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
details[role="list"][open] summary::before {
|
||
display: block;
|
||
z-index: 1;
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: none;
|
||
content: "";
|
||
cursor: default;
|
||
}
|
||
|
||
nav details[role="list"] summary,
|
||
nav li[role="list"] a {
|
||
display: flex;
|
||
direction: ltr;
|
||
}
|
||
|
||
nav details[role="list"] summary + ul,
|
||
nav li[role="list"] > ul {
|
||
min-width: -moz-fit-content;
|
||
min-width: fit-content;
|
||
border-radius: var(--border-radius);
|
||
}
|
||
nav details[role="list"] summary + ul li a,
|
||
nav li[role="list"] > ul li a {
|
||
border-radius: 0;
|
||
}
|
||
|
||
nav details[role="list"] summary,
|
||
nav details[role="list"] summary:not([role]) {
|
||
height: auto;
|
||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||
}
|
||
nav details[role="list"][open] summary {
|
||
border-radius: var(--border-radius);
|
||
}
|
||
nav details[role="list"] summary + ul {
|
||
margin-top: var(--outline-width);
|
||
-webkit-margin-start: 0;
|
||
margin-inline-start: 0;
|
||
}
|
||
nav details[role="list"] summary[role="link"] {
|
||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||
line-height: var(--line-height);
|
||
}
|
||
nav details[role="list"] summary[role="link"] + ul {
|
||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||
}
|
||
|
||
li[role="list"]:hover > ul,
|
||
li[role="list"] a:active ~ ul,
|
||
li[role="list"] a:focus ~ ul {
|
||
display: flex;
|
||
}
|
||
li[role="list"] > ul {
|
||
display: none;
|
||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||
-webkit-margin-start: calc(
|
||
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
|
||
);
|
||
margin-inline-start: calc(
|
||
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
|
||
);
|
||
}
|
||
li[role="list"] > a::after {
|
||
background-image: var(--icon-chevron);
|
||
}
|
||
|
||
/**
|
||
* Loading ([aria-busy=true])
|
||
*/
|
||
[aria-busy="true"] {
|
||
cursor: progress;
|
||
}
|
||
|
||
[aria-busy="true"]:not(input, select, textarea)::before {
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
border: 0.1875em solid currentColor;
|
||
border-radius: 1em;
|
||
border-right-color: transparent;
|
||
content: "";
|
||
vertical-align: text-bottom;
|
||
vertical-align: -0.125em;
|
||
animation: spinner 0.75s linear infinite;
|
||
opacity: var(--loading-spinner-opacity);
|
||
}
|
||
[aria-busy="true"]:not(input, select, textarea):not(:empty)::before {
|
||
margin-right: calc(var(--spacing) * 0.5);
|
||
margin-left: 0;
|
||
-webkit-margin-start: 0;
|
||
margin-inline-start: 0;
|
||
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
||
margin-inline-end: calc(var(--spacing) * 0.5);
|
||
}
|
||
[aria-busy="true"]:not(input, select, textarea):empty {
|
||
text-align: center;
|
||
}
|
||
|
||
button[aria-busy="true"],
|
||
input[type="submit"][aria-busy="true"],
|
||
input[type="button"][aria-busy="true"],
|
||
input[type="reset"][aria-busy="true"],
|
||
a[aria-busy="true"] {
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes spinner {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
/**
|
||
* Tooltip ([data-tooltip])
|
||
*/
|
||
[data-tooltip] {
|
||
position: relative;
|
||
}
|
||
[data-tooltip]:not(a, button, input) {
|
||
border-bottom: 1px dotted;
|
||
text-decoration: none;
|
||
cursor: help;
|
||
}
|
||
[data-tooltip][data-placement="top"]::before,
|
||
[data-tooltip][data-placement="top"]::after,
|
||
[data-tooltip]::before,
|
||
[data-tooltip]::after {
|
||
display: block;
|
||
z-index: 99;
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
padding: 0.25rem 0.5rem;
|
||
overflow: hidden;
|
||
transform: translate(-50%, -0.25rem);
|
||
border-radius: var(--border-radius);
|
||
background: var(--tooltip-background-color);
|
||
content: attr(data-tooltip);
|
||
color: var(--tooltip-color);
|
||
font-style: normal;
|
||
font-weight: var(--font-weight);
|
||
font-size: 0.875rem;
|
||
text-decoration: none;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
[data-tooltip][data-placement="top"]::after,
|
||
[data-tooltip]::after {
|
||
padding: 0;
|
||
transform: translate(-50%, 0rem);
|
||
border-top: 0.3rem solid;
|
||
border-right: 0.3rem solid transparent;
|
||
border-left: 0.3rem solid transparent;
|
||
border-radius: 0;
|
||
background-color: transparent;
|
||
content: "";
|
||
color: var(--tooltip-background-color);
|
||
}
|
||
[data-tooltip][data-placement="bottom"]::before,
|
||
[data-tooltip][data-placement="bottom"]::after {
|
||
top: 100%;
|
||
bottom: auto;
|
||
transform: translate(-50%, 0.25rem);
|
||
}
|
||
[data-tooltip][data-placement="bottom"]:after {
|
||
transform: translate(-50%, -0.3rem);
|
||
border: 0.3rem solid transparent;
|
||
border-bottom: 0.3rem solid;
|
||
}
|
||
[data-tooltip][data-placement="left"]::before,
|
||
[data-tooltip][data-placement="left"]::after {
|
||
top: 50%;
|
||
right: 100%;
|
||
bottom: auto;
|
||
left: auto;
|
||
transform: translate(-0.25rem, -50%);
|
||
}
|
||
[data-tooltip][data-placement="left"]:after {
|
||
transform: translate(0.3rem, -50%);
|
||
border: 0.3rem solid transparent;
|
||
border-left: 0.3rem solid;
|
||
}
|
||
[data-tooltip][data-placement="right"]::before,
|
||
[data-tooltip][data-placement="right"]::after {
|
||
top: 50%;
|
||
right: auto;
|
||
bottom: auto;
|
||
left: 100%;
|
||
transform: translate(0.25rem, -50%);
|
||
}
|
||
[data-tooltip][data-placement="right"]:after {
|
||
transform: translate(-0.3rem, -50%);
|
||
border: 0.3rem solid transparent;
|
||
border-right: 0.3rem solid;
|
||
}
|
||
[data-tooltip]:focus::before,
|
||
[data-tooltip]:focus::after,
|
||
[data-tooltip]:hover::before,
|
||
[data-tooltip]:hover::after {
|
||
opacity: 1;
|
||
}
|
||
@media (hover: hover) and (pointer: fine) {
|
||
[data-tooltip][data-placement="bottom"]:focus::before,
|
||
[data-tooltip][data-placement="bottom"]:focus::after,
|
||
[data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::before,
|
||
[data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after,
|
||
[data-tooltip]:hover::before,
|
||
[data-tooltip]:hover::after {
|
||
animation-duration: 0.2s;
|
||
animation-name: tooltip-slide-top;
|
||
}
|
||
[data-tooltip][data-placement="bottom"]:focus::after,
|
||
[data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after,
|
||
[data-tooltip]:hover::after {
|
||
animation-name: tooltip-caret-slide-top;
|
||
}
|
||
[data-tooltip][data-placement="bottom"]:focus::before,
|
||
[data-tooltip][data-placement="bottom"]:focus::after,
|
||
[data-tooltip][data-placement="bottom"]:hover::before,
|
||
[data-tooltip][data-placement="bottom"]:hover::after {
|
||
animation-duration: 0.2s;
|
||
animation-name: tooltip-slide-bottom;
|
||
}
|
||
[data-tooltip][data-placement="bottom"]:focus::after,
|
||
[data-tooltip][data-placement="bottom"]:hover::after {
|
||
animation-name: tooltip-caret-slide-bottom;
|
||
}
|
||
[data-tooltip][data-placement="left"]:focus::before,
|
||
[data-tooltip][data-placement="left"]:focus::after,
|
||
[data-tooltip][data-placement="left"]:hover::before,
|
||
[data-tooltip][data-placement="left"]:hover::after {
|
||
animation-duration: 0.2s;
|
||
animation-name: tooltip-slide-left;
|
||
}
|
||
[data-tooltip][data-placement="left"]:focus::after,
|
||
[data-tooltip][data-placement="left"]:hover::after {
|
||
animation-name: tooltip-caret-slide-left;
|
||
}
|
||
[data-tooltip][data-placement="right"]:focus::before,
|
||
[data-tooltip][data-placement="right"]:focus::after,
|
||
[data-tooltip][data-placement="right"]:hover::before,
|
||
[data-tooltip][data-placement="right"]:hover::after {
|
||
animation-duration: 0.2s;
|
||
animation-name: tooltip-slide-right;
|
||
}
|
||
[data-tooltip][data-placement="right"]:focus::after,
|
||
[data-tooltip][data-placement="right"]:hover::after {
|
||
animation-name: tooltip-caret-slide-right;
|
||
}
|
||
}
|
||
@keyframes tooltip-slide-top {
|
||
from {
|
||
transform: translate(-50%, 0.75rem);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translate(-50%, -0.25rem);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes tooltip-caret-slide-top {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
transform: translate(-50%, -0.25rem);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translate(-50%, 0rem);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes tooltip-slide-bottom {
|
||
from {
|
||
transform: translate(-50%, -0.75rem);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translate(-50%, 0.25rem);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes tooltip-caret-slide-bottom {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
transform: translate(-50%, -0.5rem);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translate(-50%, -0.3rem);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes tooltip-slide-left {
|
||
from {
|
||
transform: translate(0.75rem, -50%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translate(-0.25rem, -50%);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes tooltip-caret-slide-left {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
transform: translate(0.05rem, -50%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translate(0.3rem, -50%);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes tooltip-slide-right {
|
||
from {
|
||
transform: translate(-0.75rem, -50%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translate(0.25rem, -50%);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes tooltip-caret-slide-right {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
transform: translate(-0.05rem, -50%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translate(-0.3rem, -50%);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Accessibility & User interaction
|
||
*/
|
||
[aria-controls] {
|
||
cursor: pointer;
|
||
}
|
||
|
||
[aria-disabled="true"],
|
||
[disabled] {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
[aria-hidden="false"][hidden] {
|
||
display: initial;
|
||
}
|
||
|
||
[aria-hidden="false"][hidden]:not(:focus) {
|
||
clip: rect(0, 0, 0, 0);
|
||
position: absolute;
|
||
}
|
||
|
||
a,
|
||
area,
|
||
button,
|
||
input,
|
||
label,
|
||
select,
|
||
summary,
|
||
textarea,
|
||
[tabindex] {
|
||
-ms-touch-action: manipulation;
|
||
}
|
||
|
||
[dir="rtl"] {
|
||
direction: rtl;
|
||
}
|
||
|
||
/**
|
||
* Reduce Motion Features
|
||
*/
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*:not([aria-busy="true"]),
|
||
:not([aria-busy="true"])::before,
|
||
:not([aria-busy="true"])::after {
|
||
background-attachment: initial !important;
|
||
animation-duration: 1ms !important;
|
||
animation-delay: -1ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
scroll-behavior: auto !important;
|
||
transition-delay: 0s !important;
|
||
transition-duration: 0s !important;
|
||
}
|
||
}
|
||
|
||
#mount {
|
||
/* --primary: rgb(227, 59, 126); */
|
||
--primary: #ea4c89;
|
||
--primary-hover: #f082ac;
|
||
--icon-xia: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkZyYW1lIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguMDAyOTEgOS42Nzk4M0wzLjgzMzM5IDUuNTEyMjFMMy4wMjUzOSA2LjMxOTgzTDguMDAzMjkgMTEuMjk1MUwxMi45NzYyIDYuMzE5ODNMMTIuMTY3OSA1LjUxMjIxTDguMDAyOTEgOS42Nzk4M1oiIGZpbGw9IiM4MzgzODMiLz4KPC9nPgo8L3N2Zz4K");
|
||
--switch-checked-background-color: var(--primary);
|
||
}
|
||
|
||
[data-theme="light"],
|
||
#mount:not([data-theme="dark"]) {
|
||
--primary: #e23c7c;
|
||
--primary-hover: #f082ac;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--primary: #e23c7c;
|
||
--primary-hover: #f082ac;
|
||
}
|
||
|
||
[data-theme="light"] {
|
||
--primary: #ea4c89;
|
||
--primary-hover: #f082ac;
|
||
}
|
||
|
||
li.select-link.select-link:hover > ul {
|
||
display: none;
|
||
}
|
||
li.select-link.select-link > ul {
|
||
display: none;
|
||
}
|
||
li.select-link.select-link a:focus ~ ul {
|
||
display: none;
|
||
}
|
||
|
||
li.select-link.select-link a:active ~ ul {
|
||
display: none;
|
||
}
|
||
li.select-link-active.select-link-active > ul {
|
||
display: flex;
|
||
}
|
||
li.select-link-active.select-link-active:hover > ul {
|
||
display: flex;
|
||
}
|
||
|
||
li.select-link-active.select-link-active a:focus ~ ul {
|
||
display: flex;
|
||
}
|
||
|
||
li.select-link-active.select-link-active a:active ~ ul {
|
||
display: flex;
|
||
}
|
||
ul.select-link-ul.select-link-ul {
|
||
right: 0px;
|
||
left: auto;
|
||
}
|
||
|
||
a.select-link-selected {
|
||
background-color: var(--primary-focus);
|
||
}
|
||
.immersive-translate-no-select {
|
||
-webkit-touch-callout: none; /* iOS Safari */
|
||
-webkit-user-select: none; /* Safari */
|
||
-khtml-user-select: none; /* Konqueror HTML */
|
||
-moz-user-select: none; /* Old versions of Firefox */
|
||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||
user-select: none;
|
||
}
|
||
|
||
/* li[role="list"].no-arrow > a::after { */
|
||
/* background-image: none; */
|
||
/* width: 0; */
|
||
/* color: var(--color); */
|
||
/* } */
|
||
li[role="list"].no-arrow {
|
||
margin-left: 8px;
|
||
padding-right: 0;
|
||
}
|
||
li[role="list"] > a::after {
|
||
-webkit-margin-start: 0.2rem;
|
||
margin-inline-start: 0.2rem;
|
||
}
|
||
|
||
li[role="list"].no-arrow > a,
|
||
li[role="list"].no-arrow > a:link,
|
||
li[role="list"].no-arrow > a:visited {
|
||
color: var(--secondary);
|
||
}
|
||
|
||
select.min-select {
|
||
--form-element-spacing-horizontal: 0;
|
||
margin-bottom: 4px;
|
||
max-width: 128px;
|
||
overflow: hidden;
|
||
color: var(--primary);
|
||
font-size: 13px;
|
||
border: none;
|
||
padding: 0;
|
||
padding-right: 20px;
|
||
padding-left: 8px;
|
||
text-overflow: ellipsis;
|
||
color: var(--color);
|
||
}
|
||
select.min-select-secondary {
|
||
color: var(--color);
|
||
}
|
||
select.min-select:focus {
|
||
outline: none;
|
||
border: none;
|
||
--box-shadow: none;
|
||
}
|
||
select.min-select-no-arrow {
|
||
background-image: none;
|
||
padding-right: 0;
|
||
}
|
||
|
||
select.min-select-left {
|
||
padding-right: 0px;
|
||
/* padding-left: 24px; */
|
||
/* background-position: center left 0; */
|
||
text-overflow: ellipsis;
|
||
text-align: left;
|
||
}
|
||
|
||
.muted {
|
||
color: var(--muted-color);
|
||
}
|
||
|
||
.select.button-select {
|
||
--background-color: var(--secondary-hover);
|
||
--border-color: var(--secondary-hover);
|
||
--color: var(--secondary-inverse);
|
||
cursor: pointer;
|
||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||
padding: var(--form-element-spacing-vertical)
|
||
var(--form-element-spacing-horizontal);
|
||
border: var(--border-width) solid var(--border-color);
|
||
border-radius: var(--border-radius);
|
||
outline: none;
|
||
background-color: var(--background-color);
|
||
box-shadow: var(--box-shadow);
|
||
color: var(--color);
|
||
font-weight: var(--font-weight);
|
||
font-size: 16px;
|
||
line-height: var(--line-height);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: background-color var(--transition), border-color var(--transition),
|
||
color var(--transition), box-shadow var(--transition);
|
||
-webkit-appearance: button;
|
||
margin: 0;
|
||
margin-bottom: 0px;
|
||
overflow: visible;
|
||
font-family: inherit;
|
||
text-transform: none;
|
||
}
|
||
|
||
body {
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
min-width: 268px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.popup-container {
|
||
font-size: 16px;
|
||
--font-size: 16px;
|
||
color: #666;
|
||
background-color: var(--popup-footer-background-color);
|
||
width: 316px;
|
||
min-width: 316px;
|
||
}
|
||
|
||
.popup-content {
|
||
background-color: var(--popup-content-background-color);
|
||
border-radius: 0px 0px 12px 12px;
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
.immersive-translate-popup-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
touch-action: none;
|
||
}
|
||
|
||
.immersive-translate-popup-wrapper {
|
||
background: var(--background-color);
|
||
border-radius: 10px;
|
||
border: 1px solid var(--muted-border-color);
|
||
}
|
||
|
||
#mount {
|
||
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
|
||
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||
"Segoe UI Symbol", "Noto Color Emoji";
|
||
--line-height: 1.5;
|
||
--font-weight: 400;
|
||
--font-size: 16px;
|
||
--border-radius: 4px;
|
||
--border-width: 1px;
|
||
--outline-width: 3px;
|
||
--spacing: 16px;
|
||
--typography-spacing-vertical: 24px;
|
||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||
--block-spacing-horizontal: var(--spacing);
|
||
--grid-spacing-vertical: 0;
|
||
--grid-spacing-horizontal: var(--spacing);
|
||
--form-element-spacing-vertical: 12px;
|
||
--form-element-spacing-horizontal: 16px;
|
||
--nav-element-spacing-vertical: 16px;
|
||
--nav-element-spacing-horizontal: 8px;
|
||
--nav-link-spacing-vertical: 8px;
|
||
--nav-link-spacing-horizontal: 8px;
|
||
--form-label-font-weight: var(--font-weight);
|
||
--transition: 0.2s ease-in-out;
|
||
--modal-overlay-backdrop-filter: blur(4px);
|
||
}
|
||
|
||
[data-theme="light"],
|
||
#mount:not([data-theme="dark"]) {
|
||
--popup-footer-background-color: #e8eaeb;
|
||
--popup-content-background-color: #ffffff;
|
||
--popup-item-background-color: #f3f5f6;
|
||
--popup-item-hover-background-color: #eaeced;
|
||
--popup-trial-pro-background-color: #f9fbfc;
|
||
--text-black-2: #222222;
|
||
--text-gray-2: #222222;
|
||
--text-gray-6: #666666;
|
||
--text-gray-9: #999999;
|
||
--text-gray-c2: #c2c2c2;
|
||
--service-select-content-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.2);
|
||
--service-select-border-color: #fafafa;
|
||
--service-select-selected-background-color: #f3f5f6;
|
||
--download-app-background: #f3f5f6;
|
||
}
|
||
|
||
@media only screen and (prefers-color-scheme: dark) {
|
||
#mount:not([data-theme="light"]) {
|
||
--popup-footer-background-color: #0d0d0d;
|
||
--popup-content-background-color: #191919;
|
||
--popup-item-background-color: #272727;
|
||
--popup-item-hover-background-color: #333333;
|
||
--popup-trial-pro-background-color: #222222;
|
||
--text-black-2: #ffffff;
|
||
--text-gray-2: #dbdbdb;
|
||
--text-gray-6: #b3b3b3;
|
||
--text-gray-9: #777777;
|
||
--text-gray-c2: #5b5b5b;
|
||
--service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9);
|
||
--service-select-border-color: #2c2c2c;
|
||
--service-select-selected-background-color: #333333;
|
||
--download-app-background: #333;
|
||
}
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--popup-footer-background-color: #0d0d0d;
|
||
--popup-content-background-color: #191919;
|
||
--popup-item-background-color: #272727;
|
||
--popup-item-hover-background-color: #333333;
|
||
--popup-trial-pro-background-color: #222222;
|
||
--text-black-2: #ffffff;
|
||
--text-gray-2: #dbdbdb;
|
||
--text-gray-6: #b3b3b3;
|
||
--text-gray-9: #777777;
|
||
--text-gray-c2: #5b5b5b;
|
||
--service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9);
|
||
--service-select-border-color: #2c2c2c;
|
||
--service-select-selected-background-color: #333333;
|
||
--download-app-background: #333;
|
||
}
|
||
|
||
.text-balck {
|
||
color: var(--text-black-2);
|
||
}
|
||
|
||
.text-gray-2 {
|
||
color: var(--text-gray-2);
|
||
}
|
||
|
||
.text-gray-6 {
|
||
color: var(--text-gray-6);
|
||
}
|
||
|
||
.text-gray-9 {
|
||
color: var(--text-gray-9);
|
||
}
|
||
|
||
.text-gray-c2 {
|
||
color: var(--text-gray-c2);
|
||
}
|
||
|
||
#mount {
|
||
min-width: 268px;
|
||
}
|
||
|
||
.main-button {
|
||
font-size: 15px;
|
||
vertical-align: middle;
|
||
border-radius: 12px;
|
||
padding: unset;
|
||
height: 44px;
|
||
line-height: 44px;
|
||
}
|
||
|
||
.pt-4 {
|
||
padding-top: 16px;
|
||
}
|
||
|
||
.p-2 {
|
||
padding: 8px;
|
||
}
|
||
|
||
.pl-5 {
|
||
padding-left: 48px;
|
||
}
|
||
|
||
.p-0 {
|
||
padding: 0;
|
||
}
|
||
|
||
.pl-2 {
|
||
padding-left: 8px;
|
||
}
|
||
|
||
.pl-4 {
|
||
padding-left: 24px;
|
||
}
|
||
|
||
.pt-2 {
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.pb-2 {
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.pb-4 {
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
.pb-5 {
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.pr-5 {
|
||
padding-right: 48px;
|
||
}
|
||
|
||
.text-sm {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.text-base {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.w-full {
|
||
width: 100%;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.flex-row {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.flex-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.flex-end {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.flex-grow {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.justify-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.mb-0 {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.mb-2 {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.mb-4 {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.mb-3 {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.inline-block {
|
||
display: inline-block;
|
||
}
|
||
|
||
.py-2 {
|
||
padding-top: 8px;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.py-2-5 {
|
||
padding-top: 6px;
|
||
padding-bottom: 6px;
|
||
}
|
||
|
||
.mt-0 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.mt-2 {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.mt-3 {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.mt-4 {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.mt-5 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.mt-6 {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.mb-1 {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.ml-4 {
|
||
margin-left: 24px;
|
||
}
|
||
|
||
.ml-3 {
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.ml-2 {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.ml-1 {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.mr-1 {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.mr-2 {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.mr-3 {
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.mx-2 {
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.pl-3 {
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.pr-3 {
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.p-3 {
|
||
padding: 12px;
|
||
}
|
||
|
||
.px-1 {
|
||
padding-left: 4px;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.px-3 {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.pt-3 {
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.px-6 {
|
||
padding-left: 18px;
|
||
padding-right: 18px;
|
||
}
|
||
|
||
.px-4 {
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.pt-6 {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.py-3 {
|
||
padding-top: 12px;
|
||
padding-bottom: 12px;
|
||
}
|
||
|
||
.py-0 {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.left-auto {
|
||
left: auto !important;
|
||
}
|
||
|
||
.max-h-28 {
|
||
max-height: 112px;
|
||
}
|
||
|
||
.max-h-30 {
|
||
max-height: 120px;
|
||
}
|
||
|
||
.overflow-y-scroll {
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.text-xs {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.flex-1 {
|
||
flex: 1;
|
||
}
|
||
|
||
.flex-3 {
|
||
flex: 3;
|
||
}
|
||
|
||
.flex-4 {
|
||
flex: 4;
|
||
}
|
||
|
||
.flex-2 {
|
||
flex: 2;
|
||
}
|
||
|
||
.items-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.max-content {
|
||
width: max-content;
|
||
}
|
||
|
||
.justify-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.items-end {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.items-baseline {
|
||
align-items: baseline;
|
||
}
|
||
|
||
.my-5 {
|
||
margin-top: 48px;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.my-4 {
|
||
margin-top: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.my-3 {
|
||
margin-top: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.pt-3 {
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.px-3 {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.pt-2 {
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.px-2 {
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
.pt-1 {
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.px-1 {
|
||
padding-left: 4px;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.pb-2 {
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.justify-end {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.w-auto {
|
||
width: auto;
|
||
}
|
||
|
||
.shrink-0 {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
select.language-select,
|
||
select.translate-service,
|
||
select.min-select {
|
||
--form-element-spacing-horizontal: 0;
|
||
margin-bottom: 0px;
|
||
max-width: unset;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
font-size: 13px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding-right: 30px;
|
||
padding-left: 0px;
|
||
background-position: center right 12px;
|
||
background-size: 16px auto;
|
||
background-image: var(--icon-xia);
|
||
text-overflow: ellipsis;
|
||
color: var(--text-gray-2);
|
||
background-color: transparent;
|
||
box-shadow: unset !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
select.more {
|
||
background-position: center right;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
select.transform-padding-left {
|
||
padding-left: 12px;
|
||
transform: translateX(-12px);
|
||
background-position: center right 0px;
|
||
}
|
||
|
||
select.translate-service {
|
||
color: var(--text-black-2);
|
||
}
|
||
|
||
/* dark use black, for windows */
|
||
@media (prefers-color-scheme: dark) {
|
||
select.language-select option,
|
||
select.translate-service option,
|
||
select.min-select option {
|
||
background-color: #666666;
|
||
}
|
||
}
|
||
|
||
.text-overflow-ellipsis {
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.max-w-20 {
|
||
max-width: 180px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
select.min-select-secondary {
|
||
color: var(--color);
|
||
}
|
||
|
||
select.min-select:focus {
|
||
outline: none;
|
||
border: none;
|
||
--box-shadow: none;
|
||
}
|
||
|
||
select.min-select-no-arrow {
|
||
background-image: none;
|
||
padding-right: 0;
|
||
}
|
||
|
||
select.min-select-left {
|
||
padding-right: 0px;
|
||
/* padding-left: 24px; */
|
||
/* background-position: center left 0; */
|
||
text-overflow: ellipsis;
|
||
text-align: left;
|
||
}
|
||
|
||
.popup-footer {
|
||
background-color: var(--popup-footer-background-color);
|
||
height: 40px;
|
||
}
|
||
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.close {
|
||
cursor: pointer;
|
||
width: 16px;
|
||
height: 16px;
|
||
background-image: var(--icon-close);
|
||
background-position: center;
|
||
background-size: auto 1rem;
|
||
background-repeat: no-repeat;
|
||
opacity: 0.5;
|
||
transition: opacity var(--transition);
|
||
}
|
||
|
||
.padding-two-column {
|
||
padding-left: 40px;
|
||
padding-right: 40px;
|
||
}
|
||
|
||
.muted {
|
||
color: #999;
|
||
}
|
||
|
||
.text-label {
|
||
color: #666;
|
||
}
|
||
|
||
.display-none {
|
||
display: none;
|
||
}
|
||
|
||
/* dark use #18232c */
|
||
@media (prefers-color-scheme: dark) {
|
||
.text-label {
|
||
color: #9ca3af;
|
||
}
|
||
}
|
||
|
||
.text-decoration-none {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.text-decoration-none:is([aria-current], :hover, :active, :focus),
|
||
[role="link"]:is([aria-current], :hover, :active, :focus) {
|
||
--text-decoration: none !important;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.language-select-container {
|
||
position: relative;
|
||
width: 100%;
|
||
background-color: var(--popup-item-background-color);
|
||
height: 55px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
select.language-select {
|
||
color: var(--text-black-2);
|
||
font-size: 14px;
|
||
padding: 8px 24px 24px 16px;
|
||
position: absolute;
|
||
border-radius: 12px;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
select.text-gray-6 {
|
||
color: var(--text-gray-6);
|
||
}
|
||
|
||
.language-select-container label {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 16px;
|
||
font-size: 12px;
|
||
color: var(--text-gray-9);
|
||
line-height: 12px;
|
||
margin: 0;
|
||
}
|
||
|
||
.translation-service-container {
|
||
background-color: var(--popup-item-background-color);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.min-select-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 44px;
|
||
background-color: var(--popup-item-background-color);
|
||
padding-left: 16px;
|
||
}
|
||
|
||
.min-select-container:first-child {
|
||
border-top-left-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
}
|
||
|
||
.min-select-container:last-child {
|
||
border-bottom-left-radius: 10px;
|
||
border-bottom-right-radius: 10px;
|
||
}
|
||
|
||
.min-select-container:only-child {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.translate-mode {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 22px;
|
||
background-color: var(--popup-item-background-color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.translate-mode svg {
|
||
fill: var(--text-gray-2);
|
||
}
|
||
|
||
.widgets-container {
|
||
display: flex;
|
||
align-items: stretch;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
gap: 9px;
|
||
}
|
||
|
||
/* 当只有两个小组件时的样式优化 */
|
||
.widgets-container.widgets-two-items {
|
||
gap: 16px;
|
||
}
|
||
|
||
.widgets-container.widgets-two-items .widget-item {
|
||
flex: 0 1 auto;
|
||
min-width: 93px;
|
||
max-width: 120px;
|
||
}
|
||
|
||
.widget-item {
|
||
display: flex;
|
||
max-width: 93px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: var(--popup-item-background-color);
|
||
font-size: 12px;
|
||
min-height: 44px;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
flex: 1;
|
||
padding: 8px 4px;
|
||
text-align: center;
|
||
}
|
||
|
||
.widget-icon-text {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: var(--text-gray-2);
|
||
}
|
||
|
||
.widgets-container svg {
|
||
fill: var(--text-gray-2);
|
||
color: var(--text-gray-2);
|
||
}
|
||
|
||
.share-button-container {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
padding: 2px 3px 0 8px;
|
||
}
|
||
|
||
.share-button-container svg {
|
||
fill: var(--text-gray-9);
|
||
}
|
||
|
||
.min-select-container:hover,
|
||
.language-select-container:hover,
|
||
.widget-item:hover,
|
||
.translate-mode:hover {
|
||
background-color: var(--popup-item-hover-background-color);
|
||
}
|
||
|
||
.main-button:hover {
|
||
background-color: #f5508f;
|
||
}
|
||
|
||
.share-button-container:hover {
|
||
background-color: var(--popup-item-background-color);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.error-boundary {
|
||
background: #fff2f0;
|
||
border: 1px solid #ffccc7;
|
||
display: flex;
|
||
padding: 12px;
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
word-break: break-all;
|
||
margin: 12px;
|
||
border-radius: 12px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.upgrade-pro {
|
||
border-radius: 11px;
|
||
background: linear-gradient(57deg, #272727 19.8%, #696969 82.2%);
|
||
padding: 2px 8px;
|
||
transform: scale(0.85);
|
||
}
|
||
|
||
.upgrade-pro span {
|
||
background: linear-gradient(180deg, #ffeab4 17.65%, #f8c235 85.29%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-size: 12px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.upgrade-pro svg {
|
||
margin-top: -2px;
|
||
}
|
||
|
||
.upgrade-pro:hover {
|
||
background: linear-gradient(57deg, #3d3d3d 19.8%, #949494 82.2%);
|
||
}
|
||
|
||
.border-bottom-radius-0 {
|
||
border-bottom-left-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
}
|
||
|
||
.trial-pro-container {
|
||
border-radius: 0px 0px 12px 12px;
|
||
background: var(--popup-trial-pro-background-color);
|
||
display: flex;
|
||
align-items: center;
|
||
height: 44px;
|
||
padding-left: 16px;
|
||
padding-right: 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.trial-pro-container label {
|
||
line-height: 13px;
|
||
color: var(--text-black-2);
|
||
}
|
||
|
||
.trial-pro-container img {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.cursor-pointer {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.upgrade-pro-discount-act {
|
||
height: 25px;
|
||
display: flex;
|
||
padding: 0 4px;
|
||
align-items: center;
|
||
border-radius: 15px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#cefbfa 11.33%,
|
||
#d7f56f 63.75%,
|
||
#fccd5e 100%
|
||
);
|
||
transform: scale(0.9);
|
||
box-shadow: 0px 1.8px 3.6px 0px rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.upgrade-pro-discount-act span {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
margin-left: 4px;
|
||
color: #222222;
|
||
}
|
||
|
||
.upgrade-pro-discount-act:hover {
|
||
text-decoration: unset;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#e2fffe 11.33%,
|
||
#e6ff91 63.75%,
|
||
#ffdf93 100%
|
||
);
|
||
}
|
||
|
||
.custom-select-container {
|
||
width: 200px;
|
||
position: relative;
|
||
flex: 1;
|
||
}
|
||
|
||
#translation-service-select {
|
||
padding-right: 12px;
|
||
padding-left: 6px;
|
||
}
|
||
|
||
.custom-select-content {
|
||
border-radius: 12px;
|
||
background: var(--popup-content-background-color);
|
||
box-shadow: var(--service-select-content-shadow);
|
||
border: 1px solid var(--service-select-border-color);
|
||
padding: 4px 5px;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.custom-select-item.default {
|
||
width: 100%;
|
||
padding: 0;
|
||
}
|
||
|
||
.custom-select-item {
|
||
font-size: 13px;
|
||
padding: 5px 6px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
color: var(--text-black-2);
|
||
width: auto;
|
||
overflow: hidden;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.custom-select-item-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.custom-select-item-img {
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
|
||
.custom-select-content .custom-select-item.selected,
|
||
.custom-select-content .custom-select-item:hover {
|
||
background: var(--service-select-selected-background-color);
|
||
}
|
||
|
||
.custom-select-item > span {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.custom-select-item-pro {
|
||
font-size: 12px;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.custom-select-item-pro img {
|
||
margin: 0 3px;
|
||
width: 20px;
|
||
}
|
||
|
||
.custom-select-group-header {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--text-gray-9);
|
||
padding: 6px 8px 4px;
|
||
margin-top: 2px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.more-container {
|
||
position: relative;
|
||
}
|
||
|
||
.new-menu-indicator {
|
||
position: absolute;
|
||
width: 8px;
|
||
height: 8px;
|
||
background-color: #ef3434;
|
||
border-radius: 50%;
|
||
right: 18px;
|
||
top: 4px;
|
||
}
|
||
|
||
.download-app {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
border-radius: 8px;
|
||
background: var(--download-app-background);
|
||
padding: 4px 8px;
|
||
color: var(--text-gray-6);
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
/* Popup 动画效果 */
|
||
@keyframes popup-fade-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px) scale(0.95);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes popup-fade-out {
|
||
from {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
to {
|
||
opacity: 0;
|
||
transform: translateY(10px) scale(0.95);
|
||
}
|
||
}
|
||
|
||
.popup-generic-content {
|
||
animation: popup-fade-in 0.2s ease-out;
|
||
}
|
||
|
||
.popup-generic-content.hiding {
|
||
animation: popup-fade-out 0.15s ease-in;
|
||
}
|
||
|
||
html {
|
||
font-size: 17px;
|
||
}
|
||
|
||
@media print {
|
||
.imt-fb-container {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
#mount#mount {
|
||
position: absolute;
|
||
display: none;
|
||
min-width: 250px;
|
||
height: auto;
|
||
--font-size: 17px;
|
||
font-size: 17px;
|
||
}
|
||
|
||
/* float-ball */
|
||
.imt-fb-container {
|
||
position: fixed;
|
||
padding: 0;
|
||
top: 335px;
|
||
width: fit-content;
|
||
display: flex;
|
||
flex-direction: column;
|
||
display: none;
|
||
direction: ltr;
|
||
}
|
||
|
||
.imt-fb-container.left {
|
||
align-items: flex-start;
|
||
left: 0;
|
||
}
|
||
|
||
.imt-fb-container.right {
|
||
align-items: flex-end;
|
||
right: 0;
|
||
}
|
||
|
||
.imt-fb-btn {
|
||
cursor: pointer;
|
||
background: var(--float-ball-more-button-background-color);
|
||
height: 36px;
|
||
width: 56px;
|
||
box-shadow: 2px 6px 10px 0px #0e121629;
|
||
}
|
||
|
||
.imt-fb-btn.left {
|
||
border-top-right-radius: 36px;
|
||
border-bottom-right-radius: 36px;
|
||
}
|
||
|
||
.imt-fb-btn.right {
|
||
border-top-left-radius: 36px;
|
||
border-bottom-left-radius: 36px;
|
||
}
|
||
|
||
.imt-fb-btn div {
|
||
background: var(--float-ball-more-button-background-color);
|
||
height: 36px;
|
||
width: 54px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.imt-fb-btn.left div {
|
||
border-top-right-radius: 34px;
|
||
border-bottom-right-radius: 34px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.imt-fb-btn.right div {
|
||
border-top-left-radius: 34px;
|
||
border-bottom-left-radius: 34px;
|
||
}
|
||
|
||
.imt-fb-logo-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.imt-fb-logo-img-big-bg {
|
||
width: 28px;
|
||
height: 28px;
|
||
margin: 0;
|
||
padding: 4px;
|
||
background-color: #ed6d8f;
|
||
border-radius: 50%;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.imt-float-ball-translated {
|
||
position: absolute;
|
||
width: 11px;
|
||
height: 11px;
|
||
bottom: 4px;
|
||
right: 20px;
|
||
}
|
||
|
||
.btn-animate {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
-webkit-transition: -webkit-transform ease-out 250ms;
|
||
transition: -webkit-transform ease-out 250ms;
|
||
transition: transform ease-out 250ms;
|
||
transition: transform ease-out 250ms, -webkit-transform ease-out 250ms;
|
||
}
|
||
|
||
.imt-fb-setting-btn {
|
||
margin-right: 18px;
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.immersive-translate-popup-wrapper {
|
||
background: var(--background-color);
|
||
border-radius: 20px;
|
||
box-shadow: 2px 10px 24px 0px #0e121614;
|
||
border: none;
|
||
}
|
||
|
||
.popup-container {
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.popup-content {
|
||
border-radius: 20px 20px 12px 12px;
|
||
}
|
||
.popup-footer {
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.imt-fb-close-button {
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
margin-top: -10px;
|
||
}
|
||
|
||
.imt-fb-close-content {
|
||
padding: 22px;
|
||
width: 320px;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.imt-fb-close-title {
|
||
font-weight: 500;
|
||
color: var(--h2-color);
|
||
}
|
||
|
||
.imt-fb-close-radio-content {
|
||
background-color: var(--background-light-green);
|
||
padding: 8px 20px;
|
||
}
|
||
|
||
.imt-fb-radio-sel,
|
||
.imt-fb-radio-nor {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.imt-fb-radio-sel {
|
||
border: 2px solid var(--primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.imt-fb-radio-sel div {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 4px;
|
||
background-color: var(--primary);
|
||
}
|
||
|
||
.imt-fb-radio-nor {
|
||
border: 2px solid #d3d4d6;
|
||
}
|
||
|
||
.imt-fb-primary-btn {
|
||
background-color: var(--primary);
|
||
width: 72px;
|
||
height: 32px;
|
||
color: white;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-fb-default-btn {
|
||
border: 1px solid var(--primary);
|
||
width: 72px;
|
||
height: 32px;
|
||
border-radius: 8px;
|
||
color: var(--primary);
|
||
line-height: 32px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-fb-guide-container {
|
||
width: 312px;
|
||
transform: translateY(-45%);
|
||
}
|
||
|
||
.imt-fb-guide-bg {
|
||
position: absolute;
|
||
left: 30px;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: -1;
|
||
height: 100%;
|
||
width: 90%;
|
||
}
|
||
|
||
.imt-fb-guide-bg.left {
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
.imt-fb-guide-content {
|
||
margin: 16px -30px 80px 0px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.imt-fb-guide-content.left {
|
||
margin: 16px 21px 60px 32px;
|
||
}
|
||
|
||
.imt-fb-guide-img {
|
||
width: 220px;
|
||
height: 112px;
|
||
}
|
||
|
||
.imt-fb-guide-message {
|
||
font-size: 14px;
|
||
line-height: 28px;
|
||
color: #333333;
|
||
white-space: pre-wrap;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.imt-manga-guide-message {
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
color: #333333;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.imt-fb-guide-button {
|
||
margin-top: 16px;
|
||
line-height: 40px;
|
||
height: 40px;
|
||
padding: 0 20px;
|
||
width: unset;
|
||
}
|
||
|
||
.imt-fb-more-buttons {
|
||
box-shadow: 0px 2px 10px 0px #00000014;
|
||
border: none;
|
||
background: var(--float-ball-more-button-background-color);
|
||
width: 36px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 18px;
|
||
margin-top: 0px;
|
||
padding: 7px 0 7px 0;
|
||
}
|
||
|
||
.imt-fb-more-buttons > div {
|
||
margin: auto;
|
||
}
|
||
|
||
.imt-fb-side,
|
||
.imt-fb-reward {
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
pointer-events: all;
|
||
position: relative;
|
||
}
|
||
|
||
.imt-fb-side {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.imt-fb-new-badge {
|
||
width: 26px;
|
||
height: 14px;
|
||
padding: 3px;
|
||
background-color: #f53f3f;
|
||
border-radius: 4px;
|
||
position: absolute;
|
||
top: -5px;
|
||
right: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.imt-fb-side *,
|
||
.imt-fb-reward * {
|
||
pointer-events: all;
|
||
}
|
||
|
||
.imt-fb-more-button {
|
||
width: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
/* Sheet.css */
|
||
.immersive-translate-sheet {
|
||
position: fixed;
|
||
transform: translateY(100%);
|
||
/* Start off screen */
|
||
left: 0;
|
||
right: 0;
|
||
background-color: white;
|
||
transition: transform 0.3s ease-out;
|
||
/* Smooth slide transition */
|
||
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
|
||
/* Ensure it's above other content */
|
||
bottom: 0;
|
||
border-top-left-radius: 16px;
|
||
border-top-right-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.immersive-translate-sheet.visible {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.immersive-translate-sheet-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease-out;
|
||
}
|
||
|
||
.immersive-translate-sheet-backdrop.visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
.popup-container-sheet {
|
||
max-width: 100vw;
|
||
width: 100vw;
|
||
}
|
||
|
||
.imt-no-events svg * {
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
.imt-manga-button {
|
||
width: 36px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
pointer-events: all;
|
||
margin: 0 0 10px 0;
|
||
background-color: var(--float-ball-more-button-background-color);
|
||
border-radius: 18px;
|
||
filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.08));
|
||
opacity: 0.5;
|
||
right: 8px;
|
||
padding: 10px 0 4px 0;
|
||
}
|
||
|
||
.imt-manga-feedback {
|
||
cursor: pointer;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.imt-fb-feedback {
|
||
cursor: pointer;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.imt-fb-upgrade-button {
|
||
cursor: pointer;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.imt-manga-button:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.imt-manga-translated {
|
||
position: absolute;
|
||
left: 24px;
|
||
top: 20px;
|
||
}
|
||
|
||
.imt-float-ball-loading {
|
||
animation: imt-loading-animation 0.6s infinite linear !important;
|
||
}
|
||
|
||
.imt-manga-guide-bg {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: -1;
|
||
width: 372px;
|
||
transform: translateY(-50%);
|
||
}
|
||
.imt-manga-guide-content {
|
||
position: absolute;
|
||
top: 15px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 40px 0;
|
||
}
|
||
|
||
.img-manga-guide-button {
|
||
width: fit-content;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.img-manga-close {
|
||
position: absolute;
|
||
bottom: -200px;
|
||
width: 32px;
|
||
height: 32px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-more-buttons,
|
||
.imt-fb-container.dragging .imt-manga-button,
|
||
.imt-fb-container.dragging .btn-animate:not(.imt-fb-btn) {
|
||
display: none !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-btn {
|
||
border-radius: 50% !important;
|
||
width: 36px !important;
|
||
height: 36px !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
cursor: move !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-btn div {
|
||
border-radius: 50% !important;
|
||
width: 36px !important;
|
||
height: 36px !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-btn.left,
|
||
.imt-fb-container.dragging .imt-fb-btn.right {
|
||
border-radius: 50% !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-btn.left div,
|
||
.imt-fb-container.dragging .imt-fb-btn.right div {
|
||
border-radius: 50% !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-logo-img {
|
||
margin: 0 !important;
|
||
padding: 4px !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-float-ball-translated {
|
||
right: 2px !important;
|
||
bottom: 2px !important;
|
||
}
|
||
|
||
@-webkit-keyframes imt-loading-animation {
|
||
from {
|
||
-webkit-transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: rotate(359deg);
|
||
}
|
||
}
|
||
|
||
@keyframes imt-loading-animation {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(359deg);
|
||
}
|
||
}
|
||
|
||
.imt-fb-icon {
|
||
color: #666666;
|
||
}
|
||
|
||
[data-theme="dark"] .imt-fb-icon {
|
||
color: #B3B3B3;
|
||
}
|
||
|
||
[data-theme="light"] .imt-fb-icon {
|
||
color: #666666;
|
||
} |