chore: link-primary bg color and doc spinner with bg

This commit is contained in:
haitao(lj) 2022-12-18 09:24:16 +08:00
parent 87d9393772
commit 3a0b3cfec9
2 changed files with 42 additions and 25 deletions

View File

@ -9,31 +9,42 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<style>
@keyframes _doc-spin {
to { transform: rotate(360deg) }
}
#doc-spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#doc-spinner .spinner {
box-sizing: border-box;
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: -.125em;
border: .25rem solid currentColor;
border-right-color: transparent;
color: rgba(108, 117, 125, .75);
border-radius: 50%;
animation: 0.75s linear infinite _doc-spin;
}
</style>
<div id="doc-spinner">
<div class="spinner"></div>
<div id="spin-mask">
<style>
@keyframes _doc-spin {
to { transform: rotate(360deg) }
}
#spin-mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
z-index: 9999;
}
#spin-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#spin-container .spinner {
box-sizing: border-box;
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: -.125em;
border: .25rem solid currentColor;
border-right-color: transparent;
color: rgba(108, 117, 125, .75);
border-radius: 50%;
animation: 0.75s linear infinite _doc-spin;
}
</style>
<div id="spin-container">
<div class="spinner"></div>
</div>
</div>
</div>
</body>

View File

@ -76,6 +76,12 @@ const Index: FC = () => {
.dropdown-menu {
--bs-dropdown-link-active-bg: rgb(var(--bs-primary-rgb));
}
.link-primary {
color: ${primaryColor.hex()}!important;
}
.link-primary:hover, .link-primary:focus {
color: ${shadeColor(primaryColor, 0.8).hex()}!important
}
`}
</style>
)}