|
@@ -1,4 +1,54 @@
|
|
.admin {
|
|
.admin {
|
|
- background-color: rgb(212, 190, 233);
|
|
|
|
- margin: 20px 0;
|
|
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: 40px;
|
|
|
|
+ right: 0;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ transform: translateX(100%);
|
|
|
|
+ background-color: rgba(104, 58, 148, 0.35);
|
|
|
|
+ transition: transform 400ms ease-in-out;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ z-index: 100;
|
|
|
|
+}
|
|
|
|
+.admin > .button {
|
|
|
|
+ color: #673ab7;
|
|
|
|
+ margin: 5px;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ padding: 2px 10px;
|
|
|
|
+}
|
|
|
|
+.admin > .button:hover {
|
|
|
|
+ background-color: #e0cfff;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+.admin > .switch {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 100%;
|
|
|
|
+ width: 40px;
|
|
|
|
+ height: 40px;
|
|
|
|
+ top: 50%;
|
|
|
|
+ border-radius: 5px 0 0 5px;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ background-color: rgba(104, 58, 148, 0.5);
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+.admin > .switch::before {
|
|
|
|
+ content: "";
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ width: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ transform: translate(-25%, -50%) rotateZ(45deg);
|
|
|
|
+ transition: transform 400ms ease-in-out;
|
|
|
|
+}
|
|
|
|
+.admin > .switch::before {
|
|
|
|
+ border-bottom: 5px solid white;
|
|
|
|
+ border-left: 5px solid white;
|
|
|
|
+}
|
|
|
|
+.admin.open > .switch::before {
|
|
|
|
+ transform: translate(-60%, -50%) rotateZ(225deg);
|
|
|
|
+ transition: transform 400ms ease-in-out;
|
|
|
|
+}
|
|
|
|
+.admin.open {
|
|
|
|
+ transform: translateX(0);
|
|
|
|
+ transition: transform 400ms ease-in-out;
|
|
}
|
|
}
|