discourse/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

.discourse-local-date {
  &.cooked-date {
    color: $primary;
    cursor: pointer;
    border-bottom: 1px dashed $primary-medium;

    .d-icon {
      color: $primary;
    }

    &.past {
      border-bottom-color: $primary-low-mid;
    }
  }
}

#d-popover {
  .locale-dates-previews {
    max-width: 360px;
    .preview {
      display: flex;
      flex-direction: column;
      padding: 5px;

      .timezone {
        font-weight: 700;
      }

      &.current {
        background: $tertiary-low;
      }
    }
  }
}

.discourse-local-dates-create-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  &:before,
  &:after {
    content: none;
  }

  .cancel-action {
    margin: 0 5px 5px 0;
  }

  .btn + .cancel-action {
    margin-left: 1em;
  }

  .advanced-mode-btn {
    margin-left: auto;
  }
}

.discourse-local-dates-create-modal {
  min-height: 250px;
  display: flex;
  flex-direction: row;
  padding: 0.5em;

  .form {
    flex: 1 0 0px;

    label {
      font-weight: 700;
    }

    .date-time-configuration {
      display: flex;

      .range,
      .timezone {
        display: flex;
        justify-content: flex-start;
        flex: 1;
        align-items: center;

        .from {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

        .to {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

        .to-indicator {
          display: flex;
          flex-direction: row;
          padding-top: 0.5em;
          margin: 0 0.5em;
          font-size: $font-up-2;
        }
      }

      .date {
        margin-right: 0.5em;
        .date-input {
          width: 100px;
          text-align: center;
          .date-picker {
            padding: 0;
            margin: 0;
            width: 100%;
          }
        }
      }

      .timezone {
        margin-left: 1em;
        .timezone-input {
          width: 160px;
        }
      }

      .time {
        .time-input {
          width: auto;
          margin: 0;
          padding: 0;
          text-align: center;
        }
      }
    }

    .preview {
      text-align: center;
      margin-top: 0;
      margin-bottom: 0.5em;
      display: flex;
      align-items: center;
      padding: 0.5em;
      flex-wrap: wrap;

      b {
        margin-right: 0.5em;
      }

      b + p {
        margin: 0;
        display: inline-block;
      }
    }

    .recurrence {
      .recurrence-input {
        width: 300px;
      }
    }
  }

  .validation-error {
    margin-bottom: 0.5em;
  }

  .format {
    .format-input {
      width: 280px;
    }
  }

  .formats {
    list-style: none;
    padding: 0;
    margin: 0;
    .format {
      .previewed-format {
        color: $primary-medium;
      }
    }
  }

  .control-group.recurrence,
  .control-group.format,
  .control-group.timezones {
    margin-top: 1em;
  }

  .timezones-input {
    width: 99%;
  }
}

@media (max-width: 700px) {
  .discourse-local-dates-create-modal {
    .from,
    .to {
      width: 100%;
    }

    .form {
      .date-time-configuration {
        flex-direction: column;
        .range,
        .timezone {
          display: flex;
          flex: 1;
          flex-direction: column;

          .controls,
          .control-group {
            width: 100%;
          }

          .to-indicator {
            margin: 0 0.5em;
            padding: 0;
          }
        }

        .date {
          .date-input {
            width: 100%;
          }
        }
        .time {
          .time-input {
            width: 100%;
          }
        }

        .timezone {
          margin: 0.5em 0 0 0;
          padding: 0.5em 0 0 0;
          border-top: 1px solid $primary-low;

          .timezone-input {
            width: 100%;
          }
        }
      }
    }
  }
}