MediaWiki:CustomFiltered.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

.filtered {
  display: flex;
  flex-wrap: nowrap; /* Make sure they stay in one row */
}

.filtered-filters {
  flex: 0 0 25%; /* Don't grow or shrink, fixed at 25% width */
  max-width: 25%;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 1rem; /* Optional: spacing inside the filters panel */
}

@media (min-width:  1071px) {
	.filtered-filters {
      position: sticky !important;
      top: 5rem !important;	
	}
}

.filtered-views {
  flex: 1 1 75%; /* Grow to take remaining space */
  max-width: 75%;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 1rem; /* Optional: spacing inside the views panel */
}

.filtered-table table thead th {
	position: sticky !important;
}

/* Optional: make it responsive */
@media (max-width: 1070px) {
  .filtered {
    flex-direction: column; /* Stack vertically on smaller screens */
  }

  .filtered-filters,
  .filtered-views {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

.filtered-value-and[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 1px solid hsl(240 5.9% 90%);
  background-color: hsl(0 0% 100%);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

/* Inner dot */
.filtered-value-and[type="radio"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: hsl(240 5.9% 10%);
  transform: scale(0);
  transition: transform 150ms ease;
}

/* Checked state */
.filtered-value-and[type="radio"]:checked {
  border-color: hsl(240 5.9% 10%);
}

.filtered-value-and[type="radio"]:checked::before {
  transform: scale(1);
}

/* Focus ring (shadcn style) */
.filtered-value-and[type="radio"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px hsl(0 0% 100%),
    0 0 0 4px hsl(240 5.9% 90%);
}

/* Hover */
.filtered-value-and[type="radio"]:hover {
  border-color: hsl(240 5.9% 70%);
}

/* Disabled */
.filtered-value-and[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}