MediaWiki:Gadget-QDmodal.css

  1 /* CSS for [[MediaWiki:Gadget-QDmodal.js]] */
  2 
  3 .qdmodal-no-scroll {
  4     overflow: hidden;
  5 }
  6 
  7 .qdmodal-container {
  8     background-color: hsla(0, 0%, 0%, 0.4);
  9     font-size: 14px;
 10     line-height: 22px;
 11 
 12     display: flex;
 13     justify-content: center;
 14     align-items: center;
 15     position: fixed;
 16     top: 0;
 17     left: 0;
 18     right: 0;
 19     bottom: 0;
 20     z-index: 101; /* #p-personal has z-index of 100 */
 21 }
 22 
 23 .qdmodal {
 24     color: #36414f;
 25     background-color: #e2dbc8;
 26     border-radius: 3px;
 27 
 28     display: flex;
 29     flex-direction: column;
 30     max-height: calc(100% - 50px);
 31     max-width: calc(100% - 50px);
 32     overflow: hidden;
 33 }
 34 
 35 @media (max-height: 500px) {
 36     
 37     .qdmodal {
 38         max-height: 100%;
 39     }
 40     
 41 }
 42 
 43 @media (max-width: 500px) {
 44     
 45     .qdmodal {
 46         max-width: 100%;
 47     }
 48     
 49 }
 50 
 51 .qdmodal > section {
 52     flex-grow: 1;
 53     padding: 20px;
 54     min-height: 40px;
 55     overflow-y: auto;
 56     -webkit-overflow-scrolling: touch; /* enable inertia scrolling on mobile */
 57 }
 58 
 59 .qdmodal > header,
 60 .qdmodal > footer {
 61     display: flex;
 62     background-color: #c0a886;
 63 }
 64 
 65 .qdmodal > header {
 66     min-height: 22px;
 67     padding: 12px 20px;
 68 }
 69 
 70 .qdmodal > footer {
 71     align-items: center;
 72     flex-direction: row-reverse;
 73     min-height: 27px;
 74     padding: 9px;
 75 }
 76 
 77 .qdmodal > header > h3 {
 78     flex-grow: 1;
 79     color: inherit;
 80     font-size: 1.3em;
 81     font-weight: bold;
 82     margin: 0;
 83     padding: 0;
 84     text-overflow: ellipsis;
 85     white-space: nowrap;
 86     overflow: hidden;
 87 }
 88 
 89 .qdmodal .diff-addedline,
 90 .qdmodal .diff-deletedline,
 91 .qdmodal .diff-context {
 92 	font-size: 90%;
 93 }
 94 
 95 .qdmodal-close {
 96     width: 28px;
 97     height: 28px;
 98     min-width: 28px;
 99     margin: -12px -20px;
100     margin-left: 0;
101     padding: 9px;
102 }
103 
104 .qdmodal-button {
105     border: 1px solid #e2dbc8;
106     border-radius: 3px;
107     color: inherit;
108     font-size: 0.9em;
109     line-height: 1;
110     cursor: default;
111     white-space: nowrap;
112 
113     display: block;
114     height: 1em;
115     margin-left: 12px;
116     padding: 6px 12px;
117 }
118 
119 .qdmodal-button[href] {
120     cursor: pointer;
121 }
122 
123 .qdmodal-button:visited {
124     color: inherit;
125 }
126 
127 .qdmodal-button[disabled] {
128     opacity: 0.6;
129     pointer-events: none;
130 }
131 
132 .qdmodal-close,
133 .qdmodal-button {
134     transition: background-color 0.2s;
135 }
136 
137 .qdmodal-close:hover,
138 .qdmodal-button:hover {
139     background-color: #d0bd97;
140     border-color: #777;
141     text-decoration: none;
142 }
143 
144 /* remove [ and ] brackets from rollback button */
145 .qdmodal .mw-rollback-link::before,
146 .qdmodal .mw-rollback-link::after {
147 	content: '';
148 }
149 
150 /* dark mode */
151 
152 .wgl-darkmode .qdmodal {
153 	color: #cbd9f4;
154 	background: #172136;
155 }
156 
157 .wgl-darkmode .qdmodal > header,
158 .wgl-darkmode .qdmodal > footer {
159 	background: #11192a;
160 }
161 
162 .wgl-darkmode .qdmodal .mw-ajax-loader {
163 	filter: invert(1);
164 }
165 
166 .wgl-darkmode .qdmodal-button {
167 	border-color: #596e96;
168 }
169 
170 .wgl-darkmode .qdmodal-close:hover,
171 .wgl-darkmode .qdmodal-button:hover {
172 	background: #222e45;
173 	border-color: #596e96;
174 }