1.9 - Adding modal to confirm when remove item from playlist

Author: quead

dist/assets/css/main.css

@@ -3,8 +3,8 @@
 :root {
   --c-base: #f9f9f9;
   --c-primary: red;
-  --c-primary-active: #cc0000;
-  --c-primary-active-focus: #990000;
+  --c-primary-active: #ea0000;
+  --c-primary-active-focus: #cc0000;
   --c-primary-inverse: #232228;
   --c-secondary: #167ac6;
   --c-success: #23CF5F;
@@ -81,7 +81,7 @@ a:active {
   vertical-align: middle;
   user-select: none;
   border: 1px solid transparent;
-  padding: .5rem 1rem;
+  padding: 6px 15px;
   text-decoration: none;
   transition: all .1s ease-out;
   outline: 0;
@@ -95,6 +95,46 @@ a:active {
   padding: 5px 17px;
 }
 
+.btn-link {
+  background-color: transparent;
+  color: rgba(35, 34, 40, 0.3);
+}
+
+.btn-link:hover {
+  color: rgba(35, 34, 40, 0.6);
+}
+
+.btn-link:active {
+  color: var(--c-primary-inverse);
+}
+
+.btn-primary {
+  background-color: var(--c-primary);
+  color: var(--c-white);
+}
+
+.btn-primary:hover {
+  background-color: var(--c-primary-active);
+}
+
+.btn-primary:active {
+  background-color: var(--c-primary-active-focus);
+}
+
+.btn-primary-inverse {
+  background-color: var(--c-primary-inverse);
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.btn-primary-inverse:hover {
+  color: var(--c-white);
+}
+
+.btn-primary-inverse:active {
+  background-color: var(--c-black);
+  color: var(--c-white);
+}
+
 :root {
   --menu-diff: 175px;
 }
@@ -337,12 +377,99 @@ a:active {
   visibility: visible;
 }
 
-#test {
-  height: 50px;
-  width: 10px;
-  background: red;
-  cursor: e-resize;
-  position: relative;
+.modal-overlay {
+  position: fixed;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 999;
+}
+
+.modal-background-overlay {
+  background-color: rgba(0, 0, 0, 0.3);
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.modal-container {
+  position: absolute;
+  background-color: var(--c-white);
+  color: var(--c-black);
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+  width: 400px;
+  height: 400px;
+  text-align: center;
+  padding-top: 30px;
+  padding-bottom: 90px;
+  animation: loading-animation 0.2s 1;
+}
+
+.modal-container h2 {
+  margin-top: 10px;
+  font-size: 18px;
+  font-weight: 400;
+  padding: 0 40px;
+  margin-bottom: 30px;
+}
+
+.modal-content {
+  padding: 0 20px;
+}
+
+.modal-content img {
+  width: 200px;
+  height: auto;
+}
+
+.modal-content p {
+  margin-top: 5px;
+}
+
+.modal-close {
+  position: absolute;
+  top: 13px;
+  right: 15px;
+  cursor: pointer;
+}
+
+.modal-close span {
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.modal-close span:active {
+  color: var(--c-black);
+}
+
+.modal-buttons {
+  display: block;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+}
+
+.modal-buttons .btn {
+  display: block;
+  margin: 5px auto;
+  padding: 15px;
+  border: none;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding: 11px 10px;
+  font-size: 12px;
+}
+
+.modal-buttons .btn-primary {
+  width: 70%;
+  border-radius: 30px;
 }
 
 .current-video-all {