MediaWiki:CustomFiltered.css: Difference between revisions

Latest revision as of 13:21, 21 May 2026

.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 */
  border: 1px solid #c3c2c2 !important;
  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;
	}
}

.filtered-views {
  flex: 1 1 75%; /* Grow to take remaining space */
  max-width: 75%;
  box-sizing: border-box;
  border: 1px solid #c3c2c2 !important;
  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-filters .filtered-value .filtered-value-option {
	width: unset !important;
}

@@ Line 6: / Line 6: @@
 .filtered-filters {
    flex: 0 0 25%; /* Don't grow or shrink, fixed at 25% width */
+  border: 1px solid #c3c2c2 !important;
    max-width: 25%;
    box-sizing: border-box;
@@ Line 15: / Line 16: @@
 	.filtered-filters {
        position: sticky !important;
-      top: 5rem !important;
 	}
 }
@@ Line 23: / Line 23: @@
    max-width: 75%;
    box-sizing: border-box;
+  border: 1px solid #c3c2c2 !important;
    border-radius: 5px;
    padding: 1rem; /* Optional: spacing inside the views panel */
@@ Line 44: / Line 45: @@
 }
-.filtered-value-and[type="radio"] {
+.filtered-filters .filtered-value .filtered-value-option {
-  appearance: none;
+	width: unset !important;
-  -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 2px hsl(0 0% 100%),
-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;
 }