discourse/app/assets/stylesheets/mobile/user.scss

295 lines
4.3 KiB
SCSS

// Mobile styles for "/user" section
.user-right {
&,
> .user-stream {
> .alert:first-child {
margin-top: 20px;
}
}
}
.user-main {
table.group-members {
width: 100%;
p {
max-width: 600px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
th {
padding: 0.5em;
text-align: right;
border-bottom: 1px solid $primary-low;
}
td {
padding: 0.5em;
border-bottom: 1px solid $primary-low;
img {
margin-right: 10px;
}
span.text {
float: right;
color: $primary;
}
}
.user-info {
width: 245px;
}
}
.user-content {
background-color: $secondary;
box-sizing: border-box;
margin-top: 10px;
.btn.right {
float: right
}
table {
width: 100%;
margin-top: 10px;
th {
text-align: left;
border-bottom: 1px solid $primary-low;
padding: 5px;
}
td {
padding: 5px;
border-bottom: 1px solid $primary-low;
}
}
}
.about {
background: dark-light-diff($primary, $secondary, 0%, -75%) center;
margin-bottom: 10px;
color: $secondary;
&.no-background {
.profile-image {
display: none;
}
}
.secondary {
background: $primary-low;
dl {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 10px;
}
dd {
margin: 0 15px 0 5px;
}
}
.details {
padding: 15px 5px 5px 5px;
h1 {
margin: 0;
line-height: $line-height-small;
}
h2 {
line-height: $line-height-medium;
}
.primary {
display: flex;
flex-wrap: wrap;
color: $primary;
.avatar {
margin: 0 5px 10px 5px;
}
.primary-textual {
flex: 1 1 40%;
padding-left: 5px;
word-break: break-word;
a[href] {
color: $primary;
}
}
.bio {
color: $primary;
max-width: 700px;
}
}
.user-profile-avatar .avatar-flair {
right: 2px;
}
}
.controls {
order: 3;
flex: 1 1 25%;
margin-left: auto;
ul {
margin: 0;
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
}
li {
display: flex;
flex: 1 1 auto;
margin: 0 5px;
}
span {
flex: 0 1 100%;
margin: 0 5px;
}
.user-profile-controls-outlet {
margin: 0;
li {
margin: 0;
}
}
a {
flex: 1 1 auto;
min-width: 120px;
}
}
&.collapsed-info {
.details {
.primary {
.primary-textual {
margin: 0 10px 5px 0;
}
.avatar {
margin: 0 5px 10px 5px;
}
}
}
.user-profile-avatar .avatar-flair {
bottom: 12px;
}
}
}
.user-field {
label {
width: auto;
text-align: left;
font-weight: bold;
}
}
}
.profile-image {
height: 25px;
width: 100%;
}
.has-background .details {
margin-top: 200px;
}
.form-horizontal .control-group.category {
margin-top: 18px;
}
.paginated-topics-list {
margin-top: 20px;
}
.stats-section {
li {
margin: 0 15px 10px 0;
padding: 0;
&.linked-stat {
a {
padding: 0;
}
}
}
}
// mobile fixups for badges
.badge-card.medium {
width: 100%;
}
.user-badges {
margin-bottom: 2em;
}
.show-badge-details {
margin-bottom: 1em;
.badge-grant-info {
display: none;
}
}
.user-preferences {
.instructions {
margin-top: 5px;
}
.category-controls {
padding-top: 8px;
}
.controls-dropdown {
margin-top: 10px;
margin-bottom: 15px;
select {
width: 280px;
}
}
.save-button {
width: 100%;
overflow: auto;
max-width: 200px;
button {
display: block;
}
}
.delete-account {
overflow: hidden;
}
.checkbox-label {
display: flex;
overflow: auto;
width: 100%;
padding: 5px 0;
input {
margin-right: 5px;
}
}
.desktop-notifications button {
float: none;
}
.apps .controls button {
float: right;
}
}