ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_edumedia.scss

@@ -0,0 +1,384 @@
+/*EDUMEDIA EXPLORER ELEMENT ROOT*/
+edumedia-explorer-element.root {
+  box-sizing: border-box;
+  padding: 10px;
+  width: 22%;
+  text-align: center;
+  margin: 1% !important;
+  overflow: hidden;
+  height: 100px;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  font-weight: 600;
+  background-color: #fff;
+  border-radius: 8px;
+  text-decoration: none;
+  border: solid 2px grey;
+  color: grey;
+}
+edumedia-explorer-element.root > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+edumedia-explorer-element:hover {
+  box-shadow: 0 2px 10px $shadow-light;
+}
+edumedia-explorer-element.root:nth-child(1) {
+  border-color: #228fcc;
+  color: #228fcc;
+  &:hover {
+    border-color: lighten(#228fcc, 10%);
+    background-color: lighten(#228fcc, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#228fcc, 5%);
+    background-color: darken(#228fcc, 5%);
+  }
+}
+edumedia-explorer-element.root:nth-child(2) {
+  border-color: #41a796;
+  color: #41a796;
+  &:hover {
+    border-color: lighten(#41a796, 10%);
+    background-color: lighten(#41a796, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#41a796, 5%);
+    background-color: darken(#41a796, 5%);
+  }
+}
+
+edumedia-explorer-element.root:nth-child(3) {
+  border-color: #60bf5f;
+  color: #60bf5f;
+  &:hover {
+    border-color: lighten(#60bf5f, 10%);
+    background-color: lighten(#60bf5f, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#60bf5f, 5%);
+    background-color: darken(#60bf5f, 5%);
+  }
+}
+
+edumedia-explorer-element.root:nth-child(4) {
+  border-color: #7dd628;
+  color: #7dd628;
+  &:hover {
+    border-color: lighten(#7dd628, 10%);
+    background-color: lighten(#7dd628, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#7dd628, 5%);
+    background-color: darken(#7dd628, 5%);
+  }
+}
+edumedia-explorer-element.root:nth-child(5) {
+  border-color: #c4b520;
+  color: #c4b520;
+  &:hover {
+    border-color: lighten(#c4b520, 10%);
+    background-color: lighten(#c4b520, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#c4b520, 5%);
+    background-color: darken(#c4b520, 5%);
+  }
+}
+edumedia-explorer-element.root:nth-child(6) {
+  border-color: #dd972f;
+  color: #dd972f;
+  &:hover {
+    border-color: lighten(#dd972f, 10%);
+    background-color: lighten(#dd972f, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#dd972f, 5%);
+    background-color: darken(#dd972f, 5%);
+  }
+}
+edumedia-explorer-element.root:nth-child(7) {
+  border-color: #dd602c;
+  color: #dd602c;
+  &:hover {
+    border-color: lighten(#dd602c, 10%);
+    background-color: lighten(#dd602c, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#dd602c, 5%);
+    background-color: darken(#dd602c, 5%);
+  }
+}
+edumedia-explorer-element.root:nth-child(8) {
+  border-color: #dd2929;
+  color: #dd2929;
+  &:hover {
+    border-color: lighten(#dd2929, 10%);
+    background-color: lighten(#dd2929, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#dd2929, 5%);
+    background-color: darken(#dd2929, 5%);
+  }
+}
+
+edumedia-explorer-element.root:nth-child(9) {
+  border-color: #f06595;
+  color: #f06595;
+  &:hover {
+    border-color: lighten(#f06595, 10%);
+    background-color: lighten(#f06595, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#f06595, 5%);
+    background-color: darken(#f06595, 5%);
+  }
+}
+
+edumedia-explorer-element.root:nth-child(10) {
+  border-color: #9775fa;
+  color: #9775fa;
+  &:hover {
+    border-color: lighten(#9775fa, 10%);
+    background-color: lighten(#9775fa, 10%);
+    color: white;
+  }
+  &:active {
+    border-color: darken(#9775fa, 5%);
+    background-color: darken(#9775fa, 5%);
+  }
+}
+
+/*EDUMEDIA EXPLORER ELEMENT FOLDER*/
+
+edumedia-explorer-element.folder {
+  border: solid 1px #228fcc;
+  align-self: stretch;
+  width: 100%;
+  margin: 6px 0px;
+  border-radius: 8px;
+  color: #333;
+  cursor: pointer;
+}
+
+edumedia-explorer-element.folder > div {
+  padding: 20px;
+}
+edumedia-explorer-element.folder > div p {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+edumedia-explorer-element.folder p::after {
+  margin-left: 12px;
+  font-weight: 700;
+  content: "\0203A";
+}
+
+/*EDUMEDIA EXPLORER ELEMENT MEDIA*/
+edumedia-explorer-element.media {
+  width: 31%;
+  text-align: center;
+  margin: 1% !important;
+  overflow: hidden;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(51, 51, 51);
+  font-weight: 600;
+  background-color: #fff;
+  border-radius: 8px;
+  text-decoration: none;
+}
+edumedia-explorer-element.media div {
+  display: flex !important;
+  width: 100%;
+  height: 100%;
+}
+edumedia-explorer-element.media div img {
+  flex: 1;
+}
+edumedia-explorer-element.media div p {
+  flex: 1;
+  align-self: center;
+  padding: 5px 10px !important;
+  color: rgb(51, 51, 51);
+  text-align: center;
+}
+edumedia-explorer-element.media.selected {
+  color: #228fcc;
+  border-color: #228fcc;
+  box-shadow: 0 2px 15px $shadow-light;
+}
+edumedia-explorer-element.media.selected p {
+  color: #228fcc;
+}
+
+/*EDUMEDIA EXPLORER*/
+edumedia-explorer .edumedia-scrollable-area {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  justify-content: space-between !important;
+  max-height: 430px;
+  overflow-y: auto;
+  &.edumedia-search {
+    img {
+      height: 100%;
+      padding-right: 10px;
+    }
+    edumedia-explorer-element.root {
+      padding: 0 5px 0 0;
+      width: 31%;
+      text-align: left;
+      border-color: grey;
+      color: #333;
+      background-color: white;
+      & > div {
+        justify-content: flex-start;
+      }
+    }
+  }
+}
+
+.edumedia-explorer-container {
+  padding: 0 10px;
+}
+
+/*EDUMEDIA STACK*/
+.tabs .edumedia-header-stack {
+  display: flex !important;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  padding-bottom: 0;
+  header {
+    padding: 0;
+    padding: 0;
+    border: none;
+    text-transform: none;
+    color: $grey;
+    &:hover {
+      color: $orange;
+    }
+    &::after {
+      height: 0;
+    }
+  }
+  header + header::before {
+    content: "»";
+    padding-right: 10px;
+  }
+  button {
+    overflow: inherit;
+  }
+}
+
+/*EDUMEDIA TITLE*/
+.edumedia-header-title {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0 0 0;
+  input {
+    margin-top: 5px;
+  }
+  h2 {
+    font-size: 1.5em !important;
+    font-weight: 600 !important;
+    margin: 0 !important;
+    cursor: pointer;
+    span {
+      padding-right: 12px;
+    }
+  }
+}
+
+.edumedia-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+
+/*TEXT EDITOR*/
+.edumedia-container {
+  display: inline-block;
+}
+.edumedia-content-header {
+  display: flex !important;
+  align-items: baseline;
+  justify-content: space-between;
+  position: relative;
+  padding-top: 20px;
+  top: -10px;
+  left: 0;
+}
+.edumedia-content-header [edumedia-fullscreen-jquery] {
+  display: flex;
+  align-items: center;
+  position: initial;
+  top: initial;
+  left: initial;
+}
+[edumedia-delete-jquery],
+lightbox [edumedia-delete-jquery],
+edumedia-explorer edumedia-explorer-media [edumedia-delete-jquery] {
+  display: none;
+}
+editor [edumedia-delete-jquery] {
+  display: block;
+  cursor: pointer;
+}
+/*EDUMEDIA FULLSCREEN*/
+#edumedia-fullscreen-lightbox {
+  display: block;
+  z-index: 100001;
+}
+[edumedia-fullscreen-jquery] {
+  position: relative;
+  bottom: 5px;
+  left: 5px;
+  font-size: 16px !important;
+  margin: 0 !important;
+  font-weight: normal;
+  cursor: pointer;
+  color: $cyan;
+}
+#edumedia-fullscreen-lightbox .background {
+  background: black;
+  display: block;
+}
+.edumedia-fullscreen-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 100002;
+  width: 100%;
+  position: fixed;
+}
+#edumedia-fullscreen-lightbox .close-2x {
+  color: white;
+}
+#edumedia-fullscreen-lightbox .close-lightbox {
+  z-index: 100003;
+}
+
+.tabs header:hover {
+  color: $cyan;
+}

package/scss/modules/_embedder.scss

@@ -0,0 +1,136 @@
+embedder {
+  .lightbox > .content {
+    overflow: hidden;
+  }
+  .lightbox > .content .browser {
+    max-width: 100%;
+  }
+
+  .embedder-help {
+    color: #444;
+    font-size: 14px;
+    margin-bottom: 30px;
+  }
+
+  .provider {
+    display: none;
+    width: 100%;
+
+    i.copy {
+      position: absolute;
+      top: -4px;
+      left: 10px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      float: left;
+
+      &::before {
+        content: "\e820";
+        display: block;
+        height: 30px;
+        font-size: 30px;
+        color: #666;
+        transition: color 250ms ease;
+      }
+    }
+
+    .input-help {
+      label {
+        left: 60px;
+      }
+    }
+
+    .others {
+      @include editor-icon;
+      display: block;
+      position: relative;
+      font-size: 35px;
+      height: 80px;
+      width: 80px;
+      margin-bottom: 20px;
+      margin-top: 20px;
+      margin-left: auto;
+      margin-right: auto;
+      float: none;
+      box-shadow: 3px 3px 0px rgba(200, 200, 200, 1);
+      background-color: #eee;
+      transition: all 200ms ease;
+      line-height: 80px;
+      border-radius: 5px;
+      color: #888;
+
+      &:hover {
+        box-shadow: none;
+      }
+    }
+
+    .invalid-preview {
+      font-size: 35px;
+      color: #d6d6d6;
+      font-weight: bold;
+      background: #eee;
+      height: 315px;
+      margin-top: 20px;
+      margin-bottom: 30px;
+      text-align: center;
+      line-height: 350px;
+      border-radius: 5px;
+    }
+
+    .preview {
+      iframe {
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        margin-top: 30px;
+        margin-bottom: 30px;
+        max-width: 100%;
+      }
+    }
+
+    &.visible {
+      display: block;
+    }
+  }
+
+  .provider-content {
+    width: 100%;
+    min-width: 300px;
+  }
+
+  .pick {
+    ul {
+      margin: 0;
+      padding: 0;
+      text-align: center;
+      width: 80%;
+      margin: auto;
+    }
+    li {
+      opacity: 0.7;
+      list-style-type: none;
+      max-width: 20%;
+      display: inline-block;
+      box-sizing: border-box;
+      border: 1px solid #ccc;
+      border-radius: 10px;
+      margin: 5px;
+      padding: 20px;
+      transition: opacity 500ms ease;
+      &:hover {
+        opacity: 1;
+      }
+      img {
+        display: block;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $fat-mobile) {
+  embedder .pick li {
+    max-width: 25%;
+    padding: 10px;
+  }
+}

package/scss/modules/_emptyscreen.scss

@@ -0,0 +1,43 @@
+.emptyscreen {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  text-align: center;
+  height: inherit;
+  align-items: center;
+  margin-top: 25px;
+  &-header {
+    font-size: 26px;
+  }
+  &-image {
+    max-width: 40%;
+    max-height: 30vh;
+    margin-top: 35px;
+    margin-bottom: 20px;
+    &__mini {
+      max-height: 200px;
+      margin: 25px;
+    }
+    &[src*="trash"] {
+      max-height: 35vh;
+    }
+  }
+  &-footer {
+    font-size: 14px;
+    line-height: 1.5;
+    color: $darkest-grey;
+    margin: 25px 50px;
+    max-width: 500px;
+  }
+}
+@media screen and (max-width: $fat-mobile) {
+  .emptyscreen {
+    &-header {
+      font-size: 20px;
+    }
+    &-footer {
+      font-size: 12px;
+    }
+  }
+}

package/scss/modules/_explorer.scss

@@ -0,0 +1,118 @@
+.explorer {
+  position: relative;
+  cursor: pointer;
+}
+explorer.radius a,
+explorer.radius img,
+explorer.radius a .cell.video {
+  border-radius: 15px;
+}
+
+explorer.radius legend {
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
+explorer.radius legend > a {
+  border-radius: 0;
+  padding: 0 3px !important;
+}
+
+explorer.explorer-hover a.container:hover,
+explorer.explorer-hover legend:hover + a.container {
+  border: 1px solid $orange !important;
+  box-shadow: 0 0 10px rgba($black, 0.1);
+}
+explorer.explorer-hover i.folder-large:hover,
+explorer.explorer-hover i.unknown-large:hover,
+explorer.explorer-hover i.audio-large:hover {
+  color: $orange !important;
+}
+explorer.explorer-hover legend {
+  z-index: 1;
+}
+explorer.explorer-droppable {
+  position: relative;
+}
+explorer .explorer-badge-drop {
+  display: none;
+}
+explorer.explorer-droppable .explorer-badge-drop {
+  position: absolute;
+  z-index: 1000;
+  width: 20px;
+  height: 20px;
+  top: -6px;
+  right: -6px;
+  border-radius: 100%;
+  text-align: center;
+  font-size: 12px;
+  line-height: 20px;
+  background: $orange;
+  color: $white;
+  text-shadow: 0px 0px 2px rgba($black, 0.5);
+}
+
+explorer.explorer-no-droppable {
+  border-radius: 15px;
+  border: 1px solid $red;
+  &::after {
+    @include fonticon;
+    content: "\e83a";
+    font-size: 24px;
+    display: block;
+    background-color: $red;
+    color: white;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 50%;
+    position: absolute;
+    top: -5px;
+    left: -5px;
+  }
+  .container,
+  .explorer {
+    cursor: not-allowed !important;
+    opacity: 0.5;
+    background-color: rgba($red, 0.5);
+    border-radius: 15px;
+    &:hover {
+      border-color: $red;
+    }
+    & i {
+      color: $red !important;
+      &:hover {
+        color: darken($red, 5%) !important;
+      }
+    }
+  }
+}
+
+.droptarget explorer.explorer-droppable .explorer-badge-drop {
+  display: block;
+}
+.droptarget explorer.explorer-droppable a.container {
+  border: 1px $orange dashed !important;
+}
+@media screen and (max-width: $tablette) {
+  body {
+    explorer {
+      display: block;
+      user-select: none;
+      -webkit-user-select: none;
+      //-webkit-touch-callout: none;
+    }
+  }
+}
+
+// Fix table display
+table,
+thead,
+tbody,
+tr {
+  &[explorer] {
+    & > .explorer {
+      display: contents;
+    }
+  }
+}

package/scss/modules/_file-picker-list.scss

@@ -0,0 +1,27 @@
+file-picker-list {
+  .media-library {
+    .import-files {
+      padding: unset;
+      height: 112px;
+      margin-bottom: 10px;
+
+      & > article {
+        top: 22px;
+        left: 70px;
+      }
+    }
+
+    .loading-list {
+      overflow-y: scroll;
+      max-height: 112px;
+      margin-bottom: 10px;
+
+      ul {
+        li {
+          margin-bottom: 10px;
+          padding: 5px 5px 5px 20px;
+        }
+      }
+    }
+  }
+}