calendar

css/popup.css

@@ -1,28 +1,31 @@
-  .card {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     transition: 0.3s;
-    margin:5px;
-  }
+    margin: 5px;
+}
 
-  .card:hover {
-    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
-  }
+.card:hover {
+    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
+}
 
-  .container {
+.container {
     padding: 2px 16px;
-  }
-  h2 {
-    padding: 10px 0px 0 10px;
-  }
-  li {
-    width: 350px;
+}
 
-  }
-  body{
-    min-width: 500px;
+h2 {
+    padding: 10px 0px 0 10px;
+}
+
+li {
+    width: 350px;
+}
+
+body {
+    min-width: 370px;
     min-height: 400px;
-  }
-  .matbut {
+}
+
+.matbut {
     border: none;
     outline: none;
     cursor: pointer;
@@ -32,67 +35,69 @@
     border-radius: 10px;
     font-size: medium;
     font-style: bold;
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
-    background: #FF9800;
-  }
-
-  .matbut{
-    position: relative;
-    overflow: hidden;
-  }
-
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 80%;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+    background: #ff9800;
 }
 
-  .matbut:after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 5px;
-    height: 5px;
-    background: rgba(255, 255, 255, .5);
-    opacity: 0;
-    border-radius: 100%;
-    transform: scale(1, 1) translate(-50%);
-    transform-origin: 50% 50%;
-  }
-   .card:after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 5px;
-    height: 5px;
-    background: rgba(255, 255, 255, .5);
-    opacity: 0;
-    border-radius: 100%;
-    transform: scale(1, 1) translate(-50%);
-    transform-origin: 50% 50%;
-  }
+.matbut {
+    position: relative;
+    overflow: hidden;
+}
 
-  @keyframes ripple {
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 80%;
+}
+
+.matbut:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 5px;
+    height: 5px;
+    background: rgba(255, 255, 255, 0.5);
+    opacity: 0;
+    border-radius: 100%;
+    transform: scale(1, 1) translate(-50%);
+    transform-origin: 50% 50%;
+}
+
+.card:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 5px;
+    height: 5px;
+    background: rgba(255, 255, 255, 0.5);
+    opacity: 0;
+    border-radius: 100%;
+    transform: scale(1, 1) translate(-50%);
+    transform-origin: 50% 50%;
+}
+
+@keyframes ripple {
     0% {
-      transform: scale(0, 0);
-      opacity: 1;
+        transform: scale(0, 0);
+        opacity: 1;
     }
     20% {
-      transform: scale(25, 25);
-      opacity: 1;
+        transform: scale(25, 25);
+        opacity: 1;
     }
     100% {
-      opacity: 0;
-      transform: scale(40, 40);
+        opacity: 0;
+        transform: scale(40, 40);
     }
-  }
+}
 
-  .matbut:focus:not(:active)::after {
+.matbut:focus:not(:active)::after {
     animation: ripple 1s ease-out;
-  }
-  .card:focus:not(:active)::after {
+}
+
+.card:focus:not(:active)::after {
     animation: ripple 1s ease-out;
-  }
+}