awo-hamburg-intranet/module/tasks/assets/css/task_cert.css

/* task_cert baseline styles using monolith design tokens with fallbacks */

.tasks-cert main {
    background: var(--bg-white);
}
.admin-task-list main {
    background: var(--bg-white);
}
.my-tasks main {
    background: var(--bg-white);
}

.task-cert input[type="checkbox"] {
    width: auto;
    margin: 0 0 0px 0px;
    height: auto;
}
.task-cert input[type="radio"] {
    width: auto;
    margin: 0 0 0px 0px;
    height: auto;
}

.task-cert {
  --tc-font-family: var(--ff-body, var(--ff-primary, sans-serif));
  --tc-font-size: var(--fs-400, 0.875rem);
  --tc-font-size-h2: var(--fs-700, 1.125rem);
  --tc-font-size-h3: var(--fs-650, 1rem);
  --tc-radius: var(--br, 8px);
  --tc-border-color: var(--border, #e5e5e5);
  --tc-bg: var(--blur_elevated, var(--bg-white, #ffffff));
  --tc-bg-soft: var(--clr-light, #f5f5f5);
  --tc-text: var(--fc-primary, #272727);
  --tc-muted: var(--fc-dark-8, #666666);
  --tc-accent: var(--blue-accent, #1b66b3);
  --tc-error: var(--error, #cc0000);
  --tc-error-border: #f0b4b4;
  --tc-error-bg: #fff1f1;
  --tc-success: #0f7a0f;
  --tc-success-border: #a5dca5;
  --tc-success-bg: #edf9ed;
  --tc-warning: #9a6400;
  --tc-warning-border: #f0cf8c;
  --tc-warning-bg: #fff8e8;

  font-family: var(--tc-font-family);
  font-size: var(--tc-font-size);
  color: var(--tc-text);
  background: var(--tc-bg);
}

.task-cert,
.task-cert * {
  box-sizing: border-box;
}

.task-cert h2,
.task-cert h3,
.task-cert h4 {
  margin: 0 0 10px;
  line-height: 1.3;
  color: var(--tc-text);
}

.task-cert h2 {
  font-size: var(--tc-font-size-h2);
}

.task-cert h3,
.task-cert h4 {
  font-size: var(--tc-font-size-h3);
}

.task-cert a {
  color: var(--tc-accent);
  text-decoration: none;
}

.task-cert a:hover {
  text-decoration: underline;
}

.task-cert .task-cert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.task-cert .task-cert-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.task-cert .task-cert-toolbar-left,
.task-cert .task-cert-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-cert .task-cert-toolbar-right {
  margin-left: auto;
}

.task-cert .task-cert-links {
  margin-top: 10px;
}

.task-cert .task-cert-block {
  border: 1px solid var(--tc-border-color);
  border-radius: var(--tc-radius);
  background: var(--tc-bg-soft);
  padding: 10px;
  margin-bottom: 10px;
}

.task-cert .task-cert-error {
  border: 1px solid var(--tc-error-border);
  border-left: 4px solid var(--tc-error);
  border-radius: var(--tc-radius);
  background: var(--tc-error-bg);
  color: #7a1212;
  padding: 10px;
  margin-bottom: 10px;
}

.task-cert .task-cert-success {
  border: 1px solid var(--tc-success-border);
  border-left: 4px solid var(--tc-success);
  border-radius: var(--tc-radius);
  background: var(--tc-success-bg);
  color: #145f14;
  padding: 10px;
  margin-bottom: 10px;
}

.task-cert .task-cert-warning {
  border: 1px solid var(--tc-warning-border);
  border-left: 4px solid var(--tc-warning);
  border-radius: var(--tc-radius);
  background: var(--tc-warning-bg);
  color: #7b5200;
  padding: 10px;
  margin-bottom: 10px;
}

.task-cert .btn,
.task-cert button {
  display: inline-block;
  border: 1px solid var(--tc-border-color);
  border-radius: calc(var(--tc-radius) - 2px);
  padding: 6px 10px;
  background: var(--tc-bg);
  color: var(--tc-text);
  font-size: inherit;
  cursor: pointer;
}

.task-cert .btn:hover,
.task-cert button:hover {
  background: var(--tc-bg-soft);
  text-decoration: none;
}

.task-cert .btn.task-cert-btn-danger,
.task-cert button.task-cert-btn-danger {
  background: #d93a3a;
  border-color: #d93a3a;
  color: #fff;
}

.task-cert .btn.task-cert-btn-danger:hover,
.task-cert .btn.task-cert-btn-danger:focus-visible,
.task-cert button.task-cert-btn-danger:hover,
.task-cert button.task-cert-btn-danger:focus-visible {
  background: #bb2f2f;
  border-color: #bb2f2f;
  color: #fff;
}

.task-cert .btn.task-cert-btn-success,
.task-cert button.task-cert-btn-success {
  background: #14b814;
  border-color: #14b814;
  color: #fff;
}

.task-cert .btn.task-cert-btn-success:hover,
.task-cert .btn.task-cert-btn-success:focus-visible,
.task-cert button.task-cert-btn-success:hover,
.task-cert button.task-cert-btn-success:focus-visible {
  background: #119e11;
  border-color: #119e11;
  color: #fff;
}

.task-cert .btn:disabled,
.task-cert button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.task-cert form {
  margin: 0;
}

.task-cert label {
  display: inline-block;
  margin: 4px 0;
}

.task-cert input[type="text"],
.task-cert input[type="number"],
.task-cert input[type="date"],
.task-cert select,
.task-cert textarea {
  width: 100%;
  border: 1px solid var(--tc-border-color);
  border-radius: calc(var(--tc-radius) - 2px);
  background: var(--tc-bg);
  color: var(--tc-text);
  padding: 8px;
}

.task-cert textarea {
  min-height: 88px;
}

.task-cert .task-cert-table-wrap {
  overflow-x: auto;
}

.task-cert .task-cert-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}

.task-cert .task-cert-table th,
.task-cert .task-cert-table td {
  border: 1px solid var(--tc-border-color);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.task-cert .task-cert-table th {
  background: var(--tc-bg-soft);
}

.task-cert pre {
  margin: 0;
  border: 1px solid var(--tc-border-color);
  border-radius: var(--tc-radius);
  background: var(--tc-bg);
  color: var(--tc-text);
  padding: 10px;
  overflow: auto;
  max-height: 280px;
}

.task-cert .task-cert-method {
  border: 1px solid var(--tc-border-color);
  border-radius: var(--tc-radius);
  padding: 10px;
  margin: 10px 0;
  background: var(--tc-bg);
}

.task-cert .task-cert-quiz-question {
  border-left: 3px solid var(--tc-accent);
  padding: 8px;
  margin: 8px 0;
  background: var(--tc-bg-soft);
}

.task-cert .task-cert-hint {
  margin: 8px 0;
  color: var(--tc-muted);
  font-size: var(--fs-300, 0.8125rem);
}