bulma-turbo-themes 0.7.4

data/assets/css/themes/global.css

@@ -0,0 +1,460 @@
+/* SPDX-License-Identifier: MIT */
+html {
+  font-family: var(
+    --theme-font-sans,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif
+  );
+}
+body,
+.content {
+  font-family: var(
+    --theme-font-sans,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif
+  );
+}
+.title,
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+  font-family: var(
+    --theme-font-serif,
+    var(--theme-font-sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif)
+  );
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: var(
+    --theme-font-mono,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace
+  );
+}
+html,
+body {
+  color: var(--theme-text, inherit);
+}
+.content p {
+  color: var(--theme-text, inherit);
+}
+.title.is-1,
+h1 {
+  color: var(--theme-h1, var(--theme-text, inherit));
+}
+.title.is-2,
+h2 {
+  color: var(--theme-h2, var(--theme-text, inherit));
+}
+.title.is-3,
+h3 {
+  color: var(--theme-h3, var(--theme-text, inherit));
+}
+.title.is-4,
+h4 {
+  color: var(--theme-h4, var(--theme-text, inherit));
+}
+.title.is-5,
+h5 {
+  color: var(--theme-h5, var(--theme-text, inherit));
+}
+.title.is-6,
+h6 {
+  color: var(--theme-h6, var(--theme-text, inherit));
+}
+.content h1 {
+  color: var(--theme-h1, var(--theme-text, inherit));
+}
+.content h2 {
+  color: var(--theme-h2, var(--theme-text, inherit));
+}
+.content h3 {
+  color: var(--theme-h3, var(--theme-text, inherit));
+}
+.content h4 {
+  color: var(--theme-h4, var(--theme-text, inherit));
+}
+.content h5 {
+  color: var(--theme-h5, var(--theme-text, inherit));
+}
+.content h6 {
+  color: var(--theme-h6, var(--theme-text, inherit));
+}
+.label,
+label {
+  color: var(--theme-label-color, var(--theme-text, inherit));
+}
+.content a {
+  color: var(--theme-link, var(--bulma-link));
+}
+.content a:hover {
+  color: var(--theme-link-hover, var(--theme-link));
+}
+.content blockquote {
+  border-left: 4px solid var(--theme-blockquote-border, currentColor);
+  color: var(--theme-blockquote-fg, inherit);
+  background: var(--theme-blockquote-bg, transparent);
+  font-style: italic;
+}
+.content hr,
+hr {
+  height: 0;
+  border: 0;
+  border-top: 2px solid
+    var(
+      --theme-hr-color,
+      var(--theme-h1, var(--theme-table-border, var(--bulma-border, currentColor)))
+    );
+  background: none;
+}
+input[type='checkbox'],
+input[type='radio'],
+progress,
+input[type='range'] {
+  accent-color: var(--theme-link, var(--bulma-link));
+}
+.input:invalid,
+.textarea:invalid,
+select:invalid,
+input:invalid {
+  border-color: var(--bulma-danger);
+  box-shadow: none;
+}
+.input:valid,
+.textarea:valid,
+select:valid,
+input:valid {
+  border-color: var(--bulma-success);
+  box-shadow: none;
+}
+.input:focus,
+.textarea:focus,
+select:focus,
+input:focus {
+  border-color: var(--bulma-link);
+  box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--bulma-link), transparent 80%);
+  outline: none;
+}
+.input:-moz-ui-invalid,
+input:-moz-ui-invalid,
+select:-moz-ui-invalid {
+  border-color: var(--bulma-danger);
+  box-shadow: none;
+}
+::placeholder {
+  color: var(--theme-text-muted, currentColor);
+  opacity: 1;
+}
+input:-webkit-autofill {
+  -webkit-text-fill-color: var(--theme-text, inherit);
+  box-shadow: 0 0 0 1000px var(--theme-surface-1, transparent) inset !important;
+  filter: none;
+}
+input[type='file']::file-selector-button {
+  background: color-mix(in srgb, var(--theme-link, var(--bulma-link)) 10%, transparent);
+  border: 1px solid var(--theme-link, var(--bulma-link));
+  color: var(--theme-text, inherit);
+  padding: 0.35rem 0.6rem;
+  border-radius: 0.4rem;
+}
+input[type='file']::file-selector-button:hover {
+  background: color-mix(in srgb, var(--theme-link, var(--bulma-link)) 18%, transparent);
+}
+#theme-flavor-select {
+  padding-left: 2rem;
+}
+#theme-flavor-icon {
+  display: none;
+}
+#theme-flavor-select option[data-icon] {
+  background-repeat: no-repeat;
+  background-size: 1rem 1rem;
+  background-position: 0.5rem center;
+  padding-left: 1.75rem;
+}
+#theme-flavor-select:hover {
+  border-color: var(--bulma-link);
+  box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--bulma-link), transparent 80%);
+}
+.dropdown.is-theme .theme-flavor-trigger {
+  display: grid;
+  place-items: center;
+  gap: 0;
+  padding: 0;
+  background: transparent;
+  transition:
+    background-color 0.14s ease-out,
+    box-shadow 0.14s ease-out;
+  width: 40px;
+  height: 40px;
+  line-height: 0;
+  box-sizing: border-box;
+}
+.dropdown.is-theme .theme-flavor-trigger .icon {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  margin: 0 !important;
+  line-height: 0;
+}
+.dropdown.is-theme .theme-flavor-trigger .icon:first-child {
+  margin: 0 !important;
+}
+.dropdown.is-theme .theme-flavor-trigger #theme-flavor-trigger-label {
+  display: none;
+}
+.dropdown.is-theme .theme-flavor-trigger .icon img,
+.dropdown.is-theme .theme-flavor-trigger .icon span {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: block;
+  margin: 0;
+}
+.dropdown.is-theme .theme-flavor-trigger .icon img {
+  object-fit: cover;
+  box-shadow: none;
+  transform: translateZ(0);
+}
+.dropdown.is-theme .theme-flavor-trigger .icon span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+}
+#theme-flavor-dd .dropdown-content {
+  max-height: 18rem;
+  overflow: auto;
+  padding: 0.25rem;
+  width: auto;
+}
+.dropdown.is-theme .dropdown-menu {
+  padding: 0.25rem;
+  min-width: auto;
+  opacity: 0;
+  transform: translateY(-6px);
+  transition:
+    opacity 0.14s ease-out,
+    transform 0.14s ease-out;
+}
+.dropdown.is-theme.is-active .dropdown-menu {
+  opacity: 1;
+  transform: translateY(0);
+}
+.dropdown.is-theme .dropdown-content {
+  background-color: var(--theme-surface-0, inherit);
+  border-radius: 1rem;
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-text, #000) 10%, transparent);
+}
+#theme-flavor-dd .dropdown-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  padding: 0.25rem;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  background: transparent;
+  transition:
+    background-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+#theme-flavor-dd .dropdown-item:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--theme-surface-0, transparent) 92%,
+    var(--theme-link, var(--bulma-link)) 8%
+  );
+  border-color: var(--bulma-link);
+  box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--bulma-link), transparent 80%);
+}
+#theme-flavor-dd .dropdown-item img,
+#theme-flavor-dd .dropdown-item span {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: block;
+}
+#theme-flavor-dd .dropdown-item img {
+  display: block;
+}
+#theme-flavor-dd .dropdown-item span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+}
+#theme-flavor-dd .dropdown-item.is-active img {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-link, var(--bulma-link)) 60%, transparent);
+}
+#theme-flavor-dd .dropdown-item.is-active {
+  background-color: color-mix(
+    in srgb,
+    var(--theme-link, var(--bulma-link)) 10%,
+    var(--theme-surface-0, transparent)
+  );
+}
+.navbar .navbar-item:hover,
+.navbar .navbar-link:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--theme-link, var(--bulma-link));
+  text-underline-offset: 4px;
+  color: var(--theme-link, var(--bulma-link));
+  background-color: var(--theme-surface-1, transparent);
+}
+.navbar .navbar-brand > .navbar-item:hover {
+  text-decoration: none;
+}
+.navbar .navbar-item.is-active,
+.navbar .navbar-link.is-active {
+  position: relative;
+  color: var(--theme-link, var(--bulma-link));
+  background: color-mix(in srgb, var(--theme-link, var(--bulma-link)) 8%, transparent);
+  border-bottom: 3px solid var(--theme-link, var(--bulma-link));
+  border-radius: 0.5rem 0.5rem 0 0;
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-link, var(--bulma-link)) 22%, transparent);
+}
+.content code {
+  color: var(--theme-code-fg, inherit);
+  background: var(--theme-code-bg, transparent);
+  padding: 0.2em 0.35em;
+  border-radius: 0.25rem;
+}
+.content pre,
+pre,
+.highlight pre,
+pre.highlight {
+  color: var(--theme-pre-fg, inherit);
+  background: var(--theme-pre-bg, transparent);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow: auto;
+  border: 2px solid var(--theme-pre-border, transparent);
+}
+.content pre code,
+pre code,
+.highlight pre code,
+pre.highlight code {
+  color: var(--theme-pre-fg, inherit);
+  background: transparent;
+}
+::selection {
+  color: var(--theme-selection-fg, inherit);
+  background: var(--theme-selection-bg, transparent);
+}
+.navbar,
+.hero,
+.box,
+.card,
+.dropdown-content,
+.modal-card,
+.menu,
+.message {
+  background-color: var(--theme-surface-0, inherit);
+  color: var(--theme-text, inherit);
+}
+.navbar {
+  border-bottom: 1px solid var(--theme-table-border, var(--bulma-border, currentColor));
+}
+.navbar a.navbar-item,
+.navbar .navbar-link {
+  color: var(--theme-text, inherit);
+}
+.navbar .navbar-brand > .navbar-item.is-active {
+  box-shadow: none;
+  background: none;
+  color: inherit;
+}
+.card .card-content,
+.modal-card-body,
+.panel,
+.table-container {
+  background-color: var(--theme-surface-1, inherit);
+}
+.dropdown-content .dropdown-item.is-active,
+.table.is-striped tbody tr:nth-child(even) {
+  background-color: var(--theme-table-stripe, var(--theme-surface-2, inherit));
+}
+.box,
+.card,
+.dropdown-content,
+.menu,
+.message,
+.panel,
+.table,
+.table td,
+.table th,
+.modal-card {
+  border-color: var(--theme-table-border, var(--bulma-border, currentColor));
+}
+.table thead th {
+  background-color: var(--theme-table-thead-bg, var(--theme-surface-2, inherit));
+}
+.input:not(.is-success):not(.is-danger),
+.textarea:not(.is-success):not(.is-danger),
+.select:not(.is-success):not(.is-danger) select,
+.button.is-light {
+  background-color: var(--theme-surface-1, inherit);
+  color: var(--theme-text, inherit);
+  border-color: var(--theme-table-border, var(--bulma-border, currentColor));
+}
+.input:not(.is-success):not(.is-danger):focus,
+.textarea:not(.is-success):not(.is-danger):focus,
+.select:not(.is-success):not(.is-danger) select:focus {
+  border-color: var(--bulma-link);
+  box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--bulma-link), transparent 80%);
+}
+
+/* Accessibility contrast fixes (Axe) */
+[data-flavor='catppuccin-latte'] .navbar-item,
+[data-flavor='catppuccin-latte'] .has-text-centered > p,
+[data-flavor='catppuccin-latte'] a.navbar-item,
+[data-flavor='catppuccin-latte'] .title,
+[data-flavor='catppuccin-latte'] h1,
+[data-flavor='catppuccin-latte'] h2,
+[data-flavor='catppuccin-latte'] h3,
+[data-flavor='catppuccin-latte'] h4 {
+  color: #1e293b; /* strong slate for >=4.5:1 on light bg */
+}
+
+[data-flavor='catppuccin-latte'] .button.is-text,
+[data-flavor='catppuccin-latte'] .button.is-ghost,
+[data-flavor='catppuccin-latte'] .navbar-item.is-active {
+  color: #0b66d6; /* deeper blue for >=4.5:1 on light bg */
+}
+
+[data-flavor='github-dark'] strong,
+[data-flavor='github-dark'] th,
+[data-flavor='github-dark'] .has-text-centered > p {
+  color: #c9d1d9; /* github-dark foreground */
+}
+
+[data-flavor='github-dark'] .button.is-text,
+[data-flavor='github-dark'] .button.is-ghost {
+  color: #58a6ff; /* accessible link blue on dark bg */
+}