From ad8f9f55ea79a4d587aecc69698808da82de3d62 Mon Sep 17 00:00:00 2001 From: somhairle Date: Tue, 21 Apr 2026 20:40:27 +0800 Subject: 二〇二六年四月二十一日 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/theme/source/css/component/button.styl | 64 ++++++++++++++++++++++++ themes/theme/source/css/component/component.styl | 44 ++++++++++++++++ themes/theme/source/css/component/icon.styl | 21 ++++++++ 3 files changed, 129 insertions(+) create mode 100644 themes/theme/source/css/component/button.styl create mode 100644 themes/theme/source/css/component/component.styl create mode 100644 themes/theme/source/css/component/icon.styl (limited to 'themes/theme/source/css/component') diff --git a/themes/theme/source/css/component/button.styl b/themes/theme/source/css/component/button.styl new file mode 100644 index 00000000..6c6520db --- /dev/null +++ b/themes/theme/source/css/component/button.styl @@ -0,0 +1,64 @@ +.btn + display inline-flex + align-items center + justify-content center + white-space nowrap + border-radius $margin-m-2 + font-size $font-size-header + font-weight 400 + transition all $transition-duration ease + cursor pointer + border none + text-decoration none + user-select none + outline none + padding $margin-m-0 $margin-l-0 + + &:focus-visible + outline 2px solid $color-accent + outline-offset 2px + + &:disabled + pointer-events none + opacity 0.5 + +.btn-default + background-color $color-text-primary + color $color-background + + &:hover + opacity 0.9 + + &:active + opacity 0.95 + +.btn-outline + border 1px solid $color-border + background-color transparent + color $color-text-primary + + &:hover + border-color $color-accent + color $color-accent + +.btn-ghost + background-color transparent + color $color-text-primary + + &:hover + background-color $color-text-fourth + +.btn-link + background-color transparent + color $color-accent + text-decoration underline + text-underline-offset 4px + + &:hover + text-decoration none + +@keyframes spin + 0% + transform rotate(0deg) + 100% + transform rotate(360deg) \ No newline at end of file diff --git a/themes/theme/source/css/component/component.styl b/themes/theme/source/css/component/component.styl new file mode 100644 index 00000000..b203aecc --- /dev/null +++ b/themes/theme/source/css/component/component.styl @@ -0,0 +1,44 @@ +.h-line-primary + background-color $color-text-primary + height $line-third + +.h-line-secondary + background-color $color-border + height $line-third + +hr + background-color $color-border + height $line-third + border 0 + +.tag-list + display flex + flex-wrap wrap + margin-bottom $margin-m-0 + +.tag-title + margin $margin-m-1 0 + color $color-text-secondary + font-size $font-size-header + + a + color @color + +.post-tag + text-style(post-tag) + border 1px solid $color-border + margin-right $margin-s-2 + margin-bottom $margin-s-2 + padding $margin-s-2 $margin-m-0 $margin-s-2 $margin-m-0 + border-radius $margin-m-2 + transition all $transition-duration ease + + a + background-image none!important + + &:hover + border-color $color-accent + background-color $color-accent + + a + color #fff diff --git a/themes/theme/source/css/component/icon.styl b/themes/theme/source/css/component/icon.styl new file mode 100644 index 00000000..8a6c0511 --- /dev/null +++ b/themes/theme/source/css/component/icon.styl @@ -0,0 +1,21 @@ +.icon + display block + background-color $color-text-primary + width $icon-size + height $icon-size + +.arrow-up + -webkit-mask-image url('../icon/arrow-up.svg') + mask-image url('../icon/arrow-up.svg') + +.arrow-left + -webkit-mask-image url('../icon/arrow-left.svg') + mask-image url('../icon/arrow-left.svg') + +.arrow-right + -webkit-mask-image url('../icon/arrow-right.svg') + mask-image url('../icon/arrow-right.svg') + +.close-btn + -webkit-mask-image url('../icon/close-btn.svg') + mask-image url('../icon/close-btn.svg') \ No newline at end of file -- cgit v1.2.3