User:Reshan05/common.css

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:AdaptiveProfile.css&only=styles";

/*	Profile Banner

/* = Profile = */ /* Mar/Pad */ .skin-fandomdesktop #userProfileApp { --banner-image: url('https://imgur.com/4vqtfJC'); --banner-pos: center; --banner-ratio: ; --width-padding: 186px; margin: -24px -36px 12px -36px !important; }

/* For UWStyle */ /* .skin-fandomdesktop #userProfileApp { margin: -20px -15px 12px -25px !important; } */	margin: 0; }
 * 1) userProfileApp .user-identity-box,
 * 2) userProfileApp .user-identity-header__actions button {

/* Avatar */ body.skin-fandomdesktop #userProfileApp .user-identity-avatar { /* 	margin: 0 !important; */ /* 	margin: 0 28px 20px 0; */ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; height: 140px; padding: 18px 0 0 28px; width: 140px; z-index: 1; }

border: solid 2px var(--theme-accent-color) !important; -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 50%); -moz-box-shadow: 0 0 10px rgb(0 0 0 / 50%); box-shadow: 0 0 10px rgb(0 0 0 / 50%); }
 * 1) userProfileApp .user-identity-avatar__image {

/* Personal avatar on one wiki */ body .user-identity-avatar:before { background-image: var(--wiki-avatar); background-position: center top; background-size: auto 100%; border-radius: 50%; content: ''; height: 138px; margin: 2px 0 0 2px; position: absolute; width: 138px; }

/* Heder */ body.skin-fandomdesktop #userProfileApp .user-identity-header { background: var(--theme-accent-color); left: calc(var(--width-padding)*-1); min-height: 37px; padding-left: var(--width-padding); position: relative; width: calc(100% + var(--width-padding)); }

color: var(--theme-accent-label-color); }
 * 1) userProfileApp .user-identity-header :is(h1,h2) {

align-items: center; display: flex; flex-wrap: wrap; grid-row-gap: 5px; }
 * 1) userProfileApp .user-identity-header__attributes,
 * 2) userProfileApp .user-identity-header__action {

body.skin-fandomdesktop #userProfileApp .user-identity-header__tag { background-color: var(--theme-accent-color--hover); color: var(--theme-accent-label-color); margin: 6px 12px 6px 0 !important; }

/* Edit profile */ align-items: center; display: flex; }
 * 1) userProfileApp .user-identity-header__actions {

body.skin-fandomdesktop #userProfileApp .user-identity-header__actions .wds-button, .modal-wrapper__header .modal-wrapper__cta-button { border: none; border-radius: 18px; margin-right: 1em; color: rgb(var(--theme-accent-dynamic-color-2--rgb),.5); padding: .4em .8em; /*    vertical-align: middle; */ }

body.skin-fandomdesktop #userProfileApp .user-identity-header__actions .wds-button:hover, .modal-wrapper__header .modal-wrapper__cta-button:hover, .modal-wrapper__header .wds-is-square:hover { background-color: rgba(var(--theme-link-color--rgb),.3); color: var(--theme-page-accent-mix-color) !important; }

/* Tabs */ border-bottom: none !important; }
 * 1) userProfileApp .user-profile-navigation {

border-bottom: 4px solid; padding: 0 !important; text-align: center !important; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; width: 100%; }
 * 1) userProfileApp .user-profile-navigation__link {

color: var(--theme-link-color) !important; display: block; font-weight: bold; padding: 10px 15px; text-decoration: none; text-shadow: none; }
 * 1) userProfileApp .user-profile-navigation__link a {

text-transform: capitalize !important; }	border-bottom-color: var(--theme-link-color) !important; }	color: var(--theme-link-color); }	border-bottom-color: var(--theme-link-color) !important; opacity: 1; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; }
 * 1) userProfileApp .user-profile-navigation__link:nth-child(2) a {
 * 1) userProfileApp .user-profile-navigation__link.is-active {
 * 1) userProfileApp .user-profile-navigation__link.is-active a {
 * 1) userProfileApp .user-profile-navigation__link:not(.is-active):hover {

/* = Edit profile = */ padding: 0 !important; }
 * 1) userProfileApp .modal-wrapper__main {

.modal-wrapper__header { background: var(--theme-accent-color); color: var(--theme-accent-label-color) !important; margin-bottom: -37px !important; padding: 0 0 0 20px !important; /* 	height: 53px !important; */ }

.modal-wrapper__header h3 {display: none;} .modal-wrapper__header .wds-is-square { border-radius: 18px; color: var(--theme-page-accent-mix-color); }

.modal-wrapper__header .modal-wrapper__cta-button, .modal-wrapper__header .wds-is-square { position: relative; z-index: 2; }

.theme-fandomdesktop-dark :is(.modal-wrapper__header .modal-wrapper__cta-button, .modal-wrapper__header .wds-is-square) { color: var(--theme-link-color); }

/* Text Form */ .user-profile-editor__form h1 { color: var(--theme-accent-label-color); line-height: normal; }

.user-profile-editor__form { margin-top: 2px; }

.user-profile-editor__form .wds-fieldset { padding-top: 0; }

.user-identity-avatar__actions { border-radius: 50%; -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 50%); -moz-box-shadow: 0 0 10px rgb(0 0 0 / 50%); box-shadow: 0 0 10px rgb(0 0 0 / 50%); -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; }

.user-identity-avatar__actions svg { color: var(--theme-link-color); -webkit-transition: color .3s; -moz-transition: color .3s; -o-transition: color .3s; transition: color .3s; }

.user-identity-avatar__actions:hover svg { color: var(--theme-link-color--hover); }

@media (min-width: 1084px) { .user-identity-avatar__actions { opacity: .4; } }

.user-identity-avatar:hover .user-identity-avatar__actions { opacity: 1; }

/* Adaptation for mobile */ @media (max-width: 713px) { .user-profile-navigation { overflow-x: scroll; white-space: nowrap; }	.user-profile-navigation__link { width: auto !important; }	.user-identity-header { flex-direction: column; }	.user-identity-box { flex-direction: column; }	.user-identity-avatar { margin: 10px auto !important; padding: 0 !important; }	.user-identity-header { align-items: center; left: 0 !important; gap: 0px !important; padding-left: 0px !important; width: 100% !important; }	.user-identity-box__info { display: flex; flex-direction: column; gap: 10px; }	.user-identity-box__info > :is(ul,div:not(.user-identity-header)) { margin: 0 0 0 20px !important; } }

/* = Banner = */ background: lightgreen; background-image: var(--banner-image); background-position: var(--banner-pos); background-size: cover; content: ''; display: block; padding-bottom: var(--banner-ratio); width: 100%; }
 * 1) userProfileApp:before {