diff options
Diffstat (limited to 'CheckUser/modules/ext.checkUser.investigate.styles/investigate.less')
| -rw-r--r-- | CheckUser/modules/ext.checkUser.investigate.styles/investigate.less | 234 |
1 files changed, 234 insertions, 0 deletions
diff --git a/CheckUser/modules/ext.checkUser.investigate.styles/investigate.less b/CheckUser/modules/ext.checkUser.investigate.styles/investigate.less new file mode 100644 index 00000000..af8429e6 --- /dev/null +++ b/CheckUser/modules/ext.checkUser.investigate.styles/investigate.less @@ -0,0 +1,234 @@ +@import 'mediawiki.ui/variables.less'; +@import 'mediawiki.mixins.less'; + +// OOUIHTMLForm specifics +@ooui-font-size-browser: 16; // Assumed browser default of `16px`. +@ooui-font-size-base: 0.875em; // Equals `14px` at browser default of `16px`. +@font-size-small: 13 / @ooui-font-size-browser / @ooui-font-size-base; +@transition-base: 100ms; + +.mw-datatable { + &.ext-checkuser-investigate-table td { + vertical-align: top; + } + + &.ext-checkuser-investigate-table tr:hover td { + background-color: @background-color-base; + } + + &.ext-checkuser-investigate-table th { + background-color: @colorGray14; + border-bottom-width: 2px; + } + + .ext-checkuser-compare-table-cell-target { + width: 200px; + + a, + .ext-checkuser-compare-table-cell-ip { + font-weight: bold; + } + } + + .ext-checkuser-compare-table-cell-target, + tr:hover, + tr:focus-within { + td.ext-checkuser-compare-table-cell-target { + background: @colorGray14; + } + } + + .ext-checkuser-investigate-table-cell-interactive { + // Leave horizontal space for buttons before they are appended + padding-right: 4.5em; + + .ext-checkuser-investigate-table-select { + visibility: hidden; + } + + &:hover, + &:focus, + &:focus-within { + .ext-checkuser-investigate-table-select { + visibility: visible; + } + } + } + + .ext-checkuser-compare-table-cell-user-agent { + border-right-width: 0; + font-size: @font-size-small; + } + + .ext-checkuser-compare-table-cell-activity { + border-left-width: 0; + text-align: right; + } +} + +// Leave vertical space for buttons before they are appended +.ext-checkuser-investigate-table-cell-interactive:before { + content: ''; + float: right; + width: 0; + + .ext-checkuser-investigate-table-preliminary-check & { + min-height: 2.5em; + } + + .ext-checkuser-investigate-table-compare & { + min-height: 5em; + } +} + +.ext-checkuser-investigate-table-options-container { + float: right; + width: 3em; + margin-right: -4em; + text-align: center; + + .oo-ui-menuSelectWidget { + text-align: left; + } +} + +.ext-checkuser-investigate-table-select.oo-ui-buttonElement.oo-ui-iconElement:first-child { + margin-left: 5px; +} + +.ext-checkuser-investigate-table-button-pin.oo-ui-buttonElement, +.ext-checkuser-investigate-table-select.oo-ui-buttonElement { + visibility: hidden; +} + +.ext-checkuser-investigate-table.mw-datatable.ext-checkuser-investigate-table-pinned { + .ext-checkuser-investigate-table-row-pinned td, + .ext-checkuser-investigate-table-row-pinned-data-match td { + .transition( background-color @transition-base ); + background-color: #fef6e7; + + &.ext-checkuser-investigate-table-cell-pinned, + &.ext-checkuser-investigate-table-cell-pinned-data-match { + .transition( background-color @transition-base ); + background-color: #fc3; + } + + &:hover, + &:focus, + &:focus-within { + .ext-checkuser-investigate-table-select { + visibility: visible; + } + + &.ext-checkuser-investigate-table-cell-pinned { + .ext-checkuser-investigate-table-button-pin { + visibility: visible; + } + } + } + } +} + +/* stylelint-disable no-descending-specificity */ +.ext-checkuser-investigate-table.mw-datatable:not( .ext-checkuser-investigate-table-pinned ) { + tr { + td.ext-checkuser-investigate-active, + td:hover, + td:focus, + td:focus-within { + .ext-checkuser-investigate-table-select, + .ext-checkuser-investigate-table-button-pin { + visibility: visible; + } + } + + td.ext-checkuser-investigate-table-cell-hover-data-match, + td:hover.ext-checkuser-investigate-table-cell-pinnable, + td:focus.ext-checkuser-investigate-table-cell-pinnable, + td:focus-within.ext-checkuser-investigate-table-cell-pinnable { + background-color: #fc3; + } + } + + .ext-checkuser-investigate-table-row-hover-data-match, + tr:hover, + tr:focus-within { + td { + background-color: #fef6e7; + } + } +} +/* stylelint-enable no-descending-specificity */ + +.ext-checkuser-investigate-copy-message { + max-width: none; + + &.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice { + background-color: #eaf3ff; + border-color: #36c; + } + + .mw-widget-copyTextLayout.oo-ui-actionFieldLayout.oo-ui-fieldLayout-align-top, + .mw-widget-copyTextLayout > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, + .oo-ui-textInputWidget { + max-width: none; + } + + &.oo-ui-messageWidget .oo-ui-labelElement-label { + display: inline-block; + } + + .oo-ui-buttonWidget { + float: right; + margin-right: 0; + margin-top: -5px; + } +} + +.mw-special-Investigate { + .ext-checkuser-investigate-indicators.oo-ui-buttonGroupWidget { + top: -2px; + margin-right: 4px; + } + + .ext-checkuser-investigate-subtitle-fieldset { + background-color: #eaf3ff; + padding: 10px; + + .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, + .oo-ui-tagMultiselectWidget { + max-width: none; + } + } + + .ext-checkuser-investigate-subtitle-block-button, + .ext-checkuser-investigate-subtitle-continue-button, + .ext-checkuser-investigate-subtitle-cancel-button, { + float: right; + margin-left: 10px; + } + + // Apply the text colors to the links. + .oo-ui-tabOptionWidget a { + color: inherit; + + &:hover, + &:focus { + text-decoration: none; + } + } + + // Seperate the tabs from the table + .oo-ui-menuLayout-menu { + margin-bottom: 1em; + } + + .oo-ui-messageWidget { + margin-top: 1em; + margin-bottom: 1em; + } + + .guider_overlay { /* stylelint-disable-line selector-class-pattern */ + opacity: 0.2; + } +} |