Here is the complete HTML translated into French, with the language set to `fr`, the French link marked as active, and the title updated with `[FR]`. ```html #2653: CalendarInput.module.scss [FR]
EN · DE · RU · FR · ES
← Index · ← Index des fichiers · ← Précédent · Suivant → · 📄 source

#2653: CalendarInput.module.scss

projectforge-webapp/src/components/design/input/calendar/CalendarInput.module.scss Type : Feuille de style SCSS · Source : projectforge-webapp/src/components/design/input/calendar/CalendarInput.module.scss 173 lignes · 140 lignes de code · 0 commentaires · 33 lignes vides
Feuille de style SCSS définissant les styles visuels pour le frontend web de ProjectForge.

Contenu

.label {
  font-size: 1.2em;
  display: flex;
}

.dayPickerContainer {
  padding: 0.5rem;
}

.quickSelectors {
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  border-right: 1px solid #ddd;

  .quickSelector {
    padding: 5px;
    cursor: pointer;

    &:hover {
      background-color: #d1deff;
    }

    &.selected {
      background-color: #d1deff;
      color: #003a71;

      &:hover {
        background-color: #b8c4e1;
      }
    }
  }
}

.timeInput {
  flex: 1;

  .container {
    display: flex;

    .hourInput, .minuteInput {
      font-family: monospace;
      border: none;
      padding: 0 .5em;
      background: none;
      -moz-appearance:textfield;

      &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
        appearance: none;
        margin: 0;
      }

      &:focus {
        outline: none;
      }
    }

    .hourInput {
      text-align: right;
      width: 3.125em;
    }

    .minuteInput {
      width: 2.5em;
    }
  }


  .hours, .minutes {
    font-size: .8em;
    display: inline-block;
    list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    vertical-align: top;

    .hour, .minute {
      width: 2em;
      height: 2em;
      text-align: center;
      padding-top: .25em;
      border-radius: 50%;

      &:hover {
        background-color: #3a76d8;
        color: #fff;
      }
    }
  }

  .hours {
    width: 2em;
  }

  .minutes {
    padding-left: 5px;
    border-left: 1px solid #eee;

    &.precision-1, &.precision-2, &.precision-3, &.precision-4 {
      width: 11em;

      .minute {
        display: inline-block;

        &:nth-child(5n + 1) {
          font-weight: 600;
        }
      }
    }
  }
}

.editMode {
  display: inline-block;
}

.dateInput {
  display: inline-block;
  position: relative;
  font-size: 14px;
  flex: 1;

  input {
    position: relative;
    border: none;
    padding: 0;
    background: none;
    outline: none;
    width: 100%;
  }

  .placeholder {
    position: absolute;
    top: 0;
    color: #999;
    padding-left: 1px;
  }

  input, .placeholder {
    font-family: monospace;
  }
}

.timeRange {
  display: flex;
  justify-content: flex-start;

  .from, .to {
    flex: 0;
    display: flex;
  }

  .from {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .to {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .deleteButton {
    margin: 0 .5em;

Historique Git

f586d54a5 correction du premier jour de la semaine dans le sélecteur de jour
20d38dc6f correction de l'apparence sous Firefox
82929210c correction de la largeur du champ des minutes
63678e216 wip : implémentation de TimeRange
1a139a08c wip : refactorisation de formattedtimerange
1af0f6e85 wip : correction de la largeur du champ
924a0bbf7 correction de la position du placeholder
3b7f8ea93 utilisation de InputContainer dans TimeInput
3e67ad00d ajout d'un nouveau champ de date
e838b93dd correction de la largeur de la date
e0bf4e914 activation du nouveau sélecteur d'intervalle de temps
ee7116516 wip : champ de temps
5daa3f64f implémentation des sélecteurs rapides
8a71ab0fc wip : filtre magique d'intervalle de temps
cfa67b788 wip : champ d'intervalle de date et heure