diff options
| author | Eltrac Koalar <hi@guhub.cn> | 2020-10-07 20:40:09 +0800 |
|---|---|---|
| committer | Eltrac Koalar <hi@guhub.cn> | 2020-10-07 20:40:09 +0800 |
| commit | e6f3df7eaf6881a303358289dadb904824872d45 (patch) | |
| tree | 57a98fea6448ee3b306af9f0127cd764697100a3 /assets/css/main/component.css | |
| parent | 49506af621b073a3acd1cd53d54771d0695108ee (diff) | |
bring back the 1.x files to master
Diffstat (limited to 'assets/css/main/component.css')
| -rw-r--r-- | assets/css/main/component.css | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/assets/css/main/component.css b/assets/css/main/component.css new file mode 100644 index 0000000..b8689ae --- /dev/null +++ b/assets/css/main/component.css @@ -0,0 +1,172 @@ +@charset 'utf-8'; +/* + * Style of some component + * Author: Eltrac + * License: MIT + */ +/* Button */ +button { + outline: none; + cursor: pointer +} +.button { + border: 3px solid #ccc; + border-radius: 30px; + padding: 8px 12px; + transition: all .2s; +} +.button:hover { + border-color: #000; + background: #000; + color: #fff +} +.button-sm { + padding: 3px 5px; +} +.button-md { + border: none; + border-radius: 3px; +} +.button-md:hover { + background: rgb(235,235,235); + color: #fff; +} +/* Alert */ +.alert { + bottom: 0; + left: 50%; + transform: translate(-50%, 0px); + z-index: 10; + padding: 1em; + position: fixed; + color: #fff; + background: rgba(50,50,50,.95); + border-radius: 2px; + margin: 0 auto 1em auto; + box-shadow: 0 2px 6px gray; + transition: .2s; +} +.alert.success { + background: #2ECC71; + color: #fff +} +.alert.failed { + background: #DD4B39; + color: #fff +} +.alert.adding { + -webkit-animation: slideDown 0.2s ease forwards; + animation: slideDown 0.3s ease forwards; +} +.alert.remove { + -webkit-animation: slideUp 0.2s ease forwards; + animation: slideUp 0.3s ease forwards; +} +@-webkit-keyframes slideDown { + 0%{ + bottom: -100px; + } + 25%{ + bottom: -50px; + } + 50%{ + bottom: 0; + } + 100%{ + bottom: 5px; + } +} +@-webkit-keyframes slideUp { + 0%{ + bottom: 5px; + } + 25%{ + bottom: 0; + } + 50%{ + bottom: -50px; + } + 100%{ + bottom: -100px; + } +} + + +/* Mask */ +.mask { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgb(70,70,70,0); + z-index: -100; + transition: background 0.4s; +} +.mask-open { + background: rgb(70,70,70,0.7); + z-index: 25; +} +/* Fixed Buttons */ +.fixed-button { + background: #fdfdfd; + font-size: 16px; + height: 3.5rem; + width: 3.5rem; + display: flex; + justify-content:center; + align-items:center; + border: none; + border-radius: 10000px; + box-shadow: 0 1px 5px #bababa; + -webkit-box-shadow: 0 1px 5px #bababa; + -moz-box-shadow: 0 1px 5px #bababa; + position: fixed; + cursor: pointer; + outline: 0; + right: 6px; + transition: all 0.3s; +} +.fixed-button:hover { + box-shadow: 0 3px 25px #bababa; + -webkit-box-shadow: 0 3px 25px #bababa; + -moz-box-shadow: 0 3px 25px #bababa; + background: rgb(248,248,248)!important; +} +.gotop-button { + bottom: 8px; + background: #fff!important; + color: rgb(80,80,80)!important; + right: 1rem; +} +/* Bubble */ +.bubble { + position: relative; + background: #f1f1f1; + border-radius: 2px; + padding: 0; + color: #000; + display: inline-block; + min-width: 180px; + transition: all 0.3s; +} +.bubble::before{ + content: ''; + position: absolute; + right: 100%; + top: 18px; + width: 0; + height: 0; + border-radius: 2px; + border-width: 9px; + border-style: solid; + border-color: transparent; + margin-bottom: -14px; + border-right-width: 18px; + border-right-color: currentColor; + color: #f1f1f1; +} +.bubble:hover { + transform: translateY(-6px); + box-shadow: 2px 8px 17px #bababa; +}
\ No newline at end of file |
