admin.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. .admin {
  2. position: fixed;
  3. bottom: 40px;
  4. right: 0;
  5. padding: 5px;
  6. transform: translateX(100%);
  7. background-color: rgba(104, 58, 148, 0.35);
  8. transition: transform 400ms ease-in-out;
  9. border-radius: 5px;
  10. z-index: 100;
  11. }
  12. .admin > .button {
  13. color: #673ab7;
  14. margin: 5px;
  15. border-radius: 10px;
  16. padding: 2px 10px;
  17. }
  18. .admin > .button:hover {
  19. background-color: #e0cfff;
  20. cursor: pointer;
  21. }
  22. .admin > .switch {
  23. position: absolute;
  24. right: 100%;
  25. width: 40px;
  26. height: 40px;
  27. top: 50%;
  28. border-radius: 5px 0 0 5px;
  29. transform: translateY(-50%);
  30. background-color: rgba(104, 58, 148, 0.5);
  31. cursor: pointer;
  32. }
  33. .admin > .switch::before {
  34. content: "";
  35. position: absolute;
  36. top: 50%;
  37. left: 50%;
  38. width: 20px;
  39. height: 20px;
  40. transform: translate(-25%, -50%) rotateZ(45deg);
  41. transition: transform 400ms ease-in-out;
  42. }
  43. .admin > .switch::before {
  44. border-bottom: 5px solid white;
  45. border-left: 5px solid white;
  46. }
  47. .admin.open > .switch::before {
  48. transform: translate(-60%, -50%) rotateZ(225deg);
  49. transition: transform 400ms ease-in-out;
  50. }
  51. .admin.open {
  52. transform: translateX(0);
  53. transition: transform 400ms ease-in-out;
  54. }