From 01d183d2be8e56509929842f56bf313f2637f578 Mon Sep 17 00:00:00 2001 From: Eltrac <45323514+BigCoke233@users.noreply.github.com> Date: Sat, 10 Aug 2019 16:49:07 +0800 Subject: =?UTF-8?q?=E8=A7=84=E8=8C=83=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E3=80=81=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F=E3=80=81=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=E5=8F=B0=E8=BE=93=E5=87=BA=E7=89=88=E6=9D=83=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/main/component.css | 139 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 assets/css/main/component.css (limited to 'assets/css/main/component.css') diff --git a/assets/css/main/component.css b/assets/css/main/component.css new file mode 100644 index 0000000..90eea7d --- /dev/null +++ b/assets/css/main/component.css @@ -0,0 +1,139 @@ +@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 { + background: var(--theme-color); + color: #fff; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + padding: 10px 18px; + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; + margin: 0 auto; + box-shadow: 0 0 4px #ccc; + -moz-box-shadow: 0 0 4px #ccc; + -webkit-box-shadow: 0 0 4px #ccc; + z-index: 20; + transition: all 0.3s; +} +.alert.ready { + top: -200px; +} +.alert-close { + border: none; + background: rgb(0,0,0,0); + transform: scale(0.8); + color: #fff; + float: right; + margin-top: -36px; +} +/* 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: 40px; + width: 40px; + 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; + opacity: 1; +} +.gotop-button.invisible { + opacity: 0; +} +/* Bubble */ +.bubble { + position: relative; + background: var(--theme-color); + border-radius: 2px; + padding: 0; + color: white; + display: inline-block; + min-width: 180px; + transition: all 0.3s; +} +.bubble:before{ + position: absolute; + content: ""; + width: 0; + height: 0; + right: 100%; + top: 8px; + border-top: 8px solid transparent; + border-right: 16px solid var(--theme-color); + border-bottom: 8px solid transparent; +} +.bubble:hover { + transform: translateY(-6px); + box-shadow: 2px 8px 17px #bababa; +} \ No newline at end of file -- cgit v1.2.3