mirror of
https://github.com/discourse/discourse.git
synced 2024-12-01 02:53:40 +08:00
Flatter design on User Page
- Cleanup of the design ( remove border-radius ... ) - Fixed some alignment and width in mobile and lower screen size
This commit is contained in:
parent
57d78aaba6
commit
3826e67007
|
@ -56,7 +56,6 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: $nav-stacked-background-color;
|
background-color: $nav-stacked-background-color;
|
||||||
@include border-radius-all(4px);
|
|
||||||
@include box-shadow(0 1px 0 $white);
|
@include box-shadow(0 1px 0 $white);
|
||||||
> li {
|
> li {
|
||||||
border-bottom: 1px solid $nav-stacked-divider-color;
|
border-bottom: 1px solid $nav-stacked-divider-color;
|
||||||
|
@ -66,16 +65,15 @@
|
||||||
> a {
|
> a {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 13px 13px 13px 30px;
|
padding: 13px 13px 13px 30px;
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: $nav-stacked-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.active > a,
|
.active > a,
|
||||||
.active .icon-chevron-right {
|
.active .icon-chevron-right {
|
||||||
color: $nav-stacked-border-color-active;
|
color: $white;
|
||||||
text-shadow: 0 1px 0 rgba($white, 0.5);
|
|
||||||
background-color: $nav-stacked-background-color-active;
|
background-color: $nav-stacked-background-color-active;
|
||||||
}
|
}
|
||||||
.count {
|
.count {
|
||||||
|
|
|
@ -71,12 +71,13 @@ $nav-pills-background-color-active: #e45735 !default;
|
||||||
|
|
||||||
// Stacked nav
|
// Stacked nav
|
||||||
|
|
||||||
|
$nav-stacked-color: #534d4b !default;
|
||||||
$nav-stacked-border-color: #ccc !default;
|
$nav-stacked-border-color: #ccc !default;
|
||||||
$nav-stacked-background-color: #fafafa !default;
|
$nav-stacked-background-color: #fafafa !default;
|
||||||
$nav-stacked-divider-color: #e6e6e6 !default;
|
$nav-stacked-divider-color: #e6e6e6 !default;
|
||||||
$nav-stacked-chevron-color: #ccc !default;
|
$nav-stacked-chevron-color: #ccc !default;
|
||||||
$nav-stacked-border-color-active: #f15b22 !default;
|
$nav-stacked-border-color-active: #f15b22 !default;
|
||||||
$nav-stacked-background-color-active: #f9e7e0 !default;
|
$nav-stacked-background-color-active: #e45735 !default;
|
||||||
|
|
||||||
// Button nav
|
// Button nav
|
||||||
|
|
||||||
|
|
|
@ -40,7 +40,6 @@
|
||||||
color: $darkish_gray;
|
color: $darkish_gray;
|
||||||
}
|
}
|
||||||
.warning {
|
.warning {
|
||||||
@include border-radius-all(6px);
|
|
||||||
background-color: lighten($red, 10%);
|
background-color: lighten($red, 10%);
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
color: $white;
|
color: $white;
|
||||||
|
@ -110,16 +109,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-main {
|
.user-main {
|
||||||
width: 840px;
|
width: 850px;
|
||||||
float: left;
|
float: left;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
|
|
||||||
@include medium-width {
|
@include medium-width {
|
||||||
width: 730px;
|
width: 735px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include small-width {
|
@include small-width {
|
||||||
width: 650px;
|
width: 680px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-content {
|
.user-content {
|
||||||
|
@ -127,21 +126,18 @@
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@include border-radius-all(4px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about {
|
.about {
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid #bbb;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
@include border-radius-all(4px);
|
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 12px;
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@ -188,11 +184,12 @@
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
@include border-radius-all(4px);
|
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
color: white;
|
color: white;
|
||||||
margin: 0 0 7px 0;
|
margin: 0 0 7px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
dt {
|
dt {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
|
@ -203,9 +200,8 @@
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
margin-top: 10px;
|
padding: 12px;
|
||||||
padding: 5px;
|
height: 30px;
|
||||||
height: 32px;
|
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
float: right;
|
float: right;
|
||||||
|
@ -273,7 +269,6 @@
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@include border-radius-all(4px);
|
|
||||||
}
|
}
|
||||||
.type {
|
.type {
|
||||||
color: lighten($black, 40%);
|
color: lighten($black, 40%);
|
||||||
|
|
|
@ -47,7 +47,6 @@
|
||||||
width: 220px;
|
width: 220px;
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
border-radius: 5px;
|
|
||||||
color: #444;
|
color: #444;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
@ -56,8 +55,12 @@
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
color: #666;
|
color: #666;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
.nav-stacked {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary {
|
.summary {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
@ -112,11 +115,8 @@
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid #bbb;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
@include border-radius-all(4px);
|
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
@ -145,7 +145,6 @@
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
@include border-radius-all(4px);
|
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
color: white;
|
color: white;
|
||||||
|
@ -161,9 +160,49 @@
|
||||||
.controls {
|
.controls {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
padding: 5px;
|
padding: 10px 10px 0 10px;
|
||||||
|
|
||||||
button { margin-bottom: 3px; }
|
.btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about.collapsed-info {
|
||||||
|
.controls {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
.secondary { display: none; }
|
||||||
|
.bio { display: none; }
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
border: 2px solid white;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin:0;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -188,9 +227,7 @@
|
||||||
.item {
|
.item {
|
||||||
padding: 10px 8px;
|
padding: 10px 8px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid #b9b9b9;
|
border-bottom: 1px solid #b9b9b9;
|
||||||
margin-bottom: 10px;
|
|
||||||
@include border-radius-all(4px);
|
|
||||||
}
|
}
|
||||||
.type {
|
.type {
|
||||||
color: lighten($black, 40%);
|
color: lighten($black, 40%);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user