Added new design

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / components / _media.scss

diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss
new file mode 100644 (file)
index 0000000..5613607
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/components/_media.scss
@@ -0,0 +1,217 @@
+.c-media {
+  margin: 0 auto;
+}
+
+.c-media__actions {
+  display: flex;
+}
+
+.c-media__btn {
+  width: 100%;
+  text-align: center;
+  align-items: center;
+
+  &:nth-child(1) { padding-right: 19px; }
+  &:nth-child(2) { padding-left: 19px; padding-right: 19px; }
+  &:nth-child(3) { padding-left: 19px; }
+
+  .l-button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.c-media__player {
+  margin-top: 35px;
+
+  h2 {
+    font-weight: $bold;
+    @include font-size(16px);
+    line-height: 19px;
+    text-align: center;
+    letter-spacing: 0.01em;
+    color: $color-gray;
+    margin: 0;
+  }
+}
+
+.c-media__caption {
+  color: #474747;
+  background: #F2F2F2;
+  padding: 15px 24px;
+  border-radius: 0 0 5px 5px;
+  max-width: 830px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .icons {}
+  .content {
+    padding-left: 35px;
+    width: calc(100% - 145px);
+  }
+
+  .icon {
+    color: #808080;
+    font-size: 26px;
+    &:not(:last-child) {
+      margin-right: 16px;
+    }
+  }
+
+  p {
+    margin: 0;
+    color: #474747;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 140%;
+  }
+}
+
+.c-media__popup {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba($color-black, 0.35);
+  display: none;
+
+  &.is-open {
+    display: flex;
+  }
+}
+
+.c-media__popup__box {
+  background-color: #fff;
+  min-width: 640px;
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.c-media__popup__box__lead {
+  padding: 40px;
+  background: #083F4D;
+
+  h2 {
+    margin-top: 0;
+    font-weight: 600;
+    font-size: 25px;
+    line-height: 140%;
+    letter-spacing: -0.01em;
+    color: #FFFFFF;
+  }
+
+  p {
+    letter-spacing: .01em;
+    margin-top: 0;
+    font-weight: normal;
+    font-size: 18px;
+    line-height: 150%;
+    color: #D5ECED;
+  }
+}
+
+.c-media__popup__box__items {
+  padding: 40px;
+}
+
+.c-media__popup__box__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 20px 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #D9D9D9;
+  }
+
+  h3 {
+    margin-top: 0;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 166%;
+    letter-spacing: -0.005em;
+    color: #474747;
+    border-bottom: 0;
+    padding: 0;
+  }
+
+  p {
+    margin-top: 10px;
+    max-width: 390px;
+    font-weight: normal;
+    font-size: 15px;
+    line-height: 160%;
+    color: #808080;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0;
+
+    li {
+      line-height: 1;
+
+      &:not(:last-child) {
+        margin-bottom: 15px;
+      }
+
+      a {
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 16px;
+        letter-spacing: 0.01em;
+        text-decoration: underline;
+        color: #666666;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .l-button {
+    padding: 6px 10px;
+    min-width: 120px;
+    display: block;
+    text-align: center;
+
+    color: $color-white;
+    background: #007880;
+    border: 2px solid #007880;
+
+    &:hover {
+      background: darken(#007880, 2%);
+      border-color: darken(#007880, 2%);
+    }
+  }
+}
+
+.c-media__popup__close {
+  position: absolute;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  font-size: 0;
+  background-color: transparent;
+  top: 35px;
+  right: 40px;
+  transition: all $ease-dynamic 350ms;
+  opacity: 0.75;
+
+  &:hover {
+    opacity: 1;
+  }
+}