Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f675bfe

Browse files
SnuffleupagusSnuffleupagus
authored
Merge pull request mozilla#16323 from Snuffleupagus/viewer-CSS-is
Introduce some `:is` usage in the viewer CSS
2 parents 58b5eb8 + 7926c1b commit f675bfe

File tree

2 files changed

+35
-79
lines changed

2 files changed

+35
-79
lines changed

‎web/viewer-geckoview.css‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,13 +105,11 @@ body {
105105
outline: none;
106106
}
107107

108-
.dialogButton:hover,
109-
.dialogButton:focus-visible {
108+
.dialogButton:is(:hover, :focus-visible) {
110109
background-color: var(--dialog-button-hover-bg-color);
111110
}
112111

113-
.dialogButton:hover > span,
114-
.dialogButton:focus-visible > span {
112+
.dialogButton:is(:hover, :focus-visible) > span {
115113
color: var(--dialog-button-hover-color);
116114
}
117115

@@ -196,8 +194,7 @@ body {
196194
overflow: hidden;
197195
}
198196

199-
.toolbarButton[disabled],
200-
.dialogButton[disabled] {
197+
:is(.toolbarButton .dialogButton)[disabled] {
201198
opacity: 0.5;
202199
}
203200

‎web/viewer.css‎

Lines changed: 32 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -268,8 +268,7 @@ body {
268268
transition-timing-function: var(--sidebar-transition-timing-function);
269269
}
270270

271-
#outerContainer.sidebarMoving #sidebarContainer,
272-
#outerContainer.sidebarOpen #sidebarContainer {
271+
#outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer {
273272
visibility: visible;
274273
}
275274
#outerContainer.sidebarOpen #sidebarContainer {
@@ -315,22 +314,9 @@ body {
315314
font: message-box;
316315
}
317316

318-
.toolbar input,
319-
.toolbar button,
320-
.toolbar select,
321-
.secondaryToolbar input,
322-
.secondaryToolbar button,
323-
.secondaryToolbar a,
324-
.secondaryToolbar select,
325-
.editorParamsToolbar input,
326-
.editorParamsToolbar button,
327-
.editorParamsToolbar select,
328-
.findbar input,
329-
.findbar button,
330-
.findbar select,
331-
#sidebarContainer input,
332-
#sidebarContainer button,
333-
#sidebarContainer select {
317+
:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer)
318+
:is(input, button, select),
319+
.secondaryToolbar :is(input, button, a, select) {
334320
outline: none;
335321
font: message-box;
336322
}
@@ -437,9 +423,8 @@ body {
437423
animation: progressIndeterminate 1s linear infinite;
438424
}
439425

440-
#outerContainer.sidebarResizing #sidebarContainer,
441-
#outerContainer.sidebarResizing #viewerContainer,
442-
#outerContainer.sidebarResizing #loadingBar {
426+
#outerContainer.sidebarResizing
427+
:is(#sidebarContainer, #viewerContainer, #loadingBar) {
443428
/* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
444429
transition-duration: 0s;
445430
}
@@ -600,10 +585,8 @@ body {
600585
0 0 0 1px var(--doorhanger-border-color);
601586
border: var(--doorhanger-border-color-whcm);
602587
}
603-
.doorHanger::after,
604-
.doorHanger::before,
605-
.doorHangerRight::after,
606-
.doorHangerRight::before {
588+
:is(.doorHanger, .doorHangerRight)::after,
589+
:is(.doorHanger, .doorHangerRight)::before {
607590
bottom: 100%;
608591
border: 8px solid rgba(0, 0, 0, 0);
609592
content: " ";
@@ -623,8 +606,7 @@ body {
623606
margin-inline-end: -8px;
624607
border-bottom-color: var(--doorhanger-bg-color);
625608
}
626-
.doorHanger::before,
627-
.doorHangerRight::before {
609+
:is(.doorHanger, .doorHangerRight)::before {
628610
border-bottom-color: var(--doorhanger-border-color);
629611
border-width: 9px;
630612
}
@@ -649,8 +631,7 @@ body {
649631
color: rgba(251, 0, 0, 1);
650632
}
651633

652-
#findResultsCount:empty,
653-
#findMsg:empty {
634+
:is(#findResultsCount, #findMsg):empty {
654635
display: none;
655636
}
656637

@@ -707,13 +688,11 @@ body {
707688
outline: none;
708689
}
709690

710-
.dialogButton:hover,
711-
.dialogButton:focus-visible {
691+
.dialogButton:is(:hover, :focus-visible) {
712692
background-color: var(--dialog-button-hover-bg-color);
713693
}
714694

715-
.dialogButton:hover > span,
716-
.dialogButton:focus-visible > span {
695+
.dialogButton:is(:hover, :focus-visible) > span {
717696
color: var(--dialog-button-hover-color);
718697
}
719698

@@ -724,14 +703,11 @@ body {
724703
overflow: hidden;
725704
}
726705

727-
.toolbarButton[disabled],
728-
.secondaryToolbarButton[disabled],
729-
.dialogButton[disabled] {
706+
:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled] {
730707
opacity: 0.5;
731708
}
732709

733-
.splitToolbarButton > .toolbarButton:hover,
734-
.splitToolbarButton > .toolbarButton:focus-visible,
710+
.splitToolbarButton > .toolbarButton:is(:hover, :focus-visible),
735711
.dropdownToolbarButton:hover {
736712
background-color: var(--button-hover-color);
737713
}
@@ -768,31 +744,26 @@ body {
768744
box-sizing: border-box;
769745
}
770746

771-
.toolbarButton:hover,
772-
.toolbarButton:focus-visible {
747+
.toolbarButton:is(:hover, :focus-visible) {
773748
background-color: var(--button-hover-color);
774749
}
775-
.secondaryToolbarButton:hover,
776-
.secondaryToolbarButton:focus-visible {
750+
.secondaryToolbarButton:is(:hover, :focus-visible) {
777751
background-color: var(--doorhanger-hover-bg-color);
778752
color: var(--doorhanger-hover-color);
779753
}
780754

781-
.toolbarButton.toggled,
782-
.splitToolbarButton.toggled > .toolbarButton.toggled,
783-
.secondaryToolbarButton.toggled {
755+
:is(.toolbarButton, .secondaryToolbarButton).toggled,
756+
.splitToolbarButton.toggled > .toolbarButton.toggled {
784757
background-color: var(--toggled-btn-bg-color);
785758
color: var(--toggled-btn-color);
786759
}
787760

788-
.toolbarButton.toggled::before,
789-
.secondaryToolbarButton.toggled::before {
761+
:is(.toolbarButton, .secondaryToolbarButton).toggled::before {
790762
background-color: var(--toggled-btn-color);
791763
}
792764

793-
.toolbarButton.toggled:hover:active,
794-
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
795-
.secondaryToolbarButton.toggled:hover:active {
765+
:is(.toolbarButton, .secondaryToolbarButton).toggled:hover:active,
766+
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active {
796767
background-color: var(--toggled-hover-active-btn-color);
797768
}
798769

@@ -825,8 +796,7 @@ body {
825796
border: none;
826797
background-color: var(--dropdown-btn-bg-color);
827798
}
828-
.dropdownToolbarButton > select:hover,
829-
.dropdownToolbarButton > select:focus-visible {
799+
.dropdownToolbarButton > select:is(:hover, :focus-visible) {
830800
background-color: var(--button-hover-color);
831801
color: var(--toggled-btn-color);
832802
}
@@ -841,10 +811,8 @@ body {
841811
height: 1px;
842812
}
843813

844-
.toolbarButton::before,
845-
.secondaryToolbarButton::before,
846-
.dropdownToolbarButton::after,
847-
.treeItemToggler::before {
814+
:is(.toolbarButton, .secondaryToolbarButton, .treeItemToggler)::before,
815+
.dropdownToolbarButton::after {
848816
/* All matching images have a size of 16x16
849817
* All relevant containers have a size of 28x28 */
850818
position: absolute;
@@ -857,9 +825,7 @@ body {
857825
mask-size: cover;
858826
}
859827

860-
.dropdownToolbarButton:hover::after,
861-
.dropdownToolbarButton:focus-visible::after,
862-
.dropdownToolbarButton:active::after {
828+
.dropdownToolbarButton:is(:hover, :focus-visible, :active)::after {
863829
background-color: var(--toolbar-icon-hover-bg-color);
864830
}
865831

@@ -869,10 +835,8 @@ body {
869835
left: 6px;
870836
}
871837

872-
.toolbarButton:hover::before,
873-
.toolbarButton:focus-visible::before,
874-
.secondaryToolbarButton:hover::before,
875-
.secondaryToolbarButton:focus-visible::before {
838+
.toolbarButton:is(:hover, :focus-visible)::before,
839+
.secondaryToolbarButton:is(:hover, :focus-visible)::before {
876840
background-color: var(--toolbar-icon-hover-bg-color);
877841
}
878842

@@ -934,23 +898,20 @@ body {
934898
}
935899

936900
/*#if GENERIC*/
937-
#openFile::before,
938-
#secondaryOpenFile::before {
901+
:is(#openFile, #secondaryOpenFile)::before {
939902
mask-image: var(--toolbarButton-openFile-icon);
940903
}
941904
/*#endif*/
942905

943-
#download::before,
944-
#secondaryDownload::before {
906+
:is(#download, #secondaryDownload)::before {
945907
mask-image: var(--toolbarButton-download-icon);
946908
}
947909

948910
a.secondaryToolbarButton {
949911
padding-top: 5px;
950912
text-decoration: none;
951913
}
952-
a.toolbarButton[href="#"],
953-
a.secondaryToolbarButton[href="#"] {
914+
a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
954915
opacity: 0.5;
955916
pointer-events: none;
956917
}
@@ -1170,8 +1131,7 @@ a.secondaryToolbarButton[href="#"] {
11701131
padding: 10px 30px 0;
11711132
}
11721133

1173-
#thumbnailView > a:active,
1174-
#thumbnailView > a:focus {
1134+
#thumbnailView > a:is(:active, :focus) {
11751135
outline: 0;
11761136
}
11771137

@@ -1443,8 +1403,7 @@ dialog :link {
14431403
position: relative;
14441404
}
14451405

1446-
#printContainer > .printedPage canvas,
1447-
#printContainer > .printedPage img {
1406+
#printContainer > .printedPage :is(canvas, img) {
14481407
/* The intrinsic canvas / image size will make sure that we fit the page. */
14491408
max-width: 100%;
14501409
max-height: 100%;

0 commit comments

Comments
 (0)