Merge styles

main
落雨楓 2 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 {
img, .user-icon {
.user-icon-style(46px, 2.4rem, 50%);
.user-icon-style(4.6rem, 2.4rem, 50%);
}
@media (max-width: @screen-sm) {

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

@ -42,10 +42,10 @@
//
//## 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;
//** 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-size-base: 14px;
@ -352,23 +352,23 @@
//##
// Basics of a navbar
@navbar-height: 50px;
@navbar-height: 60px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #333;
@navbar-default-bg: white;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-default-color: #fff;
@navbar-default-bg: #2c3e50;
@navbar-default-border: transparent;
// Navbar links
@navbar-default-link-color: #666;
@navbar-default-link-hover-color: #333;
@navbar-default-link-color: #fff;
@navbar-default-link-hover-color: #e6e6e6;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-active-color: #fff;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 10%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
@ -378,35 +378,35 @@
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #888;
@navbar-default-toggle-border-color: #ddd;
@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 10%);
@navbar-default-toggle-icon-bar-bg: #fff;
@navbar-default-toggle-border-color: darken(@navbar-default-bg, 10%);
// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: lighten(@gray-light, 15%);
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-color: #fff;
@navbar-inverse-bg: #18bc9c;
@navbar-inverse-border: transparent;
// Inverted navbar links
@navbar-inverse-link-color: lighten(@gray-light, 15%);
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-color: #fff;
@navbar-inverse-link-hover-color: #2c3e50;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-active-color: #fff;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 5%);
@navbar-inverse-link-disabled-color: #ccc;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@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;
// 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-border-color: #333;
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
//== Navs

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save