resources/lib/oojs-ui/oojs-ui-toolbars-wikimediaui.css

   1 /*!
   2  * OOUI v0.25.1
   3  * https://www.mediawiki.org/wiki/OOUI
   4  *
   5  * Copyright 2011–2018 OOUI Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: 2018-01-17T01:47:20Z
  10  */
  11 /**
  12  * WikimediaUI Base v0.10.0
  13  * Wikimedia Foundation user interface base variables
  14  */
  15 .oo-ui-tool {
  16   -webkit-box-sizing: border-box;
  17   -moz-box-sizing: border-box;
  18   box-sizing: border-box;
  19 }
  20 .oo-ui-tool .oo-ui-tool-link {
  21   position: relative;
  22   -webkit-box-sizing: border-box;
  23   -moz-box-sizing: border-box;
  24   box-sizing: border-box;
  25   padding-top: 3.125em;
  26   padding-left: 3.125em;
  27 }
  28 .oo-ui-tool-with-label .oo-ui-tool-link {
  29   padding: 1.015625em 0.9375em 0.9375em 2.96875em;
  30 }
  31 .oo-ui-tool.oo-ui-iconElement .oo-ui-iconElement-icon {
  32   display: block;
  33   left: 0.625em;
  34 }
  35 .oo-ui-tool .oo-ui-tool-title {
  36   line-height: 1.172em;
  37 }
  38 .oo-ui-tool.oo-ui-widget-enabled {
  39   -webkit-transition: background-color 100ms;
  40   -moz-transition: background-color 100ms;
  41   transition: background-color 100ms;
  42 }
  43 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-iconElement-icon {
  44   opacity: 0.87;
  45   -webkit-transition: opacity 100ms;
  46   -moz-transition: opacity 100ms;
  47   transition: opacity 100ms;
  48 }
  49 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-title {
  50   -webkit-transition: color 100ms;
  51   -moz-transition: color 100ms;
  52   transition: color 100ms;
  53 }
  54 .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {
  55   opacity: 1;
  56 }
  57 .oo-ui-tool.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] .oo-ui-iconElement-icon {
  58   opacity: 1;
  59 }
  60 .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
  61   opacity: 0.34;
  62 }
  63 .oo-ui-popupTool .oo-ui-popupWidget-popup,
  64 .oo-ui-popupTool .oo-ui-popupWidget-anchor {
  65   z-index: 4;
  66 }
  67 .oo-ui-toolGroupTool > .oo-ui-toolGroup {
  68   border-right: 0;
  69 }
  70 .oo-ui-toolGroup {
  71   display: inline-block;
  72   vertical-align: middle;
  73   -webkit-box-sizing: border-box;
  74   -moz-box-sizing: border-box;
  75   box-sizing: border-box;
  76   border-right: 1px solid #c8ccd1;
  77 }
  78 .oo-ui-toolGroup-empty {
  79   display: none;
  80 }
  81 .oo-ui-toolGroup .oo-ui-tool-link {
  82   text-decoration: none;
  83   cursor: pointer;
  84 }
  85 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-tool-link,
  86 .oo-ui-toolGroup .oo-ui-widget-disabled > .oo-ui-tool-link {
  87   outline: 0;
  88   cursor: default;
  89 }
  90 .oo-ui-toolbar-actions .oo-ui-toolGroup {
  91   border-right: 0;
  92   border-left: 1px solid #c8ccd1;
  93 }
  94 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator,
  95 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
  96   opacity: 0.34 !important;
  97 }
  98 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
  99   display: inline-block;
 100   position: relative;
 101   vertical-align: top;
 102 }
 103 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
 104   display: block;
 105 }
 106 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-accel {
 107   display: none;
 108 }
 109 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-tool-title {
 110   display: none;
 111 }
 112 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement.oo-ui-tool-with-label > .oo-ui-tool-link .oo-ui-tool-title {
 113   display: inline;
 114 }
 115 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.iconElement > .oo-ui-tool-link > .oo-ui-iconElement-icon {
 116   display: block;
 117 }
 118 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-widget-enabled:hover {
 119   background-color: #eaecf0;
 120 }
 121 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-widget-enabled > .oo-ui-tool-link .oo-ui-tool-title {
 122   color: #222;
 123   -webkit-transition: color 100ms;
 124   -moz-transition: color 100ms;
 125   transition: color 100ms;
 126 }
 127 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active {
 128   background-color: #eaf3ff;
 129 }
 130 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active:hover {
 131   background-color: rgba(41, 98, 204, 0.1);
 132 }
 133 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active > .oo-ui-tool-link .oo-ui-tool-title {
 134   color: #36c;
 135 }
 136 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link .oo-ui-tool-title,
 137 .oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
 138   color: #72777d;
 139 }
 140 .oo-ui-popupToolGroup {
 141   position: relative;
 142   min-width: 3.125em;
 143 }
 144 .oo-ui-popupToolGroup-handle {
 145   display: block;
 146   cursor: pointer;
 147 }
 148 .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle {
 149   outline: 0;
 150   cursor: default;
 151 }
 152 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 153   display: none;
 154   position: absolute;
 155   z-index: 4;
 156 }
 157 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools {
 158   display: block;
 159 }
 160 .oo-ui-popupToolGroup-left > .oo-ui-toolGroup-tools {
 161   left: 0;
 162 }
 163 .oo-ui-popupToolGroup-right > .oo-ui-toolGroup-tools {
 164   right: 0;
 165 }
 166 .oo-ui-popupToolGroup .oo-ui-tool-link {
 167   display: table;
 168   width: 100%;
 169   vertical-align: middle;
 170   white-space: nowrap;
 171 }
 172 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel,
 173 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
 174   display: table-cell;
 175   vertical-align: middle;
 176 }
 177 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
 178   text-align: right;
 179 }
 180 .oo-ui-popupToolGroup.oo-ui-indicatorElement:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) {
 181   min-width: 2.1875em;
 182 }
 183 .oo-ui-popupToolGroup-handle {
 184   -webkit-box-sizing: border-box;
 185   -moz-box-sizing: border-box;
 186   box-sizing: border-box;
 187 }
 188 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
 189   left: 0.625em;
 190 }
 191 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 192   background-position: center 52%;
 193   right: 0.625em;
 194 }
 195 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 196   right: 0.3125em;
 197 }
 198 .oo-ui-popupToolGroup.oo-ui-iconElement .oo-ui-popupToolGroup-handle,
 199 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 200   padding-top: 3.125em;
 201 }
 202 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 203   padding-left: 3.125em;
 204 }
 205 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
 206   padding: 1.015625em 0.9375em 0.9375em;
 207 }
 208 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
 209   line-height: 1.172em;
 210 }
 211 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
 212   padding-left: 2.96875em;
 213 }
 214 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 215   padding-right: 2.1875em;
 216 }
 217 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 218   padding-right: 1.5625em;
 219 }
 220 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 221   padding-right: 1.25em;
 222 }
 223 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 224   padding-right: 0.9375em;
 225 }
 226 .oo-ui-popupToolGroup:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) .oo-ui-indicatorElement-indicator {
 227   opacity: 1;
 228 }
 229 .oo-ui-popupToolGroup-header {
 230   color: #72777d;
 231   padding: 0 0.9375em;
 232   font-weight: bold;
 233   line-height: 2.5em;
 234 }
 235 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 236   margin: 0 -1px;
 237   border: 1px solid #c8ccd1;
 238   background-color: #fff;
 239   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
 240   min-width: 16em;
 241 }
 242 .oo-ui-toolbar-position-top .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 243   top: 3.125em;
 244 }
 245 .oo-ui-toolbar-position-bottom .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 246   bottom: 3.125em;
 247 }
 248 .oo-ui-popupToolGroup .oo-ui-tool-link {
 249   padding: 1.015625em 0.9375em 0.9375em 2.96875em;
 250 }
 251 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
 252   color: #222;
 253 }
 254 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
 255   color: #72777d;
 256   line-height: 1.172em;
 257 }
 258 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
 259   padding-left: 1.40625em;
 260 }
 261 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
 262   -webkit-transition: background-color 100ms, box-shadow 100ms;
 263   -moz-transition: background-color 100ms, box-shadow 100ms;
 264   transition: background-color 100ms, box-shadow 100ms;
 265 }
 266 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
 267   background-color: #eaecf0;
 268 }
 269 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
 270   background-color: #eaf3ff;
 271 }
 272 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
 273 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 274   opacity: 0.87;
 275   -webkit-transition: opacity 100ms;
 276   -moz-transition: opacity 100ms;
 277   transition: opacity 100ms;
 278 }
 279 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon,
 280 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-iconElement-icon,
 281 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover .oo-ui-indicatorElement-indicator,
 282 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-indicatorElement-indicator {
 283   opacity: 1;
 284 }
 285 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
 286 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon {
 287   opacity: 1;
 288 }
 289 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
 290   background-color: #eaf3ff;
 291   color: #36c;
 292 }
 293 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover {
 294   background-color: rgba(41, 98, 204, 0.1);
 295   color: #36c;
 296 }
 297 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
 298   color: #36c;
 299 }
 300 .oo-ui-listToolGroup .oo-ui-tool {
 301   display: block;
 302   -webkit-box-sizing: border-box;
 303   -moz-box-sizing: border-box;
 304   box-sizing: border-box;
 305 }
 306 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 307   background-color: #eaecf0;
 308   color: #000;
 309 }
 310 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
 311   background-color: #eaf3ff;
 312 }
 313 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
 314   background-color: rgba(41, 98, 204, 0.1);
 315 }
 316 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
 317   color: #36c;
 318 }
 319 .oo-ui-listToolGroup.oo-ui-widget-disabled,
 320 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
 321   color: #72777d;
 322 }
 323 .oo-ui-menuToolGroup .oo-ui-tool {
 324   display: block;
 325 }
 326 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
 327   min-width: 10em;
 328 }
 329 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
 330   min-width: 8.125em;
 331 }
 332 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
 333   left: 0.625em;
 334 }
 335 .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconElement-icon {
 336   background-image: url('themes/wikimediaui/images/icons/check-progressive.png');
 337   background-image: linear-gradient(transparent, transparent), /* @embed */ url('themes/wikimediaui/images/icons/check-progressive.svg');
 338   background-size: contain;
 339 }
 340 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 341   background-color: rgba(41, 98, 204, 0.1);
 342 }
 343 .oo-ui-menuToolGroup .oo-ui-tool-name-menuTool.oo-ui-tool-active {
 344   background-color: #eaf3ff;
 345 }
 346 .oo-ui-menuToolGroup.oo-ui-widget-disabled,
 347 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
 348   color: #72777d;
 349 }
 350 .oo-ui-toolbar {
 351   clear: both;
 352 }
 353 .oo-ui-toolbar-bar {
 354   line-height: 1;
 355   position: relative;
 356 }
 357 .oo-ui-toolbar-tools,
 358 .oo-ui-toolbar-actions {
 359   -webkit-touch-callout: none;
 360   -webkit-user-select: none;
 361   -moz-user-select: none;
 362   -ms-user-select: none;
 363   user-select: none;
 364 }
 365 .oo-ui-toolbar-tools {
 366   display: inline;
 367   white-space: nowrap;
 368 }
 369 .oo-ui-toolbar-narrow .oo-ui-toolbar-tools,
 370 .oo-ui-toolbar-tools .oo-ui-tool {
 371   white-space: normal;
 372 }
 373 .oo-ui-toolbar-actions {
 374   float: right;
 375 }
 376 .oo-ui-toolbar-actions .oo-ui-toolbar {
 377   display: inline-block;
 378 }
 379 .oo-ui-toolbar-actions .oo-ui-popupWidget {
 380   -webkit-touch-callout: default;
 381   -webkit-user-select: text;
 382   -moz-user-select: text;
 383   -ms-user-select: text;
 384   user-select: text;
 385 }
 386 .oo-ui-toolbar-bar {
 387   background-color: #fff;
 388   color: #222;
 389 }
 390 .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
 391   border-bottom: 1px solid #c8ccd1;
 392   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 393 }
 394 .oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
 395   border-top: 1px solid #c8ccd1;
 396   box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.1);
 397 }
 398 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
 399   background-color: transparent;
 400   border: 0;
 401   box-shadow: none;
 402 }
 403 .oo-ui-toolbar-narrow-bar:after {
 404   content: '';
 405   display: block;
 406   position: absolute;
 407   top: 3.125em;
 408   left: 0;
 409   width: 100%;
 410   height: 0;
 411 }
 412 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-top .oo-ui-toolbar-bar:after {
 413   border-bottom: 1px solid #c8ccd1;
 414 }
 415 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-bottom .oo-ui-toolbar-bar:after {
 416   border-top: 1px solid #c8ccd1;
 417 }
 418 .oo-ui-toolbar-actions > .oo-ui-buttonElement {
 419   margin-right: 0;
 420 }
 421 .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
 422   border: 0;
 423   border-radius: 0;
 424   padding-top: 3.125em;
 425   padding-left: 1.25em;
 426   padding-right: 1.25em;
 427 }
 428 .oo-ui-toolbar-narrow .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
 429   padding-left: 0.9375em;
 430   padding-right: 0.9375em;
 431 }
 432 .oo-ui-toolbar-actions > .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
 433   padding-top: 1.015625em;
 434   padding-bottom: 0.9375em;
 435 }
 436 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
 437   border-radius: 0;
 438 }
 439 .oo-ui-toolbar-actions > .oo-ui-toolbar:not( :last-child ) {
 440   border-right: 1px solid #c8ccd1;
 441 }