Site Builder

Editing: promptinator.css

writable 0666

/* ==========================================================================
   Promptinator Popup Styles — fully scoped under dialog .popup-body
   ========================================================================== */

/* 1) Outer white card */
dialog .popup-body {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  padding: 1.5rem 1.6rem;
  display: inline-block;
  max-width: 100%;
}

/* 2) Stack labels above single controls */
dialog .popup-body > label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

/* 3) Full-width selects, text inputs, textareas */
dialog .popup-body > label + select,
dialog .popup-body > label + input[type="text"],
dialog .popup-body > label + textarea {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccd;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
  background: #fff;
}

/* 4) Checkbox & radio groups in floating-legend fieldsets */
dialog .popup-body fieldset {
  position: relative;
  padding: 1.5rem 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #ccd;
  border-radius: 8px;
  background: #fff;
}

/* 4a) Floating legend atop each fieldset */
dialog .popup-body fieldset legend {
  position: absolute;
  top: 0;
  left: 1rem;
  transform: translateY(-50%);
  padding: 0 0.5rem;
  background: #fff;
  white-space: nowrap;
  font-weight: 500;
  color: #333;
  line-height: 1;
}

/* 4b) Space out the children below the legend */
dialog .popup-body fieldset > *:not(legend) {
  margin-top: 0.5rem;
}

/* 4c) Inline checkbox/radio labels */
dialog .popup-body fieldset label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* 5) Promptinator tokens in RF-Safe purple */
dialog .popup-body .token {
  color: #5c3bff;
  font-weight: 600;
  cursor: pointer;
}
dialog .popup-body .token:hover {
  color: #4a26b2;
}

/* 6) Action buttons (“Done” / “Use site”) */
dialog .popup-body .ai-buttons {
  text-align: center;
  margin-top: 1.5rem;
}
dialog .popup-body .ai-buttons > button {
  background-color: #5c3bff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  min-width: 140px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin: 0 0.5rem;
}
dialog .popup-body .ai-buttons > button:hover {
  background-color: #4a26b2;
}

/* 1) Stack only the direct <label> wrappers (for textarea, dropdown, text input) */
.popup-body > label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
}

/* 2) Make the controls inside those labels fill their container */
.popup-body > label > select,
.popup-body > label > input,
.popup-body > label > textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 3) Style only the direct <button> children (Done, Use site) purple */
.popup-body > button,
.popup-body > .ai-buttons > button {
  background-color: #5c3bff !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 1rem !important;
}

/* 4) Hover state for those buttons */
.popup-body > button:hover,
.popup-body > .ai-buttons > button:hover {
  background-color: #4a26b2 !important;
}

/* Make Promptinator “tokens” (the little clickable bits) show up in blue */
.Promptinator .token {
  color: #007bff;        /* your blue of choice */
  cursor: pointer;
}

/* Optional: darker blue on hover for affordance */
.Promptinator .token:hover {
  color: #0056b3;
  text-decoration: underline;
}

Site Builder

Editing: promptinator.css

Site Builder