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;
}
/* promptinator.css */
.e-btn {
  background:#0d99ff;
  border:none;
  color:#fff;
  padding:.35em 1.1em;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}

/* === Promptinator “E”‑token buttons ===================== */
.e-btn {
  display:inline-block;
  background:#1e88ff;             /* primary brand blue */
  color:#fff !important;          /* override theme link color */
  font-weight:600;
  padding:.4em 1.2em;
  border:none;
  border-radius:7px;
  cursor:pointer;
  text-decoration:none;
  line-height:1.2;
  box-shadow:0 2px 4px rgba(0,0,0,.12);
  transition:background .15s;
}
.e-btn:hover,
.e-btn:focus {
  background:#156fd9;
}
.e-btn:active {
  background:#0f5fc2;
}
/* Promptinator – force white text on all generated buttons & links */
.Promptinator .ai-btn,
.Promptinator .ai-btn:visited,
.Promptinator .token.e-btn {
    color: #fff !important;          /* white words */
    text-decoration: none;           /* keep them looking like buttons */
}

/* optional: make sure focus / hover also stay white */
.Promptinator .ai-btn:hover,
.Promptinator .ai-btn:focus,
.Promptinator .token.e-btn:hover,
.Promptinator .token.e-btn:focus {
    color: #fff !important;
}

/* ==== Promptinator AI button bar ==== */
.ai-buttons               { flex-wrap: wrap !important; }   /* enable wrapping */
.ai-buttons > a           { flex: 1 1 130px;                /* let them share rows */
                             text-align: center; }
/* 2‑per‑row on very small screens */
@media (max-width: 440px){
  .ai-buttons > a         { flex: 1 1 calc(50% - .6em); }
}
/* 1‑per‑row on ultra‑narrow screens */
@media (max-width: 320px){
  .ai-buttons > a         { flex: 1 1 100%; }
}

/* hide AI buttons when blank */
.Promptinator.promptinator--empty .ai-buttons { display:none !important; }

/* yellow helper banner */
.promptinator-helper{
  margin-top:1em;
  font-size:.9em;
  color:#555;
  background:#fff9c4;
  text-align:center;
  padding:.5em .8em;
  border-radius:5px;
}

Site Builder

Editing: promptinator.css

Site Builder