vermine2047/less/utilities.less

// ============================================
// Utilitaires LESS pour Vermine2047
// Mixins, fonctions et classes utilitaires
// ============================================

// Mixin pour les ombres standard
.shadow() {
  box-shadow: 0 2rem @theme-color-shadow;
  margin: 2rem 0;
}
.shadow(@color) {
  box-shadow: 0 2rem @color;
  margin: 2rem 0;
}
.shadow(@color, @blur) {
  box-shadow: 0 @blur @color;
  margin: 2rem 0;
}
.shadow(@h-offset, @v-offset, @blur, @color) {
  box-shadow: @h-offset @v-offset @blur @color;
  margin: 2rem 0;
}

// Mixin pour le style des hexagones
.hexa-style(@bg-color: rgba(255, 255, 255, 0.425), @bg-color-end: rgba(0, 0, 0, 0.288)) {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: radial-gradient(circle, @bg-color 0%, @bg-color-end 100%);
  max-height: 1.5rem;
  max-width: 1.5rem;
  min-width: 1.5rem;
  aspect-ratio: 1/1;
  color: #000;
  vertical-align: center;
  text-align: center;
}

// Mixin pour les boutons rollable
.rollable-style() {
  &:hover,
  &:focus {
    color: #000;
    text-shadow: 0 0 10px red;
    cursor: pointer;
  }
}

// Mixin pour les inputs de type hexa
.input-hexa-style() {
  .hexa-style();
  input {
    width: 1rem;
  }
  input[type="radio"] {
    opacity: 0;
  }
  input[type="radio"]::after,
  input[type="radio"]::before {
    display: none;
  }
}

// Mixin pour les classes flex
.flex-container(@direction: row, @wrap: nowrap, @justify: flex-start, @align: stretch) {
  display: flex;
  flex-direction: @direction;
  flex-wrap: @wrap;
  justify-content: @justify;
  align-items: @align;
}

// Mixin pour le style des cartes
.card-style(@bg-color: rgba(0, 0, 0, 0.1), @border-color: #444) {
  border: 1px solid @border-color;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 15px;
  background: @bg-color;
}

// Mixin pour les titres de carte
.card-title(@border-color: #666) {
  margin-top: 0;
  border-bottom: 1px solid @border-color;
  padding-bottom: 5px;
  text-align: center;
}

// Mixin pour les éléments de liste avec bordure
.list-item-with-border(@border-color: #333) {
  padding: 5px;
  border-bottom: 1px solid @border-color;
  &:last-child {
    border-bottom: none;
  }
}

// Mixin pour les groupes de formulaires
.form-group-style(@margin-bottom: 10px) {
  margin-bottom: @margin-bottom;
  label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 12px;
  }
  input,
  select {
    width: 100%;
    font-size: 12px;
  }
}

// Mixin pour les ressources
.resource-style(@bg-color: rgba(0, 0, 0, 0.05)) {
  padding: 5px;
  background: @bg-color;
  border-radius: 4px;
  margin: 0 5px;
  label {
    font-weight: bold;
    margin-right: 8px;
    min-width: 60px;
    font-size: 12px;
  }
  .resource-content {
    display: flex;
    align-items: center;
  }
}

// Mixin pour les badges de rareté
.rarity-badge(@bg-color, @text-color) {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  margin-left: 5px;
  background: @bg-color;
  color: @text-color;
}

// Mixin pour le fond avec image
.background-image(@url, @repeat: no-repeat, @size: auto, @position: center) {
  background: @url @repeat @position / @size;
}

// Mixin pour les transitions
.transition(@property: all, @duration: 0.2s, @timing: ease-out) {
  transition: @property @duration @timing;
}

// Mixin pour les styles de l'éditeur TinyMCE
.tiny-mce-style() {
  .tox {
    min-height: 25vh;
    .tox-editor-container {
      background: #fff;
    }
    .tox-edit-area {
      padding: 0 8px;
    }
  }
}

// Mixin pour les styles des inputs personnalisés
.custom-input-style() {
  appearance: none;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  width: 100%;
  
  &::-webkit-slider-runnable-track {
    .background-image(url("@{ui-path}/scotch.webp"), no-repeat, auto, center);
    background-size: 100% auto;
    height: 0.4rem;
    border: none;
    box-shadow: 0px 0px 13px rgba(31, 26, 26, 0.979) inset;
  }
  
  &::-webkit-slider-thumb {
    appearance: none;
    margin-top: -0.3rem;
    height: 1rem;
    width: 1rem;
    border: none;
    border-radius: 50%;
    .background-image(url("@{totems-path}/human.webp"), no-repeat, cover);
    filter: contrast(2);
    box-shadow: 0px 0px 10px #000;
    
    &:focus {
      box-shadow: 0px 0px 10px #ff0;
    }
  }
}

// Mixin pour les checkbox et radio boutons personnalisés
.custom-checkbox-radio() {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 3px #85854e;
  cursor: pointer;
  width: 1.5rem;
  height: 1rem;
  border-radius: 0.4rem;
  .transition();
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  box-shadow: 0px 0px 6px #000 inset;
  background-color: rgba(61, 11, 11, 0.658);
  
  &[disabled=true] {
    filter: grayscale(1);
  }
  
  &:after {
    content: " ";
    .background-image(url("@{totems-path}/human.webp"), no-repeat, auto, 50% 150%);
    position: relative;
    top: 10%;
    left: 0%;
    width: 100%;
    height: 80%;
    display: block;
    border-radius: 0%;
    padding: 0;
    .transition();
  }
  
  &:checked {
    background-color: rgba(26, 107, 12, 0.658);
    &:after {
      font-weight: 900;
      background-color: rgba(26, 1, 1, 0);
      left: 50%;
    }
  }
}

// Mixin pour les selects personnalisés
.custom-select-style() {
  border: none;
  .background-image(url("@{ui-path}/scotch.webp"), no-repeat, auto, 100% 100%);
  box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.979) inset;
  
  &[disabled] {
    color: #000;
    text-shadow: 0px 0px 15px #000;
  }
  
  option {
    appearance: none;
    border: none;
    .background-image(url("@{ui-path}/scotch.webp"), no-repeat, auto, 100% 100%);
  }
}