MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
Created page with "→=============================== GLOBAL BIO INDEX PROFILE DESIGN Author: ChatGPT | 2025 ===============================: →HERO BANNER: .gbi-profile-banner { width: 100%; height: 350px; object-fit: cover; border-bottom: 3px solid #002b7f; } →PROFILE IMAGE WRAPPER: .gbi-profile-photo { width: 200px; height: 260px; object-fit: cover; border-radius: 16px; border: 4px solid white; box-shadow: 0px 8px 20px rgba(0,0,0,0.18..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* PRO PROFILE UI */ | ||
/* | /* Banner */ | ||
.gbi-banner-wrapper { | |||
width: 100%; | |||
overflow: hidden; | |||
} | |||
.gbi-profile-banner { | .gbi-profile-banner { | ||
width: 100%; | width: 100%; | ||
height: | height: 330px; | ||
object-fit: cover; | object-fit: cover; | ||
} | } | ||
/* | /* Profile photo overlay */ | ||
.gbi-profile-photo-wrapper { | |||
text-align: center; | |||
margin-top: -120px; | |||
} | |||
.gbi-profile-photo { | .gbi-profile-photo { | ||
width: | width: 210px; | ||
height: | height: 270px; | ||
object-fit: cover; | object-fit: cover; | ||
border-radius: 16px; | border-radius: 16px; | ||
border: | border: 5px solid #fff; | ||
box-shadow: | box-shadow: 0 10px 28px rgba(0,0,0,0.18); | ||
} | } | ||
/* | /* Center Header */ | ||
.gbi-profile-header { | .gbi-profile-header { | ||
text-align: center; | text-align: center; | ||
font-family: Montserrat, sans-serif; | font-family: Montserrat, sans-serif; | ||
margin-bottom: 20px; | |||
} | } | ||
.gbi-name { | .gbi-name { | ||
font-size: | font-size: 40px; | ||
font-weight: 700; | font-weight: 700; | ||
color: #002b7f; | color: #002b7f; | ||
margin: 10px 0; | |||
} | } | ||
.gbi-pronoun { | .gbi-pronoun { | ||
font-size: 20px; | font-size: 20px; | ||
opacity: 0.7; | opacity: 0.7; | ||
} | } | ||
.gbi-headline { | .gbi-headline { | ||
font-size: | font-size: 19px; | ||
color: # | color: #333; | ||
opacity: 0.9; | |||
} | } | ||
/* | /* Tabs */ | ||
.gbi- | .gbi-tabs { | ||
width: 100%; | width: 100%; | ||
text-align: center; | |||
margin: 20px 0; | |||
} | } | ||
. | /* Rows */ | ||
.gbi-tabs a { | |||
background: #eef2ff; | |||
color: #002b7f; | color: #002b7f; | ||
padding: 10px 22px; | |||
border-radius: 20px; | |||
margin: 5px; | |||
display: inline-block; | |||
text-decoration: none; | |||
font-size: 14px; | font-size: 14px; | ||
border: 1px solid #002b7f; | border: 1px solid #002b7f; | ||
} | } | ||
.gbi-tab-active { | .gbi-tab-active { | ||
background: #002b7f; | background-color: #002b7f !important; | ||
color: | color: #fff !important; | ||
} | } | ||
/* | /* 3-Column Grid */ | ||
.gbi- | .gbi-layout { | ||
display: | display: grid; | ||
grid-template-columns: 22% 50% 28%; | |||
gap: | gap: 20px; | ||
width: 95%; | |||
margin: auto; | |||
} | } | ||
/* Cards */ | |||
.gbi-section-card { | |||
background: #fff; | |||
border: 1px solid #dce4f5; | |||
border-radius: 12px; | |||
padding: 18px 20px; | |||
margin-bottom: 22px; | |||
box-shadow: 0 4px 18px rgba(0,0,0,0.05); | |||
} | |||
/* Media gallery */ | |||
.gbi-gallery img { | .gbi-gallery img { | ||
width: | width: 160px; | ||
height: | height: 160px; | ||
border-radius: 10px; | |||
object-fit: cover; | object-fit: cover; | ||
margin: 4px; | |||
} | } | ||
Revision as of 14:20, 25 November 2025
/* PRO PROFILE UI */
/* Banner */
.gbi-banner-wrapper {
width: 100%;
overflow: hidden;
}
.gbi-profile-banner {
width: 100%;
height: 330px;
object-fit: cover;
}
/* Profile photo overlay */
.gbi-profile-photo-wrapper {
text-align: center;
margin-top: -120px;
}
.gbi-profile-photo {
width: 210px;
height: 270px;
object-fit: cover;
border-radius: 16px;
border: 5px solid #fff;
box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
/* Center Header */
.gbi-profile-header {
text-align: center;
font-family: Montserrat, sans-serif;
margin-bottom: 20px;
}
.gbi-name {
font-size: 40px;
font-weight: 700;
color: #002b7f;
margin: 10px 0;
}
.gbi-pronoun {
font-size: 20px;
opacity: 0.7;
}
.gbi-headline {
font-size: 19px;
color: #333;
opacity: 0.9;
}
/* Tabs */
.gbi-tabs {
width: 100%;
text-align: center;
margin: 20px 0;
}
/* Rows */
.gbi-tabs a {
background: #eef2ff;
color: #002b7f;
padding: 10px 22px;
border-radius: 20px;
margin: 5px;
display: inline-block;
text-decoration: none;
font-size: 14px;
border: 1px solid #002b7f;
}
.gbi-tab-active {
background-color: #002b7f !important;
color: #fff !important;
}
/* 3-Column Grid */
.gbi-layout {
display: grid;
grid-template-columns: 22% 50% 28%;
gap: 20px;
width: 95%;
margin: auto;
}
/* Cards */
.gbi-section-card {
background: #fff;
border: 1px solid #dce4f5;
border-radius: 12px;
padding: 18px 20px;
margin-bottom: 22px;
box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
/* Media gallery */
.gbi-gallery img {
width: 160px;
height: 160px;
border-radius: 10px;
object-fit: cover;
margin: 4px;
}