WebSVN – Moodle – Diff – /theme/universe/scss/moodle/frontpage.scss

 .rui-special-list--primary {
   li {
     &:before {
       background-color: var(--primary-color-200);
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($gray-800)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75'%3E%3C/path%3E%3C/svg%3E%0A");
-      .theme-dark & {
-        background-color: $primary-color-800;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($primary-color-500)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75'%3E%3C/path%3E%3C/svg%3E%0A");
-      }
+    }
+  }
+}
+}
 .rui-pricing-table--special {
   background-color: var(--primary-color-100);
   border-color: var(--primary-color-300);
-  border-left: 2px dashed $primary-color-300 !important;
+  border-left: 2px dashed var(--primary-color-300) !important;
   .theme-dark & {
-    background-color: $primary-color-800;
+    background-color: var(--primary-color-800);
     border-color: var(--main-theme-color);
+  }
   background-color: var(--primary-color-100);
   border-radius: $btn-border-radius-md;
   .theme-dark & {
-    background-color: $primary-color-800;
+    background-color: var(--primary-color-800);
+  }
+    }
+  }
+}
 .rui-list--gap {
+  display: flex;
-  display: grid;
+  flex-wrap: wrap;
-  row-gap: 30px;
+  gap: 60px;
+}
 .rui-img-mask--grayscale {
   img {
     filter: grayscale(1);
+  }
+}
+// Video Popup
+#video-popup {
+  background-color: rgb(25, 25, 25);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 99999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: 500ms all;
+}
+#video-popup:target {
+  opacity: 1;
+  visibility: visible;
+}
+.vpopup {
+  width: 75%;
+  height: 600px;
+  overflow: hidden;
+  transform: scale(0.6);
+  transition: 500ms all;
+  position: relative;
+}
+.vpopup-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+#video-popup:target .vpopup {
+  transform: scale(1);
+}
+.video-container {
+  background-size: cover;
+  position: relative;
+  border-radius: $btn-border-radius;
+  width: 200px;
+  height: 130px;
+  background-color: $gray-200;
+  transition: 350ms ease all;
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+.vpopup-play {
+  &::before {
+    display: none;
+  }
+  position: absolute;
+  top: calc(50% - 40px);
+  left: calc(50% - 40px);
+  i {
+    color: #fff;
+    font-size: 60px;
+    transition: all 0.5s ease;
+    padding: 10px;
+    border-radius: 100%;
+  }
+  i:hover {
+    opacity: .7;
+    color: #fff;
+  }
+}
+.vpopup-close {
+  position: absolute;
+  color: #fff;
+  left: 50%;
+  top: 10%;
+  transform: translate(-50%, -50%);
+  a::before {
+    display: none;
+  }
+  i {
+    color: #fff;
+    font-size: 50px;
+    transition: all 0.5s ease;
+  }
+  a i:hover {
+    color: white;
+    font-size: 70px;
+  }
+}

Proyectos de Subversion Moodle

(root)/theme/universe/scss/moodle/frontpage.scss – Rev 1 → 1441