257 lines
5.5 KiB
SCSS
257 lines
5.5 KiB
SCSS
@import "variables";
|
|
@import "commons";
|
|
@import "panel";
|
|
@import "buttons";
|
|
@import "mixins";
|
|
$btn-send-status-width: 60px;
|
|
$counter-width: 90px;
|
|
|
|
// @import "~@ctrl/ngx-emoji-mart/picker";
|
|
|
|
.form-control {
|
|
margin: 0 0 5px 5px;
|
|
width: calc(100% - 10px);
|
|
background-color: $column-color;
|
|
background-color: $status-editor-background;
|
|
border-color: $status-secondary-color;
|
|
color: $status-editor-color;
|
|
font-size: $default-font-size;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&--privacy {
|
|
display: inline-block;
|
|
width: calc(100% - 15px - #{$btn-send-status-width} - #{$counter-width});
|
|
}
|
|
}
|
|
|
|
.status-editor {
|
|
position: relative;
|
|
font-size: $default-font-size;
|
|
margin-bottom: 5px;
|
|
|
|
&__title {
|
|
background-color: $status-editor-title-background;
|
|
color: $status-editor-color;
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
border-width: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&__emoji {
|
|
position: absolute;
|
|
top: 37px;
|
|
right: 10px;
|
|
|
|
&--image {
|
|
transition: all .2s;
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
-webkit-filter: grayscale(100%);
|
|
-moz-filter: grayscale(100%);
|
|
-ms-filter: grayscale(100%);
|
|
-o-filter: grayscale(100%);
|
|
filter: gray;
|
|
opacity: .7;
|
|
|
|
&:hover {
|
|
filter: none;
|
|
-webkit-filter: grayscale(0%);
|
|
-moz-filter: grayscale(0%);
|
|
-ms-filter: grayscale(0%);
|
|
-o-filter: grayscale(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__lang {
|
|
position: absolute;
|
|
top: 64px;
|
|
right: 12px;
|
|
|
|
font-weight: bolder;
|
|
font-size: 12px;
|
|
color: #a5a5a5;
|
|
text-decoration: none;
|
|
|
|
display: block;
|
|
width: 20px;
|
|
height: 19px;
|
|
border-radius: 2px;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
|
|
padding: 1px 0 0 2px;
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color:black;
|
|
background-color: #e6e6e6;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
border-width: 0;
|
|
background-color: $status-editor-background;
|
|
color: $status-editor-color;
|
|
margin-bottom: 0;
|
|
|
|
resize: none;
|
|
border: none;
|
|
overflow: auto;
|
|
outline: none;
|
|
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
|
|
min-height: 110px;
|
|
height: 110px;
|
|
|
|
padding-bottom: 10px;
|
|
padding-right: 30px;
|
|
//border-bottom: 1px solid black;
|
|
|
|
&::-webkit-resizer {
|
|
width: 0px;
|
|
height: 0px;
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0px;
|
|
}
|
|
}
|
|
|
|
&__mention-error {
|
|
background-color: $status-editor-background;
|
|
color: rgb(255, 34, 34);
|
|
padding: 5px 10px;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
&__autosuggest {
|
|
display: block;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
&__footer {
|
|
height: 34px;
|
|
margin: 0 5px;
|
|
border-width: 0;
|
|
|
|
background-color: $status-editor-footer-background;
|
|
|
|
&--link {
|
|
color: $status-editor-footer-link-color;
|
|
display: inline-block;
|
|
padding: 5px;
|
|
margin: 2px 0 0 5px;
|
|
}
|
|
|
|
&--add-poll {
|
|
font-size: 16px;
|
|
margin: 0 0 0 5px;
|
|
position: relative;
|
|
top: 0px;
|
|
}
|
|
|
|
&--send-button {
|
|
@include clearButton;
|
|
transition: all .2s;
|
|
float: right;
|
|
padding: 0 15px 0 15px;
|
|
height: 34px;
|
|
background-color: $status-editor-footer-background;
|
|
|
|
&:hover {
|
|
background-color: lighten($status-editor-footer-background, 20%);
|
|
background-color: darken($status-editor-footer-background, 20%);
|
|
}
|
|
|
|
outline: inherit;
|
|
&:focus {
|
|
background-color: darken($status-editor-footer-background, 20%);
|
|
}
|
|
|
|
& span {
|
|
position: relative;
|
|
top: 1px;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&__counter {
|
|
float: right;
|
|
height: 34px;
|
|
padding: 6px 7px 0 7px;
|
|
vertical-align: center;
|
|
|
|
&--count {
|
|
display: block;
|
|
margin-right: 40px
|
|
}
|
|
|
|
&--posts {
|
|
display: block;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-custom-primary {
|
|
display: inline-block;
|
|
width: $btn-send-status-width;
|
|
position: relative;
|
|
top: -1px;
|
|
left: 5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.context-menu-icon {
|
|
position: relative;
|
|
left: -3px;
|
|
font-size: 12px;
|
|
color: #1f1f1f;
|
|
}
|
|
|
|
.emojipicker {
|
|
font-size: $default-font-size !important;
|
|
}
|
|
|
|
.scheduler {
|
|
display: block;
|
|
margin: 0 5px;
|
|
border-bottom: 1px solid whitesmoke;
|
|
}
|
|
|
|
.language-warning {
|
|
padding: 5px 10px;
|
|
color: orange;
|
|
|
|
&__link {
|
|
text-decoration: underline;
|
|
color: #f0d124;
|
|
|
|
&:hover {
|
|
color: #d18800;
|
|
}
|
|
}
|
|
}
|
|
|
|
@import '~@angular/cdk/overlay-prebuilt.css';
|
|
// ::ng-deep .cdk-overlay-backdrop {
|
|
// // width: 100%;
|
|
// // height: 100%;
|
|
// border: 3px solid greenyellow;
|
|
// background-color: black;
|
|
// min-height: 20px;
|
|
// } |