first commit
Этот коммит содержится в:
=Corey Hulen
20
web/sass-files/config.rb
Обычный файл
20
web/sass-files/config.rb
Обычный файл
@@ -0,0 +1,20 @@
|
||||
require 'compass/import-once/activate'
|
||||
# Require any additional compass plugins here.
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "../static/css"
|
||||
sass_dir = "sass"
|
||||
images_dir = "../static/img"
|
||||
javascripts_dir = "../static/js"
|
||||
fonts_dir = "../static/fonts"
|
||||
|
||||
output_style = :compressed
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
line_comments = false
|
||||
color_output = false
|
||||
|
||||
preferred_syntax = :scss
|
||||
154
web/sass-files/sass/partials/_base.scss
Обычный файл
154
web/sass-files/sass/partials/_base.scss
Обычный файл
@@ -0,0 +1,154 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: #e9e9e9;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
&.white {
|
||||
background: #fff;
|
||||
.inner__wrap {
|
||||
height: 100%;
|
||||
}
|
||||
.row.content {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
margin-bottom: -89px;
|
||||
}
|
||||
}
|
||||
> .container-fluid {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
a.theme {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
div.theme {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
.nopadding {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@include border-radius(2px);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
&.form-group--small {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-panel {
|
||||
max-width: 275px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 40px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include single-transition(all, 0.25s, ease-in);
|
||||
@include border-radius(1px);
|
||||
&.btn-primary {
|
||||
border-color: transparent;
|
||||
background: $primary-color;
|
||||
&:hover, &:focus, &:active {
|
||||
background: $primary-color--hover;
|
||||
}
|
||||
}
|
||||
&.btn-inactive {
|
||||
border-color: transparent;
|
||||
background: #707070;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.relative-div {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.command-box {
|
||||
position:absolute;
|
||||
background-color:#fff;
|
||||
width:100%;
|
||||
border:1px solid #ddd;
|
||||
bottom: 38;
|
||||
}
|
||||
|
||||
.command-name {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 37px;
|
||||
line-height: 37px;
|
||||
padding: 2px 10px 2px 5px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.command-name:hover {
|
||||
background-color:#e8eaed;
|
||||
}
|
||||
|
||||
.command-desc {
|
||||
color: #a7a8ab;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin2 {
|
||||
from { -webkit-transform: rotate(0deg);}
|
||||
to { -webkit-transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: scale(1) rotate(0deg);}
|
||||
to { transform: scale(1) rotate(360deg);}
|
||||
}
|
||||
|
||||
.black-bg {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
#error_bar {
|
||||
background-color: #0099FF;
|
||||
text-align:center;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
|
||||
.error-bar {
|
||||
padding: 5px 30px;
|
||||
}
|
||||
|
||||
.error-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: #FFF;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.invite {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
63
web/sass-files/sass/partials/_content.scss
Обычный файл
63
web/sass-files/sass/partials/_content.scss
Обычный файл
@@ -0,0 +1,63 @@
|
||||
.inner__wrap {
|
||||
@include single-transition(transform, 0.5s, ease);
|
||||
&.move--left {
|
||||
margin-right: 400px;
|
||||
.search-bar__container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.move--right {
|
||||
.search-bar__container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.app__content {
|
||||
height: 100%;
|
||||
padding-top: 50px;
|
||||
margin-left: 220px;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
.channel__wrap & {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
#post-create {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.post-list {
|
||||
.new-messages-hr {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
border: 0;
|
||||
border-top: 1px solid #FF8800;
|
||||
}
|
||||
|
||||
.new-messages-text {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
color: #FF8800;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.new-messages-hr {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
border: 0;
|
||||
border-top: 1px solid #FF8800;
|
||||
}
|
||||
|
||||
.new-messages-text {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
color: #FF8800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delete-message-text {
|
||||
margin-top: 10px;
|
||||
}
|
||||
29
web/sass-files/sass/partials/_error.scss
Обычный файл
29
web/sass-files/sass/partials/_error.scss
Обычный файл
@@ -0,0 +1,29 @@
|
||||
body {
|
||||
&.error {
|
||||
.container-fluid {
|
||||
display: table;
|
||||
height: 90%;
|
||||
}
|
||||
.error__container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
padding: 5em 0;
|
||||
text-align: left;
|
||||
color: #555;
|
||||
}
|
||||
.error__icon {
|
||||
font-size: 4em;
|
||||
color: #CCC;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 1.5em;
|
||||
margin: 0.8em 0 0.5em;
|
||||
}
|
||||
p {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
144
web/sass-files/sass/partials/_files.scss
Обычный файл
144
web/sass-files/sass/partials/_files.scss
Обычный файл
@@ -0,0 +1,144 @@
|
||||
.preview-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 110px;
|
||||
height: 110px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
.preview-div {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
margin: 7px 10px 0 0;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
border: 1px solid #DDD;
|
||||
&.custom-file {
|
||||
width: 85px;
|
||||
height: 100px;
|
||||
}
|
||||
&:hover .remove-preview:after {
|
||||
@include opacity(1);
|
||||
}
|
||||
.spinner {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
margin-left: -16px;
|
||||
margin-top: -16px;
|
||||
width:32px;
|
||||
height:32px;
|
||||
}
|
||||
}
|
||||
.preview-img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.remove-preview {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
&:after {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
content: '';
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
@include opacity(0);
|
||||
}
|
||||
i {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
opacity: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-comment {
|
||||
background-position:left top;
|
||||
background-repeat:no-repeat;
|
||||
width:300px;
|
||||
height:300px;
|
||||
}
|
||||
.file-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.audio {
|
||||
background: url("../images/icons/audio.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
&.video {
|
||||
background: url("../images/icons/video.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
&.ppt {
|
||||
background: url("../images/icons/ppt.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
&.generic {
|
||||
background: url("../images/icons/generic.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
&.code {
|
||||
background: url("../images/icons/code.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
&.excel {
|
||||
background: url("../images/icons/excel.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
&.word {
|
||||
background: url("../images/icons/word.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
&.pdf {
|
||||
background: url("../images/icons/pdf.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
&.patch {
|
||||
background: url("../images/icons/patch.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
&.image {
|
||||
background: url("../images/icons/image.png");
|
||||
@include background-size(100% 100%);
|
||||
}
|
||||
}
|
||||
.post-image__column {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin: 0 1em 1em 0;
|
||||
&.custom-file {
|
||||
width: 85px;
|
||||
height: 100px;
|
||||
}
|
||||
.post__load {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: 20px 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.post__image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid #E2E2E2;
|
||||
background-color: #FFF;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
1801
web/sass-files/sass/partials/_font-awesome.scss
Обычный файл
1801
web/sass-files/sass/partials/_font-awesome.scss
Обычный файл
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
23
web/sass-files/sass/partials/_footer.scss
Обычный файл
23
web/sass-files/sass/partials/_footer.scss
Обычный файл
@@ -0,0 +1,23 @@
|
||||
.footer-pane {
|
||||
background: #eee;
|
||||
padding-bottom: 1em;
|
||||
.footer-link {
|
||||
padding: 0 1.5em;
|
||||
&.copyright {
|
||||
color: #999;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.footer-site-name {
|
||||
padding: 1.5em 0 1em;
|
||||
font-size:14px;
|
||||
font-weight:bold;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.footer, .footer-pane, .footer-push {
|
||||
height: 89px;
|
||||
}
|
||||
|
||||
|
||||
215
web/sass-files/sass/partials/_headers.scss
Обычный файл
215
web/sass-files/sass/partials/_headers.scss
Обычный файл
@@ -0,0 +1,215 @@
|
||||
.row {
|
||||
&.header {
|
||||
position: relative;
|
||||
.channel__wrap & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-dropdown__icon {
|
||||
font-size: 11px;
|
||||
color: inherit;
|
||||
top: 3px;
|
||||
}
|
||||
.channel-header__info {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
> div {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
word-break: break-word;
|
||||
&.dropdown {
|
||||
max-width: 100%;
|
||||
padding-right: 1em;
|
||||
float: left;
|
||||
.header-dropdown__icon {
|
||||
color: #777;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.modal {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
&.description {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
}
|
||||
&.popover {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-intro {
|
||||
padding-bottom:5px;
|
||||
margin: 0 1em 35px;
|
||||
border-bottom: 1px solid lightgrey;
|
||||
.intro-links {
|
||||
margin: 0.5em 1.5em 0 0;
|
||||
display: inline-block;
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.channel-intro-profile {
|
||||
margin-top:5px;
|
||||
margin-left: 63px;
|
||||
}
|
||||
.channel-intro-img {
|
||||
float:left;
|
||||
}
|
||||
.channel-intro-title {
|
||||
font-weight:bold;
|
||||
}
|
||||
.channel-intro-text {
|
||||
margin-top:35px;
|
||||
}
|
||||
}
|
||||
|
||||
// Team Header in Sidebar
|
||||
.sidebar--left, .sidebar--menu {
|
||||
.team__header {
|
||||
padding: 0 15px 0 15px;
|
||||
@include legacy-pie-clearfix;
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar-right {
|
||||
font-size: 0.85em;
|
||||
margin: 16px -5px 0;
|
||||
.dropdown-toggle {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.dropdown-menu {
|
||||
li a {
|
||||
padding: 3 20px;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
.dropdown__icon {
|
||||
background: url("../images/dropdown-icon.png");
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
@include background-size(100% 100%);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.team__name {
|
||||
float: left;
|
||||
line-height: 50px;
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
}
|
||||
> .nav {
|
||||
> li {
|
||||
> a {
|
||||
float: right;
|
||||
background: none !important;
|
||||
padding: 2px;
|
||||
&.dropdown-toggle {
|
||||
line-height: 1.8;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navbar {
|
||||
.navbar-default {
|
||||
.navbar-toggle {
|
||||
&.menu-toggle {
|
||||
padding: 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header {
|
||||
width:100%;
|
||||
border-left: none;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
#member_popover {
|
||||
width: 45px;
|
||||
color: #999;
|
||||
|
||||
}
|
||||
&.alt {
|
||||
margin: 0;
|
||||
th {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
text-align: left !important;
|
||||
border-left: none;
|
||||
width: 100%;
|
||||
padding-left: 1em;
|
||||
}
|
||||
&:last-child {
|
||||
width: 8.9%;
|
||||
}
|
||||
}
|
||||
td {
|
||||
padding: 5px 25px 5px !important;
|
||||
font-size: 13px;
|
||||
text-align: center !important;
|
||||
&:first-child {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
margin: 0;
|
||||
color: #555;
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.caret {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.more {
|
||||
color: #81848b;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-transform: capitalize;
|
||||
font-size: 13px;
|
||||
}
|
||||
.disabled {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__navbar {
|
||||
font-size: 16px;
|
||||
.heading {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.header-dropdown__icon {
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
55
web/sass-files/sass/partials/_mentions.scss
Обычный файл
55
web/sass-files/sass/partials/_mentions.scss
Обычный файл
@@ -0,0 +1,55 @@
|
||||
.mention {
|
||||
color: #fff;
|
||||
background: $primary-color;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding-bottom: 1px;
|
||||
@include border-radius(3px);
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mentions--top {
|
||||
position: absolute;
|
||||
z-index:99999;
|
||||
.mentions-box {
|
||||
position:absolute;
|
||||
background-color:#fff;
|
||||
border:1px solid #ddd;
|
||||
overflow:scroll;
|
||||
bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
.mentions-name {
|
||||
position:relative;
|
||||
width:100%;
|
||||
background-color:#fff;
|
||||
height:37px;
|
||||
padding:2px;
|
||||
z-index:101;
|
||||
}
|
||||
|
||||
.mentions-name:hover {
|
||||
background-color:#e8eaed;
|
||||
}
|
||||
|
||||
.mentions-text {
|
||||
font-color:black;
|
||||
}
|
||||
|
||||
.mention-img {
|
||||
margin-right:10px;
|
||||
height:32px;
|
||||
width:32px;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.mention-highlight {
|
||||
background-color:#fff2bb;
|
||||
}
|
||||
|
||||
.mention-link {
|
||||
color:$primary-color;
|
||||
}
|
||||
248
web/sass-files/sass/partials/_modal.scss
Обычный файл
248
web/sass-files/sass/partials/_modal.scss
Обычный файл
@@ -0,0 +1,248 @@
|
||||
.modal {
|
||||
&.image_modal {
|
||||
.modal-backdrop.in {
|
||||
@include opacity(0.7);
|
||||
}
|
||||
}
|
||||
.remove__member {
|
||||
float: right;
|
||||
}
|
||||
.modal-dialog {
|
||||
max-width: 95%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.modal-body {
|
||||
max-height: 75%;
|
||||
overflow: auto;
|
||||
}
|
||||
.modal-push-down {
|
||||
margin-top: 5%;
|
||||
}
|
||||
.modal-next-bar {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:0;
|
||||
height:100%;
|
||||
}
|
||||
.modal-header {
|
||||
border-radius: 0;
|
||||
background: $primary-color;
|
||||
color: #FFF;
|
||||
padding: 15px 15px 11px;
|
||||
border: none;
|
||||
min-height: 56px;
|
||||
@include clearfix;
|
||||
.modal-title {
|
||||
float: left;
|
||||
}
|
||||
.modal-action {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
button.close {
|
||||
margin-top: 0;
|
||||
color: #fff;
|
||||
@include opacity(1);
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
.btn {
|
||||
margin-right: 10px;
|
||||
&.btn-primary {
|
||||
float: right;
|
||||
margin-top: -4px;
|
||||
position: relative;
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-channel-message {
|
||||
text-align: center;
|
||||
padding: 2em 1em;
|
||||
.primary-message {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.secondary-message {
|
||||
font-size: 1.25em;
|
||||
color: #888;
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.modal-chevron-icon {
|
||||
top:50%;
|
||||
font-size:120%;
|
||||
}
|
||||
.modal-prev-bar {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0;
|
||||
height:100%;
|
||||
}
|
||||
&#more_channels {
|
||||
.modal-body {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
.more-channel-table {
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
p {
|
||||
font-size: 0.9em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #999;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.more-channel-name {
|
||||
color: #444;
|
||||
font-weight: bold;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
tbody {
|
||||
> tr {
|
||||
&:first-child {
|
||||
td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
td {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&.td--action {
|
||||
width: 70px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-image {
|
||||
position:relative;
|
||||
width:100%;
|
||||
margin: 0 auto;
|
||||
.image-wrapper {
|
||||
padding: 4px;
|
||||
background: #FFF;
|
||||
position: relative;
|
||||
max-width: 80%;
|
||||
min-height: 280px;
|
||||
min-width: 280px;
|
||||
@include border-radius(4px);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
&:hover .modal-close {
|
||||
@include opacity(1);
|
||||
}
|
||||
&.default {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
.modal-close {
|
||||
background: url("../images/close.png") no-repeat;
|
||||
@include background-size(100% 100%);
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
position: absolute;
|
||||
right: -13px;
|
||||
top: -13px;
|
||||
@include opacity(0);
|
||||
cursor: pointer;
|
||||
z-index: 9999;
|
||||
}
|
||||
> a {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
.image-content {
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: table;
|
||||
}
|
||||
.image-body {
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.image-control {
|
||||
width: 50px;
|
||||
height: 45px;
|
||||
float: left;
|
||||
background: url(../images/prev.png) left no-repeat;
|
||||
top: 50%;
|
||||
position: relative;
|
||||
margin-top: -23px;
|
||||
&.image-next {
|
||||
float: right;
|
||||
background: url(../images/next.png) left no-repeat;
|
||||
}
|
||||
}
|
||||
.loader-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.loader-percent {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
color:grey;
|
||||
height:20px;
|
||||
}
|
||||
.modal-button-bar {
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
background-color:rgba(0, 0, 0, 0.8);
|
||||
@include opacity(0);
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
margin: 4px;
|
||||
&.footer--show {
|
||||
@include opacity(1);
|
||||
}
|
||||
.image-links {
|
||||
a, span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
vertical-align:middle;
|
||||
bottom:0;
|
||||
color:white;
|
||||
margin-left:5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
101
web/sass-files/sass/partials/_navbar.scss
Обычный файл
101
web/sass-files/sass/partials/_navbar.scss
Обычный файл
@@ -0,0 +1,101 @@
|
||||
#navbar{
|
||||
input {
|
||||
margin: 0px 5px 0px 2px;
|
||||
}
|
||||
.navbar-default {
|
||||
position: absolute;
|
||||
border: none;
|
||||
min-height: 50px;
|
||||
background: $primary-color;
|
||||
.navbar-nav {
|
||||
> li {
|
||||
> a {
|
||||
height: 50px;
|
||||
padding: 0 1.3em;
|
||||
i {
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggle {
|
||||
float: left;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
z-index: 5;
|
||||
.icon-bar {
|
||||
background: #fff;
|
||||
width: 21px;
|
||||
}
|
||||
&:hover, &:active, &:focus {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
padding: 0 0.5em;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
float: none;
|
||||
font-size: 16px;
|
||||
.heading {
|
||||
margin-right: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
.header-dropdown__icon {
|
||||
top: 1px;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
color: #fff;
|
||||
}
|
||||
.description {
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
color: #fff;
|
||||
&.info-popover {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background: url("../images/info__icon.png");
|
||||
@include background-size(100% 100%);
|
||||
vertical-align: middle;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-channel {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
span {
|
||||
white-space: nowrap;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.channel-create-btn {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.more-channel-table {
|
||||
width: 100%;
|
||||
border: 1px solid #dbdbdc;
|
||||
td {
|
||||
padding: 7px;
|
||||
}
|
||||
button {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-notify {
|
||||
background:red;
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
z-index: 100;
|
||||
}
|
||||
120
web/sass-files/sass/partials/_perfect-scrollbar.scss
Исполняемый файл
120
web/sass-files/sass/partials/_perfect-scrollbar.scss
Исполняемый файл
@@ -0,0 +1,120 @@
|
||||
.ps-container {
|
||||
overflow: hidden !important; }
|
||||
.ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
|
||||
display: block; }
|
||||
.ps-container.ps-in-scrolling {
|
||||
pointer-events: none; }
|
||||
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
|
||||
filter: alpha(opacity=90); }
|
||||
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
||||
background-color: #999; }
|
||||
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
|
||||
filter: alpha(opacity=90); }
|
||||
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
||||
background-color: #999; }
|
||||
.ps-container > .ps-scrollbar-x-rail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
-moz-transition: background-color .2s linear, opacity .2s linear;
|
||||
-o-transition: background-color .2s linear, opacity .2s linear;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
bottom: 3px;
|
||||
/* there must be 'bottom' for ps-scrollbar-x-rail */
|
||||
height: 8px; }
|
||||
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
background-color: #aaa;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-transition: background-color .2s linear;
|
||||
-moz-transition: background-color .2s linear;
|
||||
-o-transition: background-color .2s linear;
|
||||
transition: background-color .2s linear;
|
||||
bottom: 0;
|
||||
/* there must be 'bottom' for ps-scrollbar-x */
|
||||
height: 8px; }
|
||||
.ps-container > .ps-scrollbar-y-rail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
-moz-transition: background-color .2s linear, opacity .2s linear;
|
||||
-o-transition: background-color .2s linear, opacity .2s linear;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
right: 3px;
|
||||
/* there must be 'right' for ps-scrollbar-y-rail */
|
||||
width: 8px; }
|
||||
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
background-color: #aaa;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-transition: background-color .2s linear;
|
||||
-moz-transition: background-color .2s linear;
|
||||
-o-transition: background-color .2s linear;
|
||||
transition: background-color .2s linear;
|
||||
right: 0;
|
||||
/* there must be 'right' for ps-scrollbar-y */
|
||||
width: 8px; }
|
||||
.ps-container:hover.ps-in-scrolling {
|
||||
pointer-events: none; }
|
||||
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
|
||||
filter: alpha(opacity=90); }
|
||||
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
||||
background-color: #999; }
|
||||
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
|
||||
filter: alpha(opacity=90); }
|
||||
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
||||
background-color: #999; }
|
||||
.ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
|
||||
opacity: 0.6;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60); }
|
||||
.ps-container:hover > .ps-scrollbar-x-rail:hover {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
|
||||
filter: alpha(opacity=90); }
|
||||
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
|
||||
background-color: #999; }
|
||||
.ps-container:hover > .ps-scrollbar-y-rail:hover {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
|
||||
filter: alpha(opacity=90); }
|
||||
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
|
||||
background-color: #999; }
|
||||
380
web/sass-files/sass/partials/_post.scss
Обычный файл
380
web/sass-files/sass/partials/_post.scss
Обычный файл
@@ -0,0 +1,380 @@
|
||||
.custom-textarea {
|
||||
white-space:pre-wrap;
|
||||
word-wrap:break-word;
|
||||
background:transparent;
|
||||
border:1px solid #ccc !important;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
height:auto;
|
||||
resize: none;
|
||||
line-height:20px;
|
||||
min-height:36px;
|
||||
}
|
||||
|
||||
.textarea-div {
|
||||
white-space:pre-wrap;
|
||||
word-wrap:normal;
|
||||
color:rgba(0,0,0,0);
|
||||
position:absolute;
|
||||
top:0px;
|
||||
word-break: break-word;
|
||||
left:1px;
|
||||
line-height:20px;
|
||||
min-height:36px;
|
||||
height:auto;
|
||||
border:0;
|
||||
}
|
||||
|
||||
body.ios {
|
||||
.textarea-div {
|
||||
padding: 7px 17px 7px 15px;
|
||||
-webkit-overflow-scrolling: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-div::-webkit-scrollbar {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.textarea-wrapper {
|
||||
position:relative;
|
||||
min-height:37px;
|
||||
}
|
||||
|
||||
#post-list {
|
||||
.new-seperator {
|
||||
text-align: center;
|
||||
padding: 1em 0;
|
||||
.new-seperator__hr {
|
||||
border-color: #FFAF53;
|
||||
margin: 0;
|
||||
}
|
||||
.new-seperator__text {
|
||||
margin-top: -11px;
|
||||
color: #FF8800;
|
||||
background: #FFF;
|
||||
display: inline-block;
|
||||
padding: 0 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.date-seperator {
|
||||
text-align: center;
|
||||
margin: 1em 0;
|
||||
height: 0;
|
||||
&.hovered--after {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 1em;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
&.hovered--before {
|
||||
margin-top: 0;
|
||||
padding-top: 1em;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
.date-seperator__hr {
|
||||
border-color: #ccc;
|
||||
margin: 0;
|
||||
}
|
||||
.date-seperator__text {
|
||||
margin-top: -13px;
|
||||
line-height: 24px;
|
||||
color: #555;
|
||||
background: #FFF;
|
||||
display: inline-block;
|
||||
padding: 0 1em;
|
||||
font-weight: 900;
|
||||
@include border-radius(50px);
|
||||
}
|
||||
}
|
||||
.post-list-holder-by-time {
|
||||
background: #fff;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
padding: 1em 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.post-list__table {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
.post-list__content {
|
||||
display: table-cell;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
.more-messages-text {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.beginning-messages-text {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
.post-create__container {
|
||||
form {
|
||||
width: 100%;
|
||||
padding: 0 1em;
|
||||
margin: 0;
|
||||
}
|
||||
.post-create-body {
|
||||
max-width: 850px;
|
||||
padding: 0 0 2px;
|
||||
position: relative;
|
||||
.custom-textarea {
|
||||
padding-top: 8px;
|
||||
padding-right: 28px;
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.textarea-div {
|
||||
padding-top: 8px;
|
||||
padding-right: 30px;
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.btn-file {
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
color: #999;
|
||||
@include single-transition(all, 0.15s);
|
||||
font-size: 16px;
|
||||
padding: 9px;
|
||||
&:hover, &:active {
|
||||
color: #444;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.post-create-footer {
|
||||
@include clearfix;
|
||||
padding: 0;
|
||||
.msg-typing {
|
||||
min-height: 20px;
|
||||
line-height: 18px;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
word-wrap: break-word;
|
||||
padding: 0.4em 1em;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
@include legacy-pie-clearfix;
|
||||
&:hover {
|
||||
.post-header .post-header-col.post-header__reply {
|
||||
.dropdown, .comment-icon__container {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
background: #f6f6f6;
|
||||
}
|
||||
&.post--comment {
|
||||
&.other--root {
|
||||
.post-comment {
|
||||
border-left: 4px solid #EEE;
|
||||
margin-left: 30px;
|
||||
padding: 2px 0 2px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.same--root {
|
||||
.comment-icon__container {
|
||||
@include opacity(0);
|
||||
}
|
||||
div.post-profile-img__container {
|
||||
.post-profile-img {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.post__content {
|
||||
padding: 0;
|
||||
}
|
||||
.post-body {
|
||||
border-left: 4px solid #EEE;
|
||||
width: 570px;
|
||||
margin-left: 30px;
|
||||
padding-left: 10px;
|
||||
.post-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.post--last {
|
||||
.post-header {
|
||||
.post-header-col.post-header__reply {
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-create-footer {
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 5px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.comment-icon__container {
|
||||
fill: $primary-color;
|
||||
.comment-icon {
|
||||
display: inline-block;
|
||||
top: 3px;
|
||||
position: relative;
|
||||
margin-right: 3px;
|
||||
fill: inherit;
|
||||
}
|
||||
path {
|
||||
fill: inherit;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
&.post-profile-img__container {
|
||||
float: left;
|
||||
.post-profile-img {
|
||||
margin-right: 10px;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
}
|
||||
&.post__content {
|
||||
padding-left: 46px;
|
||||
max-width: 100%;
|
||||
@include legacy-pie-clearfix;
|
||||
}
|
||||
}
|
||||
.post-image__columns {
|
||||
@include legacy-pie-clearfix;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.post-info--hidden {
|
||||
display: none;
|
||||
}
|
||||
.post-body {
|
||||
max-width: 100%;
|
||||
width: 600px;
|
||||
float: left;
|
||||
word-wrap: break-word;
|
||||
.post-link {
|
||||
@include clearfix;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.create-reply-form-wrap {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
form {
|
||||
padding: 0;
|
||||
}
|
||||
.comment-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.post-header {
|
||||
list-style-type: none;
|
||||
margin: 0 0 1px;
|
||||
padding-left: 0px;
|
||||
&.post-header-post {
|
||||
width: 200px;
|
||||
text-align: right;
|
||||
float: left;
|
||||
padding-right: 15px;
|
||||
}
|
||||
&.post-info {
|
||||
.post-profile-time {
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
.post-header-col {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
&.post-header__reply {
|
||||
min-width: 70px;
|
||||
.dropdown-menu {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.dropdown {
|
||||
min-width: 18px;
|
||||
margin-right: 7px;
|
||||
display: inline-block;
|
||||
@include opacity(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-profile-time {
|
||||
color: #a8adb7;
|
||||
}
|
||||
}
|
||||
.post-comment {
|
||||
}
|
||||
.web-embed-data {
|
||||
padding: 2px 0 0 10px;
|
||||
background: #f9f9f9;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
@include border-radius(2px);
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.embed-title {
|
||||
margin: 3px 0 1px;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.embed-description {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: #888;
|
||||
}
|
||||
.embed-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.msg-typing {
|
||||
margin-top: 2px;
|
||||
margin-left: 5px;
|
||||
color: #a8adb7;
|
||||
}
|
||||
.post-grey {
|
||||
color:lightgrey;
|
||||
}
|
||||
.post-reply {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
.btn-file {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
77
web/sass-files/sass/partials/_post_right.scss
Обычный файл
77
web/sass-files/sass/partials/_post_right.scss
Обычный файл
@@ -0,0 +1,77 @@
|
||||
.post-right__container {
|
||||
|
||||
.post-right-root-message {
|
||||
padding: 1em 1em 0;
|
||||
}
|
||||
|
||||
.post-right-comments-container {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post {
|
||||
&.post--root {
|
||||
padding: 1em;
|
||||
hr {
|
||||
border-color: #DDD;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-create__container {
|
||||
.custom-textarea {
|
||||
min-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.post-right-header {
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
height: 39px;
|
||||
padding: 10px 10px 0 15px;
|
||||
border-bottom: $border-gray;
|
||||
}
|
||||
|
||||
.post-right-root-container {
|
||||
padding: 5px 10px;
|
||||
border-bottom: $border-gray;
|
||||
}
|
||||
|
||||
.post-right-root-container {
|
||||
ul {
|
||||
padding-left: 0;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-right-root-container li {
|
||||
display: inline;
|
||||
list-style-type: none;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.post-right-root-time {
|
||||
color: #a8adb7;
|
||||
}
|
||||
|
||||
.post-right-create-comment-container {
|
||||
padding: 5px;
|
||||
margin-bottom: 18px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-right__scroll {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-right-comment-time {
|
||||
color: #a8adb7;
|
||||
}
|
||||
637
web/sass-files/sass/partials/_responsive.scss
Обычный файл
637
web/sass-files/sass/partials/_responsive.scss
Обычный файл
@@ -0,0 +1,637 @@
|
||||
@media screen and (max-width: 1800px) {
|
||||
.inner__wrap {
|
||||
&.move--left {
|
||||
.post {
|
||||
&.post--comment {
|
||||
&.other--root {
|
||||
.post-comment {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.same--root {
|
||||
margin-left: 60px;
|
||||
padding-left: 10px;
|
||||
border-left: 4px solid #EEE;
|
||||
div.post-profile-img__container {
|
||||
.post-profile-img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.post__content {
|
||||
width: 825px;
|
||||
}
|
||||
.post-body {
|
||||
padding-left: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.post__content {
|
||||
width: 920px;
|
||||
}
|
||||
.post-header {
|
||||
&.post-header-post {
|
||||
width: auto;
|
||||
float: none;
|
||||
text-align: left;
|
||||
padding-right: 0;
|
||||
}
|
||||
&.post-info {
|
||||
display: none;
|
||||
float: none;
|
||||
}
|
||||
.post-header-col {
|
||||
&.post-header__reply {
|
||||
float: right;
|
||||
text-align: right;
|
||||
.reply-link {
|
||||
margin-right: 0;
|
||||
}
|
||||
.dropdown {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-info--hidden {
|
||||
display: inline;
|
||||
.post-info {
|
||||
display: inline;
|
||||
.post-profile-time {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-body {
|
||||
float: none;
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
.post-create__container {
|
||||
.post-create-body {
|
||||
max-width: 810px;
|
||||
}
|
||||
}
|
||||
.post {
|
||||
&.post--comment {
|
||||
&.other--root {
|
||||
.post-comment {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.same--root {
|
||||
margin-left: 60px;
|
||||
padding-left: 10px;
|
||||
border-left: 4px solid #EEE;
|
||||
div.post-profile-img__container {
|
||||
.post-profile-img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.post__content {
|
||||
width: 825px;
|
||||
}
|
||||
.post-body {
|
||||
padding-left: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.post__content {
|
||||
width: 880px;
|
||||
}
|
||||
.post-header {
|
||||
&.post-header-post {
|
||||
width: auto;
|
||||
float: none;
|
||||
text-align: left;
|
||||
padding-right: 0;
|
||||
}
|
||||
&.post-info {
|
||||
display: none;
|
||||
float: none;
|
||||
}
|
||||
.post-header-col {
|
||||
&.post-header__reply {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.post-info--hidden {
|
||||
display: inline;
|
||||
.post-info {
|
||||
display: inline;
|
||||
.post-profile-time {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-body {
|
||||
float: none;
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1140px) {
|
||||
.post {
|
||||
.post__content {
|
||||
width: 100%;
|
||||
}
|
||||
.post-header {
|
||||
.post-header-col {
|
||||
&.post-header__reply {
|
||||
.reply-link {
|
||||
margin-right: 0;
|
||||
}
|
||||
.dropdown {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.post {
|
||||
&:hover {
|
||||
.post-header .post-header-col.post-header__reply {
|
||||
.comment-icon__container__hide {
|
||||
@include opacity(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-header .post-header-col.post-header__reply {
|
||||
.comment-icon__container__hide {
|
||||
@include opacity(0);
|
||||
}
|
||||
.dropdown {
|
||||
@include opacity(1);
|
||||
}
|
||||
.comment-icon__container__show {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.signup-team__container {
|
||||
font-size: 1em;
|
||||
}
|
||||
.post {
|
||||
.post-header {
|
||||
.post-header-col {
|
||||
&.post-header__reply {
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.second-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#post-list {
|
||||
.date-seperator {
|
||||
&.hovered--after {
|
||||
background: none;
|
||||
}
|
||||
&.hovered--before {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post {
|
||||
&.same--root {
|
||||
margin-left: 25px;
|
||||
}
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.signup-team__container {
|
||||
padding: 30px 0;
|
||||
margin-bottom: 30px;
|
||||
font-size: 0.9em;
|
||||
.signup-team__name {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
.modal-header {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
.modal-action {
|
||||
margin-top: 10px;
|
||||
}
|
||||
button.close {
|
||||
width: 35px;
|
||||
height: 32px;
|
||||
margin: -5px -10px 0;
|
||||
}
|
||||
.modal-title {
|
||||
float: none;
|
||||
}
|
||||
.btn {
|
||||
&.btn-primary {
|
||||
margin: 8px 0 0 -10px;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.settings-modal {
|
||||
&.display--content {
|
||||
.modal-header {
|
||||
display: none;
|
||||
}
|
||||
.settings-table {
|
||||
display: block;
|
||||
.settings-content {
|
||||
display: block;
|
||||
.section-edit {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.settings-links {
|
||||
display: none;
|
||||
}
|
||||
.modal-header {
|
||||
display: block;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
.user-settings {
|
||||
.tab-header {
|
||||
display: none;
|
||||
}
|
||||
.divider-dark.first {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.settings-table {
|
||||
.settings-content {
|
||||
padding: 0;
|
||||
display: none;
|
||||
.user-settings {
|
||||
padding: 70px 20px 30px;
|
||||
}
|
||||
}
|
||||
.settings-links {
|
||||
background: #fff;
|
||||
}
|
||||
.nav {
|
||||
> li {
|
||||
> a {
|
||||
border-top: 1px solid #ddd;
|
||||
font-size: 1.1em;
|
||||
line-height: 2.7;
|
||||
color: #555;
|
||||
.glyphicon {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
&.active, &:hover {
|
||||
a {
|
||||
color: #555;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#post-create {
|
||||
.post-create-body {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.post-create-footer .msg-typing {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.preview-container {
|
||||
.preview-div {
|
||||
margin-top: 0;
|
||||
}
|
||||
.remove-preview {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background: #444;
|
||||
margin: -25px 0 0 -25px;
|
||||
@include border-radius(50px);
|
||||
text-align: center;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
i {
|
||||
line-height: 50px;
|
||||
top: auto;
|
||||
right: auto;
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#navbar {
|
||||
.navbar-default {
|
||||
.navbar-header {
|
||||
margin: 0 -15px;
|
||||
.dropdown__icon {
|
||||
background: url("../images/dropdown-icon.png");
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
@include background-size(100% 100%);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
.navbar-brand {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
#user_settings {
|
||||
border-right: none;
|
||||
}
|
||||
body {
|
||||
&.white {
|
||||
.row.content {
|
||||
margin-bottom: -185px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer, .footer-pane, .footer-push {
|
||||
height: 185px;
|
||||
}
|
||||
.footer-pane {
|
||||
.footer-link {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
line-height: 1.7;
|
||||
&.copyright {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-bar__container {
|
||||
padding: 10px 8px 13px;
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
.search__form {
|
||||
border: none;
|
||||
padding: 0 10px 0 30px;
|
||||
.form-control {
|
||||
background: none;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-bottom: 1px solid rgba(#fff, 0.7);
|
||||
border-radius: 0;
|
||||
padding: 0 0 0 23px;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar--menu {
|
||||
@include single-transition(transform, 0.5s, ease);
|
||||
@include translate3d(290px, 0, 0);
|
||||
width: 290px;
|
||||
border: none;
|
||||
display: block;
|
||||
&.move--left {
|
||||
@include translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.sidebar--left {
|
||||
@include single-transition(transform, 0.5s, ease);
|
||||
@include translate3d(-290px, 0, 0);
|
||||
width: 290px;
|
||||
border: none;
|
||||
&.sidebar--padded {
|
||||
padding-top: 0;
|
||||
}
|
||||
&.move--right {
|
||||
@include translate3d(0, 0, 0);
|
||||
}
|
||||
> div {
|
||||
padding-bottom: 105px;
|
||||
}
|
||||
.team__header {
|
||||
display: none;
|
||||
@include clearfix;
|
||||
}
|
||||
.search__form {
|
||||
display: block;
|
||||
}
|
||||
.nav {
|
||||
li {
|
||||
&.dropdown.open {
|
||||
padding-bottom: 25px;
|
||||
ul {
|
||||
clear: both;
|
||||
background: #FFF;
|
||||
border-radius: 3px;
|
||||
top: 5px;
|
||||
position: relative;
|
||||
li {
|
||||
a {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
> a {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
line-height: 2.5;
|
||||
&:hover, &:focus {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar--right {
|
||||
width: 100%;
|
||||
right: 0;
|
||||
@include translate3d(100%, 0, 0);
|
||||
z-index: 5;
|
||||
&.move--left {
|
||||
@include translate3d(0, 0, 0);
|
||||
}
|
||||
.sidebar__collapse, .sidebar__search-icon {
|
||||
display: block;
|
||||
}
|
||||
.sidebar--right__close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.inner__wrap {
|
||||
&.move--right {
|
||||
@include translate3d(290px, 0, 0);
|
||||
&:before {
|
||||
z-index: 9999;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -15px;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
&.move--left-small {
|
||||
@include translate3d(-290px, 0, 0);
|
||||
&:before {
|
||||
z-index: 9999;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
right: -15px;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
&.move--left {
|
||||
margin: 0;
|
||||
@include translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
.modal-image {
|
||||
.image-wrapper {
|
||||
padding-bottom: 40px;
|
||||
.modal-close {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
.modal-button-bar {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.app__content {
|
||||
padding-top: 50px;
|
||||
margin: 0;
|
||||
.channel__wrap & {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.channel-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.channel__wrap {
|
||||
.row {
|
||||
&.header {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
.post-profile-img__container {
|
||||
display: none;
|
||||
}
|
||||
&.post--comment {
|
||||
&.other--root {
|
||||
.post-comment {
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div {
|
||||
&.post__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-comments {
|
||||
padding: 9px 21px 10px 10px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.modal {
|
||||
.modal-body {
|
||||
max-height: 70%;
|
||||
}
|
||||
.settings-modal {
|
||||
&.display--content {
|
||||
.modal-body {
|
||||
max-height: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.member-div {
|
||||
padding: 8px 0;
|
||||
.member-drop, .member-role {
|
||||
position: relative;
|
||||
margin: 0px 0 0 44px;
|
||||
padding: 5px 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.open>.dropdown-menu {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
.sidebar--left {
|
||||
@include translate3d(-260px, 0, 0);
|
||||
width: 260px;
|
||||
}
|
||||
.inner__wrap {
|
||||
&.move--right {
|
||||
@include translate3d(260px, 0, 0);
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
.modal-image {
|
||||
.modal-button-bar {
|
||||
line-height: 30px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
95
web/sass-files/sass/partials/_search.scss
Обычный файл
95
web/sass-files/sass/partials/_search.scss
Обычный файл
@@ -0,0 +1,95 @@
|
||||
.search-bar__container {
|
||||
padding: 8px 8px 8px 0;
|
||||
}
|
||||
.sidebar__collapse {
|
||||
width: 20px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 6px;
|
||||
cursor: pointer;
|
||||
background: url("../images/arrow-left.png") center no-repeat;
|
||||
@include background-size(10px 15px);
|
||||
z-index: 5;
|
||||
display: none;
|
||||
}
|
||||
.sidebar__search-icon {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 18px;
|
||||
@include opacity(0.8);
|
||||
display: none;
|
||||
}
|
||||
.search__form {
|
||||
.search-bar__container & {
|
||||
margin: 0;
|
||||
border: 1px solid #DDD;
|
||||
@include border-radius(2px);
|
||||
width: 300px;
|
||||
}
|
||||
.sidebar--right & {
|
||||
width: 100%;
|
||||
}
|
||||
.search-bar-box {
|
||||
height: 40px;
|
||||
border: 1px solid #ddd;
|
||||
padding-right: 30px;
|
||||
box-shadow: none;
|
||||
.search-bar__container & {
|
||||
height: 30px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.glyphicon-refresh-animate {
|
||||
top: 27px;
|
||||
position: absolute;
|
||||
right: 27px;
|
||||
color: #999;
|
||||
.search-bar__container & {
|
||||
right: 7px;
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-items-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-results-header {
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 10px 0 10px;
|
||||
border-bottom: $border-gray;
|
||||
}
|
||||
|
||||
.search-item-container {
|
||||
border-top: $border-gray;
|
||||
padding: 10px 1em;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
.search-channel__name {
|
||||
font-weight: bold;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-item-time {
|
||||
color: #a8adb7;
|
||||
}
|
||||
|
||||
.search-results-none {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-highlight.theme, .search-highlight {
|
||||
background-color: #FFF2BB;
|
||||
}
|
||||
222
web/sass-files/sass/partials/_settings.scss
Обычный файл
222
web/sass-files/sass/partials/_settings.scss
Обычный файл
@@ -0,0 +1,222 @@
|
||||
.user-settings {
|
||||
background: #fff;
|
||||
min-height:300px;
|
||||
}
|
||||
|
||||
.settings-modal {
|
||||
width:800px;
|
||||
max-width: 100%;
|
||||
.modal-back {
|
||||
width: 8px;
|
||||
height: 13px;
|
||||
background: url("../images/arrow-left.png");
|
||||
@include background-size(100% 100%);
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
.settings-table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
> div {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
.settings-links {
|
||||
width: 180px;
|
||||
background: #FAFAFA;
|
||||
border-right: 1px solid #DDD;
|
||||
}
|
||||
.settings-content {
|
||||
padding: 0px 20px 30px;
|
||||
.modal-header {
|
||||
display: none;
|
||||
}
|
||||
.section-min {
|
||||
padding: 1em 0;
|
||||
margin-bottom: 0;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.section-max {
|
||||
background: #f2f2f2;
|
||||
padding: 1em 0;
|
||||
margin-bottom: 0;
|
||||
@include clearfix;
|
||||
.section-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
text-align: right;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.section-describe {
|
||||
color:grey;
|
||||
}
|
||||
|
||||
.divider-dark {
|
||||
border-bottom:1px solid #aaaaaa;
|
||||
}
|
||||
|
||||
.divider-light {
|
||||
border-bottom:1px solid lightgrey;
|
||||
}
|
||||
|
||||
.setting-list {
|
||||
padding: 0;
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
.mentions-input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.setting-list-item {
|
||||
margin-top:7px;
|
||||
.has-error {
|
||||
color: #a94442;
|
||||
}
|
||||
.control-label {
|
||||
color: #555;
|
||||
}
|
||||
hr {
|
||||
border-color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.nav-pills {
|
||||
> li {
|
||||
margin: 0;
|
||||
a {
|
||||
border-radius: 0;
|
||||
color: #777;
|
||||
}
|
||||
.glyphicon {
|
||||
width: 25px;
|
||||
top: 2px;
|
||||
}
|
||||
&:hover {
|
||||
a {
|
||||
background: #E6F2FA;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
a {
|
||||
color: #111;
|
||||
background-color: #E1E1E1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: em(20px);
|
||||
}
|
||||
}
|
||||
|
||||
#user_settings {
|
||||
padding: 0 0.5em;
|
||||
border-right: 1px solid #ddd;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.channel-settings {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.setting-name {
|
||||
color:grey;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
width:158px;
|
||||
max-height:128px;
|
||||
}
|
||||
|
||||
.sel-btn {
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
.member-list-holder {
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.member-div {
|
||||
border-bottom:1px solid lightgrey;
|
||||
position:relative;
|
||||
padding:2px;
|
||||
margin: 0;
|
||||
width:100%;
|
||||
&:first-child {
|
||||
border-top:1px solid lightgrey;
|
||||
}
|
||||
.post-profile-img {
|
||||
@include border-radius(3px);
|
||||
margin-right: 8px;
|
||||
}
|
||||
.member-name {
|
||||
font-weight:500;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.member-email {
|
||||
color:darkgrey;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.member-role, .member-drop {
|
||||
position:absolute;
|
||||
right:15px;
|
||||
top:13px;
|
||||
color:#414142;
|
||||
}
|
||||
}
|
||||
|
||||
.member-invite {
|
||||
position:absolute;
|
||||
right:10px;
|
||||
top:7px;
|
||||
}
|
||||
|
||||
.member-menu {
|
||||
right:0px;
|
||||
left:auto;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
width:100%;
|
||||
overflow-x:visible;
|
||||
}
|
||||
|
||||
.member-page {
|
||||
padding-top:50px;
|
||||
}
|
||||
|
||||
.active-border {
|
||||
border:1px solid red;
|
||||
}
|
||||
|
||||
.color-btn {
|
||||
margin:4px;
|
||||
}
|
||||
95
web/sass-files/sass/partials/_sidebar--left.scss
Обычный файл
95
web/sass-files/sass/partials/_sidebar--left.scss
Обычный файл
@@ -0,0 +1,95 @@
|
||||
.sidebar--left {
|
||||
position: absolute;
|
||||
width: 220px;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
border-right: $border-gray;
|
||||
padding: 0 0 2em 0;
|
||||
background: #fafafa;
|
||||
&.sidebar--padded {
|
||||
padding-top: 44px;
|
||||
}
|
||||
.search__form {
|
||||
margin: 0;
|
||||
padding: 1em 1em 0;
|
||||
display: none;
|
||||
}
|
||||
> div {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
padding-bottom: 70px;
|
||||
width: 100%;
|
||||
}
|
||||
.badge {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
.status {
|
||||
position:relative;
|
||||
top:1px;
|
||||
margin-right: 3px;
|
||||
.online--icon {
|
||||
fill: #7DBE00;
|
||||
}
|
||||
}
|
||||
.nav-pills__container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
.nav {
|
||||
&.nav-stacked {
|
||||
> li+li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
li {
|
||||
> h4 {
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
margin: 1.1em 0 0.5em;
|
||||
font-weight: 400;
|
||||
color: #AAA;
|
||||
letter-spacing: -0.3px;
|
||||
padding: 0 10px 0 15px;
|
||||
}
|
||||
> a {
|
||||
padding: 3px 10px 3px 25px;
|
||||
line-height: 1.5;
|
||||
border-radius: 0;
|
||||
color: #999;
|
||||
&.unread-title {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: #e6f2fa;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
a, a:hover, a:focus {
|
||||
color: #111;
|
||||
background-color: #e1e1e1;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-title {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.add-channel-btn {
|
||||
float: right;
|
||||
outline: none;
|
||||
margin: -2px 0 0 0;
|
||||
color: #AAA;
|
||||
padding: 0 5px;
|
||||
text-decoration: none;
|
||||
font-size: 22px;
|
||||
line-height: 18px;
|
||||
font-weight: 700;
|
||||
&:hover {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
66
web/sass-files/sass/partials/_sidebar--menu.scss
Обычный файл
66
web/sass-files/sass/partials/_sidebar--menu.scss
Обычный файл
@@ -0,0 +1,66 @@
|
||||
.sidebar--menu {
|
||||
position: absolute;
|
||||
width: 220px;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
border-right: $border-gray;
|
||||
padding: 0 0 2em 0;
|
||||
background: #fafafa;
|
||||
display: none;
|
||||
.nav-pills__container {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.team__header {
|
||||
display: none;
|
||||
padding: 0 15px;
|
||||
@include legacy-pie-clearfix;
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar-right {
|
||||
font-size: 0.85em;
|
||||
margin: 16px -5px 0;
|
||||
.dropdown-toggle {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.dropdown-menu {
|
||||
li a {
|
||||
padding: 3 20px;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
.dropdown__icon {
|
||||
background: url("../images/dropdown-icon.png");
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
@include background-size(100% 100%);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.team__name {
|
||||
float: left;
|
||||
line-height: 50px;
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
> li {
|
||||
> a {
|
||||
font-size: 15px;
|
||||
background: none !important;
|
||||
color: #444;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
.glyphicon {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
83
web/sass-files/sass/partials/_sidebar--right.scss
Обычный файл
83
web/sass-files/sass/partials/_sidebar--right.scss
Обычный файл
@@ -0,0 +1,83 @@
|
||||
.sidebar--right {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
right: 0px;
|
||||
padding: 0 0 2em 0;
|
||||
background: #fff;
|
||||
@include single-transition(transform, 0.5s, ease);
|
||||
right: -320px;
|
||||
&.move--left {
|
||||
right: 0;
|
||||
}
|
||||
.sidebar-right__body {
|
||||
border-left: $border-gray;
|
||||
border-top: $border-gray;
|
||||
}
|
||||
.post {
|
||||
.post-header {
|
||||
.post-header-col {
|
||||
&.post-header__reply {
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-create__container {
|
||||
.post-create-footer {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
.sidebar__overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: yellow;
|
||||
@include opacity(0.1);
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.input-group {
|
||||
word-break: break-word;
|
||||
}
|
||||
.sidebar--right__close {
|
||||
margin: 11px 0 0 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url("../images/closeSidebar.png");
|
||||
@include background-size(100% 100%);
|
||||
opacity: 0.5;
|
||||
float: right;
|
||||
outline: none;
|
||||
border: none;
|
||||
@include single-transition(all, 0.2s, ease-in);
|
||||
&:hover, &:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.sidebar--right__header {
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
color: #444;
|
||||
height: 44px;
|
||||
padding: 0 1em;
|
||||
line-height: 44px;
|
||||
background: #F5F5F5;
|
||||
border-bottom: $border-gray;
|
||||
}
|
||||
.sidebar--right__subheader {
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right-container {
|
||||
height: 100%;
|
||||
}
|
||||
115
web/sass-files/sass/partials/_signup.scss
Обычный файл
115
web/sass-files/sass/partials/_signup.scss
Обычный файл
@@ -0,0 +1,115 @@
|
||||
.signup-header {
|
||||
width:100%;
|
||||
line-height: 33px;
|
||||
padding: 0 1em 0.2em;
|
||||
background: #EEE;
|
||||
}
|
||||
.signup-team__container {
|
||||
padding: 100px 0px 50px 0px;
|
||||
max-width: 340px;
|
||||
margin: 0 auto;
|
||||
font-size: 1.1em;
|
||||
position: relative;
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
line-height: 1.3;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5em;
|
||||
letter-spacing: -0.5px;
|
||||
font-size: em(30px);
|
||||
}
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
margin: 0 0 1.3em 0;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
h4 {
|
||||
font-size: em(18px);
|
||||
font-weight: 600;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
p {
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1em;
|
||||
.black, &.black {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
form {
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
.external-link {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.signup-team__name {
|
||||
font-size: 2.2em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.signup-team__subdomain {
|
||||
font-size: 1.5em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.form-control {
|
||||
height: em(38px);
|
||||
}
|
||||
.btn {
|
||||
padding: em(7px) em(15px);
|
||||
font-weight: 600;
|
||||
font-size: em(13px);
|
||||
&.btn-default {
|
||||
color: #444;
|
||||
}
|
||||
.glyphicon {
|
||||
&.glyphicon-ok, &.glyphicon-refresh {
|
||||
margin-right: 0.3em;
|
||||
left: -5px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
&.glyphicon-chevron-right {
|
||||
margin-left: 0.3em;
|
||||
font-size: 0.8em;
|
||||
right: -2px;
|
||||
top: 0px;
|
||||
}
|
||||
&.glyphicon-chevron-left {
|
||||
margin-right: 0.3em;
|
||||
font-size: 0.8em;
|
||||
left: -2px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.has-error {
|
||||
.control-label {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.reset-form {
|
||||
@include border-radius(3px);
|
||||
position: relative;
|
||||
font-size: 0.95em;
|
||||
p {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signup-team-confirm__container {
|
||||
padding: 100px 0px 100px 0px;
|
||||
}
|
||||
|
||||
.signup-team-logo {
|
||||
display: none;
|
||||
width: 210px;
|
||||
margin: 0 0 2em 0;
|
||||
}
|
||||
|
||||
.signup-team-login {
|
||||
padding-bottom: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
16
web/sass-files/sass/partials/_variables.scss
Обычный файл
16
web/sass-files/sass/partials/_variables.scss
Обычный файл
@@ -0,0 +1,16 @@
|
||||
@function em($pixels, $context: 14px) {
|
||||
@return #{$pixels/$context}em
|
||||
}
|
||||
|
||||
// Color Variables
|
||||
$primary-color: #2389D7;
|
||||
$primary-color--hover: darken(#2389D7, 5%);
|
||||
$body-bg: #e9e9e9;
|
||||
$header-bg: #f9f9f9;
|
||||
$border-gray: 1px solid #ddd;
|
||||
|
||||
// Animation
|
||||
.glyphicon-refresh-animate {
|
||||
-animation: spin .7s infinite linear;
|
||||
-webkit-animation: spin2 .7s infinite linear;
|
||||
}
|
||||
59
web/sass-files/sass/partials/_videos.scss
Обычный файл
59
web/sass-files/sass/partials/_videos.scss
Обычный файл
@@ -0,0 +1,59 @@
|
||||
.video-div {
|
||||
position:relative;
|
||||
max-width: 480px;
|
||||
.video-thumbnail {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.block {
|
||||
background-color:rgba(0,0,0,0.5);
|
||||
border-radius:10px;
|
||||
position:absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -100px;
|
||||
width: 200px;
|
||||
margin: -75px 0 0 -100px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-type {
|
||||
color:grey;
|
||||
font-size:15px;
|
||||
font-weight:200;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
.video-uploader {
|
||||
font-size:15px;
|
||||
margin-top:3px;
|
||||
margin-bottom:0px;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
.video-title {
|
||||
font-size:15px;
|
||||
margin-top:3px;
|
||||
}
|
||||
.play-button {
|
||||
width:100px;
|
||||
height:100px;
|
||||
position:absolute;
|
||||
top:26px;
|
||||
right:51px;
|
||||
border:4px solid;
|
||||
border-color:rgba(255,255,255,0.4);
|
||||
border-radius:14px;
|
||||
}
|
||||
.play-button span {
|
||||
position:absolute;
|
||||
top:10px;
|
||||
left:20px;
|
||||
width:0;
|
||||
height:0;
|
||||
border-top:36px solid transparent;
|
||||
border-bottom:36px solid transparent;
|
||||
border-left:60px solid rgba(255,255,255,0.4);
|
||||
}
|
||||
13
web/sass-files/sass/partials/_welcome.scss
Обычный файл
13
web/sass-files/sass/partials/_welcome.scss
Обычный файл
@@ -0,0 +1,13 @@
|
||||
.welcome-info {
|
||||
max-width: 550px;
|
||||
margin-top: 50px;
|
||||
margin-left: 25px;
|
||||
h1 {
|
||||
font-size: 200%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 125%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
34
web/sass-files/sass/styles.scss
Обычный файл
34
web/sass-files/sass/styles.scss
Обычный файл
@@ -0,0 +1,34 @@
|
||||
/* Welcome to Compass.
|
||||
* In this file you should write your main styles. (or centralize your imports)
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
|
||||
|
||||
// Base Css
|
||||
@import "compass/utilities";
|
||||
@import "compass/css3";
|
||||
@import "partials/variables";
|
||||
@import "partials/perfect-scrollbar";
|
||||
@import "partials/font-awesome";
|
||||
@import "partials/base";
|
||||
|
||||
// Channel Css
|
||||
@import "partials/headers";
|
||||
@import "partials/footer";
|
||||
@import "partials/content";
|
||||
@import "partials/post";
|
||||
@import "partials/post_right";
|
||||
@import "partials/navbar";
|
||||
@import "partials/search";
|
||||
@import "partials/sidebar--left";
|
||||
@import "partials/sidebar--right";
|
||||
@import "partials/sidebar--menu";
|
||||
@import "partials/signup";
|
||||
@import "partials/files";
|
||||
@import "partials/videos";
|
||||
@import "partials/settings";
|
||||
@import "partials/modal";
|
||||
@import "partials/mentions";
|
||||
@import "partials/error";
|
||||
|
||||
// Responsive Css
|
||||
@import "partials/responsive";
|
||||
Ссылка в новой задаче
Block a user