Commit 22005340 authored by Jan Köster's avatar Jan Köster
Browse files

test

parent bfdc4c7f

data/themes/default/index.html

+1 −1
Changes for data/themes/default/index.html: 1 added line, 1 removed line.
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 
       <meta name="robots" content="all" >

       <meta charset="utf-8">   

       <meta name="viewport" content="width=device-width, initial-scale=1.0" >

       <style>${RESET_CSS}${STYLE_CSS}</style>

       <style>${RESET_CSS}${STYLE_CSS}${SURVEY_CSS}</style>

       <link rel="icon" type="image/x-icon" href="${PREFIX}/theme/public/favicon.ico">

    </head>

    <body>

data/themes/default/public/survey.css

0 → 100644
+537 −0
Changes for data/themes/default/public/survey.css: 537 added lines, 0 removed lines.
Original line number Diff line number Diff line 
/* Survey styles for the default blogi theme.

   Uses --blogi-* variables exclusively so the survey adapts to both

   dark and light theme modes configured via injectThemeColors().

*/



/* -------------------------------------------------------

   Wrapper

------------------------------------------------------- */

.survey-wrap {

  background: var(--blogi-bg);

  min-height: 60vh;

  padding: 2.5rem 1.25rem 4rem;

  color: var(--blogi-text);

  font-family: inherit;

}



.survey-container {

  max-width: 700px;

  margin: 0 auto;

}



/* -------------------------------------------------------

   Header

------------------------------------------------------- */

.survey-header {

  margin-bottom: 2rem;

}



.survey-brand {

  display: flex;

  align-items: center;

  gap: 0.875rem;

  margin-bottom: 0.4rem;

}



.survey-brand-bar {

  width: 4px;

  height: 2rem;

  background: var(--blogi-accent);

  border-radius: 2px;

  flex-shrink: 0;

}



.survey-title {

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--blogi-text);

  margin: 0;

  text-wrap: balance;

  line-height: 1.25;

}



.survey-subtitle {

  font-size: 0.9rem;

  color: var(--blogi-text-muted);

  margin: 0.4rem 0 0 4.875rem;

  line-height: 1.55;

}



/* -------------------------------------------------------

   Progress Steps

------------------------------------------------------- */

.survey-progress {

  display: flex;

  align-items: center;

  margin-bottom: 2rem;

  padding: 1rem 1.25rem;

  background: var(--blogi-surface);

  border-radius: 8px;

  border: 1px solid var(--blogi-border);

}



.sv-step {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  flex: 1;

  position: relative;

}



.sv-step:not(:last-child)::after {

  content: '';

  position: absolute;

  left: 2rem;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  height: 2px;

  background: var(--blogi-border);

  z-index: 0;

  transition: background 0.3s;

}



.sv-step.done:not(:last-child)::after {

  background: var(--blogi-accent);

}



.sv-step-dot {

  width: 1.75rem;

  height: 1.75rem;

  border-radius: 50%;

  border: 2px solid var(--blogi-border);

  background: var(--blogi-bg);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.68rem;

  font-weight: 700;

  color: var(--blogi-text-muted);

  flex-shrink: 0;

  position: relative;

  z-index: 1;

  transition: all 0.2s;

}



.sv-step.active .sv-step-dot {

  border-color: var(--blogi-accent);

  background: var(--blogi-accent);

  color: var(--blogi-bg);

}



.sv-step.done .sv-step-dot {

  border-color: var(--blogi-accent-dark);

  background: var(--blogi-surface);

  color: var(--blogi-accent-dark);

}



.sv-step-label {

  font-size: 0.68rem;

  font-weight: 700;

  color: var(--blogi-text-muted);

  letter-spacing: 0.06em;

  text-transform: uppercase;

  line-height: 1.2;

}



.sv-step.active .sv-step-label {

  color: var(--blogi-accent-dark);

}



/* -------------------------------------------------------

   Section Card

------------------------------------------------------- */

.survey-section {

  background: var(--blogi-surface);

  border: 1px solid var(--blogi-border);

  border-radius: 8px;

  margin-bottom: 0.875rem;

  overflow: hidden;

}



.survey-section-head {

  padding: 1.25rem 1.5rem 1rem;

  border-bottom: 1px solid var(--blogi-border);

}



.survey-section-num {

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--blogi-accent);

  display: block;

  margin-bottom: 0.2rem;

}



.survey-section-title {

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--blogi-text);

  margin: 0;

  line-height: 1.35;

}



.survey-section-hint {

  font-size: 0.84rem;

  color: var(--blogi-text-muted);

  margin: 0.35rem 0 0;

  line-height: 1.55;

}



.survey-section-body {

  padding: 1.25rem 1.5rem;

}



/* -------------------------------------------------------

   Option Cards

------------------------------------------------------- */

.sv-options {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.sv-options.grid-2 {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0.5rem;

}



.sv-option {

  position: relative;

}



.sv-option input[type="radio"],

.sv-option input[type="checkbox"] {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.sv-option label {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.8rem 1rem;

  border: 1.5px solid var(--blogi-border);

  border-radius: 6px;

  cursor: pointer;

  transition: border-color 0.12s, background 0.12s;

  background: var(--blogi-surface);

  font-size: 0.925rem;

  font-weight: 500;

  color: var(--blogi-text);

  user-select: none;

}



.sv-option label:hover {

  border-color: var(--blogi-accent);

  background: var(--blogi-bg-alt);

}



.sv-option input:checked + label {

  border-color: var(--blogi-accent);

  border-left-width: 4px;

  background: var(--blogi-bg-alt);

  padding-left: calc(1rem - 2.5px);

}



.sv-option-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }

.sv-option-text { flex: 1; line-height: 1.35; }

.sv-option-desc { display: block; font-size: 0.78rem; font-weight: 400; color: var(--blogi-text-muted); margin-top: 0.1rem; }



.sv-option-check {

  width: 1.1rem;

  height: 1.1rem;

  border: 2px solid var(--blogi-border);

  border-radius: 50%;

  flex-shrink: 0;

  transition: all 0.12s;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-left: auto;

}



.sv-option input:checked + label .sv-option-check {

  border-color: var(--blogi-accent);

  background: var(--blogi-accent);

}



.sv-option input:checked + label .sv-option-check::after {

  content: '';

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--blogi-bg);

  display: block;

}



/* -------------------------------------------------------

   Rating Scale

------------------------------------------------------- */

.sv-scale {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 0.4rem;

}



.sv-scale-item { position: relative; }



.sv-scale-item input[type="radio"] {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.sv-scale-item label {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.3rem;

  padding: 0.7rem 0.25rem;

  border: 1.5px solid var(--blogi-border);

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.12s;

  font-size: 0.7rem;

  font-weight: 700;

  color: var(--blogi-text-muted);

  text-align: center;

  text-transform: uppercase;

  background: var(--blogi-surface);

}



.sv-scale-item label:hover {

  border-color: var(--blogi-accent);

  background: var(--blogi-bg-alt);

  color: var(--blogi-text);

}



.sv-scale-item input:checked + label {

  border-color: var(--blogi-accent);

  background: var(--blogi-accent);

  color: var(--blogi-bg);

}



.sv-scale-num { font-size: 1.25rem; font-weight: 700; }

.sv-scale-legend { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.74rem; color: var(--blogi-text-muted); }



/* -------------------------------------------------------

   Text / Select Inputs

------------------------------------------------------- */

.sv-field { margin-bottom: 0.875rem; }

.sv-field:last-child { margin-bottom: 0; }



.sv-label {

  display: block;

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--blogi-text);

  margin-bottom: 0.375rem;

}



.sv-label-optional { font-weight: 400; color: var(--blogi-text-muted); margin-left: 0.4rem; font-size: 0.78rem; }



.sv-input,

.sv-textarea,

.sv-select {

  width: 100%;

  padding: 0.65rem 0.9rem;

  border: 1.5px solid var(--blogi-border);

  border-radius: 6px;

  font-size: 0.925rem;

  color: var(--blogi-text);

  background: var(--blogi-surface);

  font-family: inherit;

  box-sizing: border-box;

  transition: border-color 0.12s, box-shadow 0.12s;

}



.sv-input:focus,

.sv-textarea:focus,

.sv-select:focus {

  outline: none;

  border-color: var(--blogi-accent);

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blogi-accent) 15%, transparent);

}



.sv-textarea { min-height: 90px; resize: vertical; line-height: 1.55; }

.sv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }



/* -------------------------------------------------------

   Alert Boxes

------------------------------------------------------- */

.sv-alert {

  display: flex;

  gap: 0.75rem;

  padding: 0.875rem 1rem;

  border-radius: 6px;

  font-size: 0.875rem;

  line-height: 1.55;

  margin-bottom: 1rem;

}



.sv-alert-urgency { background: var(--blogi-error-bg); border: 1px solid var(--blogi-error); color: var(--blogi-error-text); }

.sv-alert-info    { background: var(--blogi-bg-alt); border: 1px solid var(--blogi-border); color: var(--blogi-text); }

.sv-alert-icon    { font-size: 1.05rem; flex-shrink: 0; line-height: 1.55; }



/* -------------------------------------------------------

   Navigation Buttons

------------------------------------------------------- */

.survey-nav {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 1.5rem;

  gap: 1rem;

}



.sv-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.8rem 1.5rem;

  border: none;

  border-radius: 6px;

  font-size: 0.925rem;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.15s;

  text-decoration: none;

  font-family: inherit;

}



.sv-btn:focus-visible { outline: 2px solid var(--blogi-accent); outline-offset: 2px; }



.sv-btn-primary { background: var(--blogi-accent); color: var(--blogi-bg); }

.sv-btn-primary:hover { background: var(--blogi-accent-dark); }



.sv-btn-secondary { background: transparent; color: var(--blogi-text-muted); border: 1.5px solid var(--blogi-border); }

.sv-btn-secondary:hover { border-color: var(--blogi-accent); color: var(--blogi-text); background: var(--blogi-bg-alt); }



.sv-btn-submit { background: var(--blogi-accent); color: var(--blogi-bg); padding: 0.9rem 2rem; font-size: 1rem; }

.sv-btn-submit:hover { background: var(--blogi-accent-dark); transform: translateY(-1px); }



/* -------------------------------------------------------

   Privacy Note

------------------------------------------------------- */

.survey-privacy { text-align: center; font-size: 0.78rem; color: var(--blogi-text-muted); margin-top: 1.25rem; line-height: 1.6; }

.survey-privacy a { color: var(--blogi-accent); text-decoration: underline; }



/* -------------------------------------------------------

   Completion Screen

------------------------------------------------------- */

.survey-done {

  text-align: center;

  padding: 3rem 2rem;

  background: var(--blogi-surface);

  border: 1px solid var(--blogi-border);

  border-radius: 8px;

}



.survey-done-icon {

  width: 4rem;

  height: 4rem;

  border-radius: 50%;

  background: var(--blogi-bg-alt);

  border: 3px solid var(--blogi-accent);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.75rem;

  margin: 0 auto 1.25rem;

}



.survey-done-title { font-size: 1.4rem; font-weight: 700; color: var(--blogi-text); margin: 0 0 0.5rem; }

.survey-done-text  { font-size: 0.925rem; color: var(--blogi-text-muted); max-width: 400px; margin: 0 auto; line-height: 1.6; }



/* -------------------------------------------------------

   Wizard (plugin-rendered elements)

------------------------------------------------------- */

.survey-page .survey-wrap { max-width: 720px; margin: 0 auto; padding: 20px; }

.survey-page .survey-description { color: var(--blogi-text-muted); margin-bottom: 20px; }



.survey-page .wizard-progress { display: flex; gap: 6px; margin-bottom: 24px; }

.survey-page .step-dot { flex: 1; height: 6px; border-radius: 3px; background: var(--blogi-border); transition: background .3s; }

.survey-page .step-dot.active { background: var(--blogi-accent); }

.survey-page .step-dot.done   { background: var(--blogi-accent-dark); }



.survey-page .wizard-step { display: none; }

.survey-page .wizard-step.active { display: block; }

.survey-page .step-counter { color: var(--blogi-text-muted); font-size: .9em; margin-bottom: 8px; }



.survey-page .question { margin-bottom: 20px; padding: 16px; border: 1px solid var(--blogi-border); border-radius: 8px; }

.survey-page .question-text { font-weight: 600; margin-bottom: 12px; }

.survey-page .required::after { content: ' *'; color: var(--blogi-error); }



.survey-page .option { margin: 6px 0; }

.survey-page .option label { cursor: pointer; }

.survey-page .option input { margin-right: 8px; }



.survey-page .question textarea,

.survey-page .question select { width: 100%; padding: 10px; border: 1px solid var(--blogi-border); border-radius: 6px; font-size: 1em; background: var(--blogi-surface); color: var(--blogi-text); }

.survey-page .question textarea { min-height: 80px; resize: vertical; }



.survey-page .rating-group { display: flex; gap: 8px; flex-wrap: wrap; }

.survey-page .rating-group label { padding: 8px 16px; border: 2px solid var(--blogi-border); border-radius: 8px; cursor: pointer; transition: .2s; color: var(--blogi-text); }

.survey-page .rating-group input { display: none; }

.survey-page .rating-group label:has(input:checked) { background: var(--blogi-accent); color: var(--blogi-bg); border-color: var(--blogi-accent); }



.survey-page .wizard-nav { display: flex; justify-content: space-between; margin-top: 16px; gap: 12px; }

.survey-page .wizard-btn { padding: 10px 24px; border-radius: 999px; font-weight: 700; cursor: pointer; border: none; transition: .2s; }

.survey-page .btn-prev   { background: var(--blogi-border); color: var(--blogi-text); }

.survey-page .btn-next   { background: var(--blogi-accent); color: var(--blogi-bg); }

.survey-page .btn-submit { background: var(--blogi-accent); color: var(--blogi-bg); }

.survey-page .wizard-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }



.survey-page .step-error { color: var(--blogi-error); font-size: .9em; margin-top: 8px; display: none; }

.survey-page .step-error.show { display: block; }



.survey-page .surveyMessage { padding: 16px; border-radius: 8px; margin-top: 16px; display: none; }

.survey-page .surveyMessage.success { background: var(--blogi-success-bg); color: var(--blogi-success-text); display: block; }

.survey-page .surveyMessage.error   { background: var(--blogi-error-bg);   color: var(--blogi-error-text);   display: block; }



.survey-page .file-upload-area { border: 2px dashed var(--blogi-border); border-radius: 10px; padding: 30px; text-align: center; cursor: pointer; transition: .3s; background: var(--blogi-surface); }

.survey-page .file-upload-area:hover,

.survey-page .file-upload-area.dragover { border-color: var(--blogi-accent); background: var(--blogi-bg-alt); }

.survey-page .file-upload-area input[type=file] { display: none; }

.survey-page .upload-icon  { font-size: 2em; margin-bottom: 8px; }

.survey-page .upload-text  { color: var(--blogi-text-muted); }

.survey-page .file-hint    { margin-top: 8px; font-size: .85em; color: var(--blogi-text-muted); }



.survey-page .image-list { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }

.survey-page .image-item { border: 1px solid var(--blogi-border); border-radius: 8px; padding: 8px; background: var(--blogi-surface); }

.survey-page .image-item img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; }

.survey-page .image-item .image-name { font-size: .8em; margin-top: 6px; color: var(--blogi-text-muted); word-break: break-all; }

.survey-page .image-item .file-remove { margin-top: 6px; width: 100%; background: var(--blogi-error); color: var(--blogi-bg); border: none; padding: 6px 10px; border-radius: 999px; cursor: pointer; font-size: .85em; }



.survey-page .survey-loading { display: none; text-align: center; padding: 32px; }

.survey-page .survey-loading.active { display: block; }

.survey-page .survey-spinner { display: inline-block; width: 36px; height: 36px; border: 4px solid var(--blogi-border); border-top-color: var(--blogi-accent); border-radius: 50%; animation: survey-spin .8s linear infinite; }

@keyframes survey-spin { to { transform: rotate(360deg); } }

.survey-page .survey-loading-text { margin-top: 12px; color: var(--blogi-text-muted); font-size: .95em; }



.survey-page .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }

.survey-page .icon-option { display: flex; flex-direction: column; align-items: center; padding: 12px; border: 2px solid var(--blogi-border); border-radius: 10px; cursor: pointer; transition: .2s; text-align: center; background: var(--blogi-surface); color: var(--blogi-text); }

.survey-page .icon-option:hover { border-color: var(--blogi-accent); }

.survey-page .icon-option input { display: none; }

.survey-page .icon-option img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 6px; }

.survey-page .icon-option span { font-size: .85em; color: var(--blogi-text); }

.survey-page .icon-option.selected { border-color: var(--blogi-accent); background: var(--blogi-success-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blogi-accent) 20%, transparent); }



/* -------------------------------------------------------

   Responsive

------------------------------------------------------- */

@media (max-width: 600px) {

  .survey-wrap    { padding: 1.5rem 1rem 3rem; }

  .survey-title   { font-size: 1.25rem; }

  .sv-options.grid-2 { grid-template-columns: 1fr; }

  .sv-field-row      { grid-template-columns: 1fr; }

  .sv-step-label     { display: none; }

  .survey-nav        { flex-direction: column-reverse; align-items: stretch; }

  .sv-btn            { justify-content: center; text-align: center; }

  .survey-subtitle   { margin-left: 0; }

  .survey-progress   { padding: 0.75rem 1rem; }

}