summaryrefslogtreecommitdiffstats
path: root/web/sass-files/sass
diff options
context:
space:
mode:
Diffstat (limited to 'web/sass-files/sass')
-rw-r--r--web/sass-files/sass/partials/_base.scss4
-rw-r--r--web/sass-files/sass/partials/_content.scss2
-rw-r--r--web/sass-files/sass/partials/_files.scss5
-rw-r--r--web/sass-files/sass/partials/_modal.scss6
-rw-r--r--web/sass-files/sass/partials/_popover.scss5
-rw-r--r--web/sass-files/sass/partials/_post.scss64
-rw-r--r--web/sass-files/sass/partials/_post_right.scss4
-rw-r--r--web/sass-files/sass/partials/_responsive.scss36
-rw-r--r--web/sass-files/sass/partials/_search.scss9
-rw-r--r--web/sass-files/sass/partials/_settings.scss244
-rw-r--r--web/sass-files/sass/partials/_sidebar--right.scss6
-rw-r--r--web/sass-files/sass/partials/_tutorial.scss8
12 files changed, 250 insertions, 143 deletions
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 4f9e1d5c7..04ba9c51e 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -125,10 +125,6 @@ a:focus, a:hover {
}
}
-select {
- -moz-appearance:none;
-}
-
.form-control {
@include border-radius(2px);
&:focus {
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
index da75bc61b..b54c97b41 100644
--- a/web/sass-files/sass/partials/_content.scss
+++ b/web/sass-files/sass/partials/_content.scss
@@ -1,9 +1,7 @@
@charset "UTF-8";
.inner__wrap {
- @include single-transition(all, 0.5s, ease);
&.move--left {
- margin-right: 400px;
.search-bar__container {
display: none;
}
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index 2c341f61e..62e067437 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -257,3 +257,8 @@
@include opacity(0);
}
}
+
+.view-image__loading {
+ background: black;
+ min-height: 100px;
+}
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 6f70e502f..7627f6a4c 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -229,6 +229,12 @@
height: 80%;
}
+ audio, canvas, progress, video {
+ max-width: 100%;
+ height: auto;
+ display: block;
+ }
+
.modal-close {
background: url("../images/close.png") no-repeat;
@include background-size(100% 100%);
diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss
index 1ae07fe5b..8a61758f1 100644
--- a/web/sass-files/sass/partials/_popover.scss
+++ b/web/sass-files/sass/partials/_popover.scss
@@ -85,6 +85,11 @@
background: rgba(black, 0.2);
}
+ .fa {
+ margin-right: 5px;
+ @include opacity(0.5);
+ }
+
.profile-img {
margin-top: -1px;
height: 16px;
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index ff430ba8a..937b08084 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -211,6 +211,10 @@ body.ios {
overflow-y: hidden;
height: 100%;
+ .inactive {
+ display: none;
+ }
+
.post-list-holder-by-time {
background: #fff;
overflow-y: scroll;
@@ -222,21 +226,18 @@ body.ios {
&::-webkit-scrollbar {
width: 0px !important;
}
- &.inactive {
- display: none;
- }
&.active {
display: inline;
}
}
.more-messages-text {
- margin-top: 2px;
- margin-bottom: 5px;
+ margin: 5px 0 10px;
display: block;
text-align: center;
outline: none;
border: none;
+ font-size: 13px;
}
.beginning-messages-text {
margin-top: 2px;
@@ -247,6 +248,50 @@ body.ios {
}
}
+.post-list__timestamp {
+ position: absolute;
+ top: 8px;
+ left: 50%;
+ z-index: 50;
+ width: 120px;
+ text-align: center;
+ background: $primary-color;
+ color: #fff;
+ @include border-radius(3px);
+ font-size: 12px;
+ line-height: 25px;
+ margin-left: -60px;
+ -webkit-font-smoothing: initial;
+ @include single-transition(all, 0.3s, ease);
+ @include translateY(-45px);
+ @include opacity(0);
+ display: none;
+
+ &.scrolling {
+ @include single-transition(all, 0.3s, ease);
+ @include translateY(0);
+ @include opacity(0.8);
+ }
+}
+
+.post-list__arrows {
+ background: url('../images/postArrows.png') center;
+ @include background-size(28px 28px);
+ background-repeat: no-repeat;
+ width: 40px;
+ height: 40px;
+ position: absolute;
+ bottom: 50px;
+ right: 5px;
+ z-index: 50;
+ @include opacity(0);
+ @include single-transition(all, 0.3s);
+
+ &.scrolling {
+ @include opacity(1);
+ }
+}
+
.post-create__container {
form {
width: 100%;
@@ -379,7 +424,7 @@ body.ios {
p {
- margin: 0 0 1em;
+ margin: 0;
line-height: 1.6em;
font-size: 0.97em;
white-space: pre-wrap;
@@ -631,9 +676,14 @@ body.ios {
}
ul {
+ margin-bottom: 0.6em;
padding: 5px 0 0 20px;
}
+ ul + p {
+ margin-top: 1em;
+ }
+
ul, ol {
p {
margin-bottom: 0;
@@ -683,7 +733,7 @@ body.ios {
}
.post__time {
- font-size: 13px;
+ font-size: 0.9em;
}
.post__time, &.post--system .post__body {
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index fa52e2972..d820447f5 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -17,7 +17,8 @@
.post {
&.post--root {
- padding-bottom: 0;
+ padding-bottom: 1.2em;
+ border-bottom: 1px solid #ddd;
}
.post__header {
@@ -36,6 +37,7 @@
hr {
margin-bottom: 0;
+ border: none;
}
.post-create__container {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 2aa130fa9..8491869a6 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -56,6 +56,7 @@
.sidebar--right {
z-index: 5;
@include translateX(100%);
+ @include single-transition(all, 0.5s, ease);
&.move--left {
@include translateX(0);
@@ -241,6 +242,9 @@
}
}
}
+ .post-list__timestamp {
+ display: block;
+ }
.signup-team__container {
padding: 30px 0;
margin-bottom: 30px;
@@ -295,15 +299,6 @@
.settings-content {
&.minimize-settings {
display: block;
- .section-edit {
- position: absolute;
- top: 7px;
- right: 0;
- width: 50px;
- .fa {
- display: inline-block;
- }
- }
}
.section-min:hover {
background: none;
@@ -336,12 +331,24 @@
}
}
.settings-table {
- .nav, .nav.absolute {
+ .nav {
+ &.position--top {
+ top: auto;
+ }
position: relative;
top: auto;
width: 100%;
}
.settings-content {
+ .section-edit {
+ position: absolute;
+ top: 14px;
+ right: 0;
+ padding-right: 0;
+ .fa {
+ display: inline-block;
+ }
+ }
&.minimize-settings {
padding: 0;
display: none;
@@ -349,6 +356,9 @@
padding: 70px 20px 30px;
}
}
+ .section-min:hover {
+ background: none !important;
+ }
}
.settings-links {
background: #fff;
@@ -625,6 +635,7 @@
height: calc(100% - 44px);
}
.inner__wrap {
+ @include single-transition(all, 0.5s, ease);
&.move--right {
@include translate3d(290px, 0, 0);
&:before {
@@ -728,6 +739,9 @@
}
}
@media screen and (max-width: 480px) {
+ .tip-overlay.tip-overlay--sidebar {
+ min-height: 350px;
+ }
.modal {
.modal-body {
max-height: 70%;
@@ -795,4 +809,4 @@
font-size: 2em;
}
}
-} \ No newline at end of file
+}
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index 0d9d7b50d..cb125bff0 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -18,6 +18,12 @@
z-index: 5;
cursor: pointer;
}
+
+.search-item-snippet {
+ @include clearfix;
+ text-overflow: ellipsis;
+}
+
.sidebar__collapse {
cursor: pointer;
z-index: 5;
@@ -134,7 +140,8 @@
}
.search-item-time {
- color: #a8adb7;
+ @include opacity(0.7);
+ font-size: 0.9em;
}
.search-results-none {
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 473ffb28d..bd47ca960 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -82,9 +82,8 @@
.nav {
position: fixed;
width: 179px;
- &.absolute {
- position: absolute;
- top: 0;
+ &.position--top {
+ top: 57px;
}
}
.security-links {
@@ -141,144 +140,167 @@
width: 29px;
}
}
- .premade-themes {
- margin-bottom: 10px;
- .theme-label {
- font-weight: 400;
- margin-top: 5px;
- }
- img {
- border: 3px solid transparent;
+ .group--code {
+ select {
+ padding-right: 25px;
}
- .active {
- img {
- border-color: $primary-color;
- }
+ &:before {
+ position: absolute;
+ top: 11px;
+ right: 50px;
+ z-index: 5;
+ content: "\f0d7";
+ display: inline-block;
+ font: normal normal normal 14px/1 FontAwesome;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
+ select {
+ -moz-appearance:none;
+ -webkit-appearance:none;
+ appearance:none;
+ }
+ }
+ .premade-themes {
+ margin-bottom: 10px;
+ .theme-label {
+ font-weight: 400;
+ margin-top: 5px;
}
- .custom-label {
- font-weight: normal;
- font-size: 13px;
- width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-bottom: 0;
- }
- .input-group-addon {
- background: transparent;
+ img {
+ border: 3px solid transparent;
}
- .radio {
- label {
- font-weight: 600;
+ .active {
+ img {
+ border-color: $primary-color;
}
}
}
-
- .section-title {
- margin-bottom: 5px;
- font-weight: 600;
+ .custom-label {
+ font-weight: normal;
+ font-size: 13px;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 0;
}
-
- .section-edit {
- text-align: right;
- margin-bottom: 5px;
- .fa {
- margin-right: 5px;
- font-size: 12px;
- @include opacity(0.5);
- display: none;
+ .input-group-addon {
+ background: transparent;
+ }
+ .radio {
+ label {
+ font-weight: 600;
}
}
+ }
- .section-describe {
- @include opacity(0.7);
- white-space:pre;
- }
+ .section-title {
+ margin-bottom: 5px;
+ font-weight: 600;
+ }
- .divider-dark {
- border-bottom:1px solid #aaaaaa;
+ .section-edit {
+ text-align: right;
+ margin-bottom: 5px;
+ .fa {
+ margin-right: 5px;
+ font-size: 12px;
+ @include opacity(0.5);
+ display: none;
}
+ }
- .divider-light {
- border-bottom:1px solid lightgrey;
- }
+ .section-describe {
+ @include opacity(0.7);
+ white-space:pre;
+ }
- .setting-list {
- padding: 0;
- list-style-type:none;
- }
+ .divider-dark {
+ border-bottom:1px solid #aaaaaa;
+ }
- .setting-list__hint {
- margin-top: 20px;
- }
+ .divider-light {
+ border-bottom:1px solid lightgrey;
+ }
- .mentions-input {
- margin-top: 10px;
- }
+ .setting-list {
+ padding: 0;
+ list-style-type:none;
+ }
- .setting-list-item {
- margin-top:7px;
- }
- .has-error {
- color: #a94442;
- }
+ .setting-list__hint {
+ margin-top: 20px;
+ }
- .file-status {
- font-size: 13px;
- margin-top: 8px;
- color: #555;
- }
+ .mentions-input {
+ margin-top: 10px;
+ }
- .confirm-import {
- padding: 4px 10px;
- margin: 10px 0;
- }
+ .setting-list-item {
+ margin-top:7px;
+ }
+ .has-error {
+ color: #a94442;
+ }
+ .file-status {
+ font-size: 13px;
+ margin-top: 8px;
+ color: #555;
}
+
+ .confirm-import {
+ padding: 4px 10px;
+ margin: 10px 0;
+ }
+
}
- .nav-pills {
- > li {
- margin: 0;
+}
+.nav-pills {
+ > li {
+ margin: 0;
+ a {
+ border-radius: 0;
+ color: #777;
+ }
+ .glyphicon {
+ width: 25px;
+ top: 2px;
+ }
+ &:hover {
a {
- border-radius: 0;
- color: #777;
+ background: #E6F2FA;
}
- .glyphicon {
- width: 25px;
- top: 2px;
- }
- &:hover {
- a {
- background: #E6F2FA;
+ }
+ &.active {
+ a {
+ color: #111;
+ background-color: #E1E1E1;
+ &:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 5px;
+ height: 100%;
+ background: #000;
}
}
- &.active {
- a {
- color: #111;
- background-color: #E1E1E1;
- &:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 5px;
- height: 100%;
- background: #000;
- }
- }
- a, a:hover, a:focus {
- padding-right: 10px;
- background-color: rgba(black, 0.1);
- border-radius: 0;
- font-weight: 400;
- position: relative;
- }
+ a, a:hover, a:focus {
+ padding-right: 10px;
+ background-color: rgba(black, 0.1);
+ border-radius: 0;
+ font-weight: 400;
+ position: relative;
}
}
}
- h3 {
- font-size: em(20px);
- }
+}
+h3 {
+ font-size: em(20px);
+}
}
.channel-settings {
diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss
index e39f7730b..f40a50b03 100644
--- a/web/sass-files/sass/partials/_sidebar--right.scss
+++ b/web/sass-files/sass/partials/_sidebar--right.scss
@@ -7,13 +7,7 @@
right: 0px;
padding: 0;
background: #fff;
- @include single-transition(transform, 0.5s, ease);
@include translateX(400px);
-
- &.move--left {
- @include translateX(0);
- }
-
.post-body {
img {
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss
index 9e5e1ad7a..20a15441e 100644
--- a/web/sass-files/sass/partials/_tutorial.scss
+++ b/web/sass-files/sass/partials/_tutorial.scss
@@ -32,6 +32,14 @@
&.tip-overlay--sidebar {
max-width: 75%;
margin: 50px 0 0 10px;
+ min-height: 310px;
+ .tutorial__footer {
+ position: absolute;
+ width: 100%;
+ bottom: 20px;
+ left: 0;
+ padding: 0 20px;
+ }
.arrow {
top: 80px;
left: -10px;