Merge styles

main
落雨楓 3 years ago
parent 4bfee15f29
commit 4cf69c209b

@ -299,6 +299,12 @@
} }
} }
} }
.avatar {
display: flex;
align-items: center;
justify-content: center;
}
} }
@ -356,7 +362,7 @@
.picture-switcher { .picture-switcher {
img, .user-icon { img, .user-icon {
.user-icon-style(46px, 2.4rem, 50%); .user-icon-style(4.6rem, 2.4rem, 50%);
} }
@media (max-width: @screen-sm) { @media (max-width: @screen-sm) {

@ -439,6 +439,7 @@
.navbar-toggle { .navbar-toggle {
border-color: @navbar-default-toggle-border-color; border-color: @navbar-default-toggle-border-color;
color: @navbar-default-link-color;
&:hover, &:hover,
&:focus { &:focus {
background-color: @navbar-default-toggle-hover-bg; background-color: @navbar-default-toggle-hover-bg;

@ -42,10 +42,10 @@
// //
//## Font, line-height, and color for body text, headings, and more. //## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-monospace: "Yahei Consolas Hybrid", "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", "Microsoft Yahei", monospace;
@font-family-base: @font-family-sans-serif; @font-family-base: @font-family-sans-serif;
@font-size-base: 14px; @font-size-base: 14px;
@ -352,23 +352,23 @@
//## //##
// Basics of a navbar // Basics of a navbar
@navbar-height: 50px; @navbar-height: 60px;
@navbar-margin-bottom: @line-height-computed; @navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base; @navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); @navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px; @navbar-collapse-max-height: 340px;
@navbar-default-color: #333; @navbar-default-color: #fff;
@navbar-default-bg: white; @navbar-default-bg: #2c3e50;
@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-default-border: transparent;
// Navbar links // Navbar links
@navbar-default-link-color: #666; @navbar-default-link-color: #fff;
@navbar-default-link-hover-color: #333; @navbar-default-link-hover-color: #e6e6e6;
@navbar-default-link-hover-bg: transparent; @navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555; @navbar-default-link-active-color: #fff;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); @navbar-default-link-active-bg: darken(@navbar-default-bg, 10%);
@navbar-default-link-disabled-color: #ccc; @navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent; @navbar-default-link-disabled-bg: transparent;
@ -378,35 +378,35 @@
@navbar-default-brand-hover-bg: transparent; @navbar-default-brand-hover-bg: transparent;
// Navbar toggle // Navbar toggle
@navbar-default-toggle-hover-bg: #ddd; @navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 10%);
@navbar-default-toggle-icon-bar-bg: #888; @navbar-default-toggle-icon-bar-bg: #fff;
@navbar-default-toggle-border-color: #ddd; @navbar-default-toggle-border-color: darken(@navbar-default-bg, 10%);
// Inverted navbar // Inverted navbar
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: lighten(@gray-light, 15%); @navbar-inverse-color: #fff;
@navbar-inverse-bg: #222; @navbar-inverse-bg: #18bc9c;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); @navbar-inverse-border: transparent;
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: lighten(@gray-light, 15%); @navbar-inverse-link-color: #fff;
@navbar-inverse-link-hover-color: #fff; @navbar-inverse-link-hover-color: #2c3e50;
@navbar-inverse-link-hover-bg: transparent; @navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; @navbar-inverse-link-active-color: #fff;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 5%);
@navbar-inverse-link-disabled-color: #444; @navbar-inverse-link-disabled-color: #ccc;
@navbar-inverse-link-disabled-bg: transparent; @navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label // Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color; @navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff; @navbar-inverse-brand-hover-color: @navbar-inverse-link-hover-color;
@navbar-inverse-brand-hover-bg: transparent; @navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle // Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333; @navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-toggle-icon-bar-bg: #fff; @navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333; @navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
//== Navs //== Navs

@ -19,18 +19,24 @@
padding: 10px 15px; padding: 10px 15px;
.icon { .icon {
font-size: 17px; font-size: 1.7rem;
line-height: 17px;
padding: 13px;
border-radius: 50%; border-radius: 50%;
margin-right: 15px; margin-right: 1.5rem;
min-width: 46px; min-width: 4.6rem;
min-height: 46px; min-height: 4.6rem;
margin-top: 2px; margin-top: 0.2rem;
display: flex;
align-items: center;
justify-content: center;
> .fa {
display: inline;
width: inherit;
}
} }
img, .user-icon { img, .user-icon {
.user-icon-style(46px, 2.4rem, 50%); .user-icon-style(4.6rem, 2.4rem, 50%);
} }
h2 { h2 {
@ -40,7 +46,7 @@
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
margin: 0; margin: 0;
margin-left: 62px; margin-left: 6.2rem;
strong { strong {
color: @gray-dark; color: @gray-dark;
@ -107,12 +113,18 @@
margin-bottom: 1px; margin-bottom: 1px;
} }
.icon { .icon {
min-width: 23px; min-width: 2.3rem;
min-height: 23px; min-height: 2.3rem;
font-size: 10px; font-size: 1rem;
line-height: 12px; margin-right: 0.5rem;
padding: 5px; display: flex;
margin-right: 5px; align-items: center;
justify-content: center;
> .fa {
display: inline;
width: inherit;
}
} }
} }

@ -38,7 +38,7 @@
} }
.fa-check { .fa-check {
padding: 14.5px; /* 14.5*2 + 15 + 2px border = 46px */ //padding: 14.5px; /* 14.5*2 + 15 + 2px border = 46px */
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
font-size: 15px; font-size: 15px;
@ -49,7 +49,9 @@
background: white; background: white;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 14px; display: flex;
justify-content: center;
align-items: center;
&:before { &:before {
.pointer; .pointer;
@ -58,6 +60,12 @@
.avatar { .avatar {
opacity: 1; opacity: 1;
&.avatar-rounded {
display: flex;
justify-content: center;
align-items: center;
}
} }
.fa-check, .avatar { .fa-check, .avatar {
@ -109,9 +117,11 @@
} }
.fa-stack { .fa-stack {
font-size: 90%; font-size: 1rem;
border-radius: 50%; border-radius: 50%;
vertical-align: -6px; display: inline-flex;
align-items: center;
justify-items: center;
} }
.card .user-icon { .card .user-icon {

@ -297,12 +297,12 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
bottom: 2px; bottom: 0.2rem;
left: 53px; left: 53px;
li { li {
display: inline-block; display: inline-block;
width: 16px; width: 1.6rem;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -312,14 +312,14 @@
.avatar { .avatar {
border: 2px solid white; border: 2px solid white;
width: 28px; width: 2.8rem;
height: 28px; height: 2.8rem;
line-height: 26px; line-height: 2.6rem;
vertical-align: bottom; vertical-align: bottom;
} }
img { img {
margin-top: -4px; margin-top: -0.4rem;
} }
} }
} }
@ -330,16 +330,16 @@
left: 0px; left: 0px;
.avatar { .avatar {
height: 80px; height: 8rem;
width: 80px; width: 8rem;
font-size: 40px; font-size: 4rem;
border-radius: 0; border-radius: 0;
} }
} }
.avatar-placeholder { .avatar-placeholder {
height: 80px; height: 8rem;
width: 80px; width: 8rem;
background: @gray-lighter; background: @gray-lighter;
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -540,6 +540,12 @@
margin: 0 2rem; margin: 0 2rem;
} }
} }
.avatar {
display: flex;
align-items: center;
justify-content: center;
}
} }
.user-typing { .user-typing {

@ -128,7 +128,7 @@
} }
#user_dropdown { #user_dropdown {
padding: 9px 15px; padding: ((@navbar-height - 30px) / 2) 15px;
img, .user-icon { img, .user-icon {
.user-icon-style(30px, 1.8rem, 50%); .user-icon-style(30px, 1.8rem, 50%);

@ -51,7 +51,7 @@
} }
.navbar-toggle { .navbar-toggle {
padding: 10px 17px; padding: ((@navbar-height - 30px) / 2) 17px;
margin: 0; margin: 0;
line-height: 30px; line-height: 30px;
border: none; border: none;
@ -113,9 +113,9 @@
left: 0; left: 0;
.avatar { .avatar {
height: 40px; height: 4rem;
width: 40px; width: 4rem;
font-size: 20px; font-size: 2rem;
border-radius: 0; border-radius: 0;
} }
} }
@ -275,6 +275,9 @@
bottom: -22px; bottom: -22px;
left: 93px; left: 93px;
border-radius: 50%; border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
} }
i { i {

@ -32,8 +32,8 @@
display: block; display: block;
position: fixed; position: fixed;
z-index: 1031; z-index: 1031;
top: 15px; top: 20px;
right: 15px; right: 20px;
} }
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {

@ -54,15 +54,18 @@
&::after { &::after {
content: '\f06e'; content: '\f06e';
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 13px; font-size: 1rem;
background: black; background: black;
border-radius: 50%; border-radius: 50%;
color: white; color: white;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 20px; width: 2rem;
height: 20px; height: 2rem;
display: flex;
align-items: center;
justify-content: center;
} }
} }
@ -71,8 +74,11 @@
} }
a { a {
padding: 3px 15px; padding: 0;
font-size: 20px; font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
&.user-icon { &.user-icon {
overflow: visible; overflow: visible;
@ -83,8 +89,8 @@
} }
border-radius: 50%; border-radius: 50%;
height: 50px; height: 5rem;
width: 50px; width: 5rem;
> span { > span {
display: none; display: none;
@ -96,11 +102,17 @@
animation-duration: 1s; animation-duration: 1s;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
animation-fill-mode: both; animation-fill-mode: both;
> i {
width: inherit;
line-height: 1;
display: inline;
}
} }
img { img {
max-width: 24px; max-width: 2.4rem;
max-height: 24px; max-height: 2.4rem;
margin-right: 1em; margin-right: 1em;
} }
@ -153,8 +165,8 @@
margin-left: 15px; margin-left: 15px;
i { i {
font-size: 18px; font-size: 1.8rem;
line-height: 42px; line-height: 4.2rem;
color: #FFF; color: #FFF;
} }
} }

@ -84,6 +84,9 @@
.fa-stack { .fa-stack {
font-size: 10px; font-size: 10px;
border-radius: 50%; border-radius: 50%;
display: inline-flex;
align-items: center;
justify-items: center;
} }
} }
} }

@ -60,13 +60,19 @@
} }
.category-item { .category-item {
.icon { .icon {
min-width: 23px; min-width: 2.3rem;
min-height: 23px; min-height: 2.3rem;
font-size: 10px; font-size: 1rem;
line-height: 12px; margin-right: 0.5rem;
padding: 5px;
margin-right: 5px;
border-radius: 50%; border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
> .fa {
display: inline;
width: inherit;
}
} }
} }
@ -106,26 +112,25 @@
.icon { .icon {
position: relative; position: relative;
border-radius: 50%; border-radius: 50%;
min-width: 46px; font-size: 12px;
min-height: 46px;
margin-top: 2px;
> a > .status { > a > .status {
position: absolute; position: absolute;
right: 12px; font-size: 1.2rem;
font-size: 12px; left: 1.4rem;
top: 0px; top: -0.5rem;
z-index: 1; z-index: 1;
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
top: 2px; top: 0.2rem;
font-size: 16px; left: auto;
right: 1rem;
font-size: 1.6rem;
} }
} }
.avatar { .avatar {
margin-right: 15px; margin-right: 1.5rem;
} }
} }
@ -352,7 +357,10 @@
margin-top: -3px; margin-top: -3px;
.avatar { .avatar {
.user-icon-style(23px, 1.3rem, 50%); display: flex;
align-items: center;
justify-content: center;
.user-icon-style(2.3rem, 1.3rem, 50%);
} }
} }
@ -369,24 +377,24 @@
.icon { .icon {
position: relative; position: relative;
border-radius: 50%; border-radius: 50%;
min-width: 46px; min-width: 4.6rem;
min-height: 46px; min-height: 4.6rem;
margin-top: 2px; margin-top: 0.2rem;
> a > .status { > a > .status {
position: absolute; position: absolute;
right: 12px; right: 1.2rem;
font-size: 12px; font-size: 1.2rem;
top: 0px; top: 0;
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
top: 2px; top: 0.2rem;
font-size: 16px; font-size: 1.6rem;
} }
} }
.avatar { .avatar {
margin-right: 15px; margin-right: 1.5rem;
} }
} }
@ -511,17 +519,17 @@
.pagination-block { .pagination-block {
position: fixed; position: fixed;
background-color: @gray-lighter; background-color: #c0c0c0;
bottom: 0px; bottom: 0;
right: 0px; right: 0;
z-index: 100; z-index: 100;
transition: opacity 250ms ease-in; transition: opacity 250ms ease-in;
opacity: 0; opacity: 0;
.pagination-text { .pagination-text {
color: @text-color; color: #fff;
position: relative; position: relative;
top: -3px; top: -0.4rem;
font-weight: bolder; font-weight: bolder;
} }
@ -530,12 +538,17 @@
} }
.wrapper { .wrapper {
padding: 5px 0px 5px 0px; padding: 0.5rem 0 0.5rem 0;
color: #fff;
.pagination-text {
vertical-align: baseline;
}
.dropdown-toggle { .dropdown-toggle {
padding-left: 20px; padding-left: 2rem;
padding-right: 20px; padding-right: 2rem;
padding-top: 10px; padding-top: 1rem;
padding-bottom: 10px; padding-bottom: 1rem;
line-height: 2.6rem;
} }
.dropdown-menu { .dropdown-menu {
width: 475px; width: 475px;

Loading…
Cancel
Save