Site Builder

Editing: Promptinator.css

writable 0666

/* Promptinator.css — Modern Mobile-First Style */

dialog#promptinator-dlg,
#promptinator-dlg {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  position: fixed !important;
  margin: 0 !important;
  width: 96vw;
  max-width: 420px;
  min-width: 275px;
  background: #fff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 4px 36px rgba(80,40,200,0.22), 0 1.5px 9px rgba(60,30,140,0.11);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.10rem;
  z-index: 99999;
  animation: promptFadeIn 0.22s cubic-bezier(.3,1.4,.6,.9);
}

@keyframes promptFadeIn {
  from { opacity: 0; transform: scale(0.95) translate(-50%,-45%); }
  to   { opacity: 1; transform: scale(1)    translate(-50%,-50%);}
}

#promptinator-dlg .popup-body {
  padding: 1.45rem 1.2rem 1.25rem 1.2rem;
}

#promptinator-dlg fieldset {
  border: 1.5px solid #ebeafd;
  border-radius: 10px;
  margin-bottom: 1.15rem;
  padding: 1.05rem 1.1rem 0.6rem 1.1rem;
  background: linear-gradient(108deg,#f7f6fe 80%,#f2eaff 100%);
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  box-shadow: 0 0.5px 7px #efeaff;
}

#promptinator-dlg legend {
  font-size: 1.15em;
  font-weight: 600;
  color: #5938ff;
  letter-spacing: .01em;
  padding: 0 .5em;
  margin-bottom: 0.25em;
}

#promptinator-dlg label {
  display: block;
  font-weight: 540;
  margin-bottom: .6em;
  margin-top: 0.1em;
  font-size: 1.03em;
  color: #222041;
}

#promptinator-dlg input[type="text"],
#promptinator-dlg input[type="number"],
#promptinator-dlg textarea,
#promptinator-dlg select {
  width: 100%;
  border: 1.5px solid #dedcf7;
  border-radius: 8px;
  padding: 0.83em 0.7em;
  font-size: 1.07em;
  background: #f7f7fb;
  margin-top: 0.22em;
  margin-bottom: 1.07em;
  outline: none;
  transition: border 0.16s, box-shadow 0.16s;
}

#promptinator-dlg input[type="text"]:focus,
#promptinator-dlg input[type="number"]:focus,
#promptinator-dlg textarea:focus,
#promptinator-dlg select:focus {
  border: 1.8px solid #885fff;
  background: #fff;
  box-shadow: 0 0 0 2px #e9e1ff;
}

#promptinator-dlg input[type="checkbox"],
#promptinator-dlg input[type="radio"] {
  width: 1.35em;
  height: 1.35em;
  accent-color: #7846ff;
  border-radius: 4px;
  border: 1.7px solid #b9a7e6;
  background: #fff;
  margin-bottom: 0.15em;
  margin-right: 0.7em;
  box-shadow: 0 0.5px 2.5px #eee;
  vertical-align: middle;
}

#promptinator-dlg fieldset label {
  display: flex;
  align-items: center;
  font-size: 1.08em;
  gap: 0.8em;
  margin-bottom: 0.25em;
  margin-top: 0;
}

#promptinator-dlg textarea {
  min-height: 72px;
  max-height: 300px;
  resize: vertical;
}

/* Always put label ABOVE field, even in checkboxes/radios */
#promptinator-dlg label > span,
#promptinator-dlg fieldset legend {
  margin-bottom: 0.13em;
  display: block;
}

#promptinator-dlg button {
  background: linear-gradient(98deg,#7647fa 80%,#5c3bff 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 1.07rem;
  padding: 0.73em 2.15em;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 1.0em;
  margin-bottom: 0.5em;
  box-shadow: 0 2px 18px 0 rgba(110, 63, 255, 0.10);
  transition: background 0.18s, box-shadow 0.17s, filter 0.14s;
}

#promptinator-dlg button:hover,
#promptinator-dlg button:focus {
  background: #4121d8;
  filter: brightness(1.08);
}

#promptinator-dlg select,
#promptinator-dlg option {
  font-size: 1.08em;
}

#promptinator-dlg .popup-body {
  max-width: 98vw;
}

@media (max-width: 600px) {
  #promptinator-dlg,
  dialog#promptinator-dlg {
    width: 99vw !important;
    max-width: 99vw !important;
    min-width: 0 !important;
    left: 50% !important;
    top: 53% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 !important;
  }
  #promptinator-dlg .popup-body {
    padding: 1.05rem 0.3rem 0.95rem 0.3rem;
  }
  #promptinator-dlg fieldset {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

Site Builder

Editing: Promptinator.css

Site Builder