make devtools tooltips have black background and blue border for readability
[themes.git] / LCARStrek / global / alerts / alert-common.css
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2  * License, v. 2.0. If a copy of the MPL was not distributed with this
3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5 /* ===== alert.css =====================================================
6   == Shared styles specific to the alerts dialog.
7   ======================================================================= */
8
9 @import url("chrome://global/skin/");
10
11 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
12
13 #alertBox[animate] {
14   animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
15 }
16
17 #alertBox[animate][clicked] {
18   animation-duration: .6s;
19   animation-name: alert-zoom-animation;
20 }
21
22 /* This is used if the close button is clicked
23    before the animation has finished. */
24 #alertBox[animate][closing] {
25   animation-duration: .6s;
26   animation-name: alert-fadeout-animation;
27 }
28
29 #alertBox[animate]:not([clicked]):not([closing]):hover {
30   /* !important is necessary because CSS animations have highest
31      importance in the cascade with exception to !important rules. */
32   opacity: 1 !important;
33 }
34
35 @keyframes alert-animation {
36   from {
37     opacity: 0;
38   }
39   5% {
40     opacity: 1;
41   }
42   95% {
43     opacity: 1;
44   }
45   to {
46     opacity: 0;
47   }
48 }
49
50 @keyframes alert-zoom-animation {
51   to {
52     opacity: 0;
53   }
54 }
55
56 @keyframes alert-fadeout-animation {
57   to {
58     opacity: 0;
59   }
60 }
61
62 #alertIcon {
63   margin-top: 6px;
64   margin-inline-start: 8px;
65   margin-inline-end: 0;
66   margin-bottom: 0;
67   width: 16px;
68   min-height: 16px;
69   max-height: 16px;
70 }
71
72 @media (resolution: 2dppx) {
73   #alertIcon {
74     image-rendering: -moz-crisp-edges;
75   }
76 }
77
78 #alertImage {
79   width: 80px;
80   height: 80px;
81   max-width: 80px;
82   max-height: 80px;
83   object-fit: scale-down;
84   margin: 0 7px 7px;
85 }
86
87 .alertTextBox {
88   padding-top: 4px;
89   /* The text box width is increased to make up for the lack of image when one
90      is not provided. 349px is the text box width when a picture is present,
91      255px, plus the width of the image, 80px, and the margins, 7px each. */
92   width: 349px;
93 }
94
95 #alertBox[hasImage] > box > #alertTextBox {
96   width: 255px;
97 }
98
99 #alertBox:not([hasImage]) > box > #alertTextBox {
100   padding-inline-start: 8px;
101 }
102
103 #alertTextLabel {
104   padding-inline-end: 8px;
105 }
106
107 .alertTitle {
108   -moz-box-flex: 1;
109   font-weight: bold;
110   padding: 6px 8px 0;
111   width: 255px;
112 }
113
114 #alertFooter {
115   -moz-box-align: start;
116 }
117
118 #alertBox:not([hasOrigin]) > box > #alertTextBox,
119 #alertFooter {
120   padding-bottom: 5px;
121 }
122
123 #alertSourceLabel {
124   -moz-box-flex: 1;
125   font-size: 83.334%;
126   color: #A09090;
127 }
128
129 #alertSettings {
130   border-radius: 20px;
131   min-width: 0;
132   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale");
133   margin-inline-end: 0;
134   margin-bottom: 0;
135 }
136
137 #alertSettings > .button-box {
138   padding: 0;
139 }
140
141 #alertSettings:hover,
142 #alertSettings[open] {
143   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted");
144 }
145
146 #alertSettings:hover {
147 }
148
149 #alertSettings[open],
150 #alertSettings:hover:active {
151 }
152
153 #alertSettings[focusedViaMouse]:-moz-focusring > .button-box {
154   border-color: transparent;
155 }
156
157 #alertSettings > .button-box > .button-menu-dropmarker,
158 #alertSettings > .button-box > .box-inherit > .button-text {
159   display: none;
160 }