summaryrefslogtreecommitdiffstats
path: root/web/sass-files/sass/layout/_post.scss
diff options
context:
space:
mode:
Diffstat (limited to 'web/sass-files/sass/layout/_post.scss')
-rw-r--r--web/sass-files/sass/layout/_post.scss997
1 files changed, 997 insertions, 0 deletions
diff --git a/web/sass-files/sass/layout/_post.scss b/web/sass-files/sass/layout/_post.scss
new file mode 100644
index 000000000..22c905aa6
--- /dev/null
+++ b/web/sass-files/sass/layout/_post.scss
@@ -0,0 +1,997 @@
+@charset 'UTF-8';
+
+.custom-textarea {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ background: transparent;
+ border: 1px solid #ccc;
+ position: absolute;
+ top: 0px;
+ height: auto;
+ resize: none;
+ line-height: 20px;
+ min-height: 36px;
+ overflow-x: hidden;
+ &:focus {
+ border-color: #ccc;
+ box-shadow: none;
+ }
+}
+
+.bad-connection {
+ background: #ffffac !important;
+ color: #d04444 !important;
+}
+
+.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;
+ .textbox-preview-area {
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ left: 0;
+ box-shadow: none;
+ white-space: normal;
+ }
+ .help__text {
+ right: 0;
+ position: absolute;
+ z-index: 3;
+ bottom: -23px;
+ font-size: 13px;
+ cursor: pointer;
+ }
+ .textbox-preview-link {
+ margin-right: 8px;
+ }
+ min-height: 36px;
+}
+
+.help_format_text {
+ display: none !important;
+ position: absolute;
+ bottom: -23px;
+ left: 0px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: .85em;
+ @include opacity(0);
+ @include single-transition(all .2s ease);
+
+ b,
+ i,
+ code {
+ margin-right: 3px;
+ }
+ .textbox-preview-link {
+ font-size: 13px;
+ cursor: pointer;
+ margin-left: 15px;
+ }
+}
+
+.date-separator,
+.new-separator {
+ text-align: center;
+ height: 2em;
+ margin: 0;
+ position: relative;
+ z-index: 0;
+ &:before,
+ &:after {
+ content: '';
+ height: 1em;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ display: none;
+ }
+ &:before {
+ bottom: 0;
+ }
+ &:after {
+ top: 0;
+ }
+ &.hovered--after {
+ &:before {
+ background: #f5f5f5;
+ display: block;
+ }
+ }
+ &.hovered--before {
+ &:after {
+ background: #f5f5f5;
+ display: block;
+ }
+ }
+ .separator__hr {
+ border-color: #ccc;
+ margin: 0;
+ position: relative;
+ z-index: 5;
+ top: 1em;
+ }
+ .separator__text {
+ line-height: 2em;
+ color: #555;
+ background: #fff;
+ display: inline-block;
+ padding: 0 1em;
+ font-weight: 700;
+ @include border-radius(50px);
+ position: relative;
+ z-index: 5;
+ font-size: 13px;
+ }
+}
+.new-separator {
+ .separator__hr {
+ border-color: #ffaf53;
+ }
+ .separator__text {
+ color: #f80;
+ font-weight: normal;
+ }
+}
+
+.file-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ color: #fff;
+ font-size: em(20px);
+ font-weight: 600;
+ z-index: 6;
+
+ .overlay__indent {
+ background-color: rgba(0, 0, 0, .6);
+ position: relative;
+ height: 100%;
+ @include clearfix;
+ }
+
+ &.center-file-overlay {
+ .overlay__indent {
+ margin-left: 220px;
+ }
+ }
+
+ &.right-file-overlay {
+ font-size: em(18px);
+ .overlay__circle {
+ width: 300px;
+ height: 300px;
+ margin: -150px 0 0 -150px;
+ }
+ .overlay__files {
+ margin: 60px auto 15px;
+ width: 150px;
+ }
+ }
+
+ .overlay__circle {
+ background: #111;
+ background: rgba(black, .7);
+ width: 370px;
+ height: 370px;
+ margin: -185px 0 0 -185px;
+ @include border-radius(500px);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ pointer-events: none;
+ }
+
+ .overlay__files {
+ display: block;
+ margin: 75px auto 20px;
+ }
+
+ .overlay__logo {
+ position: absolute;
+ left: 50%;
+ bottom: 30px;
+ margin-left: -50px;
+ @include opacity(.3);
+ }
+
+ .fa {
+ display: inline-block;
+ font-size: 1.1em;
+ margin-right: 8px;
+ }
+}
+
+#post-list {
+ @include flex(1 1 auto);
+ position: relative;
+ overflow-y: hidden;
+ height: 100%;
+
+ .inactive {
+ display: none;
+ }
+
+ .post-list-holder-by-time {
+ background: #fff;
+ overflow-y: scroll;
+ width: 100%;
+ padding: 1em 0 0;
+ position: absolute;
+ height: 100%;
+ -webkit-overflow-scrolling: touch;
+ &.active {
+ display: inline;
+ }
+ }
+
+ .more-messages-text {
+ margin: 5px 0 10px;
+ display: block;
+ text-align: center;
+ outline: none;
+ border: none;
+ font-size: 13px;
+ }
+ .beginning-messages-text {
+ margin-top: 2px;
+ margin-bottom: 5px;
+ display: block;
+ text-align: center;
+ color: grey;
+ }
+}
+
+.post-list__timestamp {
+ position: absolute;
+ top: 8px;
+ left: 50%;
+ z-index: 50;
+ width: 120px;
+ text-align: center;
+ background: $color--primary;
+ color: #fff;
+ @include border-radius(3px);
+ font-size: 12px;
+ line-height: 25px;
+ margin-left: -60px;
+ -webkit-font-smoothing: initial;
+ @include single-transition(all, .6s, ease);
+ @include translateY(-45px);
+ @include opacity(0);
+ display: none;
+
+ &.scrolling {
+ @include translateY(0);
+ @include opacity(.8);
+ }
+}
+
+.post-list__arrows {
+ background-repeat: no-repeat;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ fill: #444;
+ position: absolute;
+ bottom: 0;
+ left: 9px;
+ z-index: 50;
+ @include opacity(0);
+ @include single-transition(all, .6s);
+ display: none;
+
+ svg {
+ color: inherit;
+ width: 28px;
+ height: 28px;
+ }
+
+ &.scrolling {
+ display: block;
+ @include opacity(1);
+ }
+}
+
+.post-create__container {
+ form {
+ width: 100%;
+ padding: .5em 14px 0;
+ margin: 0 auto;
+ max-width: 1028px;
+ }
+ .post-create-body {
+ position: relative;
+ padding: 0 0 2px;
+ .post-body__cell {
+ vertical-align: top;
+ position: relative;
+ &.scroll {
+ .btn-file {
+ right: 15px;
+ }
+ .custom-textarea {
+ padding-right: 43px;
+ }
+ }
+ }
+ .send-button {
+ display: none;
+ cursor: pointer;
+ padding-right: 4px;
+ width: 45px;
+ height: 37px;
+ font-size: 18px;
+ line-height: 37px;
+ vertical-align: bottom;
+ text-align: center;
+ @include single-transition(all, .15s);
+ &:active {
+ @include opacity(.75);
+ }
+ }
+ .custom-textarea {
+ padding-top: 8px;
+ padding-right: 28px;
+ max-height: 162px !important;
+ line-height: 1.5;
+ }
+ .textarea-div {
+ padding-top: 8px;
+ padding-right: 30px;
+ max-height: 163px !important;
+ overflow: auto;
+ line-height: 1.5;
+ }
+ .btn-file {
+ right: 0;
+ position: absolute;
+ top: 1px;
+ color: #444;
+ @include opacity(.5);
+ @include single-transition(all, .15s);
+ font-size: 16px;
+ padding: 7px 9px 6px;
+ &:hover,
+ &:active {
+ @include opacity(.9);
+ box-shadow: none;
+ }
+ }
+ textarea {
+ box-shadow: none;
+ }
+ }
+ .post-create-footer {
+ @include clearfix;
+ padding: 3px 0 0 0;
+ font-size: 13px;
+ .control-label {
+ font-weight: normal;
+ margin-bottom: 0;
+ top: -5px;
+ position: relative;
+ }
+ }
+ .msg-typing {
+ display: block;
+ @include opacity(.7);
+ white-space: nowrap;
+ margin-bottom: 5px;
+ overflow: hidden;
+ font-size: .95em;
+ text-overflow: ellipsis;
+ height: 20px;
+ }
+}
+
+.post-list__table {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ min-height: 100%;
+ height: 100%;
+ .post-list__content {
+ display: table-cell;
+ vertical-align: bottom;
+ .dropdown-menu {
+ &.bottom {
+ top: auto;
+ bottom: 25px;
+ }
+ }
+ }
+}
+
+.post {
+ word-wrap: break-word;
+ padding: 8px .5em 0 1em;
+ position: relative;
+ max-width: 100%;
+ @include legacy-pie-clearfix;
+
+ &:hover {
+ .dropdown,
+ .comment-icon__container,
+ .post__reply,
+ .post__remove {
+ visibility: visible;
+ }
+ .permalink-icon {
+ visibility: visible;
+ }
+ }
+
+ &.post--highlight {
+ background-color: beige;
+ }
+
+ p {
+ margin: 0;
+ line-height: 1.6em;
+ font-size: .97em;
+ white-space: pre-wrap;
+
+ &:last-child {
+ margin-bottom: .5em;
+ }
+ }
+
+ span {
+ p:last-child {
+ margin-bottom: .5em;
+ }
+ }
+
+ &.post--root {
+ .comment-icon__container {
+ visibility: visible;
+ }
+ }
+
+ &.same--root {
+ &.same--user {
+ padding: 0 .5em 0 1em;
+
+ &:hover {
+ .post__time {
+ @include opacity(.5);
+ }
+ }
+
+ .post__header {
+ margin: 0;
+ height: 0;
+
+ .col__name {
+ display: none;
+ }
+
+ .col__reply {
+ top: 6px;
+ }
+ }
+
+ .post__time {
+ top: 24px;
+ }
+
+ .post__time {
+ font: normal normal normal FontAwesome;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ position: absolute;
+ top: -2px;
+ left: -7px;
+ font-size: 11px;
+ line-height: 37px;
+ @include opacity(0);
+ }
+ }
+
+ &.post--comment {
+ .post__link {
+ display: none;
+ }
+
+ .post__img {
+ img {
+ display: none;
+ }
+ }
+ }
+
+ &.post--comment {
+ .post__body {
+ border-left: 4px solid #ddd;
+ }
+ }
+ }
+
+ &.other--root {
+ .comment-icon__container {
+ &.icon--show {
+ visibility: visible;
+ }
+ }
+
+ &.post--comment {
+ .popover {
+ margin-top: 84px;
+
+ > .arrow {
+ top: 21px !important;
+ }
+ }
+
+ .post__header {
+ .col__reply {
+ top: 53px;
+ }
+ }
+ }
+ }
+
+ .post__content {
+ margin: 0 auto;
+ position: relative;
+ max-width: 1000px;
+ display: table;
+ width: 100%;
+ table-layout: fixed;
+
+ > div {
+ display: table-cell;
+ vertical-align: top;
+ }
+ }
+
+ .post__header {
+ padding: 0;
+ list-style: none;
+ margin-bottom: 2px;
+
+ li {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ .col__name {
+ margin-right: 7px;
+ font-weight: 600;
+
+ .user-popover {
+ max-width: 200px;
+ @include clearfix;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ .col__reply {
+ position: absolute;
+ right: 0;
+ top: 30px;
+ width: 65px;
+ white-space: nowrap;
+ }
+
+ .permalink-popover {
+ min-width: 0;
+
+ .popover-content {
+ padding: 5px;
+ }
+
+ .form-control,
+ .btn {
+ font-size: 13px;
+ height: 30px;
+ padding: 0 8px;
+ line-height: 30px;
+ }
+ }
+ }
+
+ .post__img {
+ width: 46px;
+ img {
+ width: 36px;
+ height: 36px;
+ vertical-align: inherit;
+ @include border-radius(50px);
+ }
+ }
+
+ .post__embed-container {
+ display: block;
+ max-height: 1000px;
+ transition: max-height .5s ease;
+ overflow: hidden;
+ &[hidden] {
+ max-height: 0;
+ }
+ }
+
+ .dropdown {
+ display: inline-block;
+ visibility: hidden;
+ margin-right: 5px;
+ top: -1px;
+
+ .dropdown-menu {
+ right: 0;
+ left: auto;
+ min-width: 130px;
+ padding: 2px 0;
+
+ li {
+ display: block;
+ }
+
+ a {
+ padding: 5px 15px;
+ }
+ }
+ }
+
+ .post__dropdown {
+ &:after {
+ content: '[...]';
+ top: -1px;
+ position: relative;
+ }
+ }
+
+ .post__remove {
+ font-family: 'Open Sans', sans-serif;
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ right: 15px;
+ top: -5px;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ font-weight: 600;
+ visibility: hidden;
+ color: inherit;
+ @include opacity(.5);
+ text-decoration: none;
+
+ &:hover {
+ @include opacity(.8);
+ }
+ }
+
+ .post__body {
+ word-wrap: break-word;
+ padding: .2em .5em;
+ @include legacy-pie-clearfix;
+ width: calc(100% - 75px);
+
+ p {
+ margin: 0 0 .4em;
+ }
+
+ p + p {
+ margin-top: 1.4em;
+ }
+
+ li {
+ > p {
+ margin-top: 10px;
+ }
+ }
+
+ img {
+ max-height: 400px;
+ }
+
+ ul,
+ ol {
+ margin-bottom: .4em;
+
+ p {
+ margin-bottom: 0;
+ }
+ li ul,
+ li ol {
+ padding: 0 0 0 20px;
+ }
+
+ li.list-item--task-list ul,
+ li.list-item--task-list ol {
+ margin-left: 20px;
+ }
+
+ li.list-item--task-list ul {
+ padding-left: 0;
+ }
+
+ li:not(.list-item--task-list) li.list-item--task-list,
+ li:not(.list-item--task-list) li.list-item--task-list ~ li {
+ margin-left: -20px;
+ }
+
+ li input[type='checkbox']:disabled {
+ vertical-align: top;
+ cursor: default;
+ }
+ }
+
+ ul li.list-item--task-list,
+ ul li.list-item--task-list ~ li {
+ list-style-type: none;
+ }
+
+ ul li.list-item--task-list ~ li:not(.list-item--task-list) {
+ text-indent: 3px;
+
+ &:before {
+ content: '⦁';
+ margin-right: 8px;
+ }
+ }
+ }
+
+ .post__link {
+ margin: 2px 0 5px;
+ font-size: 13px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .post__embed-visibility {
+ cursor: pointer;
+ font: normal normal normal 14px/1 FontAwesome;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ margin: 5px 0 10px;
+ display: inline-block;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:before {
+ content: '\f065';
+ font-size: 14px;
+ }
+
+ &[data-expanded='true']:before {
+ content: '\f066';
+ }
+ }
+
+ .post__time {
+ font-size: .9em;
+ }
+
+ .post__time,
+ &.post--system .post__body {
+ @include opacity(.6);
+ }
+
+ .post-loading-gif {
+ height: 10px;
+ width: 10px;
+ margin-top: 6px;
+ }
+
+ .post-fail {
+ color: #d58a8a;
+ }
+
+ .post-waiting {
+ color: #999;
+ }
+
+ .permalink-icon {
+ display: inline-block;
+ color: $color--primary;
+ visibility: hidden;
+ }
+
+ .post__reply {
+ display: inline-block;
+ margin-right: 6px;
+ visibility: hidden;
+ svg {
+ width: 18px;
+ top: 3px;
+ fill: inherit;
+ position: relative;
+ }
+ }
+
+ .comment-icon__container {
+ fill: $color--primary;
+ display: inline-block;
+ visibility: hidden;
+
+ &:focus {
+ outline: none;
+ }
+
+ &.icon--visible {
+ visibility: visible;
+ }
+
+ svg {
+ height: 17px;
+ width: 17px;
+ }
+
+ .comment-icon {
+ display: inline-block;
+ top: 2px;
+ position: relative;
+ margin-right: 3px;
+ fill: inherit;
+ }
+
+ path {
+ fill: inherit;
+ }
+ }
+
+ .web-embed-data {
+ padding: 2px 0 0 10px;
+ background: #f9f9f9;
+ background: rgba(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: 600;
+ 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;
+ }
+ }
+}
+
+.bot-indicator {
+ font-family: inherit;
+ font-size: 11px;
+ padding: 2px 4px;
+ border-radius: 2px;
+ font-weight: 600;
+ margin: 0 0 0 -4px;
+}
+
+.attachment {
+ .attachment__content {
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 4px;
+ padding: 2px 5px;
+ margin: 0 0 5px 0;
+ }
+ .attachment__thumb-pretext {
+ border: 0 none;
+ background: transparent;
+ }
+ .attachment__container {
+ border-left-width: 4px;
+ border-left-style: solid;
+ padding: 2px 0 2px 10px;
+ &.attachment__container--good {
+ border-left-color: #00c100;
+ }
+ &.attachment__container--warning {
+ border-left-color: #dede01;
+ }
+ &.attachment__container--danger {
+ border-left-color: #e40303;
+ }
+ }
+ .attachment__body {
+ float: left;
+ width: 80%;
+ padding-right: 5px;
+ overflow-x: auto;
+ overflow-y: hidden;
+ &.attachment__body--no_thumb {
+ width: 100%;
+ }
+ }
+ .attachment__text p:last-of-type {
+ display: inline-block;
+ }
+ .attachment__thumb-pretext {
+ margin-left: 5px;
+ }
+ .attachment__title {
+ margin: 5px 0;
+ padding: 0;
+ line-height: 16px;
+ height: 22px;
+ font-size: 16px;
+ a {
+ font-size: 16px;
+ }
+ }
+ .attachment__author-icon {
+ @include border-radius(50px);
+ margin-right: 5px;
+ width: 14px;
+ height: 14px;
+ }
+ .attachment__image {
+ max-width: 100%;
+ margin-bottom: 1em;
+ }
+ .attachment__thumb-container {
+ width: 20%;
+ float: right;
+ img {
+ max-height: 75px;
+ max-width: 100%;
+ }
+ }
+ .attachment___fields {
+ width: 100%;
+ .attachment___field-caption {
+ font-weight: 700;
+ }
+ .attachment___field p {
+ margin: 0;
+ }
+ }
+}
+
+.permalink-text {
+ overflow: hidden;
+}
+
+.permalink-popover {
+ min-width: 320px;
+ margin-left: 50px !important;
+}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-02 07:06:20 +0000