mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 23:38:56 +00:00
Cell
164a699701
* refactor(styles): unify theme properties and update color variables across stylesheets * Implement theme mode support with light-dark color adjustments across stylesheets - Added color-scheme support in _root.scss for light and dark modes. - Replaced theme property mixins with light-dark function in various widget styles including _cell-tooltip.scss, _cookieconsent.scss, _fixed-button.scss, and others. - Updated alert styles in _alert.scss to use light-dark for border and text colors. - Refactored code syntax highlighting in _code.scss and _code-syntax/_index.scss to utilize light-dark for background gradients. - Enhanced search input styles in _search.scss to adapt to theme mode. - Modified theme switching logic in color-scheme.js and theme.js to support new theme mode structure. - Adjusted APlayer and Valine styles to accommodate dark mode using new theme variables. * feat(shortcode): add auto-dark shortcode for dark mode adaptation * refactor(styles): update theme colors and improve box-shadow properties for better visual consistency * feat(header): add scroll-state container queries and enhance header shadow effects * feat(styles): enhance scroll behavior with overscroll-behavior adjustments for better UX * feat(styles): update code&table styles and colors for improved visual consistency * feat(styles): update color variables and improve font styling for better visual hierarchy
103 lines
2.3 KiB
SCSS
103 lines
2.3 KiB
SCSS
.fixit-decryptor-container {
|
|
font-family: fixit-var(global-font-family);
|
|
text-align: center;
|
|
margin-block: fixit-var(decryptor-margin-block);
|
|
|
|
.fixit-decryptor-loading {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.fixit-decryptor-input,
|
|
.fixit-decryptor-btn,
|
|
.fixit-encryptor-btn {
|
|
display: none;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
color: fixit-var(global-font-color);
|
|
border: 1px solid fixit-var(global-border-color);
|
|
box-shadow: 0px 0px 5px 0px fixit-var(global-border-color);
|
|
@include border-radius;
|
|
transition: all 0.1s ease-out;
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
color: light-dark(darken($global-link-hover-color, 6%), lighten($global-link-hover-color-dark, 6%));
|
|
border-color: fixit-var(global-link-hover-color);
|
|
box-shadow: 0px 0px 5px 0px light-dark(
|
|
lighten($global-link-hover-color, 20%),
|
|
darken($global-link-hover-color-dark, 20%)
|
|
);
|
|
}
|
|
}
|
|
|
|
.fixit-decryptor-input {
|
|
width: calc(clamp(50%, 450px, 100%) - 100px);
|
|
height: 3rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
background-color: fixit-var(global-background-color);
|
|
}
|
|
|
|
.fixit-decryptor-btn,
|
|
.fixit-encryptor-btn {
|
|
cursor: pointer;
|
|
padding: 0.8rem 1rem;
|
|
background-color: fixit-var(global-background-color);
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
|
|
.fixit-encryptor-btn {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
fixit-encryptor {
|
|
&.initialized > .fixit-decryptor-container {
|
|
.fixit-decryptor-input,
|
|
.fixit-decryptor-btn {
|
|
display: inline-block;
|
|
}
|
|
|
|
.fixit-decryptor-loading {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
cipher-text {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// fixit-encryptor for for the encrypted pages
|
|
article fixit-encryptor {
|
|
.fixit-decryptor-container {
|
|
@include set-fixit-var(decryptor-margin-block, 2rem);
|
|
}
|
|
&.decrypted > .fixit-decryptor-container {
|
|
.fixit-decryptor-loading,
|
|
.fixit-decryptor-input,
|
|
.fixit-decryptor-btn {
|
|
display: none;
|
|
}
|
|
|
|
.fixit-encryptor-btn {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
// fixit-encryptor shortcodes
|
|
#content fixit-encryptor {
|
|
.fixit-decryptor-container {
|
|
@include set-fixit-var(decryptor-margin-block, 1rem);
|
|
}
|
|
&.decrypted > .fixit-decryptor-container {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.encrypted-hidden {
|
|
display: none !important;
|
|
}
|