Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web
impro.social
Use hover media queries
Grace Kind
(Jul 11, 2026, 12:09 AM -0500)
0a0fdad0
0e9c9be9
+86
-68
+1
-1
package.json
+1
-1
package.json
+85
-67
src/css/style.css
+85
-67
src/css/style.css
···
376
376
color: var(--text-link-color);
377
377
}
378
378
379
-
@media (min-width: 800px) {
379
+
@media (hover: hover) {
380
380
.rich-text a:hover {
381
381
text-decoration: underline;
382
382
}
···
421
421
border-top-color: var(--primary-button-text-color);
422
422
}
423
423
424
-
@media (min-width: 800px) {
424
+
@media (hover: hover) {
425
425
.rounded-button:hover {
426
426
background-color: var(--secondary-button-hover-color);
427
427
}
···
508
508
height: 20px;
509
509
}
510
510
511
-
@media (min-width: 800px) {
511
+
@media (hover: hover) {
512
512
.back-button:hover {
513
513
background-color: var(--back-button-hover-color);
514
514
}
···
547
547
transition: background-color 0.2s;
548
548
}
549
549
550
-
@media (min-width: 800px) {
550
+
@media (hover: hover) {
551
551
.inbox-button:hover {
552
552
background-color: var(--back-button-hover-color);
553
553
}
···
641
641
border-bottom-color: transparent;
642
642
}
643
643
644
-
@media (min-width: 800px) {
644
+
@media (hover: hover) {
645
645
form button[type="submit"]:hover {
646
646
background: var(--primary-button-hover-color);
647
647
}
···
651
651
opacity: 0.5;
652
652
}
653
653
654
-
@media (min-width: 800px) {
654
+
@media (hover: hover) {
655
655
form button:hover {
656
656
background: var(--post-hover-color);
657
657
}
···
1012
1012
border-bottom-color: var(--tab-bar-button-active-color);
1013
1013
}
1014
1014
1015
-
@media (min-width: 800px) {
1015
+
@media (hover: hover) {
1016
1016
tab-bar .tab-bar-button:hover {
1017
1017
background-color: var(--post-hover-color);
1018
1018
}
···
1239
1239
border-radius: var(--sidebar-nav-item-border-radius);
1240
1240
}
1241
1241
1242
-
@media (min-width: 800px) {
1242
+
@media (hover: hover) {
1243
1243
.sidebar-nav-item:hover:not(.disabled) {
1244
1244
background: var(--post-hover-color);
1245
1245
}
···
1317
1317
transition: background-color 0.2s;
1318
1318
}
1319
1319
1320
-
@media (min-width: 800px) {
1320
+
@media (hover: hover) {
1321
1321
.sidebar-compose-button:hover {
1322
1322
background-color: var(--primary-button-hover-color);
1323
1323
}
···
1358
1358
margin-bottom: 8px;
1359
1359
}
1360
1360
1361
-
@media (min-width: 800px) {
1361
+
@media (hover: hover) {
1362
1362
.sidebar-footer-link:hover {
1363
1363
text-decoration: underline;
1364
1364
}
···
1385
1385
text-align: left;
1386
1386
}
1387
1387
1388
-
@media (min-width: 800px) {
1388
+
@media (hover: hover) {
1389
1389
.sidebar-about-link:hover {
1390
1390
text-decoration: underline;
1391
1391
}
1392
+
}
1392
1393
1394
+
@media (min-width: 800px) {
1393
1395
.logged-out-sidebar .sidebar-header {
1394
1396
align-items: center;
1395
1397
}
···
1646
1648
cursor: pointer;
1647
1649
}
1648
1650
1649
-
@media (min-width: 800px) {
1651
+
@media (hover: hover) {
1650
1652
.post.clickable:hover {
1651
1653
background-color: var(--post-hover-color);
1652
1654
}
···
1717
1719
overflow: hidden;
1718
1720
}
1719
1721
1720
-
@media (min-width: 800px) {
1722
+
@media (hover: hover) {
1721
1723
.post-header-text a:hover {
1722
1724
text-decoration: underline;
1723
1725
}
···
1785
1787
width: 15px;
1786
1788
height: 15px;
1787
1789
}
1788
-
@media (min-width: 800px) {
1790
+
@media (hover: hover) {
1789
1791
.who-can-reply-badge:hover {
1790
1792
color: var(--text-color);
1791
1793
}
1792
1794
}
1793
-
@media (min-width: 800px) {
1795
+
@media (hover: hover) {
1794
1796
.who-can-reply-badge:hover :not(.icon) {
1795
1797
text-decoration: underline;
1796
1798
}
···
1851
1853
background: light-dark(var(--lightest-gray), var(--gray));
1852
1854
}
1853
1855
1854
-
@media (min-width: 800px) {
1856
+
@media (hover: hover) {
1855
1857
.large-post .label-badge:hover {
1856
1858
background: light-dark(var(--lighter-gray), var(--light-gray));
1857
1859
}
···
2009
2011
background: none;
2010
2012
}
2011
2013
2012
-
@media (min-width: 800px) {
2014
+
@media (hover: hover) {
2013
2015
.quoted-post .label-badge:hover {
2014
2016
background: none;
2015
2017
}
···
2067
2069
border-bottom: var(--hair) solid var(--post-border-color);
2068
2070
z-index: 0;
2069
2071
}
2072
+
}
2073
+
2074
+
@media (hover: hover) {
2070
2075
.post-thread-reply-prompt:hover {
2071
2076
background-color: var(--post-hover-color);
2072
2077
}
2078
+
}
2079
+
2080
+
@media (min-width: 800px) {
2073
2081
.post-thread-reply-prompt-inner {
2074
2082
border-radius: 0;
2075
2083
padding: 10px;
···
2458
2466
transition: background 0.15s ease;
2459
2467
}
2460
2468
2461
-
.youtube-embed .external-link a:hover .play-icon {
2462
-
background: color-mix(in srgb, var(--white) 85%, transparent);
2469
+
@media (hover: hover) {
2470
+
.youtube-embed .external-link a:hover .play-icon {
2471
+
background: color-mix(in srgb, var(--white) 85%, transparent);
2472
+
}
2463
2473
}
2464
2474
2465
2475
.external-link-image-wrapper .play-icon svg {
···
2589
2599
cursor: pointer;
2590
2600
}
2591
2601
2592
-
@media (min-width: 800px) {
2602
+
@media (hover: hover) {
2593
2603
.quoted-post-link:hover .quoted-post {
2594
2604
background-color: var(--post-hover-color);
2595
2605
}
···
2838
2848
transition: background-color 0.2s;
2839
2849
}
2840
2850
2841
-
@media (min-width: 800px) {
2851
+
@media (hover: hover) {
2842
2852
.image-preview-remove-button:hover {
2843
2853
background: var(--overlay-color-darker);
2844
2854
}
···
3169
3179
border-bottom: var(--hair) solid var(--post-border-color);
3170
3180
}
3171
3181
3172
-
@media (min-width: 800px) {
3182
+
@media (hover: hover) {
3173
3183
.hidden-replies-button:hover {
3174
3184
background-color: var(--post-hover-color);
3175
3185
}
···
3197
3207
display: none;
3198
3208
}
3199
3209
3200
-
@media (min-width: 800px) {
3210
+
@media (hover: hover) {
3201
3211
.muted-parent-toggle-button:hover {
3202
3212
background-color: var(--post-hover-color);
3203
3213
}
···
3227
3237
color: inherit;
3228
3238
}
3229
3239
3230
-
@media (min-width: 800px) {
3240
+
@media (hover: hover) {
3231
3241
.notification-item:hover {
3232
3242
background-color: var(--post-hover-color);
3233
3243
cursor: pointer;
···
3238
3248
background-color: var(--highlight-color-tint);
3239
3249
}
3240
3250
3241
-
@media (min-width: 800px) {
3251
+
@media (hover: hover) {
3242
3252
.notification-item.unread:hover {
3243
3253
background-color: var(--highlight-color-tint-hover);
3244
3254
}
···
3460
3470
position: relative;
3461
3471
}
3462
3472
3463
-
@media (min-width: 800px) {
3473
+
@media (hover: hover) {
3464
3474
.convo-item:hover {
3465
3475
background-color: var(--post-hover-color);
3466
3476
}
···
3470
3480
background-color: var(--highlight-color-tint);
3471
3481
}
3472
3482
3473
-
@media (min-width: 800px) {
3483
+
@media (hover: hover) {
3474
3484
.convo-item.unread:hover {
3475
3485
background-color: var(--highlight-color-tint-hover);
3476
3486
}
···
3669
3679
transition: background-color 0.2s;
3670
3680
}
3671
3681
3672
-
@media (min-width: 800px) {
3682
+
@media (hover: hover) {
3673
3683
.chat-request-item:hover {
3674
3684
background-color: var(--post-hover-color);
3675
3685
}
···
3684
3694
transition: background-color 0.2s;
3685
3695
}
3686
3696
3687
-
@media (min-width: 800px) {
3697
+
@media (hover: hover) {
3688
3698
.chat-request-header:hover {
3689
3699
background-color: var(--post-hover-color);
3690
3700
}
···
3717
3727
color: var(--primary-button-text-color);
3718
3728
}
3719
3729
3720
-
@media (min-width: 800px) {
3730
+
@media (hover: hover) {
3721
3731
.chat-request-button.accept:hover {
3722
3732
opacity: 0.9;
3723
3733
}
···
3727
3737
background-color: var(--text-input-background-color);
3728
3738
}
3729
3739
3730
-
@media (min-width: 800px) {
3740
+
@media (hover: hover) {
3731
3741
.chat-request-button.reject:hover {
3732
3742
background-color: var(--generic-border-color);
3733
3743
}
···
4479
4489
color 0.2s;
4480
4490
}
4481
4491
4482
-
@media (min-width: 800px) {
4492
+
@media (hover: hover) {
4483
4493
.message-input-emoji-button:hover:not(:disabled) {
4484
4494
background-color: var(--post-hover-color);
4485
4495
color: var(--text-color);
···
4518
4528
border-bottom-color: transparent;
4519
4529
}
4520
4530
4521
-
@media (min-width: 800px) {
4531
+
@media (hover: hover) {
4522
4532
.message-input-send-button:hover:not(:disabled) {
4523
4533
opacity: 0.9;
4524
4534
}
···
4610
4620
bottom: 8px;
4611
4621
}
4612
4622
4613
-
@media (min-width: 800px) {
4623
+
@media (hover: hover) {
4614
4624
.reaction-palette-button:hover {
4615
4625
background-color: var(--secondary-button-color);
4616
4626
}
···
4662
4672
border-color: var(--highlight-color);
4663
4673
}
4664
4674
4665
-
@media (min-width: 800px) {
4675
+
@media (hover: hover) {
4666
4676
.message-reactions:not(.message-reactions-static):hover {
4667
4677
background-color: var(--post-hover-color);
4668
4678
}
···
4681
4691
background-color: var(--secondary-button-color);
4682
4692
}
4683
4693
4684
-
@media (min-width: 800px) {
4694
+
@media (hover: hover) {
4685
4695
.reaction-palette-button.reaction-palette-button-active:hover {
4686
4696
background-color: var(--secondary-button-hover-color);
4687
4697
}
···
4825
4835
cursor: pointer;
4826
4836
}
4827
4837
4828
-
.reaction-row-own:hover {
4829
-
background-color: var(--post-hover-color);
4838
+
@media (hover: hover) {
4839
+
.reaction-row-own:hover {
4840
+
background-color: var(--post-hover-color);
4841
+
}
4830
4842
}
4831
4843
4832
4844
.reaction-row-avatar {
···
5089
5101
font-weight: 600;
5090
5102
}
5091
5103
5092
-
@media (min-width: 800px) {
5104
+
@media (hover: hover) {
5093
5105
a.profile-stat:hover {
5094
5106
cursor: pointer;
5095
5107
text-decoration: underline;
···
5108
5120
line-height: 1.3;
5109
5121
}
5110
5122
5111
-
@media (min-width: 800px) {
5123
+
@media (hover: hover) {
5112
5124
.known-followers-summary:hover .known-followers-text {
5113
5125
text-decoration: underline;
5114
5126
}
···
5169
5181
color: var(--text-link-color);
5170
5182
}
5171
5183
5172
-
@media (min-width: 800px) {
5184
+
@media (hover: hover) {
5173
5185
.profile-description a:hover {
5174
5186
text-decoration: underline;
5175
5187
}
···
5233
5245
gap: 12px;
5234
5246
}
5235
5247
5236
-
@media (min-width: 800px) {
5248
+
@media (hover: hover) {
5237
5249
.profile-list-item:hover {
5238
5250
background: var(--post-hover-color);
5239
5251
}
···
5260
5272
text-decoration: none;
5261
5273
}
5262
5274
5263
-
@media (min-width: 800px) {
5275
+
@media (hover: hover) {
5264
5276
.profile-list-item-name:hover {
5265
5277
text-decoration: underline;
5266
5278
}
···
5337
5349
transition: border-color 0.2s;
5338
5350
}
5339
5351
5340
-
@media (min-width: 800px) {
5352
+
@media (hover: hover) {
5341
5353
.search-input:hover {
5342
5354
background: var(--post-hover-color);
5343
5355
}
···
5479
5491
cursor: pointer;
5480
5492
}
5481
5493
5482
-
@media (min-width: 800px) {
5494
+
@media (hover: hover) {
5483
5495
.feeds-list-item.clickable:hover {
5484
5496
background-color: var(--post-hover-color);
5485
5497
}
···
5847
5859
transition: background-color 0.2s;
5848
5860
}
5849
5861
5850
-
@media (min-width: 800px) {
5862
+
@media (hover: hover) {
5851
5863
.post-composer-send-button:hover {
5852
5864
background-color: var(--primary-button-hover-color);
5853
5865
}
···
5986
5998
transition: background-color 0.2s;
5987
5999
}
5988
6000
5989
-
@media (min-width: 800px) {
6001
+
@media (hover: hover) {
5990
6002
.image-picker-button:hover {
5991
6003
background-color: var(--background-color-secondary);
5992
6004
}
···
5997
6009
cursor: default;
5998
6010
}
5999
6011
6000
-
@media (min-width: 800px) {
6012
+
@media (hover: hover) {
6001
6013
.image-picker-button:disabled:hover {
6002
6014
background-color: transparent;
6003
6015
}
···
6033
6045
transition: background-color 0.2s;
6034
6046
}
6035
6047
6036
-
@media (min-width: 800px) {
6048
+
@media (hover: hover) {
6037
6049
.post-composer-emoji-button:hover {
6038
6050
background-color: var(--background-color-secondary);
6039
6051
}
···
6109
6121
box-shadow 0.2s;
6110
6122
}
6111
6123
6112
-
@media (min-width: 800px) {
6124
+
@media (hover: hover) {
6113
6125
.floating-compose-button:hover {
6114
6126
transform: scale(1.05);
6115
6127
box-shadow: var(--shadow-color-hover);
···
6197
6209
background-color: var(--context-menu-item-hover-color);
6198
6210
}
6199
6211
6200
-
@media (min-width: 800px) {
6212
+
@media (hover: hover) {
6201
6213
.mention-suggestion:hover {
6202
6214
background-color: var(--context-menu-item-hover-color);
6203
6215
}
···
6389
6401
text-align: left;
6390
6402
}
6391
6403
6392
-
@media (min-width: 800px) {
6404
+
@media (hover: hover) {
6393
6405
.context-menu-item a:hover {
6394
6406
background-color: var(--context-menu-item-hover-color);
6395
6407
}
···
6477
6489
word-break: break-all;
6478
6490
}
6479
6491
6480
-
@media (min-width: 800px) {
6492
+
@media (hover: hover) {
6481
6493
.modal-dialog-message a:hover {
6482
6494
text-decoration: underline;
6483
6495
}
···
6500
6512
background-color: light-dark(var(--lightest-gray), var(--light-gray));
6501
6513
}
6502
6514
6503
-
@media (min-width: 800px) {
6515
+
@media (hover: hover) {
6504
6516
.modal-dialog-button.cancel-button:hover {
6505
6517
background-color: light-dark(var(--lighter-gray), var(--light-gray));
6506
6518
}
···
6516
6528
color: var(--off-white);
6517
6529
}
6518
6530
6519
-
@media (min-width: 800px) {
6531
+
@media (hover: hover) {
6520
6532
.modal-dialog-button.primary-button:hover {
6521
6533
background-color: var(--primary-button-hover-color);
6522
6534
}
···
6858
6870
transition: background 0.2s ease;
6859
6871
}
6860
6872
6861
-
@media (min-width: 800px) {
6873
+
@media (hover: hover) {
6862
6874
.lightbox-nav:hover:not(:disabled) {
6863
6875
background: var(--overlay-color-heavy);
6864
6876
}
···
7251
7263
cursor: default;
7252
7264
}
7253
7265
7254
-
@media (min-width: 800px) {
7266
+
@media (hover: hover) {
7255
7267
.vertical-nav-item:hover:not(.disabled) {
7256
7268
background: var(--post-hover-color);
7257
7269
}
···
7446
7458
border-top: var(--hair) solid var(--post-border-color);
7447
7459
}
7448
7460
7449
-
@media (min-width: 800px) {
7461
+
@media (hover: hover) {
7450
7462
.account-switcher-item:hover {
7451
7463
background-color: var(--post-hover-color);
7452
7464
}
···
7601
7613
flex-shrink: 0;
7602
7614
}
7603
7615
7604
-
@media (min-width: 800px) {
7616
+
@media (hover: hover) {
7605
7617
moderation-warning .top-bar:hover {
7606
7618
background: light-dark(var(--lighter-gray), var(--mid-gray));
7607
7619
}
···
7739
7751
cursor: pointer;
7740
7752
}
7741
7753
7742
-
@media (min-width: 800px) {
7754
+
@media (hover: hover) {
7743
7755
.select-wrapper select:hover {
7744
7756
border-color: var(--text-color-muted);
7745
7757
}
···
8071
8083
border-right: none;
8072
8084
}
8073
8085
8074
-
@media (min-width: 800px) {
8086
+
@media (hover: hover) {
8075
8087
.label-pref-button:hover:not(:disabled):not(.active) {
8076
8088
background: var(--post-hover-color);
8077
8089
}
···
8223
8235
width: 100%;
8224
8236
}
8225
8237
8226
-
@media (min-width: 800px) {
8238
+
@media (hover: hover) {
8227
8239
.report-option-card:hover {
8228
8240
background-color: light-dark(var(--lightest-gray), var(--dark-gray));
8229
8241
}
···
8471
8483
}
8472
8484
}
8473
8485
8474
-
@media (min-width: 800px) {
8486
+
@media (hover: hover) {
8475
8487
.post-notifications-dialog-close:hover {
8476
8488
opacity: 1;
8477
8489
}
···
8577
8589
}
8578
8590
}
8579
8591
8580
-
@media (min-width: 800px) {
8592
+
@media (hover: hover) {
8581
8593
.add-to-lists-dialog-close:hover {
8582
8594
opacity: 1;
8583
8595
}
···
8691
8703
.new-chat-button {
8692
8704
display: flex;
8693
8705
}
8706
+
}
8694
8707
8708
+
@media (hover: hover) {
8695
8709
.new-chat-button:hover {
8696
8710
background-color: var(--primary-button-hover-color);
8697
8711
}
···
8804
8818
display: flex;
8805
8819
align-items: center;
8806
8820
}
8821
+
}
8807
8822
8823
+
@media (hover: hover) {
8808
8824
.new-chat-dialog-close:hover {
8809
8825
opacity: 1;
8810
8826
}
···
9261
9277
transition: background-color 0.15s;
9262
9278
}
9263
9279
9264
-
@media (min-width: 800px) {
9280
+
@media (hover: hover) {
9265
9281
.community-plugins-link:hover {
9266
9282
background: color-mix(in srgb, var(--text-color) 10%, var(--callout-color));
9267
9283
}
···
9531
9547
word-break: break-all;
9532
9548
}
9533
9549
9534
-
.plugin-listing-meta a:hover {
9535
-
text-decoration: underline;
9550
+
@media (hover: hover) {
9551
+
.plugin-listing-meta a:hover {
9552
+
text-decoration: underline;
9553
+
}
9536
9554
}
9537
9555
9538
9556
.plugin-listing-description {