442 lines
8.7 KiB
SCSS
442 lines
8.7 KiB
SCSS
.compose-form {
|
|
&__warning {
|
|
@apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
|
|
|
|
strong {
|
|
@apply font-medium;
|
|
|
|
@each $lang in $cjk-langs {
|
|
&:lang(#{$lang}) {
|
|
@apply font-bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--brand-color--hicontrast);
|
|
font-weight: 500;
|
|
text-decoration: underline;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__modifiers {
|
|
color: var(--primary-text-color);
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
background: var(--background-color);
|
|
.compose-form__upload-wrapper { overflow: hidden; }
|
|
|
|
.compose-form__uploads-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
&.contains-media {
|
|
padding: 5px;
|
|
border-top: 1px solid var(--foreground-color);
|
|
}
|
|
}
|
|
|
|
.compose-form__upload {
|
|
flex: 1 1 0;
|
|
min-width: 40%;
|
|
margin: 5px;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
|
|
&__actions {
|
|
@apply bg-gradient-to-b from-gray-900/80 via-gray-900/50 to-transparent flex items-start justify-between opacity-0 transition-opacity duration-100 ease-linear;
|
|
|
|
&.active {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
.icon-button {
|
|
@apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center;
|
|
}
|
|
}
|
|
|
|
&-description {
|
|
@apply bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 absolute z-[2px] bottom-0 left-0 right-0 p-2.5 opacity-0 transition-opacity duration-100 ease-linear;
|
|
|
|
&.active {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
textarea {
|
|
@apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
|
|
|
|
&::placeholder {
|
|
@apply text-white/60;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-preview {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.compose-form__upload-thumbnail {
|
|
background-position: center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 160px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
&.video {
|
|
background-image: url('../assets/images/video-placeholder.png');
|
|
background-size: cover;
|
|
}
|
|
|
|
&.audio {
|
|
background-image: url('../assets/images/audio-placeholder.png');
|
|
background-size: cover;
|
|
}
|
|
}
|
|
} // end .compose-form .compose-form__modifiers
|
|
} // end .compose-form
|
|
|
|
.privacy-dropdown__dropdown {
|
|
@apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm;
|
|
|
|
&.top {
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
&.bottom {
|
|
transform-origin: 50% 0;
|
|
}
|
|
}
|
|
|
|
.privacy-dropdown__option {
|
|
@apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer;
|
|
|
|
&.active {
|
|
@apply bg-gray-100 dark:bg-gray-800;
|
|
}
|
|
|
|
&:hover,
|
|
&.active {
|
|
.privacy-dropdown__option__content,
|
|
.privacy-dropdown__option__content strong {
|
|
@apply text-black dark:text-white;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
@apply hover:bg-gray-200 dark:hover:bg-gray-700;
|
|
}
|
|
}
|
|
|
|
.privacy-dropdown__option__icon {
|
|
@apply flex items-center justify-center mr-2.5;
|
|
}
|
|
|
|
.privacy-dropdown__option__content {
|
|
@apply flex-auto text-primary-600 dark:text-primary-400;
|
|
|
|
strong {
|
|
@apply block font-medium text-black dark:text-white;
|
|
|
|
@each $lang in $cjk-langs {
|
|
&:lang(#{$lang}) {
|
|
@apply font-bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.privacy-dropdown.active {
|
|
.privacy-dropdown__value {
|
|
background: var(--foreground-color);
|
|
border-radius: 4px 4px 0 0;
|
|
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
|
|
|
|
.icon-button {
|
|
transition: none;
|
|
}
|
|
|
|
&.active {
|
|
background: var(--brand-color);
|
|
|
|
.icon-button {
|
|
color: var(--primary-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.top .privacy-dropdown__value {
|
|
@apply rounded-t-md;
|
|
}
|
|
|
|
.privacy-dropdown__dropdown {
|
|
@apply block shadow-md;
|
|
}
|
|
}
|
|
|
|
.floating-text-format-popup {
|
|
display: flex;
|
|
background: #fff;
|
|
padding: 4px;
|
|
vertical-align: middle;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
opacity: 0;
|
|
background-color: #fff;
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
transition: opacity 0.5s;
|
|
height: 38px;
|
|
}
|
|
|
|
.floating-text-format-popup button.popup-item {
|
|
border: 0;
|
|
display: flex;
|
|
background: none;
|
|
border-radius: 10px;
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.floating-text-format-popup button.popup-item:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.floating-text-format-popup button.popup-item.spaced {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.floating-text-format-popup button.popup-item i.format {
|
|
background-size: contain;
|
|
height: 18px;
|
|
width: 18px;
|
|
margin-top: 2px;
|
|
vertical-align: -0.25em;
|
|
display: flex;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.floating-text-format-popup button.popup-item:disabled i.format {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.floating-text-format-popup button.popup-item.active {
|
|
background-color: rgba(223, 232, 250, 0.3);
|
|
}
|
|
|
|
.floating-text-format-popup button.popup-item.active i {
|
|
opacity: 1;
|
|
}
|
|
|
|
.floating-text-format-popup button.popup-item svg {
|
|
@apply h-5 w-5;
|
|
}
|
|
|
|
.floating-text-format-popup .popup-item:hover:not([disabled]) {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.floating-text-format-popup select.popup-item {
|
|
border: 0;
|
|
display: flex;
|
|
background: none;
|
|
border-radius: 10px;
|
|
padding: 8px;
|
|
vertical-align: middle;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
width: 70px;
|
|
font-size: 14px;
|
|
color: #777;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.floating-text-format-popup select.code-language {
|
|
text-transform: capitalize;
|
|
width: 130px;
|
|
}
|
|
|
|
.floating-text-format-popup .popup-item .text {
|
|
display: flex;
|
|
line-height: 20px;
|
|
vertical-align: middle;
|
|
font-size: 14px;
|
|
color: #777;
|
|
text-overflow: ellipsis;
|
|
width: 70px;
|
|
overflow: hidden;
|
|
height: 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
.floating-text-format-popup .popup-item .icon {
|
|
display: flex;
|
|
width: 20px;
|
|
height: 20px;
|
|
user-select: none;
|
|
margin-right: 8px;
|
|
line-height: 16px;
|
|
background-size: contain;
|
|
}
|
|
|
|
.floating-text-format-popup i.chevron-down {
|
|
margin-top: 3px;
|
|
width: 16px;
|
|
height: 16px;
|
|
display: flex;
|
|
user-select: none;
|
|
}
|
|
|
|
.floating-text-format-popup i.chevron-down.inside {
|
|
width: 16px;
|
|
height: 16px;
|
|
display: flex;
|
|
margin-left: -25px;
|
|
margin-top: 11px;
|
|
margin-right: 10px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.floating-text-format-popup .divider {
|
|
width: 1px;
|
|
background-color: #eee;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.link-editor {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
max-width: 400px;
|
|
width: 100%;
|
|
opacity: 0;
|
|
background-color: #fff;
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
transition: opacity 0.5s;
|
|
will-change: transform;
|
|
}
|
|
|
|
.link-editor .button {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
padding: 6px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.link-editor .button.hovered {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.link-editor .button i,
|
|
.actions i {
|
|
background-size: contain;
|
|
display: inline-block;
|
|
height: 20px;
|
|
width: 20px;
|
|
vertical-align: -0.25em;
|
|
}
|
|
|
|
.link-editor .button.active,
|
|
.toolbar .button.active {
|
|
background-color: rgb(223, 232, 250);
|
|
}
|
|
|
|
.link-editor .link-input {
|
|
display: block;
|
|
width: calc(100% - 24px);
|
|
box-sizing: border-box;
|
|
margin: 8px 12px;
|
|
padding: 8px 12px;
|
|
border-radius: 15px;
|
|
background-color: #eee;
|
|
font-size: 15px;
|
|
color: rgb(5, 5, 5);
|
|
border: 0;
|
|
outline: 0;
|
|
position: relative;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.link-editor .link-input input {
|
|
width: 100%;
|
|
margin: -8px -12px;
|
|
padding: 8px 12px;
|
|
background: transparent;
|
|
font-size: 15px;
|
|
color: rgb(5, 5, 5);
|
|
border: 0;
|
|
outline: 0;
|
|
}
|
|
|
|
.link-editor div.link-edit {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.link-editor .link-input a {
|
|
color: rgb(33, 111, 219);
|
|
text-decoration: none;
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
margin-right: 30px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.link-editor .link-input a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.link-editor .font-size-wrapper,
|
|
.link-editor .font-family-wrapper {
|
|
display: flex;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.link-editor select {
|
|
padding: 6px;
|
|
border: none;
|
|
background-color: rgba(0, 0, 0, 0.075);
|
|
border-radius: 4px;
|
|
}
|