MediaWiki:Profile.css

Материал из Backpack Battles Wiki
Перейти к навигации Перейти к поиску

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
#userProfileApp {
	margin: -24px -36px 12px !important;
}

#userProfileApp .user-identity-box__wrapper {
	z-index: 1;
}

#userProfileApp .user-identity-box__wrapper .user-identity-avatar__actions {
	display: none;
}

#userProfileApp .user-identity-avatar {
	padding: 22px 0 0 32px;
	z-index: 1;
}

#userProfileApp .user-identity-avatar__image {
	background-color: var(--theme-page-background-color--secondary) !important;
	border: solid 2px var(--theme-page-background-color--secondary) !important;
	border-radius: 50% !important;
	box-shadow: 0 3px 12px 0 rgb(0 0 0 / 30%);
}

#userProfileApp .user-identity-box__info {
	margin-left: -168px;
}

#userProfileApp .user-identity-header {
	align-items: center;
	background: rgba(var(--theme-page-text-color--rgb), .1);
	border-radius: 3px 0 0 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	min-height: 38px;
	padding-left: 168px;
	position: relative;
	width: 100%;
}

#userProfileApp .user-identity-header__attributes {
	line-height: 29px;
	margin: 6px 0 6px 30px;
}

#userProfileApp .user-identity-header h1 {
	line-height: 38px;
}

body.skin-fandomdesktop #userProfileApp .user-identity-header__tag {
	background-color: rgba(var(--theme-page-text-color--rgb), .2);
	margin-top: 6px;
	margin-bottom: 1px;
}

#userProfileApp .user-identity-header .wds-button,
#userProfileApp .modal-wrapper__header .wds-is-square,
#userProfileApp .modal-wrapper__header .modal-wrapper__cta-button {
	background: transparent;
	border: none;
	border-radius: 18px;
	color: var(--theme-link-color);
	margin: 7px 7px 7px 0;
	padding: 9px 12px;
}

#userProfileApp .user-identity-header .wds-button:hover,
#userProfileApp .modal-wrapper__header .wds-is-square:hover,
#userProfileApp .modal-wrapper__header .modal-wrapper__cta-button:hover {
	background: rgba(var(--theme-link-color--rgb), .15);
}

#userProfileApp ul.user-identity-stats,
#userProfileApp .user-identity-bio,
#userProfileApp .user-bio-open-modal-button,
#userProfileApp ul.user-identity-social {
	margin-left: 198px;
	margin-right: 30px;
}

#userProfileApp ul.user-identity-stats a {
	color: var(--theme-page-text-color) !important;
}

#userProfileApp .user-identity-bio.overflow:before {
	content: none;
}

#userProfileApp .user-identity-bio {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
}

#userProfileApp .user-bio-open-modal-button {
	margin-bottom: 6px;
	transition: .3s;
}

#userProfileApp .user-bio-open-modal-button:hover {
	color: var(--theme-link-color--hover);
}

#userProfileApp .user-identity-social__icon svg {
	transition: .3s;
}

#userProfileApp .user-profile-navigation {
	border-bottom: none;
	justify-content: center !important;
	margin-top: -18px;
	z-index: 1;
}

#userProfileApp .user-profile-navigation__link {
	border-bottom: 4px solid transparent;
	bottom: -4px;
	opacity: 1;
	padding: 0 !important;
	position: relative;
	transition: .3s;
}

#userProfileApp .user-profile-navigation__link.is-active {
	border-bottom: none;
}

#userProfileApp .user-profile-navigation__link a,
#userProfileApp .user-profile-navigation__link a:hover,
#userProfileApp .user-profile-navigation__link.is-active a {
	color: var(--theme-page-text-color) !important;
	display: block;
	font-weight: 500;
	height: 40px;
	padding: 10px 15px;
}

#userProfileApp .user-profile-navigation__link>a:after,
#userProfileApp .user-profile-navigation__link.is-active>a:after,
#userProfileApp .user-profile-navigation__link:not(.is-active):hover>a:after {
	background: var(--theme-link-color);
	border-radius: 5px;
	content: "";
	display: block;
	height: 3px;
	margin: 3px auto 0 auto;
	transition: .3s;
	width: 60%;
}

/* возможно когда-нибудь потом, когда кто-то захочет цветные полосы
[class*=Margrel] #userProfileApp .user-profile-navigation__link a:after,
[class*=Mionya] #userProfileApp .user-profile-navigation__link a:after,
[class*=NewAqua] #userProfileApp .user-profile-navigation__link a:after {
	background: #fff !important;
}
*/

#userProfileApp .user-profile-navigation__link:not(.is-active)>a:after {
	width: 0;
}

#userProfileApp .user-profile-navigation__link.is-active:hover>a:after {
	width: 80%;
}

#userProfileApp .modal-wrapper {
	background: none;
	min-height: 462px;
}

#userProfileApp .modal-wrapper__header {
	background: rgba(var(--theme-page-text-color--rgb), .1);
	border: none;
	display: grid;
	padding: 0;
	grid-template-columns: min-content 1fr min-content;
}

#userProfileApp .modal-wrapper__header .wds-is-square {
	margin-left: 194px;
}

#userProfileApp .modal-wrapper__icon-close,
#userProfileApp .modal-wrapper__icon-arrow {
	height: 16px;
	width: 16px;
	fill: var(--theme-link-color);
}

#userProfileApp .modal-wrapper__main {
	padding: 0 !important;
}

#userProfileApp .user-profile-editor__avatar .user-identity-avatar {
	top: -58px;
	padding: 6px 0 0 32px;
}

#userProfileApp .user-identity-avatar__actions {
	height: 133px;
	left: 34px;
	top: 8px;
	width: 133px;
}

#userProfileApp .user-identity-avatar__actions .wds-floating-button {
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
	height: 100%;
	transition: .3s;
	width: 100%;
}

#userProfileApp .user-identity-avatar__actions:hover .wds-floating-button {
	background-color: #0005;
}

#userProfileApp .user-identity-avatar__actions .wds-floating-button .wds-icon {
	fill: white;
	height: 133px;
	opacity: 0;
	padding: 57px;
	transition: .3s;
	width: 133px;
}

#userProfileApp .user-identity-avatar__actions:hover .wds-floating-button .wds-icon {
	opacity: 1;
	padding: 57px;
}

#userProfileApp .user-profile-editor__form {
	margin-top: -18px;
}

#userProfileApp .user-profile-editor__form h1 {
	line-height: 46px;
	left: 30px;
	position: relative;
}

#userProfileApp .user-profile-editor__form .wds-fieldset {
	padding: 6px 0 0 6px !important;
}

#userProfileApp .user-profile-editor__form .wds-fieldset>* {
	margin: 0;
    height: 55px;
}

#userProfileApp .user-profile-editor__form .wds-fieldset>*:first-child {
	margin-top: 18px;
}

#userProfileApp .user-profile-editor__form .wds-fieldset>*:nth-child(3) {
    margin-top: -18px;
}

#userProfileApp .user-profile-editor__form .wds-input__field {
    line-height: 1.21em;
}

#userProfileApp .user-profile-editor__bio-field,
#userProfileApp .user-profile-editor__name-field {
    margin-left: 24px !important;
}

#userProfileApp .user-profile-editor__social-link {
    align-items: baseline;
}

#userProfileApp .user-profile-editor__social-link .wds-icon {
    margin: auto 0 auto -6px;
}

#userProfileApp .user-profile-editor__social-link .wds-input {
    margin-left: 6px;
}

body.skin-fandomdesktop #userProfileApp .user-avatar-editor {
	margin-right: 0;
}

body.skin-fandomdesktop #userProfileApp .user-avatar-editor__preview {
	width: 160px;
}

#userProfileApp .user-avatar-editor__preview-back,
#userProfileApp .user-avatar-editor__preview-overlay {
	display: none;
}

#userProfileApp .user-avatar-editor__preview-front {
	background-color: var(--theme-page-background-color--secondary);
	border: solid 2px var(--theme-page-background-color--secondary) !important;
	box-shadow: 0 3px 12px 0 rgb(0 0 0 / 30%);
	top: -28px;
	height: 138px;
	left: 32px;
	width: 138px;
}

#userProfileApp .user-avatar-editor__actions {
	margin-top: 17px;
}

body.skin-fandomdesktop #userProfileApp .user-avatar-editor__label {
	margin-bottom: 9px;
}

@media only screen and (max-width: 1083px) {
	#userProfileApp .user-identity-header__attributes {
		min-width: min-content;
	}

	#userProfileApp .user-identity-header__actions {
		margin-top: 0;
	}
}

@media (max-width: 1279px) {
	#userProfileApp .user-identity-header .wds-button {
		font-size: 0;
		padding: 9px 7.75px 9px 8px;
	}

	#userProfileApp .user-identity-header__button .wds-icon {
		margin-right: -0.25px;
	}
}

#userProfileApp .user-identity-header>*,
#userProfileApp .modal-wrapper__header>* {
	animation: profile_opacity .65s ease;
}

#userProfileApp ul.user-identity-stats,
#userProfileApp .user-identity-bio,
#userProfileApp .user-bio-open-modal-button,
#userProfileApp ul.user-identity-social {
	animation: 0.65s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal forwards running anim_user-default-avatar--in;
	opacity: 0;
	transform: translateY(15px);
}

#userProfileApp .user-identity-social li {
	animation: 0.65s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal forwards running anim_user-default-avatar--in;
}

#userProfileApp .user-profile-editor__form>*,
#userProfileApp .user-avatar-editor__default-avatar {
	animation: 0.5s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal forwards running anim_user-default-avatar--in;
	opacity: 0;
	transform: translateY(15px);
}

#userProfileApp .user-avatar-editor__label,
#userProfileApp .wds-button-group {
	animation: 0.65s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal forwards running anim_user-default-avatar--in;
	opacity: 0;
	transform: translateX(30px);
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(1) {
	animation-delay: 0.1s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(2) {
	animation-delay: 0.12s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(3) {
	animation-delay: 0.14s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(4) {
	animation-delay: 0.16s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(5) {
	animation-delay: 0.18s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(6) {
	animation-delay: 0.20s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(7) {
	animation-delay: 0.22s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(8) {
	animation-delay: 0.24s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(9) {
	animation-delay: 0.26s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(10) {
	animation-delay: 0.28s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(11) {
	animation-delay: 0.30s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(12) {
	animation-delay: 0.32s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(13) {
	animation-delay: 0.34s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(14) {
	animation-delay: 0.36s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(15) {
	animation-delay: 0.38s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(16) {
	animation-delay: 0.4s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(17) {
	animation-delay: 0.42s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(18) {
	animation-delay: 0.44s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(19) {
	animation-delay: 0.46s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(20) {
	animation-delay: 0.48s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(21) {
	animation-delay: 0.5s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(22) {
	animation-delay: 0.52s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(23) {
	animation-delay: 0.54s
}

#userProfileApp .user-avatar-editor__default-avatar:nth-child(24) {
	animation-delay: 0.56s
}

@keyframes anim_user-default-avatar--in {
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes profile_opacity {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
Источник — https://backpackbattles.wiki.gg/ru/index.php?title=MediaWiki:Profile.css&oldid=2314