resources/src/mediawiki.special.preferences.styles.ooui.less

   1 @import 'mediawiki.skin.variables.less';
   2 @import 'mediawiki.mixins.less';
   3
   4 .mw-email-not-authenticated .oo-ui-labelWidget,
   5 .mw-email-none .oo-ui-labelWidget {
   6         color: @color-emphasized;
   7         border-width: @border-width-base;
   8         border-style: @border-style-base;
   9         padding: 8px 12px;
  10 }
  11
  12 .mw-email-not-authenticated .oo-ui-labelWidget {
  13         background-color: @background-color-warning-subtle;
  14         border-color: @border-color-warning;
  15 }
  16
  17 .mw-email-none .oo-ui-labelWidget {
  18         background-color: @background-color-notice-subtle;
  19         border-color: @border-color-base;
  20 }
  21
  22 /* Authenticated email field has its own class too. Unstyled by default */
  23 /*
  24 .mw-email-authenticated .oo-ui-labelWidget { }
  25 */
  26
  27 // Non-dialog styling for footer buttons
  28 #preferences {
  29         // Support Edge: The `position: sticky` rule above causes the buttons to
  30         // disappear in RTL languages on Microsoft Edge. This magically fixes the issue. See T220706.
  31         filter: brightness( 1 );
  32
  33         /*
  34          * Use `position: sticky` on supported browsers, degrades gracefully in
  35          * all others, therefore no `@supports` feature query to reduce code complexity.
  36          */
  37         .mw-htmlform-submit-buttons {
  38                 .position-sticky();
  39                 bottom: 0;
  40                 margin: -@border-width-base -1em -1em -1em;
  41                 padding: 1em;
  42                 background-color: @background-color-base;
  43                 border-top: @border-width-base @border-style-base @border-color-subtle;
  44                 // Add top box shadow on top only to emphasize content is scrollable underneath `sticky`.
  45                 box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.25 );
  46         }
  47 }
  48
  49 // Preferences navigation hint
  50 .client-js .mw-navigation-hint {
  51         overflow: hidden;
  52 }
  53
  54 // Hide when not keyboard focused.
  55 .client-js .mw-navigation-hint:not( :focus ) {
  56         height: 0;
  57 }
  58
  59 .client-js .mw-navigation-hint:focus {
  60         margin: 10px 0 10px 0;
  61 }
  62
  63 .oo-ui-panelLayout {
  64         .mw-prefs-fieldset-wrapper {
  65                 padding-left: 0;
  66                 padding-right: 0;
  67
  68                 &:first-child {
  69                         padding-top: 0;
  70                 }
  71
  72                 &:last-child {
  73                         padding-bottom: 0;
  74                 }
  75         }
  76 }
  77
  78 .mw-prefs-tabs {
  79         &.mw-prefs-tabs-searching {
  80                 // Prevent "Save" bar getting too close to results
  81                 min-height: 30em;
  82
  83                 /* Tab panels */
  84                 .oo-ui-tabPanelLayout:not( .mw-prefs-search-matched ),
  85                 /* Fields */
  86                 [ class^='mw-htmlform-field-' ]:not( .mw-prefs-search-matched ),
  87                 /* Wrappers */
  88                 .mw-prefs-fieldset-wrapper:not( .mw-prefs-search-matched ) {
  89                         display: none;
  90                 }
  91
  92                 .oo-ui-tabPanelLayout.mw-prefs-search-matched {
  93                         > fieldset > legend {
  94                                 background: @background-color-neutral;
  95                                 padding: 5px 10px;
  96                                 margin: 0 0 10px 0;
  97                                 max-width: none;
  98
  99                                 > .oo-ui-labelElement-label {
 100                                         display: inline;
 101                                         margin: 0;
 102                                 }
 103                         }
 104                 }
 105
 106                 .oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
 107                         padding: 0;
 108                         margin: 0;
 109                 }
 110
 111                 .mw-prefs-search-matched {
 112                         margin: 0 20px 10px 20px;
 113                         padding: 0;
 114                 }
 115         }
 116 }
 117
 118 // Highlight could be in an overlay
 119 .mw-prefs-search-highlight {
 120         // FIXME: Codex needs to standardize search highlights.
 121         background: @background-color-progressive-subtle !important; /* stylelint-disable-line declaration-no-important */
 122         outline: 3px solid @background-color-progressive-subtle !important; /* stylelint-disable-line declaration-no-important */
 123         border-radius: @border-radius-base !important; /* stylelint-disable-line declaration-no-important */
 124 }
 125
 126 .mw-prefs-noresults {
 127         margin: 20px;
 128         font-style: italic;
 129 }
 130
 131 /* TODO: Support mobile */
 132 .skin-minerva .mw-prefs-search { /* stylelint-disable-line selector-class-pattern */
 133         display: none;
 134 }
 135
 136 .mw-prefs-search.oo-ui-fieldLayout {
 137         margin: 8px 0;
 138 }
 139
 140 @media all and ( min-width: @min-width-breakpoint-tablet ) {
 141         .mw-prefs-search.oo-ui-fieldLayout {
 142                 width: 20em;
 143         }
 144
 145         .mw-special-Preferences .mw-specialpage-summary {
 146                 margin-right: 21em;
 147
 148                 & + .mw-prefs-search.oo-ui-fieldLayout {
 149                         float: right;
 150                         margin: -36px 0 8px 0;
 151                 }
 152         }
 153 }
 154
 155 @media all and ( max-width: ( @max-width-breakpoint-mobile ) ) {
 156         .mw-prefs-search.oo-ui-fieldLayout {
 157                 // Fallback is graceful enough.
 158                 /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 159                 position: sticky;
 160                 top: 0;
 161                 z-index: 1;
 162         }
 163 }
 164
 165 .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
 166 .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
 167         /* Decrease contrast of `border` slightly as padding/border combination is sufficient
 168          * accessibility wise and focus of content is more important here. */
 169         border-color: @border-color-subtle;
 170 }
 171
 172 /* JavaScript disabled */
 173 .client-nojs {
 174         // Disable .oo-ui-panelLayout-framed on outer wrapper
 175         .mw-prefs-tabs-wrapper {
 176                 border-width: 0;
 177                 border-radius: 0;
 178         }
 179
 180         .mw-prefs-tabs {
 181                 // Hide the tab menu when JS is disabled as we can't use this feature
 182                 > .oo-ui-menuLayout-menu {
 183                         display: none;
 184                 }
 185
 186                 .mw-prefs-section-fieldset {
 187                         // <legend> is hard to style, so apply border to top of group
 188                         > .oo-ui-fieldsetLayout-group {
 189                                 padding-top: 1.5em;
 190                                 border-top: @border-width-base @border-style-base @border-color-subtle;
 191                         }
 192
 193                         // Remove spacing between legend and underline
 194                         &.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
 195                                 margin-bottom: 0;
 196                         }
 197                 }
 198
 199                 // Spacing between sections
 200                 > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout:not( :last-child ) {
 201                         margin-bottom: 1em;
 202                 }
 203         }
 204         // Show preference section content on mobile
 205         #mw-prefs-container.mw-mobile-preferences-container {
 206                 .mw-prefs-content-head {
 207                         display: none;
 208                 }
 209         }
 210
 211         .mw-mobile-prefs-sections.oo-ui-buttonGroupWidget {
 212                 display: none;
 213         }
 214
 215         .mw-prefs-title {
 216                 font-size: 1.22em;
 217         }
 218 }
 219
 220 /* JavaScript enabled */
 221 .client-js {
 222         .mw-prefs-tabs {
 223                 .oo-ui-tabPanelLayout {
 224                         // Panels don't need borders as the IndexLayout is inside a framed wrapper.
 225                         border: 0;
 226
 227                         // Hide duplicate section legend (we have tabs instead),
 228                         // except in search mode, where we hide the tabs
 229                         &:not( .mw-prefs-search-matched ) > fieldset > legend {
 230                                 display: none;
 231                         }
 232                 }
 233
 234                 // Hide all but the first panel before infusion
 235                 &:not( .mw-prefs-tabs-infused ) {
 236                         .oo-ui-tabPanelLayout:not( :first-child ) {
 237                                 display: none;
 238                         }
 239                 }
 240         }
 241
 242         // Hide mobile sections since they will be displayed in windows
 243         #mw-prefs-container.mw-mobile-prefs-container {
 244                 .mw-prefs-content-page {
 245                         display: none;
 246                 }
 247         }
 248 }
 249
 250 // Highlight section header when linking to a section, e.g. Special:Preferences#mw-prefsection-editing-preview.
 251 .mw-prefs-tabs:not( .mw-prefs-tabs-searching ) .oo-ui-fieldsetLayout:target > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
 252         width: 100%;
 253         background-color: @background-color-progressive-subtle;
 254         outline: 4px solid #eaf3ff;
 255 }
 256
 257 @media all and ( min-width: @min-width-breakpoint-tablet ) {
 258         /* Make the "Basic information" section more compact */
 259         /* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
 260         #mw-htmlform-info {
 261                 > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
 262                         display: inline-block;
 263                         width: 20%;
 264                         padding: 0;
 265                         vertical-align: middle;
 266                 }
 267
 268                 > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
 269                         margin-right: 0;
 270                 }
 271
 272                 > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
 273                         display: inline-block;
 274                         width: 80%;
 275                         vertical-align: middle;
 276                 }
 277         }
 278 }
 279
 280 /* Compact number inputs, used at "Display options" on "Recent changes" */
 281 .mw-htmlform-field-HTMLFloatField,
 282 .mw-htmlform-field-HTMLIntField {
 283         .oo-ui-inputWidget {
 284                 max-width: 10em;
 285         }
 286 }
 287
 288 /* Expand the dropdown and textfield of "Time zone" field to the */
 289 /* usual maximum width and display them on separate lines. */
 290 #wpTimeCorrection .oo-ui-dropdownInputWidget,
 291 #wpTimeCorrection .oo-ui-textInputWidget {
 292         display: block;
 293         max-width: 50em;
 294 }
 295
 296 #wpTimeCorrection .oo-ui-textInputWidget {
 297         margin-top: 0.5em;
 298 }
 299
 300 /* T311717 - Styles for Special:Preferences on mobile
 301 These are used when users navigate to Special:Preferences
 302 with params ?useskin=vector&useformat=mobile
 303 */
 304
 305 #mw-prefs-container.mw-mobile-preferences-container {
 306         position: relative;
 307 }
 308
 309 .mw-mobile-prefs-sections.oo-ui-buttonGroupWidget {
 310         display: block;
 311 }
 312
 313 .mw-mobile-prefsection.oo-ui-buttonElement {
 314         display: block;
 315         margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 316         border-bottom: @border-width-base @border-style-base @border-color-subtle;
 317
 318         &:last-child {
 319                 border-bottom: 0;
 320         }
 321
 322         .oo-ui-buttonElement-button {
 323                 display: block;
 324         }
 325
 326         .oo-ui-iconElement-icon {
 327                 font-size: 0.875em;
 328                 height: 3em;
 329         }
 330 }
 331
 332 .mw-prefs-title {
 333         font-weight: normal;
 334         font-size: 1em;
 335         line-height: 1.25em;
 336         color: @color-base;
 337 }
 338
 339 .mw-prefs-description {
 340         font-weight: normal;
 341         font-size: 0.875em;
 342         line-height: 1.25em;
 343         color: @color-subtle;
 344         margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
 345         white-space: normal;
 346 }
 347
 348 .mw-prefs-header-container {
 349         display: flex;
 350 }
 351
 352 /* Override default inline styles for 'larger' dialog */
 353 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active.mw-mobile-pref-window {
 354         padding-top: 0;
 355 }
 356
 357 /* Overriding default inline styles for 'larger' dialog */
 358 .mw-mobile-pref-window > .oo-ui-window-frame {
 359         width: auto !important; /* stylelint-disable-line declaration-no-important */
 360         height: 100% !important; /* stylelint-disable-line declaration-no-important */
 361         max-height: 100% !important; /* stylelint-disable-line declaration-no-important */
 362 }
 363
 364 .oo-ui-window-body.mw-mobile-pref-dialog-body {
 365         padding: 16px;
 366
 367         /* T317110: sub-section title */
 368         .mw-prefs-fieldset-wrapper {
 369                 .oo-ui-fieldsetLayout-header {
 370                         border-bottom: @border-width-base @border-style-base @border-color-base;
 371                         max-width: 100%;
 372
 373                         .oo-ui-labelElement-label {
 374                                 font-size: 1em;
 375                                 font-weight: bold;
 376                                 line-height: 1.25em;
 377                                 margin-bottom: 12px;
 378                         }
 379                 }
 380
 381                 /* T317110: sub-section and sub-sub-section titles */
 382                 .mw-prefs-fieldset-wrapper .oo-ui-fieldsetLayout-header {
 383                         border-bottom: 0;
 384                 }
 385         }
 386
 387         /* T317110: preference separation */
 388         [ class^='mw-htmlform-field' ] {
 389                 padding-top: 12px;
 390                 padding-bottom: 12px;
 391                 margin: 0;
 392                 border-bottom: @border-width-base @border-style-base #eaecf0;
 393
 394                 &:last-child {
 395                         border-bottom: 0;
 396                 }
 397         }
 398
 399         /* T317110: preference label */
 400         .oo-ui-labelElement-label {
 401                 line-height: 1.25em;
 402         }
 403
 404         /* T317110: help text */
 405         .oo-ui-inline-help {
 406                 font-size: 0.875em;
 407                 line-height: 1.25em;
 408         }
 409
 410         /* T317110: non-interactive text */
 411         .mw-htmlform-field-HTMLInfoField {
 412                 color: @color-subtle;
 413         }
 414 }
 415
 416 // Dialog styling for footer buttons
 417 .oo-ui-window-foot .mw-htmlform-submit-buttons {
 418         margin: 0;
 419         padding: 16px;
 420 }
 421
 422 .oo-ui-window-body .oo-ui-fieldLayout-messages {
 423         background-color: @background-color-base;
 424 }
 425
 426 .oo-ui-iconWidget.mw-prefs-header-icon {
 427         color: @color-base;
 428         cursor: pointer;
 429         width: 1.25em;
 430         height: 1.25em;
 431         margin: 0 16px 0 17px;
 432 }
 433
 434 .mw-prefs-header-title {
 435         display: inline-flex;
 436 }