ode-csslib 4.0.0 → 4.0.2

package/scss/specifics/minetest/components/containers/_index.scss

@@ -1,6 +1,8 @@
 @import 'home/index';
-@import 'create-world/index';
 @import 'current-world/index';
 @import 'delete-world/index';
 @import 'properties-world/index';
-@import 'toggle-menu/index';
+@import 'invitation-world/index';
+@import 'follow-world/index';
+@import 'share-world/index';
+@import 'loader/index';

package/scss/specifics/minetest/components/containers/current-world/_current-world.scss

@@ -12,4 +12,11 @@
     font-size: 14px;
     box-shadow: none;
   }
+
+  .external {
+    padding: 8px 18px 10px;
+    font-weight: bold;
+    line-height: 20px;
+    margin-bottom: 10px;
+  }
 }

package/scss/specifics/minetest/components/containers/follow-world/_follow-world.scss

@@ -0,0 +1,27 @@
+.minetestFollow {
+
+  .minetest-lightbox {
+    &-content {
+      &-title {
+        margin-bottom: 20px;
+      }
+    }
+
+    .custom-button {
+      background: $minetest-orange;
+      color: $minetest-white;
+      font-size: 14px;
+    }
+
+    .custom-button:hover {
+      background-color: $minetest-dark-orange;
+      box-shadow: none;
+      color: $minetest-white;
+      font-size: 14px;
+    }
+
+    .one-small {
+      width: 1%;
+    }
+  }
+}

package/scss/specifics/minetest/components/containers/follow-world/_index.scss

@@ -0,0 +1 @@
+@import './follow-world';

package/scss/specifics/minetest/components/containers/home/_home.scss

@@ -160,6 +160,13 @@
         &-title {
           margin-right: 10px;
         }
+        &-reset-password {
+          margin-bottom: 15px;
+        }
+        &-explanation {
+          font-size: 13px;
+          margin-bottom: 10px;
+        }
       }
 
       &-description {
@@ -176,4 +183,4 @@
       }
     }
   }
-}
+}

package/scss/specifics/minetest/components/containers/invitation-world/_index.scss

@@ -0,0 +1 @@
+@import './invitation-world';

package/scss/specifics/minetest/components/containers/invitation-world/_invitation-world.scss

@@ -0,0 +1,62 @@
+.minetestInvitation {
+  .custom-cancel {
+    color: $minetest-orange;
+    background: $minetest-grey;
+    font-size: 14px;
+  }
+
+  .custom-cancel:hover {
+    background: $minetest-orange;
+    color: $minetest-white;
+    font-size: 14px;
+  }
+
+  .custom-button {
+    background: $minetest-orange;
+    color: $minetest-white;
+    font-size: 14px;
+  }
+
+  .custom-button:hover {
+    background-color: $minetest-dark-orange;
+    box-shadow: none;
+    color: $minetest-white;
+    font-size: 14px;
+  }
+
+  .custom-button[disabled=disabled] {
+    color: $minetest-disable;
+    background: $minetest-dark-disable;
+    cursor: default;
+  }
+}
+
+.receivers{
+  margin-bottom: 21px;
+}
+.recipients{
+  margin-bottom: 0px !important;
+  .drop-down-label{
+    border-bottom: none !important;
+    margin-bottom: 0px !important;
+  }
+  hr{
+    width: calc(100% - 20px );
+    right: 0;
+    display: inline-block;
+    border: 1px #aaa solid;
+    padding: 0px;
+  }
+  .drop-down-label:hover{
+    hr{
+      border: 1px solid #FF8500;
+    }
+  }
+  hr.not-empty{
+    border: 0.5px solid #FF8500;
+  }
+  label{
+    padding: 0px !important;
+    vertical-align: super;
+  }
+}

package/scss/specifics/minetest/components/containers/loader/_index.scss

@@ -0,0 +1 @@
+@import 'loader';

package/scss/specifics/minetest/components/containers/loader/_loader.scss

@@ -0,0 +1,55 @@
+$loader-animation-duration: 1.8s;
+
+.loader-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .loader {
+    margin: 50px;
+    transform: translate(-50%, -50%);
+    width: 50px;
+    height: 10px;
+    background: #38a4cd;
+    border-radius: 5px;
+    animation: load $loader-animation-duration ease-in-out infinite;
+
+    &:before, &:after {
+      position: absolute;
+      display: block;
+      content: "";
+      animation: load $loader-animation-duration ease-in-out infinite;
+      height: 10px;
+      border-radius: 5px;
+    }
+
+    &:before {
+      top: -20px;
+      left: 10px;
+      width: 40px;
+      background: grey;
+    }
+
+    &:after {
+      bottom: -20px;
+      width: 35px;
+      background: rgb(3, 32, 48);;
+    }
+  }
+}
+
+@keyframes load {
+  0% {
+    transform: translateX(40px);
+  }
+
+  50% {
+    transform: translateX(-30px);
+  }
+  100% {
+    transform: translateX(40px);
+  }
+}

package/scss/specifics/minetest/components/containers/properties-world/_properties-world.scss

@@ -24,6 +24,12 @@
     font-size: 14px;
   }
 
+  .custom-button[disabled=disabled] {
+    color: $minetest-disable;
+    background: $minetest-dark-disable;
+    cursor: default;
+  }
+
   .medium-text {
     button[disabled=disabled] {
       color: $minetest-orange;

package/scss/specifics/minetest/components/containers/share-world/_index.scss

@@ -0,0 +1 @@
+@import 'share-world';

package/scss/specifics/minetest/components/containers/share-world/_share-world.scss

@@ -0,0 +1,25 @@
+.minetestShare {
+  .minetest-lightbox {
+    button {
+      background: $minetest-orange;
+      color: $minetest-white;
+      font-size: 14px;
+      margin: 0 2px 10px;
+    }
+
+    button:hover {
+      background-color: $minetest-dark-orange;
+      box-shadow: none;
+      color: $minetest-white;
+      font-size: 14px;
+      margin: 0 2px 10px;
+    }
+
+    button[disabled=disabled] {
+      color: $minetest-disable;
+      background: $minetest-dark-disable;
+      cursor: default;
+      margin: 0 2px 10px;
+    }
+  }
+}

package/scss/specifics/minibadge/_minibadge.scss

@@ -0,0 +1,38 @@
+body.minibadge, .sniplet.minibadge {
+  @import "mixins";
+
+  @include mobile {
+    font-size: 12px;
+  }
+
+  .mobile-disabled {
+    @include mobile {
+      display: none;
+    }
+  }
+
+  portal > div.main > section.main {
+    @include mobile {
+      padding: 0;
+      top: 50px;
+    }
+  }
+
+  .minibadge-main-title {
+    font-family: $minibadge-font-secondary;
+    color: $minibadge-red;
+
+    img {
+      width: 34px;
+    }
+  }
+
+
+  @import "containers/index";
+  @import "components/index";
+  @import "generics/index";
+
+
+}
+
+

package/scss/specifics/minibadge/_mixins.scss

@@ -0,0 +1,84 @@
+$minibadge-blue-dark: #368daf;
+$minibadge-blue: #67add1;
+$minibadge-blue-light: #eff8fc;
+$minibadge-green: #629c44;
+$minibadge-grey-dark: #5b6472;
+$minibadge-grey: #c0c0c0;
+$minibadge-grey-light: #d6d6d6;
+$minibadge-grey-lighter: #ebebeb;
+$minibadge-orange: #ffa834;
+$minibadge-red: #E13A3A;
+$minibadge-white: #fff;
+$minibadge-small-icon: 16px;
+
+$minibadge-shadow: rgb(214, 214, 214);
+$minibadge-shadow-light: transparentize($minibadge-shadow, 0.3);
+$minibadge-shadow-lighter: transparentize($minibadge-shadow, 0.7);
+
+$minibadge-font-secondary: 'Comfortaa', cursive;
+
+@mixin mobile {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: 769px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: 769px) and (max-width:992px) {
+    @content;
+  }
+}
+
+@mixin paddingX($size) {
+  padding-left: $size;
+  padding-right: $size;
+}
+
+@mixin paddingY($size) {
+  padding-bottom: $size;
+  padding-top: $size;
+}
+
+@mixin paddingXY($sizeX, $sizeY) {
+  padding: $sizeY $sizeX;
+}
+
+@mixin marginX($size) {
+  margin-left: $size;
+  margin-right: $size;
+}
+
+@mixin marginY($size) {
+  margin-bottom: $size;
+  margin-top: $size;
+}
+
+@mixin navbarBorderBottom($size) {
+  padding-top: $size;
+  border-bottom: solid $size;
+  box-sizing: border-box;
+}
+
+@mixin icon-small() {
+  width: $minibadge-small-icon;
+}
+
+.minibadge-mobile-padding-x {
+  @include mobile {
+    @include paddingX(10px);
+  }
+}
+
+.minibadge-margin-top {
+  margin-top: 10px;
+}
+
+.minibadge-delete-button {
+  background-color: $minibadge-grey-light;
+}

package/scss/specifics/minibadge/components/_badge.scss

@@ -0,0 +1,156 @@
+.minibadge-badge-cards {
+  gap: 15px;
+}
+
+minibadge-card-type {
+  &.minibadge-mobile-full {
+    @include mobile {
+      width: 100%;
+    }
+  }
+
+  .minibadge-card {
+    &-title {
+      flex: none;
+    }
+
+    &-body {
+      align-items: revert;
+
+      &-icon {
+        padding: 10px;
+        font-size: 24px;
+        line-height: 24px;
+        left: 0;
+
+        @include mobile {
+          padding: 5px;
+        }
+
+        &.minibadge-icon-right {
+          right: 0;
+          left: revert;
+          color: $minibadge-blue-dark;
+        }
+      }
+    }
+
+    &-badge-detail {
+      @include mobile {
+        width: 100%;
+        flex-direction: row;
+        height: 112px;
+      }
+
+      .minibadge-card-body {
+        @include mobile {
+          flex: revert;
+          width: 180px;
+        }
+      }
+
+      .minibadge-card-footer {
+        @include paddingX(10px);
+        background: $minibadge-white;
+        height: 80px;
+
+        @include mobile {
+          height: 100%;
+          line-height: 30px;
+          flex: 1;
+          border-radius: 0 10px 10px 0;
+        }
+
+        .minibadge-more-info {
+          width: 100%;
+        }
+
+        .minibadge-actions {
+          align-self: flex-end;
+          margin-left: auto;
+          position: relative;
+
+          .dots-vertical {
+            font-size: 1.3rem;
+
+            &:hover {
+              color: $minibadge-orange;
+            }
+          }
+
+          .minibadge-action {
+            &-options {
+              display: flex;
+              flex-direction: column;
+              position: absolute;
+              top: 0;
+              left: 100%;
+              background: $minibadge-white;
+              border-radius: 2px;
+              box-shadow: 4px 8px 10px $minibadge-grey-light;
+              z-index: 1;
+
+              &.minibadge-reposition {
+                left: 0;
+                transform: translateX(-100%);
+              }
+            }
+
+            &-option {
+              @include paddingX(28px);
+              @include paddingY(6px);
+              white-space: nowrap;
+              justify-content: flex-start;
+
+              & .lock {
+                @include icon-small();
+              }
+
+              &:first-child {
+                border-radius: 2px 2px 0 0;
+              }
+
+              &:last-child {
+                border-radius: 0 0 2px 2px;
+              }
+
+              &:hover {
+                background-color: $minibadge-orange;
+                color: $minibadge-white;
+              }
+            }
+          }
+        }
+
+        .star {
+          color: $minibadge-orange;
+        }
+
+        .minibadge-type-footer {
+          height: 100%;
+        }
+      }
+    }
+
+    &-award-badge {
+      .minibadge-card-footer {
+        height: 48px;
+
+        @include mobile {
+          height: 38px;
+        }
+
+        background: $minibadge-blue;
+        color: $minibadge-white;
+
+        &:hover {
+          background: $minibadge-orange;
+        }
+
+        .minibadge-type-footer {
+          height: 100%;
+        }
+      }
+    }
+  }
+}

package/scss/specifics/minibadge/components/_card.scss

@@ -0,0 +1,88 @@
+.minibadge-card {
+  &.disabled {
+    opacity: 0.5;
+
+    & * {
+      cursor: default;
+    }
+  }
+
+  &-list {
+    margin-top: 30px;
+    background: $minibadge-white;
+    gap: 15px;
+    @include paddingY(15px);
+  }
+
+  height: 232px;
+  width: 215px;
+  border-radius: 10px;
+  background: $minibadge-blue-light;
+  border: solid $minibadge-shadow-light 1px;
+
+  @include mobile {
+    width: 170px;
+    height: 183px;
+  }
+
+  &-body, &-body > container-body {
+    flex: 1;
+    width: 100%;
+    align-items: center;
+
+    &-icon {
+      flex: 1;
+      font-size: 80px;
+      line-height: 80px;
+      align-items: flex-end;
+    }
+  }
+
+  &-footer, .minibadge-footer {
+    border-radius: 0 0 10px 10px;
+  }
+
+  container-footer {
+    flex: 1;
+  }
+
+  &-picture {
+    flex: 1;
+
+    img {
+      max-height: 100%;
+    }
+  }
+
+  &-title, h3 {
+    flex: 1;
+    height: 31px;
+  }
+
+}
+
+.minibadge-card-simple, minibadge-card-type-statistic {
+  display: flex;
+  align-self: center;
+
+  .minibadge-card {
+    @include desktop {
+      align-self: center;
+      background-color: $minibadge-white;
+      border: none
+    }
+  }
+}
+
+minibadge-card-type-statistic {
+  width: 100%;
+
+  .minibadge-card {
+    flex: 1;
+
+    &-title {
+      flex: none;
+      height: auto;
+    }
+  }
+}

package/scss/specifics/minibadge/components/_chart.scss

@@ -0,0 +1,15 @@
+.minibadge-chart {
+  h1 {
+    color: $minibadge-grey-dark;
+  }
+
+  h2 {
+    font-weight: bold!important;
+  }
+
+  &-footer {
+    margin-top: 10px;
+  }
+
+}
+

package/scss/specifics/minibadge/components/_container.scss

@@ -0,0 +1,37 @@
+.minibadge-container {
+  &-component, &-card {
+    flex: 1;
+    row-gap: 8px;
+    background: $minibadge-white;
+    @include paddingXY(8px, 16px);
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &-component {
+    margin-top: 30px;
+
+    h3 {
+      display: flex;
+
+      i.play {
+        display: flex;
+        transform: rotate(0deg);
+        transition: transform 0.2s linear;
+
+        &.opened {
+          transform: rotate(90deg);
+          transition: transform 0.2s linear;
+        }
+      }
+    }
+  }
+
+  &-card {
+    border-radius: 5px;
+    box-shadow: 0 5px 5px $minibadge-shadow;
+  }
+}
+

package/scss/specifics/minibadge/components/_empty-statement.scss

@@ -0,0 +1,7 @@
+.minibadge-empty-statement {
+  margin-top: 16px;
+  margin-left: 8px;
+  @include mobile{
+    margin-left: 16px;
+  }
+}