Biomimicry-AI/Nexus

1@import "../styles/animation.scss";2 3.card {4  background-color: var(--white);5  border-radius: 10px;6  box-shadow: var(--card-shadow);7  padding: 10px;8}9 10.popover {11  position: relative;12  z-index: 2;13}14 15.popover-content {16  position: absolute;17  animation: slide-in 0.3s ease;18  right: 0;19  top: calc(100% + 10px);20}21 22.popover-mask {23  position: fixed;24  top: 0;25  left: 0;26  width: 100vw;27  height: 100vh;28}29 30.list-item {31  display: flex;32  justify-content: space-between;33  align-items: center;34  min-height: 40px;35  border-bottom: var(--border-in-light);36  padding: 10px 20px;37  animation: slide-in ease 0.6s;38 39  .list-header {40    display: flex;41    align-items: center;42 43    .list-icon {44      margin-right: 10px;45    }46 47    .list-item-title {48      font-size: 14px;49      font-weight: bolder;50    }51 52    .list-item-sub-title {53      font-size: 12px;54      font-weight: normal;55    }56  }57}58 59.list {60  border: var(--border-in-light);61  border-radius: 10px;62  box-shadow: var(--card-shadow);63  margin-bottom: 20px;64  animation: slide-in ease 0.3s;65  background: var(--white);66}67 68.list .list-item:last-child {69  border: 0;70}71 72.modal-container {73  box-shadow: var(--card-shadow);74  background-color: var(--white);75  border-radius: 12px;76  width: 80vw;77  max-width: 900px;78  min-width: 300px;79  animation: slide-in ease 0.3s;80 81  --modal-padding: 20px;82 83  &-max {84    width: 95vw;85    max-width: unset;86    height: 95vh;87    display: flex;88    flex-direction: column;89 90    .modal-content {91      max-height: unset !important;92      flex-grow: 1;93    }94  }95 96  .modal-header {97    padding: var(--modal-padding);98    display: flex;99    align-items: center;100    justify-content: space-between;101    border-bottom: var(--border-in-light);102 103    .modal-title {104      font-weight: bolder;105      font-size: 16px;106    }107 108    .modal-header-actions {109      display: flex;110 111      .modal-header-action {112        cursor: pointer;113 114        &:not(:last-child) {115          margin-right: 20px;116        }117 118        &:hover {119          filter: brightness(1.2);120        }121      }122    }123  }124 125  .modal-content {126    max-height: 40vh;127    padding: var(--modal-padding);128    overflow: auto;129  }130 131  .modal-footer {132    padding: var(--modal-padding);133    display: flex;134    justify-content: flex-end;135    border-top: var(--border-in-light);136    box-shadow: var(--shadow);137 138    .modal-actions {139      display: flex;140      align-items: center;141 142      .modal-action {143        &:not(:last-child) {144          margin-right: 20px;145        }146      }147    }148  }149}150 151@media screen and (max-width: 600px) {152  .modal-container {153    width: 100vw;154    border-bottom-left-radius: 0;155    border-bottom-right-radius: 0;156 157    .modal-content {158      max-height: 50vh;159    }160  }161}162 163.show {164  opacity: 1;165  transition: all ease 0.3s;166  transform: translateY(0);167  position: fixed;168  left: 0;169  bottom: 0;170  animation: slide-in ease 0.6s;171  z-index: 99999;172}173 174.hide {175  opacity: 0;176  transition: all ease 0.3s;177  transform: translateY(20px);178}179 180.toast-container {181  position: fixed;182  bottom: 5vh;183  left: 0;184  width: 100vw;185  display: flex;186  justify-content: center;187  pointer-events: none;188 189  .toast-content {190    max-width: 80vw;191    word-break: break-all;192    font-size: 14px;193    background-color: var(--white);194    box-shadow: var(--card-shadow);195    border: var(--border-in-light);196    color: var(--black);197    padding: 10px 20px;198    border-radius: 50px;199    margin-bottom: 20px;200    display: flex;201    align-items: center;202    pointer-events: all;203 204    .toast-action {205      padding-left: 20px;206      color: var(--primary);207      opacity: 0.8;208      border: 0;209      background: none;210      cursor: pointer;211      font-family: inherit;212 213      &:hover {214        opacity: 1;215      }216    }217  }218}219 220.input {221  border: var(--border-in-light);222  border-radius: 10px;223  padding: 10px;224  font-family: inherit;225  background-color: var(--white);226  color: var(--black);227  resize: none;228  min-width: 50px;229}230 231.select-with-icon {232  position: relative;233  max-width: fit-content;234 235  .select-with-icon-select {236    height: 100%;237    border: var(--border-in-light);238    padding: 10px 25px 10px 10px;239    border-radius: 10px;240    appearance: none;241    cursor: pointer;242    background-color: var(--white);243    color: var(--black);244    text-align: center;245  }246 247  .select-with-icon-icon {248    position: absolute;249    top: 50%;250    right: 10px;251    transform: translateY(-50%);252    pointer-events: none;253  }254}255 256.modal-input {257  height: 100%;258  width: 100%;259  border-radius: 10px;260  border: var(--border-in-light);261  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);262  background-color: var(--white);263  color: var(--black);264  font-family: inherit;265  padding: 10px;266  resize: none;267  outline: none;268  box-sizing: border-box;269 270  &:focus {271    border: 1px solid var(--primary);272  }273}274 275.selector {276  position: fixed;277  top: 0;278  left: 0;279  height: 100vh;280  width: 100vw;281  background-color: rgba(0, 0, 0, 0.5);282  display: flex;283  align-items: center;284  justify-content: center;285  z-index: 999;286 287  &-content {288    .list {289      max-height: 90vh;290      overflow-x: hidden;291      overflow-y: auto;292 293      .list-item {294        cursor: pointer;295        background-color: var(--white);296 297        &:hover {298          filter: brightness(0.95);299        }300 301        &:active {302          filter: brightness(0.9);303        }304      }305    }306  }307}308