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

   1 /*!
   2  * OOUI v0.51.1
   3  * https://www.mediawiki.org/wiki/OOUI
   4  *
   5  * Copyright 2011–2024 OOUI Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: 2024-09-19T17:13:45Z
  10  */
  11 .oo-ui-tool {
  12   box-sizing: border-box;
  13 }
  14 .oo-ui-tool > .oo-ui-tool-link > .oo-ui-tool-checkIcon {
  15   display: none;
  16 }
  17 .oo-ui-tool .oo-ui-tool-link {
  18   position: relative;
  19   box-sizing: border-box;
  20   padding-top: 3em;
  21   padding-left: 3em;
  22 }
  23 .oo-ui-toolbar-narrow .oo-ui-tool .oo-ui-tool-link {
  24   padding-left: 2.85714286em;
  25 }
  26 .oo-ui-tool.oo-ui-tool-with-label .oo-ui-tool-link {
  27   padding: 11px 12px 11px 12px;
  28 }
  29 .oo-ui-tool.oo-ui-tool-with-icon.oo-ui-tool-with-label .oo-ui-tool-link {
  30   padding: 11px 12px 11px 2.64285714em;
  31 }
  32 .oo-ui-tool .oo-ui-iconElement-icon {
  33   display: block;
  34   left: 0.78571429em;
  35 }
  36 .oo-ui-toolbar-narrow .oo-ui-tool .oo-ui-iconElement-icon {
  37   left: 0.71428571em;
  38 }
  39 .oo-ui-tool .oo-ui-tool-title {
  40   line-height: 1.42857143em;
  41 }
  42 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link {
  43   transition-property: background-color;
  44   transition-duration: 100ms;
  45 }
  46 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
  47   outline: 1px solid var(--border-color-progressive--focus, #36c);
  48   box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
  49   z-index: 1;
  50 }
  51 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-iconElement-icon {
  52   opacity: 0.87;
  53   transition-property: opacity;
  54   transition-duration: 100ms;
  55   transform: translateZ(0);
  56 }
  57 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-title {
  58   transition-property: color;
  59   transition-duration: 100ms;
  60 }
  61 .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {
  62   opacity: 1;
  63 }
  64 .oo-ui-tool.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] .oo-ui-iconElement-icon {
  65   opacity: 1;
  66 }
  67 .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link {
  68   color: inherit;
  69 }
  70 .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover {
  71   background-color: var(--background-color-interactive, #eaecf0);
  72 }
  73 .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:focus {
  74   outline: 1px solid var(--color-progressive--focus, #36c);
  75   box-shadow: inset 0 0 0 1px var(--color-progressive--focus, #36c);
  76 }
  77 .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active,
  78 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link,
  79 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link {
  80   background-color: var(--background-color-progressive-subtle, #eaf3ff);
  81   color: var(--color-progressive, #36c);
  82   box-shadow: none;
  83 }
  84 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
  85   color: var(--color-progressive, #36c);
  86 }
  87 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover {
  88   background-color: var(--background-color-interactive, #eaecf0);
  89 }
  90 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:focus {
  91   outline: 1px solid var(--color-progressive--focus, #36c);
  92   box-shadow: inset 0 0 0 1px var(--color-progressive--focus, #36c);
  93 }
  94 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active,
  95 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-tool-link,
  96 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-tool-link {
  97   background-color: var(--background-color-progressive-subtle, #eaf3ff);
  98   color: var(--color-progressive--active, #233566);
  99   box-shadow: none;
 100 }
 101 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-tool-link {
 102   color: var(--color-destructive, #d73333);
 103 }
 104 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:hover {
 105   background-color: var(--background-color-interactive, #eaecf0);
 106 }
 107 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:focus {
 108   outline: 1px solid var(--color-destructive--focus, #36c);
 109   box-shadow: inset 0 0 0 1px var(--color-destructive--focus, #36c);
 110 }
 111 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:active,
 112 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-tool-active > .oo-ui-tool-link,
 113 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-tool-link {
 114   background-color: var(--background-color-destructive-subtle, #ffe9e5);
 115   color: var(--color-destructive--active, #9f3526);
 116   box-shadow: none;
 117 }
 118 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
 119   color: var(--color-inverted, #fff);
 120   background-color: var(--color-progressive, #36c);
 121 }
 122 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover {
 123   background-color: var(--color-progressive--hover, #4b77d6);
 124 }
 125 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:focus {
 126   outline: 1px solid var(--color-progressive--focus, #36c);
 127   box-shadow: inset 0 0 0 1px var(--color-progressive--focus, #36c), inset 0 0 0 2px var(--color-inverted, #fff);
 128 }
 129 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active,
 130 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-tool-link {
 131   color: var(--color-inverted, #fff);
 132   background-color: var(--color-progressive--active, #233566);
 133   box-shadow: none;
 134 }
 135 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-tool-link,
 136 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-tool-link:active {
 137   background-color: var(--background-color-disabled, #c8ccd1);
 138   color: var(--color-inverted, #fff);
 139 }
 140 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-tool-link {
 141   color: var(--color-inverted, #fff);
 142   background-color: var(--color-destructive, #d73333);
 143 }
 144 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:hover {
 145   background-color: var(--color-destructive--hover, #fc493b);
 146 }
 147 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:focus {
 148   outline: 1px solid var(--color-destructive--focus, #36c);
 149   box-shadow: inset 0 0 0 1px var(--color-destructive--focus, #36c), inset 0 0 0 2px var(--color-inverted, #fff);
 150 }
 151 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-tool-link:active,
 152 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-tool-active > .oo-ui-tool-link {
 153   color: var(--color-inverted, #fff);
 154   background-color: var(--color-destructive--active, #9f3526);
 155   box-shadow: none;
 156 }
 157 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-tool-link,
 158 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-tool-link:active {
 159   background-color: var(--background-color-disabled, #c8ccd1);
 160   color: var(--color-inverted, #fff);
 161 }
 162 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
 163   font-weight: 700;
 164 }
 165 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link > .oo-ui-iconElement-icon,
 166 .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link > .oo-ui-indicatorElement-indicator {
 167   opacity: 1;
 168 }
 169
 170 .oo-ui-popupTool-popup.oo-ui-popupWidget {
 171   z-index: 4;
 172 }
 173
 174 .oo-ui-toolGroupTool > .oo-ui-toolGroup {
 175   border-right: 0;
 176 }
 177
 178 .oo-ui-toolGroup {
 179   display: inline-block;
 180   vertical-align: middle;
 181   box-sizing: border-box;
 182 }
 183 .oo-ui-toolGroup-empty {
 184   display: none;
 185 }
 186 .oo-ui-toolGroup-tools .oo-ui-tool-link {
 187   color: inherit;
 188   text-decoration: none;
 189   cursor: pointer;
 190 }
 191 .oo-ui-toolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool-link,
 192 .oo-ui-toolGroup-tools .oo-ui-widget-disabled > .oo-ui-tool-link {
 193   outline: 0;
 194   cursor: default;
 195 }
 196 .oo-ui-toolGroup.oo-ui-widget-disabled:not( .oo-ui-flaggedElement-primary ) .oo-ui-indicatorElement-indicator,
 197 .oo-ui-toolGroup.oo-ui-widget-disabled:not( .oo-ui-flaggedElement-primary ) .oo-ui-iconElement-icon {
 198   opacity: 0.3 !important;
 199 }
 200
 201 .oo-ui-barToolGroup-tools > .oo-ui-tool {
 202   display: inline-block;
 203   position: relative;
 204   vertical-align: top;
 205 }
 206 .oo-ui-barToolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
 207   display: block;
 208 }
 209 .oo-ui-barToolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-accel {
 210   display: none;
 211 }
 212 .oo-ui-barToolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-tool-title {
 213   display: none;
 214 }
 215 .oo-ui-barToolGroup-tools > .oo-ui-tool.oo-ui-iconElement.oo-ui-tool-with-label > .oo-ui-tool-link .oo-ui-tool-title {
 216   display: inline-block;
 217 }
 218 .oo-ui-barToolGroup-tools > .oo-ui-tool + .oo-ui-tool {
 219   margin-left: -2px;
 220 }
 221 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon,
 222 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool .oo-ui-iconElement-icon {
 223   opacity: 0.3;
 224 }
 225 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link,
 226 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
 227   background-color: var(--background-color-disabled, #c8ccd1);
 228   border-color: var(--border-color-disabled, #c8ccd1);
 229 }
 230 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link .oo-ui-tool-title,
 231 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link .oo-ui-tool-title {
 232   color: var(--color-inverted, #fff);
 233 }
 234 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary.oo-ui-tool-active > .oo-ui-tool-link,
 235 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary.oo-ui-tool-active > .oo-ui-tool-link {
 236   background-color: #919fb9;
 237 }
 238 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary .oo-ui-iconElement-icon,
 239 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary .oo-ui-iconElement-icon {
 240   opacity: 1;
 241 }
 242 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link .oo-ui-tool-title,
 243 .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
 244   color: var(--color-disabled, #72777d);
 245 }
 246
 247 .oo-ui-popupToolGroup {
 248   position: relative;
 249   min-width: 3em;
 250 }
 251 .oo-ui-popupToolGroup-handle {
 252   display: block;
 253   cursor: pointer;
 254 }
 255 .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label:not( :empty ) {
 256   display: inline-block;
 257 }
 258 .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle {
 259   outline: 0;
 260   cursor: default;
 261 }
 262 .oo-ui-popupToolGroup-tools {
 263   display: none;
 264   position: absolute;
 265   z-index: 4;
 266 }
 267 .oo-ui-popupToolGroup-tools.oo-ui-popupToolGroup-active-tools {
 268   display: block;
 269 }
 270 .oo-ui-popupToolGroup-tools .oo-ui-tool-link {
 271   display: table;
 272   width: 100%;
 273   vertical-align: middle;
 274   white-space: nowrap;
 275 }
 276 .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel,
 277 .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-title {
 278   display: table-cell;
 279   vertical-align: middle;
 280 }
 281 .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel {
 282   text-align: right;
 283 }
 284 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup {
 285   min-width: 2.85714286em;
 286 }
 287 .oo-ui-popupToolGroup.oo-ui-indicatorElement:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) {
 288   min-width: 1.85714286em;
 289 }
 290 .oo-ui-popupToolGroup-handle {
 291   box-sizing: border-box;
 292 }
 293 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
 294   left: 0.78571429em;
 295 }
 296 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
 297   left: 0.64285714em;
 298 }
 299 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 300   background-position: center 52%;
 301   right: 0.57142857em;
 302 }
 303 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 304   right: 0.28571429em;
 305 }
 306 .oo-ui-popupToolGroup.oo-ui-iconElement .oo-ui-popupToolGroup-handle,
 307 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 308   padding-top: 3em;
 309 }
 310 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 311   padding-left: 3em;
 312 }
 313 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 314   padding-left: 2.85714286em;
 315 }
 316 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
 317   padding: 11px 12px;
 318 }
 319 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
 320   line-height: 1.42857143em;
 321 }
 322 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
 323   padding-left: 0.71428571em;
 324   padding-right: 0.71428571em;
 325 }
 326 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
 327   padding-left: 2.64285714em;
 328 }
 329 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
 330   padding-left: 2.5em;
 331 }
 332 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 333   padding-right: 1.85714286em;
 334 }
 335 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 336   padding-right: 1.28571429em;
 337 }
 338 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 339   padding-right: 1.14285714em;
 340 }
 341 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 342   padding-right: 0.85714286em;
 343 }
 344 .oo-ui-popupToolGroup:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) .oo-ui-indicatorElement-indicator {
 345   opacity: 1;
 346 }
 347 .oo-ui-popupToolGroup-header {
 348   color: var(--color-base--subtle, #72777d);
 349   padding: 0 12px;
 350   font-weight: 700;
 351   line-height: 2.2857143em;
 352 }
 353 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-header {
 354   padding: 0 0.71428571em;
 355 }
 356 .oo-ui-popupToolGroup-tools {
 357   background-color: var(--background-color-base, #fff);
 358   min-width: 16em;
 359   margin: 0 -1px;
 360   border: 1px solid var(--border-color-subtle, #c8ccd1);
 361   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
 362 }
 363 .oo-ui-popupToolGroup-tools .oo-ui-tool-link {
 364   padding: 11px 12px;
 365 }
 366 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-tools .oo-ui-tool-link {
 367   padding-left: 0.71428571em;
 368   padding-right: 0.71428571em;
 369 }
 370 .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel {
 371   color: var(--color-base--subtle, #72777d);
 372   line-height: 1.42857143em;
 373 }
 374 .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
 375   padding-left: 1.28571429em;
 376 }
 377 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
 378   padding-left: 1.14285714em;
 379 }
 380 .oo-ui-popupToolGroup-tools .oo-ui-iconElement .oo-ui-tool-link {
 381   padding-left: 2.64285714em;
 382 }
 383 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-tools .oo-ui-iconElement .oo-ui-tool-link {
 384   padding-left: 2.5em;
 385 }
 386 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
 387   transition-property: background-color, box-shadow;
 388   transition-duration: 100ms;
 389 }
 390 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
 391 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 392   opacity: 0.87;
 393   transition-property: opacity;
 394   transition-duration: 100ms;
 395   transform: translateZ(0);
 396 }
 397 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon,
 398 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-iconElement-icon,
 399 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover .oo-ui-indicatorElement-indicator,
 400 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-indicatorElement-indicator {
 401   opacity: 1;
 402 }
 403 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:focus {
 404   outline: 1px solid var(--border-color-progressive--focus, #36c);
 405   box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
 406 }
 407 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
 408 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon {
 409   opacity: 1;
 410 }
 411 .oo-ui-popupToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
 412   outline: 1px solid transparent;
 413   box-shadow: inset 0 0 0 2px var(--box-shadow-color-progressive--focus, #36c);
 414 }
 415 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
 416   color: inherit;
 417 }
 418 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
 419   background-color: var(--background-color-interactive, #eaecf0);
 420 }
 421 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:focus {
 422   outline: 1px solid var(--color-progressive--focus, #36c);
 423   box-shadow: inset 0 0 0 1px var(--color-progressive--focus, #36c);
 424 }
 425 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active,
 426 .oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-popupToolGroup-handle,
 427 .oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
 428   background-color: var(--background-color-progressive-subtle, #eaf3ff);
 429   color: var(--color-progressive, #36c);
 430   box-shadow: none;
 431 }
 432 .oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle {
 433   color: var(--color-progressive, #36c);
 434 }
 435 .oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:hover {
 436   background-color: var(--background-color-base, #fff);
 437 }
 438 .oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:focus {
 439   outline: 1px solid var(--color-progressive--focus, #36c);
 440   box-shadow: inset 0 0 0 1px var(--color-progressive--focus, #36c);
 441 }
 442 .oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:active,
 443 .oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-popupToolGroup-handle,
 444 .oo-ui-popupToolGroup.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
 445   background-color: var(--background-color-progressive-subtle, #eaf3ff);
 446   color: var(--color-progressive--active, #233566);
 447   box-shadow: none;
 448 }
 449 .oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle {
 450   color: var(--color-destructive, #d73333);
 451 }
 452 .oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:hover {
 453   background-color: var(--background-color-base, #fff);
 454 }
 455 .oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:focus {
 456   outline: 1px solid var(--color-destructive--focus, #36c);
 457   box-shadow: inset 0 0 0 1px var(--color-destructive--focus, #36c);
 458 }
 459 .oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:active,
 460 .oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive.oo-ui-tool-active > .oo-ui-popupToolGroup-handle,
 461 .oo-ui-popupToolGroup.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
 462   background-color: var(--background-color-destructive-subtle, #ffe9e5);
 463   color: var(--color-destructive--active, #9f3526);
 464   box-shadow: none;
 465 }
 466 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle {
 467   color: var(--color-inverted, #fff);
 468   background-color: var(--color-progressive, #36c);
 469 }
 470 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:hover {
 471   background-color: var(--color-progressive--hover, #4b77d6);
 472 }
 473 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:focus {
 474   outline: 1px solid var(--color-progressive--focus, #36c);
 475   box-shadow: inset 0 0 0 1px var(--color-progressive--focus, #36c), inset 0 0 0 2px var(--color-inverted, #fff);
 476 }
 477 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:active,
 478 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-popupToolGroup-handle {
 479   color: var(--color-inverted, #fff);
 480   background-color: var(--color-progressive--active, #233566);
 481   box-shadow: none;
 482 }
 483 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle,
 484 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle:active {
 485   background-color: var(--background-color-disabled, #c8ccd1);
 486   color: var(--color-inverted, #fff);
 487 }
 488 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle {
 489   color: var(--color-inverted, #fff);
 490   background-color: var(--color-destructive, #d73333);
 491 }
 492 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:hover {
 493   background-color: var(--color-destructive--hover, #fc493b);
 494 }
 495 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:focus {
 496   outline: 1px solid var(--color-destructive--focus, #36c);
 497   box-shadow: inset 0 0 0 1px var(--color-destructive--focus, #36c), inset 0 0 0 2px var(--color-inverted, #fff);
 498 }
 499 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-popupToolGroup-handle:active,
 500 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-tool-active > .oo-ui-popupToolGroup-handle {
 501   color: var(--color-inverted, #fff);
 502   background-color: var(--color-destructive--active, #9f3526);
 503   box-shadow: none;
 504 }
 505 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle,
 506 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-disabled > .oo-ui-popupToolGroup-handle:active {
 507   background-color: var(--background-color-disabled, #c8ccd1);
 508   color: var(--color-inverted, #fff);
 509 }
 510 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary > .oo-ui-popupToolGroup-handle > .oo-ui-iconElement-icon,
 511 .oo-ui-popupToolGroup.oo-ui-flaggedElement-primary > .oo-ui-popupToolGroup-handle > .oo-ui-indicatorElement-indicator {
 512   opacity: 1;
 513 }
 514
 515 .oo-ui-listToolGroup-tools .oo-ui-tool {
 516   display: block;
 517   box-sizing: border-box;
 518 }
 519 .oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
 520   color: var(--color-disabled, #72777d);
 521 }
 522 .oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator,
 523 .oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
 524   opacity: 0.3;
 525 }
 526 .oo-ui-listToolGroup.oo-ui-widget-disabled {
 527   color: var(--color-disabled, #72777d);
 528 }
 529 .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator,
 530 .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
 531   opacity: 0.3;
 532 }
 533
 534 .oo-ui-menuToolGroup {
 535   border-left: 1px solid #eaecf0;
 536   border-right: 1px solid #eaecf0;
 537 }
 538 .oo-ui-menuToolGroup-tools .oo-ui-tool {
 539   display: block;
 540 }
 541 .oo-ui-menuToolGroup + .oo-ui-menuToolGroup {
 542   border-left: 0;
 543 }
 544 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
 545   min-width: 140px;
 546 }
 547 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
 548   min-width: 100px;
 549 }
 550 .oo-ui-menuToolGroup-tools .oo-ui-tool-link .oo-ui-iconElement-icon {
 551   left: 0.78571429em;
 552 }
 553 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup-tools .oo-ui-tool-link .oo-ui-iconElement-icon {
 554   left: 0.71428571em;
 555 }
 556 .oo-ui-menuToolGroup.oo-ui-widget-disabled,
 557 .oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
 558   color: var(--color-disabled, #72777d);
 559 }
 560
 561 .oo-ui-toolbar {
 562   clear: both;
 563 }
 564 .oo-ui-toolbar-bar {
 565   line-height: 1;
 566   position: relative;
 567 }
 568 .oo-ui-toolbar-tools,
 569 .oo-ui-toolbar-actions {
 570   -webkit-touch-callout: none;
 571   -webkit-user-select: none;
 572   -moz-user-select: none;
 573   -ms-user-select: none;
 574   user-select: none;
 575 }
 576 .oo-ui-toolbar-tools {
 577   display: inline;
 578 }
 579 .oo-ui-toolbar-popups {
 580   position: absolute;
 581 }
 582 .oo-ui-toolbar-tools,
 583 .oo-ui-toolbar-popups {
 584   white-space: nowrap;
 585 }
 586 .oo-ui-toolbar-tools .oo-ui-tool,
 587 .oo-ui-toolbar-popups .oo-ui-tool,
 588 .oo-ui-toolbar-tools .oo-ui-popupTool-popup,
 589 .oo-ui-toolbar-popups .oo-ui-popupTool-popup {
 590   white-space: normal;
 591   -webkit-touch-callout: default;
 592   -webkit-user-select: text;
 593   -moz-user-select: text;
 594   -ms-user-select: text;
 595   user-select: text;
 596 }
 597 .oo-ui-toolbar-narrow .oo-ui-toolbar-tools,
 598 .oo-ui-toolbar-narrow.oo-ui-toolbar-popups {
 599   white-space: normal;
 600 }
 601 .oo-ui-toolbar-after {
 602   float: right;
 603 }
 604 .oo-ui-toolbar-actions {
 605   float: right;
 606 }
 607 .oo-ui-toolbar-actions .oo-ui-toolbar,
 608 .oo-ui-toolbar-actions .oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button,
 609 .oo-ui-toolbar-actions .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
 610   display: inline-block;
 611 }
 612 .oo-ui-toolbar-actions .oo-ui-popupWidget {
 613   -webkit-touch-callout: default;
 614   -webkit-user-select: text;
 615   -moz-user-select: text;
 616   -ms-user-select: text;
 617   user-select: text;
 618 }
 619 .oo-ui-toolbar-bar {
 620   background-color: var(--background-color-base, #fff);
 621   color: var(--color-base, #202122);
 622 }
 623 .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
 624   border-bottom: 1px solid var(--border-color-subtle, #c8ccd1);
 625   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 626 }
 627 .oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
 628   border-top: 1px solid var(--border-color-subtle, #c8ccd1);
 629   box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
 630 }
 631 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
 632   background-color: transparent;
 633   border: 0;
 634   box-shadow: none;
 635 }
 636 .oo-ui-toolbar-narrow-bar::after {
 637   content: '';
 638   display: block;
 639   position: absolute;
 640   top: 3em;
 641   left: 0;
 642   width: 100%;
 643   height: 0;
 644 }
 645 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-top .oo-ui-toolbar-bar::after {
 646   border-bottom: 1px solid var(--border-color-subtle, #c8ccd1);
 647 }
 648 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-bottom .oo-ui-toolbar-bar::after {
 649   border-top: 1px solid var(--border-color-subtle, #c8ccd1);
 650 }