summaryrefslogtreecommitdiffstats
path: root/webapp/sass
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass')
-rw-r--r--webapp/sass/base/_typography.scss14
-rw-r--r--webapp/sass/components/_files.scss1
-rw-r--r--webapp/sass/components/_modal.scss2
-rw-r--r--webapp/sass/components/_save-button.scss4
-rw-r--r--webapp/sass/components/_scrollbar.scss2
-rw-r--r--webapp/sass/components/_search.scss4
-rw-r--r--webapp/sass/layout/_headers.scss6
-rw-r--r--webapp/sass/layout/_navigation.scss9
-rw-r--r--webapp/sass/layout/_post-right.scss232
-rw-r--r--webapp/sass/layout/_post.scss94
-rw-r--r--webapp/sass/responsive/_mobile.scss27
-rw-r--r--webapp/sass/responsive/_tablet.scss64
-rw-r--r--webapp/sass/routes/_admin-console.scss15
-rw-r--r--webapp/sass/routes/_settings.scss9
-rw-r--r--webapp/sass/routes/_signup.scss30
15 files changed, 289 insertions, 224 deletions
diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index f5795d862..f595e0ed9 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -25,3 +25,17 @@ body {
.word-break--all {
word-break: break-all;
}
+
+.fa {
+ &.fa-margin--left {
+ margin-left: 2px;
+ }
+
+ &.fa-margin--right {
+ margin-right: 2px;
+ }
+}
+
+.font-weight--normal {
+ font-weight: normal;
+}
diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss
index 854a5902b..9a65693da 100644
--- a/webapp/sass/components/_files.scss
+++ b/webapp/sass/components/_files.scss
@@ -71,6 +71,7 @@
i {
color: $white;
cursor: pointer;
+ font-size: 16px;
opacity: inherit;
position: absolute;
right: 5px;
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 6e41dff39..73651a320 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -140,7 +140,7 @@
border: 1px solid $light-gray;
color: $white;
min-height: 56px;
- padding: 15px 15px 11px;
+ padding: 14px 15px 11px;
.modal-title {
color: $bg--gray;
diff --git a/webapp/sass/components/_save-button.scss b/webapp/sass/components/_save-button.scss
index 12f793aa1..dedef3255 100644
--- a/webapp/sass/components/_save-button.scss
+++ b/webapp/sass/components/_save-button.scss
@@ -1,7 +1,7 @@
@charset 'UTF-8';
.save-button {
- .glyphicon {
+ .icon {
margin-right: 10px;
}
-} \ No newline at end of file
+}
diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss
index b868c0bf0..06ee37dc9 100644
--- a/webapp/sass/components/_scrollbar.scss
+++ b/webapp/sass/components/_scrollbar.scss
@@ -11,7 +11,7 @@
::-webkit-scrollbar-thumb {
@include border-radius($border-rad * 2);
- background: rgba(0, 0, 0, .4);
+ background: rgba(0, 0, 0, .2);
}
body {
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index a7ca8d540..d259cfc20 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -11,7 +11,7 @@
padding: 12px 8px 0 0;
}
-.glyphicon-refresh-animate {
+.icon--rotate {
@include animation(spin .7s infinite linear);
}
@@ -88,7 +88,7 @@
}
}
- .glyphicon-refresh-animate {
+ .icon--refresh {
@include opacity(0.5);
position: absolute;
right: 27px;
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index cc9f0f713..56f7cd6e8 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -97,8 +97,10 @@
.header-dropdown__icon {
color: inherit;
- font-size: 11px;
- top: 3px;
+ font-size: 12px;
+ margin-left: 1px;
+ position: relative;
+ top: 1px;
}
.channel-header__info {
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 50d144b9c..751171412 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -46,8 +46,10 @@
width: 21px;
}
- .glyphicon-search {
- top: -1px;
+ .icon-search {
+ font-size: 17px;
+ position: relative;
+ top: -2px;
}
.icon--white {
@@ -80,7 +82,8 @@
}
.header-dropdown__icon {
- top: 1px;
+ margin-left: 0;
+ top: -1px;
}
.dropdown-toggle {
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 1040a324e..f1fe0cac3 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -1,152 +1,156 @@
@charset 'UTF-8';
-.post-right__container {
- @include display-flex;
- @include flex-direction(column);
- height: 100%;
-
- .post-right-root-message {
- padding: 1em 1em 0;
- }
+.app__body {
+ .post-right__container {
+ @include display-flex;
+ @include flex-direction(column);
+ height: 100%;
+
+ .post-right-root-message {
+ padding: 1em 1em 0;
+ }
- .post-right-comments-container {
- position: relative;
+ .post-right-comments-container {
+ position: relative;
- .post {
- &:first-child {
- padding-top: 15px;
+ .post {
+ &:first-child {
+ padding-top: 15px;
+ }
}
}
- }
- .help_format_text {
- bottom: -63px;
- right: auto;
- }
+ .help_format_text {
+ bottom: -63px;
+ right: auto;
+ }
- .post {
- &.post--root {
- border-bottom: 1px solid #ddd;
- padding-bottom: 1em;
+ .post {
+ &.post--root {
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 1em;
- .post__body {
- background: transparent !important;
+ .post__body {
+ background: transparent !important;
+ }
}
- }
- .post__header {
- .col__reply {
- text-align: right;
- top: 0;
+ .post__header {
+ .col__reply {
+ background: transparent !important;
+ border: none !important;
+ text-align: right;
+ top: 0;
+ }
}
- }
- .post__body {
- width: 100%;
+ .post__body {
+ width: 100%;
+ }
}
- }
- hr {
- border: none;
- margin-bottom: 0;
- }
+ hr {
+ border: none;
+ margin-bottom: 0;
+ }
- .post-create__container {
- width: 100%;
+ .post-create__container {
+ width: 100%;
- .textarea-wrapper {
- min-height: 100px;
- }
+ .textarea-wrapper {
+ min-height: 100px;
+ }
- .btn {
- margin-bottom: 10px;
- }
+ .btn {
+ margin-bottom: 10px;
+ }
- .custom-textarea {
- min-height: 100px;
- }
+ .custom-textarea {
+ min-height: 100px;
+ }
- .msg-typing {
- @include opacity(.7);
- display: block;
- float: left;
- font-size: 13px;
- height: 20px;
- line-height: 20px;
- margin-top: 3px;
- max-width: 230px;
- min-width: 1px;
- }
+ .msg-typing {
+ @include opacity(.7);
+ display: block;
+ float: left;
+ font-size: 13px;
+ height: 20px;
+ line-height: 20px;
+ margin-top: 3px;
+ max-width: 230px;
+ min-width: 1px;
+ }
- .post-create-footer {
- padding: 5px 0 10px;
- width: 100%;
- }
+ .post-create-footer {
+ padding: 5px 0 10px;
+ width: 100%;
+ }
- .post-right-comments-upload-in-progress {
- color: #a8adb7;
- margin-right: 10px;
- padding: 6px 0;
+ .post-right-comments-upload-in-progress {
+ color: #a8adb7;
+ margin-right: 10px;
+ padding: 6px 0;
+ }
}
}
-}
-.post-right-header {
- border-bottom: $border-gray;
- color: #999;
- font-size: 1em;
- font-weight: 400;
- height: 39px;
- padding: 10px 10px 0 15px;
- text-transform: uppercase;
-}
+ .post-right-header {
+ border-bottom: $border-gray;
+ color: #999;
+ font-size: 1em;
+ font-weight: 400;
+ height: 39px;
+ padding: 10px 10px 0 15px;
+ text-transform: uppercase;
+ }
-.post-right-root-container {
- border-bottom: $border-gray;
- padding: 5px 10px;
+ .post-right-root-container {
+ border-bottom: $border-gray;
+ padding: 5px 10px;
- ul {
- margin-bottom: 2px;
- padding-left: 0;
+ ul {
+ margin-bottom: 2px;
+ padding-left: 0;
+ }
}
-}
-.post-right-channel__name {
- font-weight: 600;
- margin: 0 0 15px;
-}
+ .post-right-channel__name {
+ font-weight: 600;
+ margin: 0 0 15px;
+ }
-.post-right-root-container li {
- display: inline;
- list-style-type: none;
- padding-right: 3px;
-}
+ .post-right-root-container li {
+ display: inline;
+ list-style-type: none;
+ padding-right: 3px;
+ }
-.post-right-root-time {
- color: #a8adb7;
-}
+ .post-right-root-time {
+ color: #a8adb7;
+ }
-.post-right-create-comment-container {
- bottom: 0;
- left: 0;
- margin-bottom: 18px;
- padding: 5px;
- position: absolute;
- width: 100%;
-}
+ .post-right-create-comment-container {
+ bottom: 0;
+ left: 0;
+ margin-bottom: 18px;
+ padding: 5px;
+ position: absolute;
+ width: 100%;
+ }
-.post-right__scroll {
- @include flex(1 1 auto);
- -webkit-overflow-scrolling: touch;
- overflow: auto;
- position: relative;
+ .post-right__scroll {
+ @include flex(1 1 auto);
+ -webkit-overflow-scrolling: touch;
+ overflow: auto;
+ position: relative;
- .file-preview__container {
- margin-top: 5px;
+ .file-preview__container {
+ margin-top: 5px;
+ }
}
-}
-.post-right-comment-time {
- color: #a8adb7;
+ .post-right-comment-time {
+ color: #a8adb7;
+ }
}
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index baca9a127..ab7c851ea 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -86,8 +86,19 @@ body.ios {
b,
i,
+ span {
+ margin: 0 2px;
+ position: relative;
+ top: -1px;
+ }
+
+ b {
+ @include opacity(.9);
+ }
+
code {
- margin-right: 3px;
+ background: transparent;
+ padding: 0;
}
.textbox-preview-link {
@@ -402,6 +413,11 @@ body.ios {
right: 0;
top: 1px;
+ svg {
+ height: 18px;
+ width: 18px;
+ }
+
&:hover,
&:active {
@include opacity(.9);
@@ -452,7 +468,7 @@ body.ios {
.dropdown-menu {
&.bottom {
- bottom: 25px;
+ bottom: 19px;
top: auto;
}
}
@@ -483,6 +499,14 @@ body.ios {
background-color: beige;
}
+ &.post--hide-controls {
+ .post__header {
+ .col__reply {
+ display: none;
+ }
+ }
+ }
+
&.post--compact {
&.post--thread {
.post__header {
@@ -557,6 +581,16 @@ body.ios {
padding: 0;
width: 100%;
+ svg {
+ display: inline-block;
+ height: 13px;
+ margin: 5px 4px 0 0;
+ opacity: .5;
+ position: relative;
+ vertical-align: top;
+ width: 13px;
+ }
+
> div {
display: none;
}
@@ -596,6 +630,10 @@ body.ios {
}
}
+ .post--fail {
+ position: relative;
+ }
+
p {
font-size: .97em;
line-height: 1.6em;
@@ -634,33 +672,6 @@ body.ios {
&.same--user {
padding: 0 .5em 0 1em;
- &.post--system {
- padding: 8px .5em 0 1em;
-
- .post__header {
- height: auto;
- margin-bottom: 2px;
-
- .col__name {
- display: inline-block;
- }
-
- .col__reply {
-
- }
- }
-
- .post__time {
- @include opacity(.6);
- font-size: .9em;
- left: inherit;
- line-height: inherit;
- position: inherit;
- text-rendering: inherit;
- top: inherit;
- }
- }
-
&:hover {
.post__time {
@include opacity(.5);
@@ -682,7 +693,7 @@ body.ios {
}
.col__reply {
- top: 6px;
+ top: -1px;
}
}
}
@@ -721,7 +732,7 @@ body.ios {
.post__header {
.col__reply {
- top: 53px;
+ top: -4px;
}
}
}
@@ -775,11 +786,14 @@ body.ios {
}
.col__reply {
+ border: 1px solid transparent;
+ border-radius: 2px;
+ min-width: 70px;
+ padding: 2px 5px;
position: absolute;
right: 0;
- top: 30px;
+ top: -4px;
white-space: nowrap;
- width: 65px;
}
.permalink-popover {
@@ -841,6 +855,7 @@ body.ios {
min-width: 130px;
padding: 2px 0;
right: 0;
+ top: 20px;
li {
display: block;
@@ -864,15 +879,15 @@ body.ios {
@include opacity(.5);
color: inherit;
display: inline-block;
+ float: right;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 600;
height: 20px;
line-height: 20px;
position: relative;
- right: 15px;
+ right: -10px;
text-decoration: none;
- top: -5px;
vertical-align: top;
visibility: hidden;
width: 20px;
@@ -885,9 +900,8 @@ body.ios {
.post__body {
@include legacy-pie-clearfix;
padding: .2em .5em;
- width: calc(100% - 75px);
+ width: 100%;
word-wrap: break-word;
- position: relative;
p {
margin: 0 0 .4em;
@@ -1013,12 +1027,8 @@ body.ios {
}
.post__time {
- font-size: .9em;
- }
-
- .post__time,
- &.post--system .post__body {
@include opacity(.6);
+ font-size: .9em;
}
.post-loading-gif {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index ba72a8119..9db962ec1 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -85,8 +85,9 @@
margin-bottom: 0;
.col__reply {
- top: 0;
+ top: -3px;
width: 65px;
+ z-index: auto;
}
.col__name {
@@ -146,7 +147,7 @@
&.post--comment {
.post__header {
.col__reply {
- top: 0;
+ top: -3px;
}
}
}
@@ -158,6 +159,12 @@
}
}
+ &.current--user {
+ .post__link {
+ margin: 0 0 8px;
+ }
+ }
+
&.same--root {
&.same--user {
.post__header {
@@ -355,9 +362,10 @@
margin-top: 10px;
}
- button.close {
+ .close {
font-size: 27px;
font-weight: normal;
+ margin-top: -2px;
}
.modal-title {
@@ -453,8 +461,8 @@
}
&.minimize-settings {
- padding: 0;
display: none;
+ padding: 0;
.user-settings {
padding: 70px 20px 30px;
@@ -469,13 +477,12 @@
.nav {
> li {
> a {
- border-top: 1px solid #dddddd;
+ border-top: 1px solid transparent;
font-size: 1.1em;
line-height: 2.7;
- color: #555555;
- .glyphicon {
- margin-left: 7px;
+ .icon {
+ margin: 0 7px;
}
}
}
@@ -667,7 +674,8 @@
padding: 7px 20px 0 49px;
position: relative;
- .glyphicon-refresh-animate {
+ .icon--refresh {
+ @include opacity(.6);
color: $black;
right: 33px;
top: 15px;
@@ -793,7 +801,6 @@
@include translate3d(100%, 0, 0);
right: 0;
width: 100%;
- z-index: 5;
.sidebar__collapse,
.sidebar__search-icon {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 69443aafc..d58e99969 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -16,7 +16,6 @@
.sidebar--right {
@include single-transition(all, .5s, ease);
@include translateX(100%);
- z-index: 5;
&.move--left {
-webkit-transform: translateX(0) !important;
@@ -113,22 +112,25 @@
.post {
&.post--compact {
- &:not(.post--thread) {
- padding: 5px .5em 0 70px;
-
- .post__link {
- margin: 4px 0 7px;
- vertical-align: bottom;
- }
+ .channel__wrap & {
.post__time {
font-size: .85em;
left: -70px;
position: absolute;
text-align: right;
- top: 4px;
+ top: 6px;
width: 60px;
}
+ }
+
+ &:not(.post--thread) {
+ padding: 5px .5em 0 70px;
+
+ .post__link {
+ margin: 4px 0 7px;
+ vertical-align: bottom;
+ }
span {
p {
@@ -156,7 +158,7 @@
}
.col__reply {
- top: 2px;
+ top: -1px;
}
}
@@ -176,7 +178,7 @@
&.post--comment {
.post__header {
.col__reply {
- top: 0;
+ top: -1px;
}
}
}
@@ -191,7 +193,7 @@
}
.post__content {
- padding-right: 85px;
+ padding-right: 45px;
}
}
@@ -202,7 +204,7 @@
.post__header {
.col__reply {
- top: 4px;
+ top: -1px;
}
}
@@ -211,6 +213,18 @@
display: none;
}
}
+
+ &.post--root {
+ .post__img {
+ img {
+ display: block;
+ }
+ }
+
+ .post__time {
+ @include opacity(.6);
+ }
+ }
}
&.post--comment {
@@ -241,26 +255,16 @@
&.same--user {
.post__time {
@include opacity(0);
- font-size: 11px;
- left: -4px;
- line-height: 37px;
- position: absolute;
- text-rendering: auto;
- top: -2px;
}
- &.post--compact {
- &.post--system {
- .post__time {
- position: absolute;
- top: 3px;
- }
- }
-
+ &:not(.post--compact) {
.post__time {
- font-size: .85em;
- left: -70px;
- top: -5px;
+ font-size: 11px;
+ left: -4px;
+ line-height: 37px;
+ position: absolute;
+ text-rendering: auto;
+ top: -2px;
}
}
}
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 2a10fc486..4dba1558c 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -283,9 +283,22 @@
padding: 10px;
.category-icon {
+ font-size: 15px;
+ margin-right: 7px;
+ overflow: hidden;
right: 12px;
+ text-align: center;
top: 6px;
- width: 17px;
+ vertical-align: bottom;
+ width: 16px;
+
+ &.fa-user {
+ font-size: 14px;
+ }
+
+ &.fa-bar-chart {
+ font-size: 16px;
+ }
}
}
diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss
index 5b8c36c5c..f67d1b49b 100644
--- a/webapp/sass/routes/_settings.scss
+++ b/webapp/sass/routes/_settings.scss
@@ -342,13 +342,16 @@
a {
border-radius: 0;
- color: #777;
+ color: $gray;
padding: 8px 5px 8px 15px;
}
- .glyphicon {
+ .icon {
+ font-size: 15px;
+ margin-right: 10px;
+ text-align: center;
top: 2px;
- width: 25px;
+ width: 14px;
}
&:hover {
diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss
index d3fe0363f..4dc0dce42 100644
--- a/webapp/sass/routes/_signup.scss
+++ b/webapp/sass/routes/_signup.scss
@@ -291,21 +291,23 @@
color: #444444;
}
- .glyphicon {
- &.glyphicon-ok,
- &.glyphicon-refresh {
+ .fa {
+ position: relative;
+
+ &.fa-check,
+ &.fa-refresh {
font-size: .9em;
left: -2px;
margin-right: .5em;
}
- &.glyphicon-chevron-right {
+ &.fa-chevron-right {
font-size: .8em;
- right: -2px;
- top: 0px;
+ right: -5px;
+ top: 0;
}
- &.glyphicon-chevron-left {
+ &.fa-chevron-left {
font-size: .8em;
left: -2px;
top: 0px;
@@ -443,19 +445,21 @@
}
.signup-team-dir__arrow {
- color: #999999;
+ color: $dark-gray;
float: right;
- font-size: .9em;
- line-height: 3.5em;
+ font-size: 1.5em;
+ line-height: 25px;
+ position: relative;
+ top: .66em;
}
}
.authorize-box {
+ border: 1px solid $black;
+ height: 280px;
margin: 100px auto;
width: 500px;
- height: 280px;
- border: 1px solid black;
}
.authorize-inner {
@@ -467,6 +471,6 @@
}
.verify_panel {
- margin: 60px auto auto auto;
+ margin: 60px auto auto;
max-width: 380px;
}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-01 21:01:01 +0000