summaryrefslogtreecommitdiffstats
path: root/assets/css/main/component.css
diff options
context:
space:
mode:
authorEltrac Koalar <hi@guhub.cn>2020-10-07 20:40:09 +0800
committerEltrac Koalar <hi@guhub.cn>2020-10-07 20:40:09 +0800
commite6f3df7eaf6881a303358289dadb904824872d45 (patch)
tree57a98fea6448ee3b306af9f0127cd764697100a3 /assets/css/main/component.css
parent49506af621b073a3acd1cd53d54771d0695108ee (diff)
bring back the 1.x files to master
Diffstat (limited to 'assets/css/main/component.css')
-rw-r--r--assets/css/main/component.css172
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