.compose-form { &__sensitive-button { padding: 10px; padding-top: 0; font-size: 14px; font-weight: 500; &.active { color: var(--highlight-text-color); } input[type=checkbox] { display: none; } .checkbox { display: inline-block; position: relative; border: 1px solid var(--brand-color); box-sizing: border-box; width: 18px; height: 18px; flex: 0 0 auto; margin-right: 10px; top: -1px; border-radius: 4px; vertical-align: middle; &.active { border-color: var(--highlight-text-color); background: var(--highlight-text-color); } } } &__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 { background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); display: flex; align-items: flex-start; justify-content: space-between; opacity: 0; transition: opacity 0.1s ease; .icon-button { flex: 0 1 auto; color: #fff; font-size: 14px; font-weight: 500; padding: 10px; font-family: inherit; &:hover, &:focus, &:active { color: var(--accent-color); } } &.active { opacity: 1; } } &-description { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; box-sizing: border-box; background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); padding: 10px; opacity: 0; transition: opacity 0.1s ease; textarea { background: transparent; box-sizing: border-box; color: #fff; border: 1px solid #fff; outline: none; padding: 10px; margin: 0; width: 100%; font-family: inherit; font-size: 14px; font-weight: 500; &:focus { color: #fff; } &::placeholder { color: rgba(255, 255, 255, 0.6); } } &.active { opacity: 1; } } &-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('../images/video-placeholder.png'); background-size: cover; } &.audio { background-image: url('../images/audio-placeholder.png'); background-size: cover; } } } // end .compose-form .compose-form__modifiers &__publish { display: flex; justify-content: flex-end; min-width: 0; flex: 0 0 auto; .compose-form__publish-button-wrapper { overflow: hidden; } } &__counter { display: flex; align-items: center; align-self: center; margin-left: auto; } } // end .compose-form .privacy-dropdown__dropdown { @apply absolute bg-white dark:bg-slate-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-slate-800 cursor-pointer; &.active { @apply bg-gray-100 dark:bg-slate-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-slate-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; } } .focal-point { position: relative; cursor: pointer; overflow: hidden; &.dragging { cursor: move; } img { max-width: 80vw; max-height: 80vh; width: auto; height: auto; margin: auto; } &__reticle { position: absolute; width: 100px; height: 100px; transform: translate(-50%, -50%); background: url('../images/reticle.png') no-repeat 0 0; border-radius: 50%; box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35); } &__overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } }