search.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /* from Invidious, AGPL-3.0 */
  2. em {
  3. font-weight: bold;
  4. font-style: normal;
  5. }
  6. summary {
  7. /* This should hide the marker */
  8. display: block;
  9. font-size: 1.17em;
  10. font-weight: bold;
  11. margin: 0 auto 10px auto;
  12. cursor: pointer;
  13. }
  14. summary::-webkit-details-marker,
  15. summary::marker { display: none; }
  16. summary:before {
  17. border-radius: 5px;
  18. content: "[ + ]";
  19. margin: -2px 10px 0 10px;
  20. padding: 1px 0 3px 0;
  21. text-align: center;
  22. width: 40px;
  23. }
  24. details[open] > summary:before { content: "[ − ]"; }
  25. #filters-box {
  26. padding: 10px 20px 20px 10px;
  27. margin: 10px 15px;
  28. }
  29. #filters-flex {
  30. display: flex;
  31. flex-wrap: wrap;
  32. flex-direction: row;
  33. align-items: flex-start;
  34. align-content: flex-start;
  35. justify-content: flex-start;
  36. }
  37. fieldset, legend {
  38. display: contents !important;
  39. border: none !important;
  40. margin: 0 !important;
  41. padding: 0 !important;
  42. }
  43. .filter-column {
  44. display: inline-block;
  45. display: inline-flex;
  46. width: max-content;
  47. min-width: max-content;
  48. max-width: 16em;
  49. margin: 15px;
  50. flex-grow: 2;
  51. flex-basis: auto;
  52. flex-direction: column;
  53. }
  54. .filter-name, .filter-options {
  55. display: block;
  56. padding: 5px 10px;
  57. margin: 0;
  58. text-align: start;
  59. }
  60. .filter-options div { margin: 6px 0; }
  61. .filter-options div * { vertical-align: middle; }
  62. .filter-options label { margin: 0 10px; }
  63. #filters-apply {
  64. text-align: right; /* IE11 only */
  65. text-align: end; /* Override for compatible browsers */
  66. }
  67. /* Error message */
  68. .no-results-error {
  69. text-align: center;
  70. line-height: 180%;
  71. font-size: 110%;
  72. padding: 15px 15px 125px 15px;
  73. }
  74. /* Responsive rules */
  75. @media only screen and (max-width: 800px) {
  76. summary { font-size: 1.30em; }
  77. #filters-box {
  78. margin: 10px 0 0 0;
  79. padding: 0;
  80. }
  81. #filters-apply {
  82. text-align: center;
  83. padding: 15px;
  84. }
  85. }
  86. /* Light theme */
  87. .light-theme #filters-box {
  88. background: #dfdfdf;
  89. }
  90. @media (prefers-color-scheme: light) {
  91. .no-theme #filters-box {
  92. background: #dfdfdf;
  93. }
  94. }
  95. /* Dark theme */
  96. .dark-theme #filters-box {
  97. background: #373737;
  98. }
  99. @media (prefers-color-scheme: dark) {
  100. .no-theme #filters-box {
  101. background: #373737;
  102. }
  103. }