diff --git a/less/actions.less b/less/actions.less index 0c83afc..c299369 100644 --- a/less/actions.less +++ b/less/actions.less @@ -4,165 +4,164 @@ z-index: 2; margin: 0; - >li { - display: inline-block; - vertical-align: baseline; - - &.open { - - >a { - >i { - color: #000; - } - - &:before { - -webkit-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - opacity: 1; - filter: alpha(opacity=100); - } - } - } - - >span { - >i { - -webkit-transition: color; - -moz-transition: color; - -o-transition: color; - transition: color; - -webkit-transition-duration: 1300ms; - transition-duration: 1300ms; - color: @action-items-color; - font-size: 18px; - } - - &:hover { - cursor: pointer; - } - } - } - - >li>a, >a { - width: 30px; - height: 30px; - line-height: 37px; - display: inline-block; - text-align: center; - position: relative; - padding-left: 2px; - - >i { - -webkit-transition: color; - -moz-transition: color; - -o-transition: color; - transition: color; - -webkit-transition-duration: 1300ms; - transition-duration: 1300ms; - color: #666; - font-size: 18px; - } - - &:hover { - color: #000; - - >i { - color: #000; - } - - &:before { - -webkit-transform: scale3d(1, 1, 1); - -moz-transform: scale3d(1, 1, 1); - -ms-transform: scale3d(1, 1, 1); - -o-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - opacity: 1; - filter: alpha(opacity=100); - } - } - - &:before { - left: 0; - top: 0; - content: ""; - position: absolute; - width: 100%; - height: 100%; - -webkit-transform: scale3d(0, 0, 0); - -moz-transform: scale3d(0, 0, 0); - -ms-transform: scale3d(0, 0, 0); - -o-transform: scale3d(0, 0, 0); - transform: scale3d(0, 0, 0); - -webkit-transition: all; - -moz-transition: all; - -o-transition: all; - transition: all; - -webkit-transition-duration: 250ms; - transition-duration: 250ms; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; - background-color: rgba(0, 0, 0, .1); - z-index: 0; - border-radius: 50%; - opacity: 0; - filter: alpha(opacity=0); - } - } - - &.open { - z-index: 3; - - >a { - >i { - color: #000; - } - - &:before { - -webkit-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - opacity: 1; - filter: alpha(opacity=100); - } - } - } - - &.actions-alt { - >li { - >a { - >i { - color: #fff; - - &:hover { - color: #fff; - } - } - } - - &.open { - >a { - >i { - color: #fff; - } - } - } - } - } - - .thread-sort>span { - width: 30px; - height: 30px; - line-height: 37px; - display: inline-block; - text-align: center; - position: relative; - font-size: 20px; - } - - .user-picture { - .user-icon(32px, 1.9rem); - } + >li { + display: inline-block; + vertical-align: baseline; + + &.open { + >a { + >i { + color: #000; + } + + &:before { + -webkit-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); + opacity: 1; + filter: alpha(opacity=100); + } + } + } + + >span { + >i { + -webkit-transition: color; + -moz-transition: color; + -o-transition: color; + transition: color; + -webkit-transition-duration: 1300ms; + transition-duration: 1300ms; + color: @action-items-color; + font-size: 18px; + } + + &:hover { + cursor: pointer; + } + } + } + + >li>a, >a { + width: 30px; + height: 30px; + line-height: 37px; + display: inline-block; + text-align: center; + position: relative; + padding-left: 2px; + + >i { + -webkit-transition: color; + -moz-transition: color; + -o-transition: color; + transition: color; + -webkit-transition-duration: 1300ms; + transition-duration: 1300ms; + color: #666; + font-size: 18px; + } + + &:hover { + color: #000; + + >i { + color: #000; + } + + &:before { + -webkit-transform: scale3d(1, 1, 1); + -moz-transform: scale3d(1, 1, 1); + -ms-transform: scale3d(1, 1, 1); + -o-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + opacity: 1; + filter: alpha(opacity=100); + } + } + + &:before { + left: 0; + top: 0; + content: ""; + position: absolute; + width: 100%; + height: 100%; + -webkit-transform: scale3d(0, 0, 0); + -moz-transform: scale3d(0, 0, 0); + -ms-transform: scale3d(0, 0, 0); + -o-transform: scale3d(0, 0, 0); + transform: scale3d(0, 0, 0); + -webkit-transition: all; + -moz-transition: all; + -o-transition: all; + transition: all; + -webkit-transition-duration: 250ms; + transition-duration: 250ms; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + background-color: rgba(0, 0, 0, .1); + z-index: 0; + border-radius: 50%; + opacity: 0; + filter: alpha(opacity=0); + } + } + + &.open { + z-index: 3; + + >a { + >i { + color: #000; + } + + &:before { + -webkit-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); + opacity: 1; + filter: alpha(opacity=100); + } + } + } + + &.actions-alt { + >li { + >a { + >i { + color: #fff; + + &:hover { + color: #fff; + } + } + } + + &.open { + >a { + >i { + color: #fff; + } + } + } + } + } + + .thread-sort>span { + width: 30px; + height: 30px; + line-height: 37px; + display: inline-block; + text-align: center; + position: relative; + font-size: 20px; + } + + .user-picture { + .user-icon(32px, 1.9rem); + } } \ No newline at end of file diff --git a/less/breadcrumb.less b/less/breadcrumb.less index 1ced672..c2faf76 100644 --- a/less/breadcrumb.less +++ b/less/breadcrumb.less @@ -11,9 +11,9 @@ li { max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } diff --git a/less/buttons.less b/less/buttons.less index b3dec7f..967a5e1 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -1,36 +1,36 @@ .btn { - -webkit-transition: all; - -moz-transition: all; - -o-transition: all; - transition: all; - -webkit-transition-duration: 300ms; - transition-duration: 300ms; - border: 0; - border-radius: 2px; + -webkit-transition: all; + -moz-transition: all; + -o-transition: all; + transition: all; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + border: 0; + border-radius: 2px; - &:not(.btn-link):not(.btn-float):not(.command-edit):not(.command-delete):not(.selectpicker) { - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); + &:not(.btn-link):not(.btn-float):not(.command-edit):not(.command-delete):not(.selectpicker) { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); - &:hover { - box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15); - } - } + &:hover { + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15); + } + } - .caret { - margin-top: -3px; - } + .caret { + margin-top: -3px; + } } .btn[class*=bgm-] { - color: #fff; + color: #fff; } .btn-group:not(.bootstrap-select), .btn-group-vertical:not(.bootstrap-select) { - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3); + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3); } .btn-group .btn, .btn-group-vertical .btn, .btn-group .btn:active, .btn-group-vertical .btn:active, .btn-group .btn:focus, .btn-group-vertical .btn:focus, .btn-group .btn-group, .btn-group-vertical .btn-group { - box-shadow: none!important; + box-shadow: none!important; } .btn-group .btn, .btn-group-vertical .btn { @@ -38,528 +38,529 @@ } .btn-xs, .btn-group-xs>.btn { - padding: 2px 5px; - font-size: 11px; - line-height: 1.5; - border-radius: 2px; + padding: 2px 5px; + font-size: 11px; + line-height: 1.5; + border-radius: 2px; } .btn-link { - color: #797979; - text-decoration: none; - border-radius: 2px; + color: #797979; + text-decoration: none; + border-radius: 2px; - &:hover { - color: #0a0a0a; - text-decoration: none; - } + &:hover { + color: #0a0a0a; + text-decoration: none; + } - &:active, &:focus { - text-decoration: none; - } + &:active, &:focus { + text-decoration: none; + } } .btn-inverse { - color: #fff; - background-color: #454545; - border-color: transparent; - - &:focus, &.focus, &:hover { - color: #fff; - background-color: #454545; - border-color: transparent; - } - - &:active, &.active { - color: #fff; - background-color: #454545; - border-color: transparent; - background-image: none; - - &:hover, &:focus, &.focus { - color: #fff; - background-color: #1a1a1a; - border-color: rgba(0, 0, 0, 0); - } - } - - .badge { - color: #454545; - background-color: #fff; - } + color: #fff; + background-color: #454545; + border-color: transparent; + + &:focus, &.focus, &:hover { + color: #fff; + background-color: #454545; + border-color: transparent; + } + + &:active, &.active { + color: #fff; + background-color: #454545; + border-color: transparent; + background-image: none; + + &:hover, &:focus, &.focus { + color: #fff; + background-color: #1a1a1a; + border-color: rgba(0, 0, 0, 0); + } + } + + .badge { + color: #454545; + background-color: #fff; + } } .open>.dropdown-toggle.btn-inverse:hover, .open>.dropdown-toggle.btn-inverse:focus, .open>.dropdown-toggle.btn-inverse.focus { - color: #fff; - background-color: #1a1a1a; - border-color: rgba(0, 0, 0, 0); + color: #fff; + background-color: #1a1a1a; + border-color: rgba(0, 0, 0, 0); } .open>.dropdown-toggle.btn-inverse { - color: #fff; - background-color: #454545; - border-color: transparent; - background-image: none; + color: #fff; + background-color: #454545; + border-color: transparent; + background-image: none; } .btn-inverse.disabled, .btn-inverse[disabled], fieldset[disabled] .btn-inverse, .btn-inverse.disabled:hover, .btn-inverse[disabled]:hover, fieldset[disabled] .btn-inverse:hover, .btn-inverse.disabled:focus, .btn-inverse[disabled]:focus, fieldset[disabled] .btn-inverse:focus, .btn-inverse.disabled.focus, .btn-inverse[disabled].focus, fieldset[disabled] .btn-inverse.focus, .btn-inverse.disabled:active, .btn-inverse[disabled]:active, fieldset[disabled] .btn-inverse:active, .btn-inverse.disabled.active, .btn-inverse[disabled].active, fieldset[disabled] .btn-inverse.active { - background-color: #454545; - border-color: transparent; + background-color: #454545; + border-color: transparent; } .btn-icon { - border-radius: 50%; - width: 40px; - height: 40px; - padding: 0; - text-align: center; - position: relative; - - &:before { - left: 0; - top: 0; - content: ""; - position: absolute; - width: 100%; - height: 100%; - -webkit-transform: scale3d(0, 0, 0); - -moz-transform: scale3d(0, 0, 0); - -ms-transform: scale3d(0, 0, 0); - -o-transform: scale3d(0, 0, 0); - transform: scale3d(0, 0, 0); - -webkit-transition: all; - -moz-transition: all; - -o-transition: all; - transition: all; - -webkit-transition-duration: 250ms; - transition-duration: 250ms; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; - background-color: 50%; - z-index: 0; - border-radius: 300ms; - opacity: 0; - filter: alpha(opacity=0); - } - - &:hover { - - .md { - -webkit-transform: rotate(-360deg); - -ms-transform: rotate(-360deg); - -o-transform: rotate(-360deg); - transform: rotate(-360deg); - } - - &:before { - -webkit-transform: scale3d(1, 1, 1); - -moz-transform: scale3d(1, 1, 1); - -ms-transform: scale3d(1, 1, 1); - -o-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - opacity: 1; - filter: alpha(opacity=100); - } - } - - .md { - -webkit-transition: all; - -moz-transition: all; - -o-transition: all; - transition: all; - -webkit-transition-duration: 300ms; - transition-duration: 300ms; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; - font-size: 17px; - } - - &.btn-default:hover { - background: @btn-default-bg-color; - } + border-radius: 50%; + width: 40px; + height: 40px; + padding: 0; + text-align: center; + position: relative; + + &:before { + left: 0; + top: 0; + content: ""; + position: absolute; + width: 100%; + height: 100%; + -webkit-transform: scale3d(0, 0, 0); + -moz-transform: scale3d(0, 0, 0); + -ms-transform: scale3d(0, 0, 0); + -o-transform: scale3d(0, 0, 0); + transform: scale3d(0, 0, 0); + -webkit-transition: all; + -moz-transition: all; + -o-transition: all; + transition: all; + -webkit-transition-duration: 250ms; + transition-duration: 250ms; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + background-color: 50%; + z-index: 0; + border-radius: 300ms; + opacity: 0; + filter: alpha(opacity=0); + } + + &:hover { + .md { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + -o-transform: rotate(-360deg); + transform: rotate(-360deg); + } + + &:before { + -webkit-transform: scale3d(1, 1, 1); + -moz-transform: scale3d(1, 1, 1); + -ms-transform: scale3d(1, 1, 1); + -o-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + opacity: 1; + filter: alpha(opacity=100); + } + } + + .md { + -webkit-transition: all; + -moz-transition: all; + -o-transition: all; + transition: all; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + font-size: 17px; + } + + &.btn-default:hover { + background: @btn-default-bg-color; + } } .btn-float { - width:50px; - height:50px; - border-radius:50%; - position:absolute; - line-height:40px - - &:hover { - box-shadow:0 2px 7px rgba(0,0,0,.18) - } - - i { - -webkit-transition:all; - -moz-transition:all; - -o-transition:all; - transition:all; - -webkit-transition-duration:500ms; - transition-duration:500ms - } + width:50px; + height:50px; + border-radius:50%; + position:absolute; + line-height:40px + + &:hover { + box-shadow:0 2px 7px rgba(0,0,0,.18) + } + + i { + -webkit-transition:all; + -moz-transition:all; + -o-transition:all; + transition:all; + -webkit-transition-duration:500ms; + transition-duration:500ms + } } .btn-float:not(.bgm-white):not(.bgm-gray)>i { - color: #fff; + color: #fff; } .btn-float.bgm-white>i, .btn-float.bgm-gray>i { - color: #333; + color: #333; } .open .btn { - outline: 0!important; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important; + outline: 0!important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important; - &:focus, &:active { - outline: 0!important; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important; - } + &:focus, &:active { + outline: 0!important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important; + } } .btn-primary { - color: #fff; - background-color: @material-primary; - border-color: #0d8aee; - - &:focus, &.focus { - color: #fff; - background-color: @material-primary; - border-color: transparent; - } - - &:hover { - color: #fff; - background-color: @material-primary; - border-color: transparent; - } - - &:active, &.active { - color: #fff; - background-color: @material-primary; - border-color: transparent; - background-image: none; - - &:hover, &:focus, &.focus { - color: #fff; - background-color: #0a68b4; - border-color: #064475; - } - } - - .badge { - color: @material-primary; - background-color: #fff; - } + color: #fff; + background-color: @material-primary; + border-color: #0d8aee; + + &:focus, &.focus { + color: #fff; + background-color: @material-primary; + border-color: transparent; + } + + &:hover { + color: #fff; + background-color: @material-primary; + border-color: transparent; + } + + &:active, &.active { + color: #fff; + background-color: @material-primary; + border-color: transparent; + background-image: none; + + &:hover, &:focus, &.focus { + color: #fff; + background-color: #0a68b4; + border-color: #064475; + } + } + + .badge { + color: @material-primary; + background-color: #fff; + } } .open>.dropdown-toggle.btn-primary:hover, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary.focus { - color: #fff; - background-color: @material-primary; - border-color: #064475; + color: #fff; + background-color: @material-primary; + border-color: #064475; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { - background-color: @material-primary; - border-color: #0d8aee; + background-color: @material-primary; + border-color: #0d8aee; } .open>.dropdown-toggle.btn-primary { - color: #fff; - background-color: @material-primary; - border-color: transparent; - background-image: none; + color: #fff; + background-color: @material-primary; + border-color: transparent; + background-image: none; } .btn-success { - color: #fff; - background-color: @material-success; - border-color: #449d48; - - &:focus, &.focus { - color: #fff; - background-color: @material-success; - border-color: transparent; - } - - &:hover { - color: #fff; - background-color: @material-success; - border-color: transparent; - } - - &:active, &.active { - color: #fff; - background-color: @material-success; - border-color: transparent; - background-image: none; - - &:hover, &:focus, &.focus { - color: #fff; - background-color: #327334; - border-color: #1e441f; - } - } - - .badge { - color: @material-success; - background-color: #fff; - } + color: #fff; + background-color: @material-success; + border-color: #449d48; + + &:focus, &.focus { + color: #fff; + background-color: @material-success; + border-color: transparent; + } + + &:hover { + color: #fff; + background-color: @material-success; + border-color: transparent; + } + + &:active, &.active { + color: #fff; + background-color: @material-success; + border-color: transparent; + background-image: none; + + &:hover, &:focus, &.focus { + color: #fff; + background-color: #327334; + border-color: #1e441f; + } + } + + .badge { + color: @material-success; + background-color: #fff; + } } .open>.dropdown-toggle.btn-success:hover, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success.focus { - color: #fff; - background-color: #327334; - border-color: #1e441f; + color: #fff; + background-color: #327334; + border-color: #1e441f; } .open>.dropdown-toggle.btn-success { - color: #fff; - background-color: @material-success; - border-color: transparent; - background-image: none; + color: #fff; + background-color: @material-success; + border-color: transparent; + background-image: none; } .btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active { - background-color: @material-success; - border-color: #449d48; + background-color: @material-success; + border-color: #449d48; } .btn-info { - color: #fff; - background-color: #00bcd4; - border-color: #00a5bb; - - &:hover { - color: #fff; - background-color: #00bcd4; - border-color: transparent; - } - - &:focus, &.focus { - color: #fff; - background-color: #00bcd4; - border-color: transparent; - } - - &:active, &.active { - color: #fff; - background-color: #00bcd4; - border-color: transparent; - background-image: none; - - &:hover, &:focus, &.focus { - color: #fff; - background-color: #006f7d; - border-color: #00343b; - } - } - - .badge { - color: #00bcd4; - background-color: #fff; - } + color: #fff; + background-color: #00bcd4; + border-color: #00a5bb; + + &:hover { + color: #fff; + background-color: #00bcd4; + border-color: transparent; + } + + &:focus, &.focus { + color: #fff; + background-color: #00bcd4; + border-color: transparent; + } + + &:active, &.active { + color: #fff; + background-color: #00bcd4; + border-color: transparent; + background-image: none; + + &:hover, &:focus, &.focus { + color: #fff; + background-color: #006f7d; + border-color: #00343b; + } + } + + .badge { + color: #00bcd4; + background-color: #fff; + } } a.btn-info { - color: #fff; + color: #fff; } .open>.dropdown-toggle.btn-info:hover, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info.focus { - color: #fff; - background-color: #006f7d; - border-color: #00343b; + color: #fff; + background-color: #006f7d; + border-color: #00343b; } .open>.dropdown-toggle.btn-info { - color: #fff; - background-color: #00bcd4; - border-color: transparent; - background-image: none; + color: #fff; + background-color: #00bcd4; + border-color: transparent; + background-image: none; } .btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active { - background-color: #00bcd4; - border-color: #00a5bb; + background-color: #00bcd4; + border-color: #00a5bb; } .btn-warning { - color: #fff; - background-color: @material-warning; - border-color: #e68900; - - &:hover { - color: #fff; - background-color: @material-warning; - border-color: transparent; - } - - &:focus, &.focus { - color: #fff; - background-color: @material-warning; - border-color: transparent; - } - - &:active, &.active { - color: #fff; - background-color: @material-warning; - border-color: transparent; - background-image: none; - - &:hover, &:focus, &.focus { - color: #fff; - background-color: #a86400; - border-color: #663d00; - } - } - - .badge { - color: @material-warning; - background-color: #fff; - } + color: #fff; + background-color: @material-warning; + border-color: #e68900; + + &:hover { + color: #fff; + background-color: @material-warning; + border-color: transparent; + } + + &:focus, &.focus { + color: #fff; + background-color: @material-warning; + border-color: transparent; + } + + &:active, &.active { + color: #fff; + background-color: @material-warning; + border-color: transparent; + background-image: none; + + &:hover, &:focus, &.focus { + color: #fff; + background-color: #a86400; + border-color: #663d00; + } + } + + .badge { + color: @material-warning; + background-color: #fff; + } } .open>.dropdown-toggle.btn-warning:hover, .open>.dropdown-toggle.btn-warning:focus, .open>.dropdown-toggle.btn-warning.focus { - color: #fff; - background-color: #a86400; - border-color: #663d00; + color: #fff; + background-color: #a86400; + border-color: #663d00; } .open>.dropdown-toggle.btn-warning { - color: #fff; - background-color: @material-warning; - border-color: transparent; - background-image: none; + color: #fff; + background-color: @material-warning; + border-color: transparent; + background-image: none; } .btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning.focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active { - background-color: @material-warning; - border-color: #e68900; + background-color: @material-warning; + border-color: #e68900; } .btn-danger { - color: #fff; - background-color: @material-danger; - border-color: #f32c1e; - - &:hover { - color: #fff; - background-color: @material-danger; - border-color: transparent; - } - - &:focus, &.focus { - color: #fff; - background-color: @material-danger; - border-color: transparent; - } - - &:active, &.active { - color: #fff; - background-color: @material-danger; - border-color: transparent; - background-image: none; - - &:hover, &:focus, &.focus { - color: #fff; - background-color: #c8180b; - border-color: #891008; - } - } - - .badge { - color: @material-danger; - background-color: #fff; - } + color: #fff; + background-color: @material-danger; + border-color: #f32c1e; + + &:hover { + color: #fff; + background-color: @material-danger; + border-color: transparent; + } + + &:focus, &.focus { + color: #fff; + background-color: @material-danger; + border-color: transparent; + } + + &:active, &.active { + color: #fff; + background-color: @material-danger; + border-color: transparent; + background-image: none; + + &:hover, &:focus, &.focus { + color: #fff; + background-color: #c8180b; + border-color: #891008; + } + } + + .badge { + color: @material-danger; + background-color: #fff; + } } .open>.dropdown-toggle.btn-danger:hover, .open>.dropdown-toggle.btn-danger:focus, .open>.dropdown-toggle.btn-danger.focus { - color: #fff; - background-color: #c8180b; - border-color: #891008; + color: #fff; + background-color: #c8180b; + border-color: #891008; } .open>.dropdown-toggle.btn-danger { - color: #fff; - background-color: @material-danger; - border-color: transparent; - background-image: none; + color: #fff; + background-color: @material-danger; + border-color: transparent; + background-image: none; } .btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active { - background-color: @material-danger; - border-color: #f32c1e; + background-color: @material-danger; + border-color: #f32c1e; } .btn-link { - color: @material-primary; - font-weight: 400; - border-radius: 0; + color: @material-primary; + font-weight: 400; + border-radius: 0; } .btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], fieldset[disabled] .btn-link { - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { - border-color: transparent; + border-color: transparent; } .btn-link:hover, .btn-link:focus { - //color: #0a6ebd; - text-decoration: none; - background-color: transparent; + //color: #0a6ebd; + text-decoration: none; + background-color: transparent; } .btn-link[disabled]:hover, fieldset[disabled] .btn-link:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:focus { - color: #777; - text-decoration: none; + color: #777; + text-decoration: none; } .btn-lg, .btn-group-lg>.btn { - padding: 10px 16px; - font-size: 17px; - line-height: 1.3333333; - border-radius: 2px; + padding: 10px 16px; + font-size: 17px; + line-height: 1.3333333; + border-radius: 2px; } .btn-md { - padding: 8px; - font-size: 14px; - line-height: 1.3333333; - border-radius: 2px; + padding: 8px; + font-size: 14px; + line-height: 1.3333333; + border-radius: 2px; } .btn-sm, .btn-group-sm>.btn { - padding: 5px 10px; - font-size: 12px; - line-height: 1.5; - border-radius: 2px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 2px; } .btn-xs, .btn-group-xs>.btn { - padding: 1px 5px; - font-size: 12px; - line-height: 1.5; - border-radius: 2px; + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; + border-radius: 2px; } .btn-block { - display: block; - width: 100%} + display: block; + width: 100% +} .btn-block+.btn-block { - margin-top: 5px; + margin-top: 5px; } input[type=submit].btn-block, input[type=reset].btn-block, input[type=button].btn-block { - width: 100%} + width: 100% +} .fade { - opacity: 0; - -webkit-transition: opacity .15s linear; - -moz-transition: opacity .15s linear; - -o-transition: opacity .15s linear; - transition: opacity .15s linear; + opacity: 0; + -webkit-transition: opacity .15s linear; + -moz-transition: opacity .15s linear; + -o-transition: opacity .15s linear; + transition: opacity .15s linear; } /*.fade.in { @@ -567,509 +568,509 @@ input[type=submit].btn-block, input[type=reset].btn-block, input[type=button].bt }*/ .collapse { - display: none; + display: none; } .collapse.in { - display: block; + display: block; } tr.collapse.in { - display: table-row; + display: table-row; } tbody.collapse.in { - display: table-row-group; + display: table-row-group; } .collapsing { - position: relative; - height: 0; - overflow: hidden; - -webkit-transition-property: height, visibility; - transition-property: height, visibility; - -webkit-transition-duration: .35s; - transition-duration: .35s; - -webkit-transition-timing-function: ease; - transition-timing-function: ease; + position: relative; + height: 0; + overflow: hidden; + -webkit-transition-property: height, visibility; + transition-property: height, visibility; + -webkit-transition-duration: .35s; + transition-duration: .35s; + -webkit-transition-timing-function: ease; + transition-timing-function: ease; } .caret { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: 4px dashed; - border-right: 4px solid transparent; - border-left: 4px solid transparent; + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-right: 4px solid transparent; + border-left: 4px solid transparent; } .dropup, .dropdown { - position: relative; + position: relative; } .dropdown-toggle:focus { - outline: 0; + outline: 0; } .dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 9; - display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; - list-style: none; - font-size: 13px; - text-align: left; - background-color: @dropdown-bg-color; - border: 1px solid transparent; - border-radius: 2px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); - box-shadow: 0 6px 12px rgba(0, 0, 0, .175); - background-clip: padding-box; - - &.pull-right { - right: 0; - left: auto; - } - - .divider { - height: 1px; - margin: 2px; - overflow: hidden; - background-color: @border-color; - } - - >li>a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: 400; - line-height: 1.42857143; - color: @dropdown-color; - white-space: nowrap; - - &:hover, &:focus { - text-decoration: none; - color: #333; - background-color: rgba(0, 0, 0, .075); - } - } - - >.active>a, >.active>a:hover, >.active>a:focus { - color: #333; - text-decoration: none; - outline: 0; - background-color: rgba(0, 0, 0, .075); - } - + position: absolute; + top: 100%; + left: 0; + z-index: 9; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 13px; + text-align: left; + background-color: @dropdown-bg-color; + border: 1px solid transparent; + border-radius: 2px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + background-clip: padding-box; + + &.pull-right { + right: 0; + left: auto; + } + + .divider { + height: 1px; + margin: 2px; + overflow: hidden; + background-color: @border-color; + } + + >li>a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: 400; + line-height: 1.42857143; + color: @dropdown-color; + white-space: nowrap; + + &:hover, &:focus { + text-decoration: none; + color: #333; + background-color: rgba(0, 0, 0, .075); + } + } + + >.active>a, >.active>a:hover, >.active>a:focus { + color: #333; + text-decoration: none; + outline: 0; + background-color: rgba(0, 0, 0, .075); + } } .dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:hover, .dropdown-menu>.disabled>a:focus { - color: #e4e4e4; + color: #e4e4e4; } .dropdown-menu>.disabled>a:hover, .dropdown-menu>.disabled>a:focus { - text-decoration: none; - background-color: transparent; - background-image: none; - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); - cursor: not-allowed; + text-decoration: none; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + cursor: not-allowed; } .open>.dropdown-menu { - display: block; + display: block; } .open>a { - outline: 0; + outline: 0; } .dropdown-menu-right { - left: auto; - right: 0; + left: auto; + right: 0; } .dropdown-menu-left { - left: 0; - right: auto; + left: 0; + right: auto; } .dropdown-header { - display: block; - padding: 3px 20px; - font-size: 12px; - line-height: 1.42857143; - color: #777; - white-space: nowrap; + display: block; + padding: 3px 20px; + font-size: 12px; + line-height: 1.42857143; + color: #777; + white-space: nowrap; } .dropdown-backdrop { - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: 0; - z-index: -1; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: -1; } .pull-right>.dropdown-menu { - right: 0; - left: auto; + right: 0; + left: auto; } .dropup .caret, .navbar-fixed-bottom .dropdown .caret { - border-top: 0; - border-bottom: 4px solid; - content: ""} + border-top: 0; + border-bottom: 4px solid; + content: "" +} .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: 2px; + top: auto; + bottom: 100%; + margin-bottom: 2px; } @media (min-width: @screen-sm-min) { - .navbar-right .dropdown-menu { - left: auto; - right: 0; - } - .navbar-right .dropdown-menu-left { - left: 0; - right: auto; - } + .navbar-right .dropdown-menu { + left: auto; + right: 0; + } + .navbar-right .dropdown-menu-left { + left: 0; + right: auto; + } } .btn-group>.btn:hover, .btn-group-vertical>.btn:hover, .btn-group>.btn:focus, .btn-group-vertical>.btn:focus, .btn-group>.btn:active, .btn-group-vertical>.btn:active, .btn-group>.btn.active, .btn-group-vertical>.btn.active { - z-index: 2; + z-index: 2; } .btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group { - margin-left: -1px; + margin-left: -1px; } .btn-toolbar { - margin-left: -5px; + margin-left: -5px; } .btn-toolbar .btn-group, .btn-toolbar .input-group { - float: left; + float: left; } .btn-toolbar>.btn, .btn-toolbar>.btn-group, .btn-toolbar>.input-group { - margin-left: 5px; + margin-left: 5px; } .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { - border-radius: 0; + border-radius: 0; } .btn-group>.btn:first-child { - margin-left: 0; + margin-left: 0; } .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; } .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; } .btn-group>.btn-group { - float: left; + float: left; } .btn-group>.btn-group:not(:first-child):not(:last-child)>.btn { - border-radius: 0; + border-radius: 0; } .btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child, .btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle { - border-bottom-right-radius: 0; - border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; } .btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child { - border-bottom-left-radius: 0; - border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; } .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { - outline: 0; + outline: 0; } .btn-group>.btn+.dropdown-toggle { - padding-left: 8px; - padding-right: 8px; + padding-left: 8px; + padding-right: 8px; } .btn-group>.btn-lg+.dropdown-toggle { - padding-left: 12px; - padding-right: 12px; + padding-left: 12px; + padding-right: 12px; } .btn-group.open .dropdown-toggle { - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); - box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn-group.open .dropdown-toggle.btn-link { - -webkit-box-shadow: none; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .btn .caret { - margin-left: 0; + margin-left: 0; } .btn-lg .caret { - border-width: 5px 5px 0; - border-bottom-width: 0; + border-width: 5px 5px 0; + border-bottom-width: 0; } .dropup .btn-lg .caret { - border-width: 0 5px 5px; + border-width: 0 5px 5px; } [data-toggle=buttons]>.btn input[type=radio], [data-toggle=buttons]>.btn-group>.btn input[type=radio], [data-toggle=buttons]>.btn input[type=checkbox], [data-toggle=buttons]>.btn-group>.btn input[type=checkbox] { - position: absolute; - clip: rect(0, 0, 0, 0); - pointer-events: none; + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; } .btn-floating { - width: 48px; - height: 48px; - padding: 6px; - border-radius: 50%; - border: 0; - font-size: 24px; - - &.large { - width: 56px; - height: 56px; - padding: 14px; - } - - ul { - position: absolute; - left: -3px; - top: 0; - z-index: 1; - visibility: hidden; - -webkit-transition: visibility 280ms cubic-bezier(0.35, 0, 0.25, 1) 280ms; - transition: visibility 280ms cubic-bezier(0.35, 0, 0.25, 1) 280ms; - padding: 52px 0 0 0; - - li { - opacity: 0; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - list-style-type: none; - margin: 10px 5px; - -webkit-transition: all 280ms cubic-bezier(0.35, 0, 0.25, 1); - transition: all 280ms cubic-bezier(0.35, 0, 0.25, 1); - - img { - width: 36px; - height: 36px; - border: 1px solid #f0f0f0; - } - - &:nth-child(1) { - margin: 10px; - -webkit-transition-delay: 420ms; - transition-delay: 420ms; - } - - &:nth-child(2) { - -webkit-transition-delay: 320ms; - transition-delay: 320ms; - } - - &:nth-child(3) { - -webkit-transition-delay: 220ms; - transition-delay: 220ms; - } - - &:nth-child(4) { - -webkit-transition-delay: 120ms; - transition-delay: 120ms; - } - - &:nth-child(5) { - -webkit-transition-delay: 20ms; - transition-delay: 20ms; - } - } - - &.to-right { - top: -6px; - left: 0; - padding: 0 0 0 52px; - - li { - display: inline-block; - } - } - - &.to-left { - top: -6px; - right: 0; - left: auto; - padding: 0 60px 0 0; - - li { - display: inline-block; - - &:nth-child(1) { - -webkit-transition-delay: 20ms; - transition-delay: 20ms; - } - - &:nth-child(2) { - -webkit-transition-delay: 120ms; - transition-delay: 120ms; - } - - &:nth-child(3) { - -webkit-transition-delay: 220ms; - transition-delay: 220ms; - } - - &:nth-child(4) { - -webkit-transition-delay: 320ms; - transition-delay: 320ms; - } - - &:nth-child(5) { - -webkit-transition-delay: 420ms; - transition-delay: 420ms; - } - } - } - - &.to-top { - padding: 0 0 42px 0; - bottom: 0; - top: auto; - right: -5px; - - li { - &:nth-child(1) { - -webkit-transition-delay: 20ms; - transition-delay: 20ms; - } - - &:nth-child(2) { - -webkit-transition-delay: 120ms; - transition-delay: 120ms; - } - - &:nth-child(3) { - -webkit-transition-delay: 220ms; - transition-delay: 220ms; - } - - &:nth-child(4) { - -webkit-transition-delay: 320ms; - transition-delay: 320ms; - } - - &:nth-child(5) { - -webkit-transition-delay: 420ms; - transition-delay: 420ms; - } - } - } - } - - &.show-on-hover { - overflow: visible; - - .ripple { - display: none; - } - - &:hover { - ul { - visibility: visible; - -webkit-transition-delay: 0; - transition-delay: 0; - - li { - opacity: 1; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - - &:nth-child(1) { - -webkit-transition-delay: 20ms; - transition-delay: 20ms; - } - - &:nth-child(2) { - -webkit-transition-delay: 120ms; - transition-delay: 120ms; - } - - &:nth-child(3) { - -webkit-transition-delay: 220ms; - transition-delay: 220ms; - } - - &:nth-child(4) { - -webkit-transition-delay: 320ms; - transition-delay: 320ms; - } - - &:nth-child(5) { - -webkit-transition-delay: 420ms; - transition-delay: 420ms; - } - } - - &.to-top, &.to-left { - li { - &:nth-child(1) { - -webkit-transition-delay: 420ms; - transition-delay: 420ms; - } - - &:nth-child(2) { - -webkit-transition-delay: 320ms; - transition-delay: 320ms; - } - - &:nth-child(3) { - -webkit-transition-delay: 220ms; - transition-delay: 220ms; - } - - &:nth-child(4) { - -webkit-transition-delay: 120ms; - transition-delay: 120ms; - } - - &:nth-child(5) { - -webkit-transition-delay: 20ms; - transition-delay: 20ms; - } - } - } - } - } - } + width: 48px; + height: 48px; + padding: 6px; + border-radius: 50%; + border: 0; + font-size: 24px; + + &.large { + width: 56px; + height: 56px; + padding: 14px; + } + + ul { + position: absolute; + left: -3px; + top: 0; + z-index: 1; + visibility: hidden; + -webkit-transition: visibility 280ms cubic-bezier(0.35, 0, 0.25, 1) 280ms; + transition: visibility 280ms cubic-bezier(0.35, 0, 0.25, 1) 280ms; + padding: 52px 0 0 0; + + li { + opacity: 0; + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + list-style-type: none; + margin: 10px 5px; + -webkit-transition: all 280ms cubic-bezier(0.35, 0, 0.25, 1); + transition: all 280ms cubic-bezier(0.35, 0, 0.25, 1); + + img { + width: 36px; + height: 36px; + border: 1px solid #f0f0f0; + } + + &:nth-child(1) { + margin: 10px; + -webkit-transition-delay: 420ms; + transition-delay: 420ms; + } + + &:nth-child(2) { + -webkit-transition-delay: 320ms; + transition-delay: 320ms; + } + + &:nth-child(3) { + -webkit-transition-delay: 220ms; + transition-delay: 220ms; + } + + &:nth-child(4) { + -webkit-transition-delay: 120ms; + transition-delay: 120ms; + } + + &:nth-child(5) { + -webkit-transition-delay: 20ms; + transition-delay: 20ms; + } + } + + &.to-right { + top: -6px; + left: 0; + padding: 0 0 0 52px; + + li { + display: inline-block; + } + } + + &.to-left { + top: -6px; + right: 0; + left: auto; + padding: 0 60px 0 0; + + li { + display: inline-block; + + &:nth-child(1) { + -webkit-transition-delay: 20ms; + transition-delay: 20ms; + } + + &:nth-child(2) { + -webkit-transition-delay: 120ms; + transition-delay: 120ms; + } + + &:nth-child(3) { + -webkit-transition-delay: 220ms; + transition-delay: 220ms; + } + + &:nth-child(4) { + -webkit-transition-delay: 320ms; + transition-delay: 320ms; + } + + &:nth-child(5) { + -webkit-transition-delay: 420ms; + transition-delay: 420ms; + } + } + } + + &.to-top { + padding: 0 0 42px 0; + bottom: 0; + top: auto; + right: -5px; + + li { + &:nth-child(1) { + -webkit-transition-delay: 20ms; + transition-delay: 20ms; + } + + &:nth-child(2) { + -webkit-transition-delay: 120ms; + transition-delay: 120ms; + } + + &:nth-child(3) { + -webkit-transition-delay: 220ms; + transition-delay: 220ms; + } + + &:nth-child(4) { + -webkit-transition-delay: 320ms; + transition-delay: 320ms; + } + + &:nth-child(5) { + -webkit-transition-delay: 420ms; + transition-delay: 420ms; + } + } + } + } + + &.show-on-hover { + overflow: visible; + + .ripple { + display: none; + } + + &:hover { + ul { + visibility: visible; + -webkit-transition-delay: 0; + transition-delay: 0; + + li { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + + &:nth-child(1) { + -webkit-transition-delay: 20ms; + transition-delay: 20ms; + } + + &:nth-child(2) { + -webkit-transition-delay: 120ms; + transition-delay: 120ms; + } + + &:nth-child(3) { + -webkit-transition-delay: 220ms; + transition-delay: 220ms; + } + + &:nth-child(4) { + -webkit-transition-delay: 320ms; + transition-delay: 320ms; + } + + &:nth-child(5) { + -webkit-transition-delay: 420ms; + transition-delay: 420ms; + } + } + + &.to-top, &.to-left { + li { + &:nth-child(1) { + -webkit-transition-delay: 420ms; + transition-delay: 420ms; + } + + &:nth-child(2) { + -webkit-transition-delay: 320ms; + transition-delay: 320ms; + } + + &:nth-child(3) { + -webkit-transition-delay: 220ms; + transition-delay: 220ms; + } + + &:nth-child(4) { + -webkit-transition-delay: 120ms; + transition-delay: 120ms; + } + + &:nth-child(5) { + -webkit-transition-delay: 20ms; + transition-delay: 20ms; + } + } + } + } + } + } } a.btn-primary { - color: #fff; + color: #fff; } .btn-default { - background-color: @btn-default-bg-color; + background-color: @btn-default-bg-color; } .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default { - color:#333; - background-color: @btn-default-bg-color; - border-color:transparent; + color:#333; + background-color: @btn-default-bg-color; + border-color:transparent; } .btn-group-justified { - display: table; - width: 100%; - table-layout: fixed; - border-collapse: separate; + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; } .btn-group-justified>.btn, .btn-group-justified>.btn-group { - float: none; - display: table-cell; - width: 1%; + float: none; + display: table-cell; + width: 1%; } .btn-group-justified>.btn-group .btn { - width: 100%; + width: 100%; } .btn-group-justified>.btn-group .dropdown-menu { - left: auto; + left: auto; } \ No newline at end of file diff --git a/less/categories.less b/less/categories.less index cf4724b..d5381cc 100644 --- a/less/categories.less +++ b/less/categories.less @@ -1,307 +1,305 @@ .subcategory { - .media .pull-left { - width: 43px; - height: 43px; - border-radius: 50%; - display: block; - padding: 12px; - margin-right: 15px; - } - - .listview .lv-item .lv-actions { - @media (max-width: @screen-sm-max) { - right: 7px; - top: 10px; - } - } + .media .pull-left { + width: 43px; + height: 43px; + border-radius: 50%; + display: block; + padding: 12px; + margin-right: 15px; + } + + .listview .lv-item .lv-actions { + @media (max-width: @screen-sm-max) { + right: 7px; + top: 10px; + } + } } .category-card { - margin-bottom: 15px; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); - height: 245px; - position: relative; - - .category-card-body { - padding: 15px; - height: 200px; - color: #fff; - - a { - color: #fff; - } - - .category-description { - font-size: 13px; - } - - .category-counts { - display: flex; - position: absolute; - right: 5px; - top: 5px; - font-size: 12px; - - li>span { - margin: 0 5px; - } - } - - >a { - display: block; - } - } - - .category-card-footer { - background-color: rgba(17, 17, 17, .7); - border: 0; - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 10px; - - a { - color: #fff; - } - - .topic-content>a{ - padding-left: 15px; - } - - .user-avatar { - margin-right: 10px; - } - - .topic-title { - display: flex; - } - } + margin-bottom: 15px; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); + height: 245px; + position: relative; + + .category-card-body { + padding: 15px; + height: 200px; + color: #fff; + + a { + color: #fff; + } + + .category-description { + font-size: 13px; + } + + .category-counts { + display: flex; + position: absolute; + right: 5px; + top: 5px; + font-size: 12px; + + li>span { + margin: 0 5px; + } + } + + >a { + display: block; + } + } + + .category-card-footer { + background-color: rgba(17, 17, 17, .7); + border: 0; + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 10px; + + a { + color: #fff; + } + + .topic-content>a{ + padding-left: 15px; + } + + .user-avatar { + margin-right: 10px; + } + + .topic-title { + display: flex; + } + } } .category { + margin-left: -10px; + margin-right: -10px; - margin-left: -10px; - margin-right: -10px; - - .category-card { - height: 200px; - } + .category-card { + height: 200px; + } - [component="topic/select"] { - &:before { + [component="topic/select"] { + &:before { content: ""; display: none; } - } - - .listview { - .user-avatar { - .user-avatar(40px); - } - - .user-icon { - .user-icon(40px, 2rem); - } - } - - .category-card { - .user-avatar { - .user-avatar(35px); - } - - .user-icon { - .user-icon(35px, 1.9rem); - } - } + } + + .listview { + .user-avatar { + .user-avatar(40px); + } + + .user-icon { + .user-icon(40px, 2rem); + } + } + + .category-card { + .user-avatar { + .user-avatar(35px); + } + + .user-icon { + .user-icon(35px, 1.9rem); + } + } } .recent { - .listview { - .user-avatar { - .user-avatar(40px); - } - - .user-icon { - .user-icon(40px, 2rem); - } - } + .listview { + .user-avatar { + .user-avatar(40px); + } + + .user-icon { + .user-icon(40px, 2rem); + } + } } [component="category/topic"] { - .topic-title { - color: @topic-title-color; - } - - &.unread { - .topic-title { - color: @anchor-color; - } - } + .topic-title { + color: @topic-title-color; + } + + &.unread { + .topic-title { + color: @anchor-color; + } + } } /*-- Display animation -------------------------------- */ .display-animation > * { - -webkit-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - transform: scale(0); + -webkit-transform: scale(0); + -ms-transform: scale(0); + -o-transform: scale(0); + transform: scale(0); } .display-animation > .animated { - -webkit-animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards; - -o-animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards; - animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards; + -webkit-animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards; + -o-animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards; + animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards; } .no-js .display-animation > * { - -webkit-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); + -webkit-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); } @keyframes display { - from { + from { transform: scale(0); - } - to { + } + to { transform: scale(1); - } + } } @-o-keyframes display { - from { + from { -o-transform: scale(0); - } - to { + } + to { -o-transform: scale(1); - } + } } @-ms-keyframes display { - from { + from { -ms-transform: scale(0); - } - to { + } + to { -ms-transform: scale(1); - } + } } @-moz-keyframes display { - from { + from { -moz-transform: scale(0); - } - to { + } + to { -moz-transform: scale(1); - } + } } @-webkit-keyframes display { - from { + from { -webkit-transform: scale(0); - } - to { + } + to { -webkit-transform: scale(1); - } + } } .categories { - .media>.pull-left { - padding: 0; - margin-right: 15px; - } - - .lv-body { - .lv-item { - padding: 15px 20px 10px 20px; - - @media (max-width: @screen-sm-max) { - padding: 10px 0; - } - - &.media { - .stat { - text-align: center; - - .human-readable-number { - font-size: 15px; - } - - span { - font-size: 12px; - } - } - - .icon { - font-size: 16px; - line-height: 17px; - padding: 13px; - border-radius: 50%; - margin-right: 15px; - min-width: 46px; - min-height: 46px; - } - - .category-title { - font-size: 17px; - line-height: 22px; - - .lv-small { - font-weight: 300; - - p { - margin-bottom: 0; - } - } - } - } - - .last-post { - height: 53px; - overflow: hidden; - } - - [component="category/posts"] { - - .user-avatar { - margin-right: 10px; - margin-top: 5px; - img, .user-icon { - .user-icon(32px, 1.5rem); - } - } - - .topic-content { - display: block; - font-size: 12px; - } - } - } - } - - .subcategories { - &.lv-item { - &.media { - top: 20px; - padding: 15px 0 10px; - - .icon { - min-width: 32px; - min-height: 32px; - padding: 9px; - line-height: 12px; - font-size: 12px; - margin-left: 15px; - } - - .category-title { - font-size: 13px; - - .lv-small { - font-weight: 300; - - p { - margin-bottom: 0; - } - } - } - } - } - } + .media>.pull-left { + padding: 0; + margin-right: 15px; + } + + .lv-body { + .lv-item { + padding: 15px 20px 10px 20px; + + @media (max-width: @screen-sm-max) { + padding: 10px 0; + } + + &.media { + .stat { + text-align: center; + + .human-readable-number { + font-size: 15px; + } + + span { + font-size: 12px; + } + } + + .icon { + font-size: 16px; + line-height: 17px; + padding: 13px; + border-radius: 50%; + margin-right: 15px; + min-width: 46px; + min-height: 46px; + } + + .category-title { + font-size: 17px; + line-height: 22px; + + .lv-small { + font-weight: 300; + + p { + margin-bottom: 0; + } + } + } + } + + .last-post { + height: 53px; + overflow: hidden; + } + + [component="category/posts"] { + .user-avatar { + margin-right: 10px; + margin-top: 5px; + img, .user-icon { + .user-icon(32px, 1.5rem); + } + } + + .topic-content { + display: block; + font-size: 12px; + } + } + } + } + + .subcategories { + &.lv-item { + &.media { + top: 20px; + padding: 15px 0 10px; + + .icon { + min-width: 32px; + min-height: 32px; + padding: 9px; + line-height: 12px; + font-size: 12px; + margin-left: 15px; + } + + .category-title { + font-size: 13px; + + .lv-small { + font-weight: 300; + + p { + margin-bottom: 0; + } + } + } + } + } + } } \ No newline at end of file diff --git a/less/composer.less b/less/composer.less index c6b2cee..2746592 100644 --- a/less/composer.less +++ b/less/composer.less @@ -22,6 +22,12 @@ .mobile-navbar { background: @composer-navbar-bg-color !important; } + + .resizer { + .trigger { + background-color: initial !important; + } + } } .composer-container { @@ -42,13 +48,13 @@ } .btn.btn-primary { - box-shadow: none !important; - color: @material-primary; - background-color: @composer-bg-color; + box-shadow: none !important; + color: @material-primary; + background-color: @composer-bg-color; - &:hover { - background-color: @body-bg-color; - } + &:hover { + background-color: @body-bg-color; + } } } @@ -68,9 +74,8 @@ .resizer { .trigger { - background-color: @body-color !important; - i { + background-color: @body-color !important; color: @composer-bg-color !important; } } @@ -85,22 +90,22 @@ [component="category-selector"] { .category-dropdown-menu { overflow-x: hidden; - overflow-y: auto; + overflow-y: auto; } } } .composer-container .btn.btn-info { - box-shadow: none !important; - color: @body-color; - background-color: @composer-bg-color; - &:hover, &:active, &:focus, &:visited { - background-color: @composer-bg-color; - } - - .caret { - color: @body-color; - } + box-shadow: none !important; + color: @body-color; + background-color: @composer-bg-color; + &:hover, &:active, &:focus, &:visited { + background-color: @composer-bg-color; + } + + .caret { + color: @body-color; + } } .dropdown-menu.textcomplete-dropdown { diff --git a/less/groups.less b/less/groups.less index d137714..0f642a5 100644 --- a/less/groups.less +++ b/less/groups.less @@ -3,9 +3,9 @@ #search-button { padding-left: 0; position: relative; - left: -20px; - z-index: 2; - vertical-align: middle; + left: -20px; + z-index: 2; + vertical-align: middle; } } @@ -92,16 +92,15 @@ .row.groups .col-xs-5 { padding-right: 5px; - padding-left: 0; + padding-left: 0; } .row.groups .col-xs-7 { - padding-left: 5px; + padding-left: 5px; } } [component="groups/container"] { - .card.user-profile-view { margin-right: 15px; margin-left: 15px; @@ -114,35 +113,35 @@ position: relative; margin-bottom: 1em; - &:hover { - .controls { - .opacity(0.8); + &:hover { + .controls { + .opacity(0.8); + } } - } - .controls { - text-align: center; - height: 200px; - line-height: 200px; - .opacity(0); - .transition(opacity .15s linear); - cursor: pointer; - pointer-events: none; - - > * { - pointer-events: all; - } + .controls { + text-align: center; + height: 200px; + line-height: 200px; + .opacity(0); + .transition(opacity .15s linear); + cursor: pointer; + pointer-events: none; + + > * { + pointer-events: all; + } - .fa { - color: white; - background-color: #333; - opacity: 1; - margin: 15px; - padding: 5px; + .fa { + color: white; + background-color: #333; + opacity: 1; + margin: 15px; + padding: 5px; + } } - } - &.active { + &.active { &:hover { cursor: move; } diff --git a/less/input.less b/less/input.less index badab33..aff085e 100644 --- a/less/input.less +++ b/less/input.less @@ -1,8 +1,8 @@ .form-horizontal .form-group { - position: relative; - z-index: 1; - margin-left: 0; - margin-right: 0; + position: relative; + z-index: 1; + margin-left: 0; + margin-right: 0; } input:active, input:focus { @@ -275,127 +275,127 @@ html:not(.ie9) .select.fg-line:before { } .checkbox input, .radio input { - top: 0; - left: 0; - margin-left: 0!important; - z-index: 1; - cursor: pointer; - opacity: 0; - filter: alpha(opacity=0); - margin-top: 0; + top: 0; + left: 0; + margin-left: 0!important; + z-index: 1; + cursor: pointer; + opacity: 0; + filter: alpha(opacity=0); + margin-top: 0; } .checkbox .input-helper:before, .radio .input-helper:before, .checkbox .input-helper:after, .radio .input-helper:after { - -webkit-transition: all; - -moz-transition: all; - -o-transition: all; - transition: all; - -webkit-transition-duration: 250ms; - transition-duration: 250ms; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; - position: absolute; - content: ""; + -webkit-transition: all; + -moz-transition: all; + -o-transition: all; + transition: all; + -webkit-transition-duration: 250ms; + transition-duration: 250ms; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + position: absolute; + content: ""; } .checkbox .input-helper:before, .radio .input-helper:before { - left: 0; - border: 1px solid #ccc; + left: 0; + border: 1px solid #ccc; } .checkbox.disabled, .radio.disabled { - opacity: .6; - filter: alpha(opacity=60); + opacity: .6; + filter: alpha(opacity=60); } .checkbox input { - width: 17px; - height: 17px; + width: 17px; + height: 17px; } .checkbox input:checked+.input-helper:before { - -webkit-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - transform: scale(0); + -webkit-transform: scale(0); + -ms-transform: scale(0); + -o-transform: scale(0); + transform: scale(0); } .checkbox input:checked+.input-helper:after { - -webkit-transform: scale(1) rotate(-50deg); - -ms-transform: scale(1) rotate(-50deg); - -o-transform: scale(1) rotate(-50deg); - transform: scale(1) rotate(-50deg); - opacity: 1; - filter: alpha(opacity=100); + -webkit-transform: scale(1) rotate(-50deg); + -ms-transform: scale(1) rotate(-50deg); + -o-transform: scale(1) rotate(-50deg); + transform: scale(1) rotate(-50deg); + opacity: 1; + filter: alpha(opacity=100); } .checkbox .input-helper:before { - top: 0; - width: 17px; - height: 17px; + top: 0; + width: 17px; + height: 17px; } .checkbox .input-helper:after { - opacity: 0; - filter: alpha(opacity=0); - -webkit-transform: scale(0) rotate(80deg); - -ms-transform: scale(0) rotate(80deg); - -o-transform: scale(0) rotate(80deg); - transform: scale(0) rotate(80deg); - width: 22px; - height: 9px; - border-bottom: 2px solid @checkbox-check-color; - border-left: 2px solid @checkbox-check-color; - border-bottom-left-radius: 3px; - left: -1px; - top: 1px; + opacity: 0; + filter: alpha(opacity=0); + -webkit-transform: scale(0) rotate(80deg); + -ms-transform: scale(0) rotate(80deg); + -o-transform: scale(0) rotate(80deg); + transform: scale(0) rotate(80deg); + width: 22px; + height: 9px; + border-bottom: 2px solid @checkbox-check-color; + border-left: 2px solid @checkbox-check-color; + border-bottom-left-radius: 3px; + left: -1px; + top: 1px; } .has-error .checkbox .input-helper:before { - border-color: #f99d97; + border-color: #f99d97; } .has-error .checkbox .input-helper:after { - border-bottom-color: #f77066; - border-left-color: #f77066; + border-bottom-color: #f77066; + border-left-color: #f77066; } .has-success .checkbox .input-helper:before { - border-color: #92cf94; + border-color: #92cf94; } .has-success .checkbox .input-helper:after { - border-bottom-color: #6ec071; - border-left-color: #6ec071; + border-bottom-color: #6ec071; + border-left-color: #6ec071; } .has-warning .checkbox .input-helper:before { - border-color: #ffdb6d; + border-color: #ffdb6d; } .has-warning .checkbox .input-helper:after { - border-bottom-color: #ffce3a; - border-left-color: #ffce3a; + border-bottom-color: #ffce3a; + border-left-color: #ffce3a; } .radio input { - width: 19px; - height: 19px; + width: 19px; + height: 19px; } .radio input:checked+.input-helper:after { - -webkit-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); + -webkit-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); } .radio .input-helper:before { top: -1px; - width: 19px; - height: 19px; - border-radius: 50%; + width: 19px; + height: 19px; + border-radius: 50%; } .radio .input-helper:after { @@ -514,82 +514,82 @@ html:not(.ie9) .select.fg-line:before { } .checkbox .select { - top: 0; - left: 0; - margin-left: 0!important; - z-index: 1; - opacity: 0; - filter: alpha(opacity=0); - margin-top: 0; + top: 0; + left: 0; + margin-left: 0!important; + z-index: 1; + opacity: 0; + filter: alpha(opacity=0); + margin-top: 0; } .checkbox .input-helper:before, .checkbox .input-helper:after { - -webkit-transition: all; - -moz-transition: all; - -o-transition: all; - transition: all; - -webkit-transition-duration: 250ms; - transition-duration: 250ms; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; - position: absolute; - content: ""; + -webkit-transition: all; + -moz-transition: all; + -o-transition: all; + transition: all; + -webkit-transition-duration: 250ms; + transition-duration: 250ms; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + position: absolute; + content: ""; } .checkbox .input-helper:before { - left: 0; - border: 1px solid #ccc; + left: 0; + border: 1px solid #ccc; } .checkbox.disabled { - opacity: .6; - filter: alpha(opacity=60); + opacity: .6; + filter: alpha(opacity=60); } .checkbox .select { - width: 17px; - height: 17px; + width: 17px; + height: 17px; } &.selected { .checkbox .input-helper:before { - -webkit-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - transform: scale(0); + -webkit-transform: scale(0); + -ms-transform: scale(0); + -o-transform: scale(0); + transform: scale(0); } .checkbox .input-helper:after { - -webkit-transform: scale(1) rotate(-50deg); - -ms-transform: scale(1) rotate(-50deg); - -o-transform: scale(1) rotate(-50deg); - transform: scale(1) rotate(-50deg); - opacity: 1; - filter: alpha(opacity=100); + -webkit-transform: scale(1) rotate(-50deg); + -ms-transform: scale(1) rotate(-50deg); + -o-transform: scale(1) rotate(-50deg); + transform: scale(1) rotate(-50deg); + opacity: 1; + filter: alpha(opacity=100); } } .checkbox .input-helper:before { - top: 0; - width: 17px; - height: 17px; + top: 0; + width: 17px; + height: 17px; } .checkbox .input-helper:after { - opacity: 0; - filter: alpha(opacity=0); - -webkit-transform: scale(0) rotate(80deg); - -ms-transform: scale(0) rotate(80deg); - -o-transform: scale(0) rotate(80deg); - transform: scale(0) rotate(80deg); - width: 22px; - height: 9px; - border-bottom: 2px solid @checkbox-check-color; - border-left: 2px solid @checkbox-check-color; - border-bottom-left-radius: 3px; - left: -1px; - top: 1px; + opacity: 0; + filter: alpha(opacity=0); + -webkit-transform: scale(0) rotate(80deg); + -ms-transform: scale(0) rotate(80deg); + -o-transform: scale(0) rotate(80deg); + transform: scale(0) rotate(80deg); + width: 22px; + height: 9px; + border-bottom: 2px solid @checkbox-check-color; + border-left: 2px solid @checkbox-check-color; + border-bottom-left-radius: 3px; + left: -1px; + top: 1px; } } diff --git a/less/login.less b/less/login.less index f44e567..e90c43e 100644 --- a/less/login.less +++ b/less/login.less @@ -113,10 +113,10 @@ div.login, div.register { border-color: @material-success; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"); padding-right: 2.25rem; - background-repeat: no-repeat; - background-position: center right .625rem; - -webkit-background-size: 1.25rem 1.25rem; - background-size: 1.25rem 1.25rem; + background-repeat: no-repeat; + background-position: center right .625rem; + -webkit-background-size: 1.25rem 1.25rem; + background-size: 1.25rem 1.25rem; } .register-feedback { @@ -132,10 +132,10 @@ div.login, div.register { border-color: @material-danger; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"); padding-right: 2.25rem; - background-repeat: no-repeat; - background-position: center right .625rem; - -webkit-background-size: 1.25rem 1.25rem; - background-size: 1.25rem 1.25rem; + background-repeat: no-repeat; + background-position: center right .625rem; + -webkit-background-size: 1.25rem 1.25rem; + background-size: 1.25rem 1.25rem; } .register-feedback { diff --git a/less/menu.less b/less/menu.less index e78a0e3..810ff0f 100644 --- a/less/menu.less +++ b/less/menu.less @@ -59,10 +59,10 @@ position: relative; z-index: 1; color: #fff; - padding: 6px 10px; - font-size: 14px; + padding: 6px 10px; + font-size: 14px; - &:hover, &:active, &:focus { + &:hover, &:active, &:focus { text-decoration: none; } } @@ -105,10 +105,10 @@ position: relative; z-index: 1; color: #fff; - padding: 6px 10px; - font-size: 16px; + padding: 6px 10px; + font-size: 16px; - &:hover, &:active, &:focus { + &:hover, &:active, &:focus { text-decoration: none; } } @@ -128,17 +128,16 @@ .chats.dropdown { .lv-footer { - - hr { - margin-top: 10px; - margin-bottom: 10px; - border-top: @lv-item-border; - } - } + hr { + margin-top: 10px; + margin-bottom: 10px; + border-top: @lv-item-border; + } + } - .dropdown-menu { - padding: 0; - } + .dropdown-menu { + padding: 0; + } } } @@ -200,60 +199,60 @@ } .line-wrap { - width: 18px; - height: 12px; - -webkit-transition: all; - -moz-transition: all; - -o-transition: all; - transition: all; - -webkit-transition-duration: 300ms; - transition-duration: 300ms; - margin: 10px 20px; - - .line { - width: 18px; - height: 2px; - -webkit-transition: all; - -moz-transition: all; - -o-transition: all; - transition: all; - -webkit-transition-duration: 300ms; - transition-duration: 300ms; + width: 18px; + height: 12px; + -webkit-transition: all; + -moz-transition: all; + -o-transition: all; + transition: all; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + margin: 10px 20px; + + .line { + width: 18px; + height: 2px; + -webkit-transition: all; + -moz-transition: all; + -o-transition: all; + transition: all; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; } .line.center { - margin: 3px 0; + margin: 3px 0; } } .open .line-wrap { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); - transform: rotate(180deg); - - .line.top { - width: 12px; - transform: translateX(8px) translateY(1px) rotate(45deg); - -webkit-transform: translateX(8px) translateY(1px) rotate(45deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); + + .line.top { + width: 12px; + transform: translateX(8px) translateY(1px) rotate(45deg); + -webkit-transform: translateX(8px) translateY(1px) rotate(45deg); } .line.bottom { - width: 12px; - transform: translateX(8px) translateY(-1px) rotate(-45deg); - -webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg); + width: 12px; + transform: translateX(8px) translateY(-1px) rotate(-45deg); + -webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg); } } .unread-count:after { content: attr(data-content); - position: relative; + position: relative; color: #fff; font-style: normal; background: @material-danger; padding: 3px 6px; - border-radius: 10px; - left: -8px; + border-radius: 10px; + left: -8px; top: -14px; font-size: 11px; font-weight: bold; diff --git a/less/modal.less b/less/modal.less index 3d701f6..4814eae 100644 --- a/less/modal.less +++ b/less/modal.less @@ -1,24 +1,24 @@ .modal-content { - box-shadow: 0 5px 20px rgba(0, 0, 0, .31); - border-radius: 2px; - border: 0; - color: @modal-text-color; - background-color: @modal-bg-color; + box-shadow: 0 5px 20px rgba(0, 0, 0, .31); + border-radius: 2px; + border: 0; + color: @modal-text-color; + background-color: @modal-bg-color; } .modal-header { - padding: 23px 26px; + padding: 23px 26px; - h3, h4 { - margin: 0; - } + h3, h4 { + margin: 0; + } - .close { - color: @body-color; - } + .close { + color: @body-color; + } - .bootstrap-tagsinput { - background-color: @body-bg-color; + .bootstrap-tagsinput { + background-color: @body-bg-color; border: 1px solid @border-color; .ui-autocomplete-input { @@ -28,112 +28,111 @@ } .modal-body { - padding: 20px; - font-size: 14px; + padding: 20px; + font-size: 14px; - p { - padding-left: 3px; - } + p { + padding-left: 3px; + } - h3 { - font-size: 16px; - } + h3 { + font-size: 16px; + } - .profile-image.small { - .user-icon(32px, 1.9rem); - } + .profile-image.small { + .user-icon(32px, 1.9rem); + } - .close { - color: @body-color; - } + .close { + color: @body-color; + } - .well { - background-color: @body-bg-color; - border: 1px solid @border-color; - } + .well { + background-color: @body-bg-color; + border: 1px solid @border-color; + } } .modal-footer { - border-top: 1px solid transparent; + border-top: 1px solid transparent; } .modal-footer .btn.btn-default { - box-shadow: none !important; - background-color: initial; - color: @body-color; + box-shadow: none !important; + background-color: initial; + color: @body-color; - &:hover { - background-color: @body-bg-color; - } + &:hover { + background-color: @body-bg-color; + } } .modal-footer .btn.btn-danger { - box-shadow: none !important; - color: @material-danger; - background-color: #fff; + box-shadow: none !important; + color: @material-danger; + background-color: #fff; - &:hover { - background-color: #eee; - } + &:hover { + background-color: #eee; + } } .modal-footer .btn.btn-primary, .chat-footer .btn.btn-primary { - box-shadow: none !important; - color: @material-primary; - background-color: initial; + box-shadow: none !important; + color: @material-primary; + background-color: initial; - &:hover { - background-color: @body-bg-color; - } + &:hover { + background-color: @body-bg-color; + } } .chat-footer .btn.btn-warning { - box-shadow: none !important; - color: @material-warning; - background-color: #fff; + box-shadow: none !important; + color: @material-warning; + background-color: #fff; - &:hover { - background-color: #eee; - } + &:hover { + background-color: #eee; + } } .picture-switcher { + .btn-group .btn { + font-size: 11px; + } - .btn-group .btn { - font-size: 11px; - } - - .media-body { - display: table-cell; - width: 10000px; - } + .media-body { + display: table-cell; + width: 10000px; + } - h4 { - margin: 0 - } + h4 { + margin: 0; + } - .user-icon { - .user-icon(46px, 2.5rem); - } + .user-icon { + .user-icon(46px, 2.5rem); + } - .media-object { - .user-icon(46px, 2.5rem); - } + .media-object { + .user-icon(46px, 2.5rem); + } - .modal-footer { - .btn-link { - color: #0a0a0a; + .modal-footer { + .btn-link { + color: #0a0a0a; - &:hover { - background-color: #eee; - } - } - } + &:hover { + background-color: #eee; + } + } + } } #move_thread_modal .category-list { - height: auto !important; - max-height: 500px; + height: auto !important; + max-height: 500px; } .merge-topic-card { @@ -144,35 +143,35 @@ box-shadow: 0 5px 20px rgba(0, 0, 0, .31); color: @modal-text-color; - background-color: @modal-bg-color; + background-color: @modal-bg-color; - .panel-heading { - border-bottom: 1px solid @border-color; - } + .panel-heading { + border-bottom: 1px solid @border-color; + } - .panel-footer { - color: @modal-text-color; - background-color: @modal-bg-color; - border-top: 1px solid @border-color; - } + .panel-footer { + color: @modal-text-color; + background-color: @modal-bg-color; + border-top: 1px solid @border-color; + } - .panel-footer .btn.btn-default { - box-shadow: none !important; - background-color: initial; - color: @body-color; + .panel-footer .btn.btn-default { + box-shadow: none !important; + background-color: initial; + color: @body-color; - &:hover { - background-color: @body-bg-color; - } + &:hover { + background-color: @body-bg-color; + } } .panel-footer .btn.btn-primary { - box-shadow: none !important; - color: @material-primary; - background-color: initial; + box-shadow: none !important; + color: @material-primary; + background-color: initial; - &:hover { - background-color: @body-bg-color; - } + &:hover { + background-color: @body-bg-color; + } } } \ No newline at end of file diff --git a/less/notifications.less b/less/notifications.less index 5080eba..30ecd8c 100644 --- a/less/notifications.less +++ b/less/notifications.less @@ -1,123 +1,123 @@ #notif-list { - .unread { - background-color: @notifs-unread-bg-color; - color: @notifs-unread-color; - } - - .lv-item { - padding: 5px; - margin-bottom: 2px; - - &:not(.unread) { - &:hover { - background: none; - } - } - - .media-body { - padding: 0 5px 0 10px; - } - } + .unread { + background-color: @notifs-unread-bg-color; + color: @notifs-unread-color; + } + + .lv-item { + padding: 5px; + margin-bottom: 2px; + + &:not(.unread) { + &:hover { + background: none; + } + } + + .media-body { + padding: 0 5px 0 10px; + } + } } #header #notif-list a .mark-read { - color: #777; - margin-right: -5px; - padding-left: 0; - - &:after { - font-family: "FontAwesome"; - content: "\f10c"; - padding: 4px 1rem; - position: relative; - top: 0; - } - - &:hover:after { - content: "\f111"; - } + color: #777; + margin-right: -5px; + padding-left: 0; + + &:after { + font-family: "FontAwesome"; + content: "\f10c"; + padding: 4px 1rem; + position: relative; + top: 0; + } + + &:hover:after { + content: "\f111"; + } } .notifications { - .relTime { - color: #555; - } - - h2 { - font-size: 20px; - } - - .lv-title>a { - font-size: 14px; - } - - .listview { - .lv-item { - .lv-small { - white-space: normal; - } - - [component="notifications/item/link"] { - color: @topic-title-color; - } - - &.unread { - [component="notifications/item/link"] { - color: @anchor-color; - } - } - } - - .lv-footer { - margin-top: 10px; - - hr { - margin-top: 10px; - margin-bottom: 10px; - border-top: @lv-item-border; - } - } - } - - .user-picture { - .user-icon(32px, 2rem); - padding: 0 !important; - } + .relTime { + color: #555; + } + + h2 { + font-size: 20px; + } + + .lv-title>a { + font-size: 14px; + } + + .listview { + .lv-item { + .lv-small { + white-space: normal; + } + + [component="notifications/item/link"] { + color: @topic-title-color; + } + + &.unread { + [component="notifications/item/link"] { + color: @anchor-color; + } + } + } + + .lv-footer { + margin-top: 10px; + + hr { + margin-top: 10px; + margin-bottom: 10px; + border-top: @lv-item-border; + } + } + } + + .user-picture { + .user-icon(32px, 2rem); + padding: 0 !important; + } } @media (min-width: @screen-sm-min) { - .notifications .listview.lv-lg .lv-item .media-body>a { - font-size: 14px; - } + .notifications .listview.lv-lg .lv-item .media-body>a { + font-size: 14px; + } } @media (max-width: @screen-xs-max) { - .notifications .listview.lv-lg .lv-item .media-body>a { - font-size: 13px; - } + .notifications .listview.lv-lg .lv-item .media-body>a { + font-size: 13px; + } } @media (min-width: @screen-xs-min) { - .notifications .listview.lv-lg .lv-item { - padding: 10px 35px 10px 25px; - } + .notifications .listview.lv-lg .lv-item { + padding: 10px 35px 10px 25px; + } } @media (max-width: @screen-sm-max) { - .notifications .listview.lv-lg .lv-item { - padding: 10px 35px 10px 25px; - } + .notifications .listview.lv-lg .lv-item { + padding: 10px 35px 10px 25px; + } } .notifications { - .no-notifs { - cursor: default; - color: @body-color; - text-align: center; - } + .no-notifs { + cursor: default; + color: @body-color; + text-align: center; + } } .listview a.lv-item.no-notifs:hover { - background: none; - color: @body-color; + background: none; + color: @body-color; } \ No newline at end of file diff --git a/less/progress-bar.less b/less/progress-bar.less index c5ee06a..84c7ed0 100644 --- a/less/progress-bar.less +++ b/less/progress-bar.less @@ -1,50 +1,50 @@ .material-load-bar { - width: 100%; - height: 3px; - background-color: #fdba2c; - z-index: 11; - position: fixed; - top: 0; + width: 100%; + height: 3px; + background-color: #fdba2c; + z-index: 11; + position: fixed; + top: 0; } .material-bar { - content: ""; - display: inline; - position: absolute; - width: 0; - height: 100%; - left: 50%; - text-align: center; + content: ""; + display: inline; + position: absolute; + width: 0; + height: 100%; + left: 50%; + text-align: center; } .material-bar:nth-child(1) { - background-color: #da4733; - animation: loading 3s linear infinite; + background-color: #da4733; + animation: loading 3s linear infinite; } .material-bar:nth-child(2) { - background-color: #3b78e7; - animation: loading 3s linear 1s infinite; + background-color: #3b78e7; + animation: loading 3s linear 1s infinite; } .material-bar:nth-child(3) { - background-color: #fdba2c; - animation: loading 3s linear 2s infinite; + background-color: #fdba2c; + animation: loading 3s linear 2s infinite; } @keyframes loading { - from { - left: 50%; - width: 0; - z-index: 100; - } - 33.3333% { - left: 0; - width: 100%; - z-index: 10; - } - to { - left: 0; - width: 100%; - } + from { + left: 50%; + width: 0; + z-index: 100; + } + 33.3333% { + left: 0; + width: 100%; + z-index: 10; + } + to { + left: 0; + width: 100%; + } } \ No newline at end of file diff --git a/less/search.less b/less/search.less index 6ea5576..d2a510a 100644 --- a/less/search.less +++ b/less/search.less @@ -1,12 +1,12 @@ .search-result-text { max-height: 250px; - overflow: hidden; - position: relative; - font-size: 14px; + overflow: hidden; + position: relative; + font-size: 14px; } .search .listview .lv-footer { - margin-top: 0; + margin-top: 0; } #results .user-picture { @@ -32,7 +32,6 @@ } .search #results .listview { - h4 { font-size: 16px; } diff --git a/less/sidebar.less b/less/sidebar.less index cf60d82..a88b422 100644 --- a/less/sidebar.less +++ b/less/sidebar.less @@ -1,29 +1,29 @@ @media (min-width: @screen-lg-min) { - .sw-toggled #header { - padding-left: 15px; + .sw-toggled #header { + padding-left: 15px; } .sw-toggled #menu-trigger { - display: none; + display: none; } } .ie9 #header:not(.sidebar-toggled).header-up { - display: none; + display: none; } :-webkit-full-screen [data-action=fullscreen] { - display: none; + display: none; } :-moz-full-screen [data-action=fullscreen] { - display: none; + display: none; } :-ms-fullscreen [data-action=fullscreen] { - display: none; + display: none; } :full-screen [data-action=fullscreen] { - display: none; + display: none; } :fullscreen [data-action=fullscreen] { - display: none; + display: none; } #sidebar { diff --git a/less/skins.less b/less/skins.less index e331f76..3625c5d 100644 --- a/less/skins.less +++ b/less/skins.less @@ -1,772 +1,776 @@ body { - &.theme-dark { - color: @body-color-dark; - background-color: @body-bg-color-dark; - - a, a:hover, a:active, a:focus, a:visited { - color: @anchor-color-dark; - } - - //buttons - .btn-icon { - &.btn-default:hover { - background: @btn-default-bg-color-dark; - } - } - - .dropdown-menu { - background-color: @dropdown-bg-color-dark; - - .divider { - background-color: @border-color-dark; - } - - >li>a { - color: @dropdown-color-dark; - } - } - - .btn-link { - color: #fff; - } - - .btn-info { - color: #fff; - } - - .btn-default { - color: @material-primary !important; - background-color: @btn-default-bg-color-dark; - } - - .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default { - background-color: @btn-default-bg-color-dark; - } - - a.btn-primary, a.btn-danger, a.btn-success { - color: #fff; - } - - //header - #header { - background: @header-bg-color-dark; - } - - .header-inner { - .dropdown-menu { - background-color: @dropdown-bg-color-dark; - } - } - - //menu - .header-menu { - >li { - >a { - color: #fff; - } - } - } - - .top-menu { - >li { - >a { - color: #fff; - } - } - - .chats.dropdown { - .lv-footer { - hr { - border-top: @lv-item-border-dark; - } - } - } - } - - #user-control-list { - li>a { - color: @body-color-dark; + &.theme-dark { + color: @body-color-dark; + background-color: @body-bg-color-dark; + + a, a:hover, a:active, a:focus, a:visited { + color: @anchor-color-dark; + } + + //buttons + .btn-icon { + &.btn-default:hover { + background: @btn-default-bg-color-dark; + } + } + + .dropdown-menu { + background-color: @dropdown-bg-color-dark; + + .divider { + background-color: @border-color-dark; + } + + >li>a { + color: @dropdown-color-dark; + } + } + + .btn-link { + color: #fff; + } + + .btn-info { + color: #fff; + } + + .btn-default { + color: @material-primary !important; + background-color: @btn-default-bg-color-dark; + } + + .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default { + background-color: @btn-default-bg-color-dark; + } + + a.btn-primary, a.btn-danger, a.btn-success { + color: #fff; + } + + //header + #header { + background: @header-bg-color-dark; + } + + .header-inner { + .dropdown-menu { + background-color: @dropdown-bg-color-dark; + } + } + + //menu + .header-menu { + >li { + >a { + color: #fff; + } + } + } + + .top-menu { + >li { + >a { + color: #fff; + } + } + + .chats.dropdown { + .lv-footer { + hr { + border-top: @lv-item-border-dark; + } + } + } + } + + #user-control-list { + li>a { + color: @body-color-dark; } li { .btn-link { color: @body-color-dark; } - } - } - - //sidebar - #sidebar { - background: @sidebar-bg-color-dark; - - .main-menu { - >li { - >a { - color: @body-color-dark; - &:hover { - color: @body-color-dark; - background-color: @body-bg-color-dark; - } - } - - &.active>a { - color: @body-color-dark; - background-color: @body-bg-color-dark; - } - } - } - } - - //login, register - div.login, div.register { - .input-group-addon { - color: @body-color-dark; - } - } - - //input - .form-control { - border-bottom: @form-control-border-dark; - color: @body-color-dark; - } - - .fg-line { - .form-control { - &:not(:disabled) { - color: @body-color-dark; - } - } - - &:not([class*=has-]):after { - background: @fg-line-color-dark; - } - } - - .fg-float { - .form-control { - &::-moz-placeholder { - color: @placeholder-color-dark; - opacity: 1; - } - - &:-ms-input-placeholder { - color: @placeholder-color-dark; - } - - &::-webkit-input-placeholder { - color: @placeholder-color-dark; - } - } - } - - .checkbox .input-helper:after { - border-bottom: 2px solid @checkbox-check-color-dark; - border-left: 2px solid @checkbox-check-color-dark; - } - - .radio .input-helper:after { - background: @anchor-color-dark; - } - - [component="category/topic"] { - .checkbox .input-helper:after { - border-bottom: 2px solid @checkbox-check-color-dark; - border-left: 2px solid @checkbox-check-color-dark; - } - } - - select.form-control option { - color: @body-color-dark; - background-color: @body-bg-color-dark; - } - - //card - .card { - background: @card-bg-color-dark; - box-shadow: @card-box-shadow-dark; - - .card-header { - &.ch-alt { - &:not([class*=bgm-]) { - background-color: @lv-header-alt-bg-color-dark; - } - } - } - } - - //actions - .actions { - >li { - >span { - >i { - color: @action-items-color-dark; - } - } - } - } - - //listview - .listview { - a.lv-item:hover { - background: @chat-active-bg-color-dark; - } - - .lv-header { - color: @body-color-dark; - } - - .lv-header-alt { - background: @lv-header-alt-bg-color-dark; - border-bottom: 1px solid @border-color-dark; - } - - .lv-footer { - border-top: 1px solid @border-color-dark; - } - - &.lv-bordered .lv-item:not(:last-child) { - border-bottom: @lv-item-border-dark; - } - } - - .list-group-item { - background-color: @list-group-item-bg-color-dark; - border: 1px solid @border-color-dark; - } - - //dropdown - - .dropdown-menu { - &:not([class*=bgm-])>li>a { - color: @dropdown-color-dark; - } - - &:not([class*=bgm-])>li>a:hover { - color: @dropdown-color-dark; - } - } - - //breadcrumb - .breadcrumb { - border: @breadcrumb-border-dark; - background-color: @breadcrumb-bg-color-dark; - - >.active { - color: @breadcrumb-active-color-dark; - } - } - - //notifications - #notif-list { - .unread { - background-color: @notifs-unread-bg-color-dark; - color: @notifs-unread-color-dark; - } - } - - .notifications { - .relTime { - color: #555; - } - - h2 { - font-size: 20px; - } - - .lv-title>a { - font-size: 14px; - } - - .listview { - .lv-item { - [component="notifications/item/link"] { - color: @topic-title-color-dark; - } - - &.unread { - [component="notifications/item/link"] { - color: @anchor-color-dark; - } - } - } - - .lv-footer { - hr { - border-top: @lv-item-border-dark; - } - } - } - } - - .notifications { - .no-notifs { - color: @body-color-dark; - } - } - - .listview a.lv-item.no-notifs:hover { - color: @body-color-dark; - } - - //modal - .modal-content { - color: @modal-text-color-dark; - background-color: @modal-bg-color-dark; - } - - .modal-header { - .close { - color: @body-color-dark; - } - - .bootstrap-tagsinput { - background-color: @body-bg-color-dark; - border: 1px solid @border-color-dark; - - .ui-autocomplete-input { - color: @body-color-dark !important; - } - } - } - - .modal-body { - .close { - color: @body-color-dark; - } - - .well { - background-color: @body-bg-color-dark; - border: 1px solid @border-color-dark; - } - } - - .modal-footer .btn.btn-default { - color: @body-color-dark; - - &:hover { - background-color: @body-bg-color-dark; - } - } - - .modal-footer .btn.btn-primary, .chat-footer .btn.btn-primary { - &:hover { - background-color: @body-bg-color-dark; - } - } - - .picture-switcher { - .modal-footer { - .btn-link { - color: @body-color-dark; - - &:hover { - color: @body-bg-color-dark; - } - } - } - } - - //tabs - .tab-nav { - >li { - box-shadow: inset 0 -2px 0 0 @border-color-dark; - } - - &:not([data-tab-color])>li>a:after { - background: @anchor-color-dark; - } - } - - .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { - color: @nav-pills-active-color-dark; - } - - //pagination - .pagination { - border-radius: 0; - - >li { - >a, >span { - color: @anchor-color-dark; - background-color: @body-bg-color-dark; - border-color: @border-color-dark; - - &:hover { - background-color: @anchor-color-dark; - border-color: @border-color-dark; - color: #fff; - } - } - - &.active { - a, a:hover { - background-color: @anchor-color-dark; - border-color: @border-color-dark; - color: #fff; - } - } - } - } - - //chat - .chat-list { - li { - &.unread { - background-color: @chat-unread-bg-color-dark; - } - - a { - color: inherit; - } - } - } - - #messages-main { - .ms-menu { - background: @chat-main-bg-color-dark; - border-right: 1px solid @border-color-dark; - - .lv-item { - &:not(:last-child) { - border-bottom: 1px solid @chat-list-border-dark; - } - - &.bg-primary { - background: @chat-active-bg-color-dark; - color: @body-color-dark; - } - - &:not(.bg-primary):hover { - background: @chat-active-bg-color-dark; - cursor: pointer; - } - - &.bg-info { - background: @chat-active-bg-color-dark; - } - } - } - - .chat-search-menu { - background: @chat-main-bg-color-dark; - border: 1px solid @border-color-dark; - } - - .ms-body { - background-color: @chat-content-bg-color-dark; - } - - .bootstrap-tagsinput { - background-color: @body-bg-color-dark; - border: 1px solid @border-color-dark; - - .ui-autocomplete-input { - color: @body-color-dark !important; - } - } - - .ms-reply { - textarea { - background-color: @body-bg-color-dark; - color: @body-color-dark; - } - - button { - color: @anchor-color-dark; - } - } - - .lv-message { - .lv-item { - &:not(.right) { - .ms-item { - background-color: @chat-message-bg-color-dark; - color: @chat-message-color-dark; - } - } - } - } - - .listview { - .lv-footer { - background-color: @chat-footer-bg-color-dark; - } - } - } - - .chat-modal { - @media (max-width: @screen-xs-max) { - .chat-footer { - border-top: 1px solid @border-color-dark; - background-color: @chat-footer-bg-color-dark; - } - } - - .lv-message .lv-item { - &.right { - .ms-item { - background: @chat-message-right-bg-color-dark; - color: @chat-message-right-color-dark; - } - } - - &:not(.right) { - .ms-item { - background: @chat-message-bg-color-dark; - color: @chat-message-color-dark; - } - } - } - } - - @media (min-width: @screen-sm-min) { - .chat-modal { - .modal-dialog { - .modal-content { - .modal-body { - .chat-footer { - background-color: @chat-footer-bg-color-dark; - } - } - } - } - } - } - - //categories - [component="category/topic"] { - .topic-title { - color: @topic-title-color-dark; - } - - &.unread { - .topic-title { - color: @anchor-color-dark; - } - } - } - - //groups - .groups { - &.details { - .table { - >tbody { - >tr:not(:first-child)>td { - border-top: 1px solid @border-color-dark; - } - } - } - } - } - - //account - .account.settings { - .form-control { - border-bottom: @input-border-bottom-dark; - } - } - - .user-profile-view { - .card-footer { - hr { - border: @account-hr-border-dark; - } - - .user-info { - h3 { - @media (max-width: @screen-xs-max) { - color: @body-color-dark; - } - } - } - } - } - - //topic - .topic .card { - background-color: inherit; - box-shadow: none; - - .lv-header-alt { - background-color: @lv-header-alt-bg-color-dark; - border: none; - } - - .lv-body { - .post-content { - background-color: @post-content-bg-color-dark; - border: 1px solid @border-color-dark; - - &:after { - border-right-color: @post-content-bg-color-dark; - } - - &:before { - border-right-color: @border-color-dark; - } - } - - .post-actions { - >li { - >a { - color: @action-items-color-dark; - } - } - } - - .post-bar { - .tags { - .tag-container { - background-color: @tag-container-bg-color-dark; - } - } - } - } - } - - [component="post"].highlight .post-body { - border-bottom: 1px solid @post-highlight-color-dark; - } - - .fork-thread-card { - color: @modal-text-color-dark; - background-color: @modal-bg-color-dark; - - .panel-heading { - border-bottom: 1px solid @border-color-dark; - } - - .panel-footer { - color: @modal-text-color-dark; - background-color: @modal-bg-color-dark; - border-top: 1px solid @border-color-dark; - } - - input { - color: @body-color-dark; - } - - .panel-footer .btn.btn-default { - color: @body-color-dark; - - &:hover { - background-color: @body-bg-color-dark; - } - } - - .panel-footer .btn.btn-primary { - &:hover { - background-color: @body-bg-color-dark; - } - } - } - - - [component="post"] { - &.bg-success { - .poster-avatar:before, .user-profile-link:before { - border: 1px solid @body-color-dark; - color: @body-color-dark; - } - } - } - - //tags - .tag-container { - border: 1px solid @tag-container-border-color-dark; - - .tag-topic-count { - border-left: 2px solid @border-color-dark; - } - } - - //composer - .composer { - background-color: @composer-bg-color-dark !important; - - .title-container .title, .tags-container .bootstrap-tagsinput { - background-color: @composer-bg-color-dark !important; - } - - .formatting-bar .formatting-group li { - color: @body-color-dark !important; - } - - .write-preview-container .write { - background-color: @composer-bg-color-dark !important; - border: 1px solid @border-color-dark !important; - } - - .preview.well { - background-color: @composer-preview-bg-color-dark; - border: 1px solid @border-color-dark !important; - } - - .mobile-navbar { - background: @composer-navbar-bg-color-dark !important; - } - } - - .composer-container { - background: @composer-bg-color-dark !important; - - .btn-group { - .composer-discard { - box-shadow: none !important; - color: @body-color-dark; - background-color: @composer-bg-color-dark; - - &:hover { - color: @body-color-dark; - background-color: @body-bg-color-dark; - } - } - - .btn.btn-primary { - background-color: @composer-bg-color-dark; - - &:hover { - background-color: @body-bg-color-dark; - } - } - } - - .mobile-navbar { - border-bottom: 1px solid @border-color-dark; - } - - .form-control { - color: @body-color-dark; - background-color: @composer-bg-color-dark; - } - - .resizer { - .trigger { - background-color: @body-color-dark !important; - - i { - color: @composer-bg-color-dark !important; - } - } - } - - .bootstrap-tagsinput { - .ui-autocomplete-input { - color: @body-color-dark !important; - } - } - } - - .composer-container .btn.btn-info { - color: @body-color-dark; - background-color: @composer-bg-color-dark; - - &:hover, &:active, &:focus, &:visited { - background-color: @composer-bg-color-dark; - } - - .caret { - color: @body-color-dark; - } - } - } + } + } + + //sidebar + #sidebar { + background: @sidebar-bg-color-dark; + + .main-menu { + >li { + >a { + color: @body-color-dark; + &:hover { + color: @body-color-dark; + background-color: @body-bg-color-dark; + } + } + + &.active>a { + color: @body-color-dark; + background-color: @body-bg-color-dark; + } + } + } + } + + //login, register + div.login, div.register { + .input-group-addon { + color: @body-color-dark; + } + } + + //input + .form-control { + border-bottom: @form-control-border-dark; + color: @body-color-dark; + } + + .fg-line { + .form-control { + &:not(:disabled) { + color: @body-color-dark; + } + } + + &:not([class*=has-]):after { + background: @fg-line-color-dark; + } + } + + .fg-float { + .form-control { + &::-moz-placeholder { + color: @placeholder-color-dark; + opacity: 1; + } + + &:-ms-input-placeholder { + color: @placeholder-color-dark; + } + + &::-webkit-input-placeholder { + color: @placeholder-color-dark; + } + } + } + + .checkbox .input-helper:after { + border-bottom: 2px solid @checkbox-check-color-dark; + border-left: 2px solid @checkbox-check-color-dark; + } + + .radio .input-helper:after { + background: @anchor-color-dark; + } + + [component="category/topic"] { + .checkbox .input-helper:after { + border-bottom: 2px solid @checkbox-check-color-dark; + border-left: 2px solid @checkbox-check-color-dark; + } + } + + select.form-control option { + color: @body-color-dark; + background-color: @body-bg-color-dark; + } + + //card + .card { + background: @card-bg-color-dark; + box-shadow: @card-box-shadow-dark; + + .card-header { + &.ch-alt { + &:not([class*=bgm-]) { + background-color: @lv-header-alt-bg-color-dark; + } + } + } + } + + //actions + .actions { + >li { + >span { + >i { + color: @action-items-color-dark; + } + } + } + } + + //listview + .listview { + a.lv-item:hover { + background: @chat-active-bg-color-dark; + } + + .lv-header { + color: @body-color-dark; + } + + .lv-header-alt { + background: @lv-header-alt-bg-color-dark; + border-bottom: 1px solid @border-color-dark; + } + + .lv-footer { + border-top: 1px solid @border-color-dark; + } + + &.lv-bordered .lv-item:not(:last-child) { + border-bottom: @lv-item-border-dark; + } + } + + .list-group-item { + background-color: @list-group-item-bg-color-dark; + border: 1px solid @border-color-dark; + } + + //dropdown + .dropdown-menu { + &:not([class*=bgm-])>li>a { + color: @dropdown-color-dark; + } + + &:not([class*=bgm-])>li>a:hover { + color: @dropdown-color-dark; + } + } + + //breadcrumb + .breadcrumb { + border: @breadcrumb-border-dark; + background-color: @breadcrumb-bg-color-dark; + + >.active { + color: @breadcrumb-active-color-dark; + } + } + + //notifications + #notif-list { + .unread { + background-color: @notifs-unread-bg-color-dark; + color: @notifs-unread-color-dark; + } + } + + .notifications { + .relTime { + color: #555; + } + + h2 { + font-size: 20px; + } + + .lv-title>a { + font-size: 14px; + } + + .listview { + .lv-item { + [component="notifications/item/link"] { + color: @topic-title-color-dark; + } + + &.unread { + [component="notifications/item/link"] { + color: @anchor-color-dark; + } + } + } + + .lv-footer { + hr { + border-top: @lv-item-border-dark; + } + } + } + } + + .notifications { + .no-notifs { + color: @body-color-dark; + } + } + + .listview a.lv-item.no-notifs:hover { + color: @body-color-dark; + } + + //modal + .modal-content { + color: @modal-text-color-dark; + background-color: @modal-bg-color-dark; + } + + .modal-header { + .close { + color: @body-color-dark; + } + + .bootstrap-tagsinput { + background-color: @body-bg-color-dark; + border: 1px solid @border-color-dark; + + .ui-autocomplete-input { + color: @body-color-dark !important; + } + } + } + + .modal-body { + .close { + color: @body-color-dark; + } + + .well { + background-color: @body-bg-color-dark; + border: 1px solid @border-color-dark; + } + } + + .modal-footer .btn.btn-default { + color: @body-color-dark; + + &:hover { + background-color: @body-bg-color-dark; + } + } + + .modal-footer .btn.btn-primary, .chat-footer .btn.btn-primary { + &:hover { + background-color: @body-bg-color-dark; + } + } + + .picture-switcher { + .modal-footer { + .btn-link { + color: @body-color-dark; + + &:hover { + color: @body-bg-color-dark; + } + } + } + } + + //tabs + .tab-nav { + >li { + box-shadow: inset 0 -2px 0 0 @border-color-dark; + } + + &:not([data-tab-color])>li>a:after { + background: @anchor-color-dark; + } + } + + .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { + color: @nav-pills-active-color-dark; + } + + //pagination + .pagination { + border-radius: 0; + + >li { + >a, >span { + color: @anchor-color-dark; + background-color: @body-bg-color-dark; + border-color: @border-color-dark; + + &:hover { + background-color: @anchor-color-dark; + border-color: @border-color-dark; + color: #fff; + } + } + + &.active { + a, a:hover { + background-color: @anchor-color-dark; + border-color: @border-color-dark; + color: #fff; + } + } + } + } + + //chat + .chat-list { + li { + &.unread { + background-color: @chat-unread-bg-color-dark; + } + + a { + color: inherit; + } + } + } + + #messages-main { + .ms-menu { + background: @chat-main-bg-color-dark; + border-right: 1px solid @border-color-dark; + + .lv-item { + &:not(:last-child) { + border-bottom: 1px solid @chat-list-border-dark; + } + + &.bg-primary { + background: @chat-active-bg-color-dark; + color: @body-color-dark; + } + + &:not(.bg-primary):hover { + background: @chat-active-bg-color-dark; + cursor: pointer; + } + + &.bg-info { + background: @chat-active-bg-color-dark; + } + } + } + + .chat-search-menu { + background: @chat-main-bg-color-dark; + border: 1px solid @border-color-dark; + } + + .ms-body { + background-color: @chat-content-bg-color-dark; + } + + .bootstrap-tagsinput { + background-color: @body-bg-color-dark; + border: 1px solid @border-color-dark; + + .ui-autocomplete-input { + color: @body-color-dark !important; + } + } + + .ms-reply { + textarea { + background-color: @body-bg-color-dark; + color: @body-color-dark; + } + + button { + color: @anchor-color-dark; + } + } + + .lv-message { + .lv-item { + &:not(.right) { + .ms-item { + background-color: @chat-message-bg-color-dark; + color: @chat-message-color-dark; + } + } + } + } + + .listview { + .lv-footer { + background-color: @chat-footer-bg-color-dark; + } + } + } + + .chat-modal { + @media (max-width: @screen-xs-max) { + .chat-footer { + border-top: 1px solid @border-color-dark; + background-color: @chat-footer-bg-color-dark; + } + } + + .lv-message .lv-item { + &.right { + .ms-item { + background: @chat-message-right-bg-color-dark; + color: @chat-message-right-color-dark; + } + } + + &:not(.right) { + .ms-item { + background: @chat-message-bg-color-dark; + color: @chat-message-color-dark; + } + } + } + } + + @media (min-width: @screen-sm-min) { + .chat-modal { + .modal-dialog { + .modal-content { + .modal-body { + .chat-footer { + background-color: @chat-footer-bg-color-dark; + } + } + } + } + } + } + + //categories + [component="category/topic"] { + .topic-title { + color: @topic-title-color-dark; + } + + &.unread { + .topic-title { + color: @anchor-color-dark; + } + } + } + + //groups + .groups { + &.details { + .table { + >tbody { + >tr:not(:first-child)>td { + border-top: 1px solid @border-color-dark; + } + } + } + } + } + + //account + .account.settings { + .form-control { + border-bottom: @input-border-bottom-dark; + } + } + + .user-profile-view { + .card-footer { + hr { + border: @account-hr-border-dark; + } + + .user-info { + h3 { + @media (max-width: @screen-xs-max) { + color: @body-color-dark; + } + } + } + } + } + + //topic + .topic .card { + background-color: inherit; + box-shadow: none; + + .lv-header-alt { + background-color: @lv-header-alt-bg-color-dark; + border: none; + } + + .lv-body { + .post-content { + background-color: @post-content-bg-color-dark; + border: 1px solid @border-color-dark; + + &:after { + border-right-color: @post-content-bg-color-dark; + } + + &:before { + border-right-color: @border-color-dark; + } + } + + .post-actions { + >li { + >a { + color: @action-items-color-dark; + } + } + } + + .post-bar { + .tags { + .tag-container { + background-color: @tag-container-bg-color-dark; + } + } + } + } + } + + [component="post"].highlight .post-body { + border-bottom: 1px solid @post-highlight-color-dark; + } + + .fork-thread-card { + color: @modal-text-color-dark; + background-color: @modal-bg-color-dark; + + .panel-heading { + border-bottom: 1px solid @border-color-dark; + } + + .panel-footer { + color: @modal-text-color-dark; + background-color: @modal-bg-color-dark; + border-top: 1px solid @border-color-dark; + } + + input { + color: @body-color-dark; + } + + .panel-footer .btn.btn-default { + color: @body-color-dark; + + &:hover { + background-color: @body-bg-color-dark; + } + } + + .panel-footer .btn.btn-primary { + &:hover { + background-color: @body-bg-color-dark; + } + } + } + + + [component="post"] { + &.bg-success { + .poster-avatar:before, .user-profile-link:before { + border: 1px solid @body-color-dark; + color: @body-color-dark; + } + } + } + + //tags + .tag-container { + border: 1px solid @tag-container-border-color-dark; + + .tag-topic-count { + border-left: 2px solid @border-color-dark; + } + } + + //composer + .composer { + background-color: @composer-bg-color-dark !important; + + .title-container .title, .tags-container .bootstrap-tagsinput { + background-color: @composer-bg-color-dark !important; + } + + .formatting-bar .formatting-group li { + color: @body-color-dark !important; + } + + .write-preview-container .write { + background-color: @composer-bg-color-dark !important; + border: 1px solid @border-color-dark !important; + } + + .preview.well { + background-color: @composer-preview-bg-color-dark; + border: 1px solid @border-color-dark !important; + } + + .mobile-navbar { + background: @composer-navbar-bg-color-dark !important; + } + + .resizer { + .trigger { + background-color: initial !important; + } + } + } + + .composer-container { + background: @composer-bg-color-dark !important; + + .btn-group { + .composer-discard { + box-shadow: none !important; + color: @body-color-dark; + background-color: @composer-bg-color-dark; + + &:hover { + color: @body-color-dark; + background-color: @body-bg-color-dark; + } + } + + .btn.btn-primary { + background-color: @composer-bg-color-dark; + + &:hover { + background-color: @body-bg-color-dark; + } + } + } + + .mobile-navbar { + border-bottom: 1px solid @border-color-dark; + } + + .form-control { + color: @body-color-dark; + background-color: @composer-bg-color-dark; + } + + .resizer { + .trigger { + i { + background-color: @body-color-dark !important; + color: @composer-bg-color-dark !important; + } + } + } + + .bootstrap-tagsinput { + .ui-autocomplete-input { + color: @body-color-dark !important; + } + } + } + + .composer-container .btn.btn-info { + color: @body-color-dark; + background-color: @composer-bg-color-dark; + + &:hover, &:active, &:focus, &:visited { + background-color: @composer-bg-color-dark; + } + + .caret { + color: @body-color-dark; + } + } + } } \ No newline at end of file diff --git a/less/tabs.less b/less/tabs.less index 55a6370..67ca66a 100644 --- a/less/tabs.less +++ b/less/tabs.less @@ -1,17 +1,17 @@ .tab-nav { - list-style: none; - padding: 0; - white-space: nowrap; - margin: 0; - overflow: auto; + list-style: none; + padding: 0; + white-space: nowrap; + margin: 0; + overflow: auto; - >li { - display: inline-block; - vertical-align: top; - font-size: 14px; - box-shadow: inset 0 -2px 0 0 @border-color; + >li { + display: inline-block; + vertical-align: top; + font-size: 14px; + box-shadow: inset 0 -2px 0 0 @border-color; - @media (max-width: @screen-xs-max) { + @media (max-width: @screen-xs-max) { font-size: 11px; } @@ -19,7 +19,7 @@ margin-left: 0; } - >a { + >a { display: inline-block; text-transform: uppercase; position: relative; @@ -66,7 +66,6 @@ } &.active>a { - &:after { -webkit-transform:scale(1); -ms-transform:scale(1); diff --git a/less/timeline.less b/less/timeline.less index 4df45e3..f1daa90 100644 --- a/less/timeline.less +++ b/less/timeline.less @@ -1,153 +1,153 @@ .timeline { - position: relative; - margin: 0; - - .frame { - position: relative; - margin: 0; - float: left; - width: 50%; - clear: both; - line-height: inherit; - text-align: right; - margin-top: 10px; - - .timeline-badge { - position: absolute; - top: 10px; - right: -13px; - z-index: 3; - width: 26px; - height: 26px; - background-color: #337ab7; - border: 1px solid #286090; - border-radius: 13px; - font-size: 14px; - line-height: 26px; - text-align: center; - color: #fff; - - i { - position: relative; - top: -1px; - } - } - - .timeline-date { - display: block; - font-style: italic; - font-size: 14px; - margin: 10px 30px 0 30px; - } - - .timeline-content { - position: relative; - font-size: 14px; - padding: 20px 0; - } - - &:nth-child(2n) { - float: right; - text-align: left; - - .timeline-badge { - left: -13px; - } - - .timeline-content { - margin-left: 30px; - margin-right: 0; - } - } - } - - &.single { - .frame { - width: 100%; - text-align: left; - - .timeline-badge { - left: 7px; - margin-left: 0; - } - - .timeline-content { - margin-left: 50px; - } - - .timeline-date { - margin: 10px 20px 0 50px; - } - - &:nth-child(2n) { - float: left; - } - } - - &:before { - left: 20px; - } - - .status { - font-size: 12px; - } - - .lv-actions { - .reply-button { - vertical-align: top; - } - - .thread-tools { - vertical-align: top; - - .dropdown-toggle { - border-radius: 2px; - padding: 7px 5px; - font-size: 14px; - } - } - - .post-count, .view-count { - font-size: 12px; - text-align: center; - padding-right: 10px; - } - - &.actions { - z-index: inherit; - } - } - - .actions>li>a>i { - font-size: 16px; - } - } - - &:before, &:after { - content: ""; - display: table; - clear: both; - } - - &:before { - position: absolute; - display: block; - top: 0; - bottom: 0; - left: 50%; - width: 1px; - margin-left: -1px; - background-color: #eee; - content: " "; - } + position: relative; + margin: 0; + + .frame { + position: relative; + margin: 0; + float: left; + width: 50%; + clear: both; + line-height: inherit; + text-align: right; + margin-top: 10px; + + .timeline-badge { + position: absolute; + top: 10px; + right: -13px; + z-index: 3; + width: 26px; + height: 26px; + background-color: #337ab7; + border: 1px solid #286090; + border-radius: 13px; + font-size: 14px; + line-height: 26px; + text-align: center; + color: #fff; + + i { + position: relative; + top: -1px; + } + } + + .timeline-date { + display: block; + font-style: italic; + font-size: 14px; + margin: 10px 30px 0 30px; + } + + .timeline-content { + position: relative; + font-size: 14px; + padding: 20px 0; + } + + &:nth-child(2n) { + float: right; + text-align: left; + + .timeline-badge { + left: -13px; + } + + .timeline-content { + margin-left: 30px; + margin-right: 0; + } + } + } + + &.single { + .frame { + width: 100%; + text-align: left; + + .timeline-badge { + left: 7px; + margin-left: 0; + } + + .timeline-content { + margin-left: 50px; + } + + .timeline-date { + margin: 10px 20px 0 50px; + } + + &:nth-child(2n) { + float: left; + } + } + + &:before { + left: 20px; + } + + .status { + font-size: 12px; + } + + .lv-actions { + .reply-button { + vertical-align: top; + } + + .thread-tools { + vertical-align: top; + + .dropdown-toggle { + border-radius: 2px; + padding: 7px 5px; + font-size: 14px; + } + } + + .post-count, .view-count { + font-size: 12px; + text-align: center; + padding-right: 10px; + } + + &.actions { + z-index: inherit; + } + } + + .actions>li>a>i { + font-size: 16px; + } + } + + &:before, &:after { + content: ""; + display: table; + clear: both; + } + + &:before { + position: absolute; + display: block; + top: 0; + bottom: 0; + left: 50%; + width: 1px; + margin-left: -1px; + background-color: #eee; + content: " "; + } } .timeline-content { - img { - max-width: 100%; - } + img { + max-width: 100%; + } - >p { - margin: 0; - } + >p { + margin: 0; + } } \ No newline at end of file diff --git a/less/topic.less b/less/topic.less index 60cc0f4..2084c5f 100644 --- a/less/topic.less +++ b/less/topic.less @@ -1,6 +1,6 @@ .topic { margin-left: -10px; - margin-right: -10px; + margin-right: -10px; .post-tools { text-transform: lowercase; @@ -142,58 +142,58 @@ } .poster-avatar { - position: absolute; - top: 0; - left: 0; - - .status { - position: absolute; - left: 35px; - top: 30px; - border: 1px solid #fff; - } + position: absolute; + top: 0; + left: 0; + + .status { + position: absolute; + left: 35px; + top: 30px; + border: 1px solid #fff; + } } .post-content { - position: relative; - background-color: @post-content-bg-color; - border-radius: 2px; - border: 1px solid @border-color; + position: relative; + background-color: @post-content-bg-color; + border-radius: 2px; + border: 1px solid @border-color; - @media (min-width: @screen-sm-min) { - margin-left: 60px; - } + @media (min-width: @screen-sm-min) { + margin-left: 60px; + } - p { - margin: 15px 0; - line-height: 1.6; + p { + margin: 15px 0; + line-height: 1.6; } @media (min-width: @screen-sm-min) { &:after, &:before { - right: 100%; - top: 20px; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; } } &:after { - border-color: transparent; - border-right-color: @post-content-bg-color; - border-width: 10px; - margin-top: -10px; + border-color: transparent; + border-right-color: @post-content-bg-color; + border-width: 10px; + margin-top: -10px; } &:before { - border-color: transparent; - border-right-color: @border-color; - border-width: 11px; - margin-top: -11px; + border-color: transparent; + border-right-color: @border-color; + border-width: 11px; + margin-top: -11px; } } @@ -202,7 +202,6 @@ } .post-actions { - @media (max-width: @screen-xs-max) { margin-right: -10px; } @@ -251,12 +250,12 @@ @media (min-width: @screen-sm-min) { padding: 15px 0 20px 0; margin: 20px 0 0 60px; - } + } - @media (max-width: @screen-xs-max) { - margin-top: 20px; - padding-bottom: 30px; - } + @media (max-width: @screen-xs-max) { + margin-top: 20px; + padding-bottom: 30px; + } .post-count, .view-count { text-align: center; @@ -340,18 +339,18 @@ } [component="post"].isSolved .post-body:before { - content: "answer"; - position: absolute; - right: 0; - top: -20px; - background-color: @material-success; - color: #fff; - padding: 0 5px; - - @media (max-width: @screen-xs-max) { - right: initial; - left: 0; - } + content: "answer"; + position: absolute; + right: 0; + top: -20px; + background-color: @material-success; + color: #fff; + padding: 0 5px; + + @media (max-width: @screen-xs-max) { + right: initial; + left: 0; + } } .fork-thread-card { @@ -362,40 +361,40 @@ box-shadow: 0 5px 20px rgba(0, 0, 0, .31); color: @modal-text-color; - background-color: @modal-bg-color; - - .panel-heading { - border-bottom: 1px solid @border-color; - } - - .panel-footer { - color: @modal-text-color; - background-color: @modal-bg-color; - border-top: 1px solid @border-color; - } - - input { - color: @body-color; - } - - .panel-footer .btn.btn-default { - box-shadow: none !important; - background-color: initial; - color: @body-color; - - &:hover { - background-color: @body-bg-color; - } + background-color: @modal-bg-color; + + .panel-heading { + border-bottom: 1px solid @border-color; + } + + .panel-footer { + color: @modal-text-color; + background-color: @modal-bg-color; + border-top: 1px solid @border-color; + } + + input { + color: @body-color; + } + + .panel-footer .btn.btn-default { + box-shadow: none !important; + background-color: initial; + color: @body-color; + + &:hover { + background-color: @body-bg-color; + } } .panel-footer .btn.btn-primary { - box-shadow: none !important; - color: @material-primary; - background-color: initial; + box-shadow: none !important; + color: @material-primary; + background-color: initial; - &:hover { - background-color: @body-bg-color; - } + &:hover { + background-color: @body-bg-color; + } } } @@ -406,7 +405,6 @@ } [component="post"] { - .poster-avatar>a, .post-user-picture { opacity: 1; } @@ -420,16 +418,16 @@ .poster-avatar:before, .user-profile-link:before { border: 1px solid @body-color; - color: @body-color; - -webkit-transition: .2s ease-in-out all; - transition: .2s ease-in-out all; - content: "\f00c"; - padding: 14px; - border-radius: 50%; - opacity: 1; - position: absolute; - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; + color: @body-color; + -webkit-transition: .2s ease-in-out all; + transition: .2s ease-in-out all; + content: "\f00c"; + padding: 14px; + border-radius: 50%; + opacity: 1; + position: absolute; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; } .user-profile-link:before { diff --git a/less/users.less b/less/users.less index 42a1312..f8f0d69 100644 --- a/less/users.less +++ b/less/users.less @@ -1,89 +1,88 @@ .users-container { - padding: 0; + padding: 0; - .users-box { - display: inline-block; - text-align: center; - vertical-align: top; - width: 104px; - margin: 0 4px 10px; + .users-box { + display: inline-block; + text-align: center; + vertical-align: top; + width: 104px; + margin: 0 4px 10px; - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - margin: 0 0 10px; - } + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + margin: 0 0 10px; + } - .user-picture { - .user-icon(80px, 3rem); - margin: 0 auto 5px; - border: 2px solid #fff; - } - } + .user-picture { + .user-icon(80px, 3rem); + margin: 0 auto 5px; + border: 2px solid #fff; + } + } - .anon-user { - .user-picture { - background-color: #aaa; - color: #fff; - } - } + .anon-user { + .user-picture { + background-color: #aaa; + color: #fff; + } + } } #user_label .user-picture { - .user-avatar(30px); + .user-avatar(30px); } .users { - .users-box .user-info { - font-size: 13px; - - >div { - max-width: 94px; - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } + .users-box .user-info { + font-size: 13px; + + >div { + max-width: 94px; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } - .input-group-addon { - &.label-success { - background-color: @material-success; - vertical-align: middle; - } + .input-group-addon { + &.label-success { + background-color: @material-success; + vertical-align: middle; + } - &.label-warning { - background-color: @material-warning; - vertical-align: middle; - } - } + &.label-warning { + background-color: @material-warning; + vertical-align: middle; + } + } - .search { - &.block { - margin-bottom: 10px; - } + .search { + &.block { + margin-bottom: 10px; + } - .input-group { - display: inherit; - } - } + .input-group { + display: inherit; + } + } } .user-icon.pv-main { - font-size: 7.5rem; - line-height: 130px; + font-size: 7.5rem; + line-height: 130px; } .poster-avatar { - .user-icon { - .user-icon(45px, 2.5rem); - } + .user-icon { + .user-icon(45px, 2.5rem); + } } - //use mixins .user-icon { - .user-icon(35px, 1.9rem); + .user-icon(35px, 1.9rem); } .user-avatar { - .user-avatar(35px); + .user-avatar(35px); } \ No newline at end of file diff --git a/less/waves.less b/less/waves.less index 13cce66..6558bed 100644 --- a/less/waves.less +++ b/less/waves.less @@ -9,120 +9,120 @@ */ .waves-effect { - position:relative; - cursor:pointer; - display:inline-block; - overflow:hidden; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none; - -webkit-tap-highlight-color:transparent; - -webkit-transition:all .3s ease-out; - -moz-transition:all .3s ease-out; - -o-transition:all .3s ease-out; - transition:all .3s ease-out; - - .waves-ripple { - position:absolute; - border-radius:50%; - width:100px; - height:100px; - margin-top:-50px; - margin-left:-50px; - opacity:0; - background:rgba(0,0,0,.2); - background:-webkit-radial-gradient(rgba(0,0,0,.2)0, rgba(0,0,0,.3)40%, rgba(0,0,0,.4)50%, rgba(0,0,0,.5)60%, rgba(255,255,255,0)70%); - background:-o-radial-gradient(rgba(0,0,0,.2)0, rgba(0,0,0,.3)40%, rgba(0,0,0,.4)50%, rgba(0,0,0,.5)60%, rgba(255,255,255,0)70%); - background:-moz-radial-gradient(rgba(0,0,0,.2)0, rgba(0,0,0,.3)40%, rgba(0,0,0,.4)50%, rgba(0,0,0,.5)60%, rgba(255,255,255,0)70%); - background:radial-gradient(rgba(0,0,0,.2)0, rgba(0,0,0,.3)40%, rgba(0,0,0,.4)50%, rgba(0,0,0,.5)60%, rgba(255,255,255,0)70%); - -webkit-transition:all .5s ease-out; - -moz-transition:all .5s ease-out; - -o-transition:all .5s ease-out; - transition:all .5s ease-out; - -webkit-transition-property:-webkit-transform,opacity; - -moz-transition-property:-moz-transform,opacity; - -o-transition-property:-o-transform,opacity; - transition-property:transform,opacity; - -webkit-transform:scale(0); - -moz-transform:scale(0); - -ms-transform:scale(0); - -o-transform:scale(0); - transform:scale(0); - pointer-events:none; - } - - &.waves-light .waves-ripple { - background:rgba(255,255,255,.4); - background:-webkit-radial-gradient(rgba(255,255,255,.2)0, rgba(255,255,255,.3)40%, rgba(255,255,255,.4)50%, rgba(255,255,255,.5)60%, rgba(255,255,255,0)70%); - background:-o-radial-gradient(rgba(255,255,255,.2)0, rgba(255,255,255,.3)40%, rgba(255,255,255,.4)50%, rgba(255,255,255,.5)60%, rgba(255,255,255,0)70%); - background:-moz-radial-gradient(rgba(255,255,255,.2)0, rgba(255,255,255,.3)40%, rgba(255,255,255,.4)50%, rgba(255,255,255,.5)60%, rgba(255,255,255,0)70%); - background:radial-gradient(rgba(255,255,255,.2)0, rgba(255,255,255,.3)40%, rgba(255,255,255,.4)50%, rgba(255,255,255,.5)60%, rgba(255,255,255,0)70%); - } - - &.waves-classic .waves-ripple { - background:rgba(0,0,0,.2); - } - - &.waves-classic.waves-light .waves-ripple { - background:rgba(255,255,255,.4); - } + position:relative; + cursor:pointer; + display:inline-block; + overflow:hidden; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; + -webkit-tap-highlight-color:transparent; + -webkit-transition:all .3s ease-out; + -moz-transition:all .3s ease-out; + -o-transition:all .3s ease-out; + transition:all .3s ease-out; + + .waves-ripple { + position:absolute; + border-radius:50%; + width:100px; + height:100px; + margin-top:-50px; + margin-left:-50px; + opacity:0; + background:rgba(0,0,0,.2); + background:-webkit-radial-gradient(rgba(0,0,0,.2)0, rgba(0,0,0,.3)40%, rgba(0,0,0,.4)50%, rgba(0,0,0,.5)60%, rgba(255,255,255,0)70%); + background:-o-radial-gradient(rgba(0,0,0,.2)0, rgba(0,0,0,.3)40%, rgba(0,0,0,.4)50%, rgba(0,0,0,.5)60%, rgba(255,255,255,0)70%); + background:-moz-radial-gradient(rgba(0,0,0,.2)0, rgba(0,0,0,.3)40%, rgba(0,0,0,.4)50%, rgba(0,0,0,.5)60%, rgba(255,255,255,0)70%); + background:radial-gradient(rgba(0,0,0,.2)0, rgba(0,0,0,.3)40%, rgba(0,0,0,.4)50%, rgba(0,0,0,.5)60%, rgba(255,255,255,0)70%); + -webkit-transition:all .5s ease-out; + -moz-transition:all .5s ease-out; + -o-transition:all .5s ease-out; + transition:all .5s ease-out; + -webkit-transition-property:-webkit-transform,opacity; + -moz-transition-property:-moz-transform,opacity; + -o-transition-property:-o-transform,opacity; + transition-property:transform,opacity; + -webkit-transform:scale(0); + -moz-transform:scale(0); + -ms-transform:scale(0); + -o-transform:scale(0); + transform:scale(0); + pointer-events:none; + } + + &.waves-light .waves-ripple { + background:rgba(255,255,255,.4); + background:-webkit-radial-gradient(rgba(255,255,255,.2)0, rgba(255,255,255,.3)40%, rgba(255,255,255,.4)50%, rgba(255,255,255,.5)60%, rgba(255,255,255,0)70%); + background:-o-radial-gradient(rgba(255,255,255,.2)0, rgba(255,255,255,.3)40%, rgba(255,255,255,.4)50%, rgba(255,255,255,.5)60%, rgba(255,255,255,0)70%); + background:-moz-radial-gradient(rgba(255,255,255,.2)0, rgba(255,255,255,.3)40%, rgba(255,255,255,.4)50%, rgba(255,255,255,.5)60%, rgba(255,255,255,0)70%); + background:radial-gradient(rgba(255,255,255,.2)0, rgba(255,255,255,.3)40%, rgba(255,255,255,.4)50%, rgba(255,255,255,.5)60%, rgba(255,255,255,0)70%); + } + + &.waves-classic .waves-ripple { + background:rgba(0,0,0,.2); + } + + &.waves-classic.waves-light .waves-ripple { + background:rgba(255,255,255,.4); + } } .waves-notransition { - -webkit-transition:none!important; - -moz-transition:none!important; - -o-transition:none!important; - transition:none!important; + -webkit-transition:none!important; + -moz-transition:none!important; + -o-transition:none!important; + transition:none!important; } .waves-button, .waves-circle { - -webkit-transform:translateZ(0); - -moz-transform:translateZ(0); - -ms-transform:translateZ(0); - -o-transform:translateZ(0); - transform:translateZ(0); + -webkit-transform:translateZ(0); + -moz-transform:translateZ(0); + -ms-transform:translateZ(0); + -o-transform:translateZ(0); + transform:translateZ(0); } .waves-input-wrapper { - border-radius:.2em; - vertical-align:bottom; - - &.waves-button { - padding:0; - } - - .waves-button-input { - position:relative; - top:0; - left:0; - z-index:1; - } + border-radius:.2em; + vertical-align:bottom; + + &.waves-button { + padding:0; + } + + .waves-button-input { + position:relative; + top:0; + left:0; + z-index:1; + } } .waves-circle { - text-align:center; - width:2.5em; - height:2.5em; - line-height:2.5em; - border-radius:50%; + text-align:center; + width:2.5em; + height:2.5em; + line-height:2.5em; + border-radius:50%; } .waves-float { - -webkit-mask-image:none; - -webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12); - box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12); - - &:active { - -webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3); - box-shadow:0 8px 20px 1px rgba(0,0,0,.3); - } + -webkit-mask-image:none; + -webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12); + box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12); + + &:active { + -webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3); + box-shadow:0 8px 20px 1px rgba(0,0,0,.3); + } } .waves-block { - display:block; + display:block; } a.waves-effect .waves-ripple { - z-index:-1; + z-index:-1; } \ No newline at end of file