summaryrefslogtreecommitdiffstats
path: root/webapp/sass/layout
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass/layout')
-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
4 files changed, 180 insertions, 161 deletions
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 {
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-29 15:59:32 +0000