Advertisement
Guest User

Untitled

a guest
Jul 17th, 2019
132
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.16 KB | None | 0 0
  1. $light-color: #eee;
  2.  
  3. body.dark-mode {
  4. background-color: #485461;
  5. background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
  6. color: $light-color;
  7. a {
  8. color: #00000;
  9. }
  10.  
  11. }
  12.  
  13. body.light-mode {
  14. background-color: $light-color;
  15. color: #000000;
  16. a {
  17. color: #000000;
  18. }
  19. }
  20.  
  21. /* thank w3schools for this */
  22. .switch {
  23. position: relative;
  24. display: inline-block;
  25. width: 60px;
  26. height: 34px;
  27. }
  28.  
  29. .switch input {
  30. opacity: 0;
  31. width: 0;
  32. height: 0;
  33. }
  34.  
  35. .slider {
  36. position: absolute;
  37. cursor: pointer;
  38. top: 0;
  39. left: 0;
  40. right: 0;
  41. bottom: 0;
  42. background-color: #ccc;
  43. -webkit-transition: .4s;
  44. transition: .4s;
  45. }
  46.  
  47. .slider:before {
  48. position: absolute;
  49. content: "";
  50. height: 26px;
  51. width: 26px;
  52. left: 4px;
  53. bottom: 4px;
  54. background-color: white;
  55. -webkit-transition: .4s;
  56. transition: .4s;
  57. }
  58.  
  59. input:checked + .slider {
  60. background-color: #2196F3;
  61. }
  62.  
  63. input:focus + .slider {
  64. box-shadow: 0 0 1px #2196F3;
  65. }
  66.  
  67. input:checked + .slider:before {
  68. -webkit-transform: translateX(26px);
  69. -ms-transform: translateX(26px);
  70. transform: translateX(26px);
  71. }
  72.  
  73. .slider.round {
  74. border-radius: 34px;
  75. }
  76.  
  77. .slider.round:before {
  78. border-radius: 50%;
  79. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement