94 lines
2.1 KiB
CSS
94 lines
2.1 KiB
CSS
/* Profile Page - Full width layout, darker share button, responsive grid */
|
|
|
|
/* Force main content container to full width, remove centering and max-width */
|
|
.layout > div[style*="flex:1"] {
|
|
margin: 0 !important;
|
|
max-width: 100% !important;
|
|
padding: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Inner spacing for the profile card */
|
|
.profile-main {
|
|
background: transparent !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
padding: 20px 32px !important;
|
|
margin: 0 auto !important;
|
|
width: 100%;
|
|
max-width: 1600px; /* Limits content on very large screens, but still wide */
|
|
}
|
|
|
|
/* Make prompts grid use more columns on large screens */
|
|
.profile-main section:last-child {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
|
|
gap: 24px !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Share button: darker background and text */
|
|
.profile-header button:last-child {
|
|
background: #cbd5e1 !important; /* darker gray */
|
|
color: #1e293b !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Buttons keep rounded corners */
|
|
.login-button {
|
|
border-radius: 14px !important;
|
|
}
|
|
|
|
/* Prompt cards: rounded corners */
|
|
.profile-main section > div {
|
|
border-radius: 18px !important;
|
|
box-shadow: 0 2px 8px rgba(59,130,246,0.06);
|
|
}
|
|
|
|
/* Prompt images: rounded corners */
|
|
.profile-main section img {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
/* Avatar remains round */
|
|
.profile-avatar {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
/* All outer containers stay square */
|
|
.layout,
|
|
.profile-main,
|
|
.profile-header,
|
|
.profile-tabs,
|
|
nav {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Responsive: tablets */
|
|
@media (max-width: 768px) {
|
|
.profile-main {
|
|
padding: 16px !important;
|
|
}
|
|
.profile-header {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
}
|
|
.profile-header > div:last-child {
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Responsive: mobile */
|
|
@media (max-width: 480px) {
|
|
.profile-main {
|
|
padding: 12px !important;
|
|
}
|
|
.profile-header > div:last-child {
|
|
flex-direction: column;
|
|
}
|
|
.profile-main section:last-child {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
} |