Page MenuHomeWickedGov Phorge
Files F4060744

temporaryaccountonboarding.less
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

temporaryaccountonboarding.less
View Options

@import ( reference ) 'mediawiki.skin.variables.less';
.ext-checkuser-temp-account-onboarding-dialog {
// Allow the images shown in the dialog to have no padding, but make all other content have padding.
/* stylelint-disable-next-line selector-class-pattern */
.cdx-dialog__body {
padding: 0;
}
.ext-checkuser-temp-account-onboarding-dialog-main-body {
padding: @spacing-100 @spacing-150;
// Needed because the MinervaNeue skin overrides this, but mobile design specs
// want this text to be in bold.
h5,
h6 {
font-weight: bold;
}
}
// Make the images appropriately tall so that they fully display.
.ext-checkuser-temp-account-onboarding-dialog-image {
background-color: #dce3f9;
height: 250px;
background-position: center;
background-repeat: no-repeat;
// DST design specs say the image should be a maximum of 180px tall on mobile.
// Because this will cause the image to be cut off at the edges, we should
// scale the height of the image based on the width to avoid this.
@media all and ( max-width: @max-width-breakpoint-mobile ) {
& {
// A height of 50vw makes the image fit the best for the variety of widths
// provided. Choosing 50vw was largely based on experimentation.
height: 50vw;
max-height: 180px;
background-size: contain;
}
}
}
.ext-checkuser-temp-account-onboarding-dialog-preference-notice {
margin: 1em 0 0.5em 0;
}
// Format the heading of the dialog to match the design specs.
// Code here a modified copy of code in GrowthExperiments OnboardingDialog component.
&__header {
&__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
&__title {
padding-top: @spacing-35;
line-height: @line-height-xx-small;
font-weight: @font-weight-bold;
padding-bottom: @spacing-35;
}
&__button {
min-width: 90px;
}
}
}
// Format the navigation buttons of the dialog to match the design specs.
// Code here a modified copy of code in GrowthExperiments OnboardingDialog component.
&__footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
&__navigation {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: @font-size-small;
flex-grow: 1;
/* stylelint-disable selector-class-pattern */
&--prev.cdx-button,
&--next.cdx-button {
margin-left: @spacing-50;
}
/* stylelint-enable selector-class-pattern */
}
}
}
// Modified copy of the styles in the OnboardingStepper.vue component in the
// mediawiki/extensions/GrowthExperiments repository.
.ext-checkuser-temp-account-onboarding-dialog-stepper {
display: flex;
font-size: @font-size-small;
color: @color-subtle;
align-items: center;
&__label {
margin-inline-end: @spacing-50;
}
&__dots {
display: flex;
align-items: center;
height: @size-125;
&__dot {
background-color: @background-color-disabled;
border-radius: @border-radius-circle;
width: @size-50;
height: @size-50;
margin-inline-end: @spacing-50;
&--active {
background-color: @color-base;
}
}
}
}
// Modified copy of the styles from the MultiPane.vue component in
// the mediawiki/extensions/GrowthExperiments repository.
.ext-checkuser-temp-account-onboarding-dialog-content {
position: relative;
overflow: hidden hidden;
.ext-checkuser-temp-account-onboarding-right-enter-active,
.ext-checkuser-temp-account-onboarding-right-leave-active,
.ext-checkuser-temp-account-onboarding-left-enter-active,
.ext-checkuser-temp-account-onboarding-left-leave-active {
transition: all 500ms @animation-timing-function-base;
}
.ext-checkuser-temp-account-onboarding-right-enter-from {
/* @noflip */
transform: translateX( @size-full );
}
.ext-checkuser-temp-account-onboarding-right-leave-to {
// Use `calc()` for negative calculation to not rely on Less, but standard CSS.
/* @noflip */
transform: translateX( calc( -1 * @size-full ) );
}
.ext-checkuser-temp-account-onboarding-left-leave-to {
/* @noflip */
transform: translateX( @size-full );
}
.ext-checkuser-temp-account-onboarding-left-enter-from {
// Use `calc()` for negative calculation to not rely on Less, but standard CSS.
/* @noflip */
transform: translateX( calc( -1 * @size-full ) );
}
.ext-checkuser-temp-account-onboarding-right-leave-active,
.ext-checkuser-temp-account-onboarding-left-leave-active {
position: absolute;
}
}

File Metadata

Mime Type
text/plain
Expires
Aug 16 2026, 08:07 (12 w, 14 h ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
6b/dd/a47062b9575f01fcdf589524f5ae
Default Alt Text
temporaryaccountonboarding.less (4 KB)

Event Timeline