FossilRepo

fossilrepo / assets / admin / css / changelists.59465e72d1ef.css
Source Blame History 343 lines
afe42d0… ragelink 1 /* CHANGELISTS */
afe42d0… ragelink 2
afe42d0… ragelink 3 #changelist {
afe42d0… ragelink 4 display: flex;
afe42d0… ragelink 5 align-items: flex-start;
afe42d0… ragelink 6 justify-content: space-between;
afe42d0… ragelink 7 }
afe42d0… ragelink 8
afe42d0… ragelink 9 #changelist .changelist-form-container {
afe42d0… ragelink 10 flex: 1 1 auto;
afe42d0… ragelink 11 min-width: 0;
afe42d0… ragelink 12 }
afe42d0… ragelink 13
afe42d0… ragelink 14 #changelist table {
afe42d0… ragelink 15 width: 100%;
afe42d0… ragelink 16 }
afe42d0… ragelink 17
afe42d0… ragelink 18 .change-list .hiddenfields { display:none; }
afe42d0… ragelink 19
afe42d0… ragelink 20 .change-list .filtered table {
afe42d0… ragelink 21 border-right: none;
afe42d0… ragelink 22 }
afe42d0… ragelink 23
afe42d0… ragelink 24 .change-list .filtered {
afe42d0… ragelink 25 min-height: 400px;
afe42d0… ragelink 26 }
afe42d0… ragelink 27
afe42d0… ragelink 28 .change-list .filtered .results, .change-list .filtered .paginator,
afe42d0… ragelink 29 .filtered #toolbar, .filtered div.xfull {
afe42d0… ragelink 30 width: auto;
afe42d0… ragelink 31 }
afe42d0… ragelink 32
afe42d0… ragelink 33 .change-list .filtered table tbody th {
afe42d0… ragelink 34 padding-right: 1em;
afe42d0… ragelink 35 }
afe42d0… ragelink 36
afe42d0… ragelink 37 #changelist-form .results {
afe42d0… ragelink 38 overflow-x: auto;
afe42d0… ragelink 39 width: 100%;
afe42d0… ragelink 40 }
afe42d0… ragelink 41
afe42d0… ragelink 42 #changelist .toplinks {
afe42d0… ragelink 43 border-bottom: 1px solid var(--hairline-color);
afe42d0… ragelink 44 }
afe42d0… ragelink 45
afe42d0… ragelink 46 #changelist .paginator {
afe42d0… ragelink 47 color: var(--body-quiet-color);
afe42d0… ragelink 48 border-bottom: 1px solid var(--hairline-color);
afe42d0… ragelink 49 background: var(--body-bg);
afe42d0… ragelink 50 overflow: hidden;
afe42d0… ragelink 51 }
afe42d0… ragelink 52
afe42d0… ragelink 53 /* CHANGELIST TABLES */
afe42d0… ragelink 54
afe42d0… ragelink 55 #changelist table thead th {
afe42d0… ragelink 56 padding: 0;
afe42d0… ragelink 57 white-space: nowrap;
afe42d0… ragelink 58 vertical-align: middle;
afe42d0… ragelink 59 }
afe42d0… ragelink 60
afe42d0… ragelink 61 #changelist table thead th.action-checkbox-column {
afe42d0… ragelink 62 width: 1.5em;
afe42d0… ragelink 63 text-align: center;
afe42d0… ragelink 64 }
afe42d0… ragelink 65
afe42d0… ragelink 66 #changelist table tbody td.action-checkbox {
afe42d0… ragelink 67 text-align: center;
afe42d0… ragelink 68 }
afe42d0… ragelink 69
afe42d0… ragelink 70 #changelist table tfoot {
afe42d0… ragelink 71 color: var(--body-quiet-color);
afe42d0… ragelink 72 }
afe42d0… ragelink 73
afe42d0… ragelink 74 /* TOOLBAR */
afe42d0… ragelink 75
afe42d0… ragelink 76 #toolbar {
afe42d0… ragelink 77 padding: 8px 10px;
afe42d0… ragelink 78 margin-bottom: 15px;
afe42d0… ragelink 79 border-top: 1px solid var(--hairline-color);
afe42d0… ragelink 80 border-bottom: 1px solid var(--hairline-color);
afe42d0… ragelink 81 background: var(--darkened-bg);
afe42d0… ragelink 82 color: var(--body-quiet-color);
afe42d0… ragelink 83 }
afe42d0… ragelink 84
afe42d0… ragelink 85 #toolbar form input {
afe42d0… ragelink 86 border-radius: 4px;
afe42d0… ragelink 87 font-size: 0.875rem;
afe42d0… ragelink 88 padding: 5px;
afe42d0… ragelink 89 color: var(--body-fg);
afe42d0… ragelink 90 }
afe42d0… ragelink 91
afe42d0… ragelink 92 #toolbar #searchbar {
afe42d0… ragelink 93 height: 1.1875rem;
afe42d0… ragelink 94 border: 1px solid var(--border-color);
afe42d0… ragelink 95 padding: 2px 5px;
afe42d0… ragelink 96 margin: 0;
afe42d0… ragelink 97 vertical-align: top;
afe42d0… ragelink 98 font-size: 0.8125rem;
afe42d0… ragelink 99 max-width: 100%;
afe42d0… ragelink 100 }
afe42d0… ragelink 101
afe42d0… ragelink 102 #toolbar #searchbar:focus {
afe42d0… ragelink 103 border-color: var(--body-quiet-color);
afe42d0… ragelink 104 }
afe42d0… ragelink 105
afe42d0… ragelink 106 #toolbar form input[type="submit"] {
afe42d0… ragelink 107 border: 1px solid var(--border-color);
afe42d0… ragelink 108 font-size: 0.8125rem;
afe42d0… ragelink 109 padding: 4px 8px;
afe42d0… ragelink 110 margin: 0;
afe42d0… ragelink 111 vertical-align: middle;
afe42d0… ragelink 112 background: var(--body-bg);
afe42d0… ragelink 113 box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
afe42d0… ragelink 114 cursor: pointer;
afe42d0… ragelink 115 color: var(--body-fg);
afe42d0… ragelink 116 }
afe42d0… ragelink 117
afe42d0… ragelink 118 #toolbar form input[type="submit"]:focus,
afe42d0… ragelink 119 #toolbar form input[type="submit"]:hover {
afe42d0… ragelink 120 border-color: var(--body-quiet-color);
afe42d0… ragelink 121 }
afe42d0… ragelink 122
afe42d0… ragelink 123 #changelist-search img {
afe42d0… ragelink 124 vertical-align: middle;
afe42d0… ragelink 125 margin-right: 4px;
afe42d0… ragelink 126 }
afe42d0… ragelink 127
afe42d0… ragelink 128 #changelist-search .help {
afe42d0… ragelink 129 word-break: break-word;
afe42d0… ragelink 130 }
afe42d0… ragelink 131
afe42d0… ragelink 132 /* FILTER COLUMN */
afe42d0… ragelink 133
afe42d0… ragelink 134 #changelist-filter {
afe42d0… ragelink 135 flex: 0 0 240px;
afe42d0… ragelink 136 order: 1;
afe42d0… ragelink 137 background: var(--darkened-bg);
afe42d0… ragelink 138 border-left: none;
afe42d0… ragelink 139 margin: 0 0 0 30px;
afe42d0… ragelink 140 }
afe42d0… ragelink 141
afe42d0… ragelink 142 @media (forced-colors: active) {
afe42d0… ragelink 143 #changelist-filter {
afe42d0… ragelink 144 border: 1px solid;
afe42d0… ragelink 145 }
afe42d0… ragelink 146 }
afe42d0… ragelink 147
afe42d0… ragelink 148 #changelist-filter h2 {
afe42d0… ragelink 149 font-size: 0.875rem;
afe42d0… ragelink 150 text-transform: uppercase;
afe42d0… ragelink 151 letter-spacing: 0.5px;
afe42d0… ragelink 152 padding: 5px 15px;
afe42d0… ragelink 153 margin-bottom: 12px;
afe42d0… ragelink 154 border-bottom: none;
afe42d0… ragelink 155 }
afe42d0… ragelink 156
afe42d0… ragelink 157 #changelist-filter h3,
afe42d0… ragelink 158 #changelist-filter details summary {
afe42d0… ragelink 159 font-weight: 400;
afe42d0… ragelink 160 padding: 0 15px;
afe42d0… ragelink 161 margin-bottom: 10px;
afe42d0… ragelink 162 }
afe42d0… ragelink 163
afe42d0… ragelink 164 #changelist-filter details summary > * {
afe42d0… ragelink 165 display: inline;
afe42d0… ragelink 166 }
afe42d0… ragelink 167
afe42d0… ragelink 168 #changelist-filter details > summary {
afe42d0… ragelink 169 list-style-type: none;
afe42d0… ragelink 170 }
afe42d0… ragelink 171
afe42d0… ragelink 172 #changelist-filter details > summary::-webkit-details-marker {
afe42d0… ragelink 173 display: none;
afe42d0… ragelink 174 }
afe42d0… ragelink 175
afe42d0… ragelink 176 #changelist-filter details > summary::before {
afe42d0… ragelink 177 content: '→';
afe42d0… ragelink 178 font-weight: bold;
afe42d0… ragelink 179 color: var(--link-hover-color);
afe42d0… ragelink 180 }
afe42d0… ragelink 181
afe42d0… ragelink 182 #changelist-filter details[open] > summary::before {
afe42d0… ragelink 183 content: '↓';
afe42d0… ragelink 184 }
afe42d0… ragelink 185
afe42d0… ragelink 186 #changelist-filter ul {
afe42d0… ragelink 187 margin: 5px 0;
afe42d0… ragelink 188 padding: 0 15px 15px;
afe42d0… ragelink 189 border-bottom: 1px solid var(--hairline-color);
afe42d0… ragelink 190 }
afe42d0… ragelink 191
afe42d0… ragelink 192 #changelist-filter ul:last-child {
afe42d0… ragelink 193 border-bottom: none;
afe42d0… ragelink 194 }
afe42d0… ragelink 195
afe42d0… ragelink 196 #changelist-filter li {
afe42d0… ragelink 197 list-style-type: none;
afe42d0… ragelink 198 margin-left: 0;
afe42d0… ragelink 199 padding-left: 0;
afe42d0… ragelink 200 }
afe42d0… ragelink 201
afe42d0… ragelink 202 #changelist-filter a {
afe42d0… ragelink 203 display: block;
afe42d0… ragelink 204 color: var(--body-quiet-color);
afe42d0… ragelink 205 word-break: break-word;
afe42d0… ragelink 206 }
afe42d0… ragelink 207
afe42d0… ragelink 208 #changelist-filter li.selected {
afe42d0… ragelink 209 border-left: 5px solid var(--hairline-color);
afe42d0… ragelink 210 padding-left: 10px;
afe42d0… ragelink 211 margin-left: -15px;
afe42d0… ragelink 212 }
afe42d0… ragelink 213
afe42d0… ragelink 214 #changelist-filter li.selected a {
afe42d0… ragelink 215 color: var(--link-selected-fg);
afe42d0… ragelink 216 }
afe42d0… ragelink 217
afe42d0… ragelink 218 #changelist-filter a:focus, #changelist-filter a:hover,
afe42d0… ragelink 219 #changelist-filter li.selected a:focus,
afe42d0… ragelink 220 #changelist-filter li.selected a:hover {
afe42d0… ragelink 221 color: var(--link-hover-color);
afe42d0… ragelink 222 }
afe42d0… ragelink 223
afe42d0… ragelink 224 #changelist-filter #changelist-filter-extra-actions {
afe42d0… ragelink 225 font-size: 0.8125rem;
afe42d0… ragelink 226 margin-bottom: 10px;
afe42d0… ragelink 227 border-bottom: 1px solid var(--hairline-color);
afe42d0… ragelink 228 }
afe42d0… ragelink 229
afe42d0… ragelink 230 /* DATE DRILLDOWN */
afe42d0… ragelink 231
afe42d0… ragelink 232 .change-list .toplinks {
afe42d0… ragelink 233 display: flex;
afe42d0… ragelink 234 padding-bottom: 5px;
afe42d0… ragelink 235 flex-wrap: wrap;
afe42d0… ragelink 236 gap: 3px 17px;
afe42d0… ragelink 237 font-weight: bold;
afe42d0… ragelink 238 }
afe42d0… ragelink 239
afe42d0… ragelink 240 .change-list .toplinks a {
afe42d0… ragelink 241 font-size: 0.8125rem;
afe42d0… ragelink 242 }
afe42d0… ragelink 243
afe42d0… ragelink 244 .change-list .toplinks .date-back {
afe42d0… ragelink 245 color: var(--body-quiet-color);
afe42d0… ragelink 246 }
afe42d0… ragelink 247
afe42d0… ragelink 248 .change-list .toplinks .date-back:focus,
afe42d0… ragelink 249 .change-list .toplinks .date-back:hover {
afe42d0… ragelink 250 color: var(--link-hover-color);
afe42d0… ragelink 251 }
afe42d0… ragelink 252
afe42d0… ragelink 253 /* ACTIONS */
afe42d0… ragelink 254
afe42d0… ragelink 255 .filtered .actions {
afe42d0… ragelink 256 border-right: none;
afe42d0… ragelink 257 }
afe42d0… ragelink 258
afe42d0… ragelink 259 #changelist table input {
afe42d0… ragelink 260 margin: 0;
afe42d0… ragelink 261 vertical-align: baseline;
afe42d0… ragelink 262 }
afe42d0… ragelink 263
afe42d0… ragelink 264 /* Once the :has() pseudo-class is supported by all browsers, the tr.selected
afe42d0… ragelink 265 selector and the JS adding the class can be removed. */
afe42d0… ragelink 266 #changelist tbody tr.selected {
afe42d0… ragelink 267 background-color: var(--selected-row);
afe42d0… ragelink 268 }
afe42d0… ragelink 269
afe42d0… ragelink 270 #changelist tbody tr:has(.action-select:checked) {
afe42d0… ragelink 271 background-color: var(--selected-row);
afe42d0… ragelink 272 }
afe42d0… ragelink 273
afe42d0… ragelink 274 @media (forced-colors: active) {
afe42d0… ragelink 275 #changelist tbody tr.selected {
afe42d0… ragelink 276 background-color: SelectedItem;
afe42d0… ragelink 277 }
afe42d0… ragelink 278 #changelist tbody tr:has(.action-select:checked) {
afe42d0… ragelink 279 background-color: SelectedItem;
afe42d0… ragelink 280 }
afe42d0… ragelink 281 }
afe42d0… ragelink 282
afe42d0… ragelink 283 #changelist .actions {
afe42d0… ragelink 284 padding: 10px;
afe42d0… ragelink 285 background: var(--body-bg);
afe42d0… ragelink 286 border-top: none;
afe42d0… ragelink 287 border-bottom: none;
afe42d0… ragelink 288 line-height: 1.5rem;
afe42d0… ragelink 289 color: var(--body-quiet-color);
afe42d0… ragelink 290 width: 100%;
afe42d0… ragelink 291 }
afe42d0… ragelink 292
afe42d0… ragelink 293 #changelist .actions span.all,
afe42d0… ragelink 294 #changelist .actions span.action-counter,
afe42d0… ragelink 295 #changelist .actions span.clear,
afe42d0… ragelink 296 #changelist .actions span.question {
afe42d0… ragelink 297 font-size: 0.8125rem;
afe42d0… ragelink 298 margin: 0 0.5em;
afe42d0… ragelink 299 }
afe42d0… ragelink 300
afe42d0… ragelink 301 #changelist .actions:last-child {
afe42d0… ragelink 302 border-bottom: none;
afe42d0… ragelink 303 }
afe42d0… ragelink 304
afe42d0… ragelink 305 #changelist .actions select {
afe42d0… ragelink 306 vertical-align: top;
afe42d0… ragelink 307 height: 1.5rem;
afe42d0… ragelink 308 color: var(--body-fg);
afe42d0… ragelink 309 border: 1px solid var(--border-color);
afe42d0… ragelink 310 border-radius: 4px;
afe42d0… ragelink 311 font-size: 0.875rem;
afe42d0… ragelink 312 padding: 0 0 0 4px;
afe42d0… ragelink 313 margin: 0;
afe42d0… ragelink 314 margin-left: 10px;
afe42d0… ragelink 315 }
afe42d0… ragelink 316
afe42d0… ragelink 317 #changelist .actions select:focus {
afe42d0… ragelink 318 border-color: var(--body-quiet-color);
afe42d0… ragelink 319 }
afe42d0… ragelink 320
afe42d0… ragelink 321 #changelist .actions label {
afe42d0… ragelink 322 display: inline-block;
afe42d0… ragelink 323 vertical-align: middle;
afe42d0… ragelink 324 font-size: 0.8125rem;
afe42d0… ragelink 325 }
afe42d0… ragelink 326
afe42d0… ragelink 327 #changelist .actions .button {
afe42d0… ragelink 328 font-size: 0.8125rem;
afe42d0… ragelink 329 border: 1px solid var(--border-color);
afe42d0… ragelink 330 border-radius: 4px;
afe42d0… ragelink 331 background: var(--body-bg);
afe42d0… ragelink 332 box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
afe42d0… ragelink 333 cursor: pointer;
afe42d0… ragelink 334 height: 1.5rem;
afe42d0… ragelink 335 line-height: 1;
afe42d0… ragelink 336 padding: 4px 8px;
afe42d0… ragelink 337 margin: 0;
afe42d0… ragelink 338 color: var(--body-fg);
afe42d0… ragelink 339 }
afe42d0… ragelink 340
afe42d0… ragelink 341 #changelist .actions .button:focus, #changelist .actions .button:hover {
afe42d0… ragelink 342 border-color: var(--body-quiet-color);
afe42d0… ragelink 343 }

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button