more styles cleanup

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
environments/review-cleanup-4am6ej/deployments/2543
marcin mikołajczak 2023-02-06 20:20:14 +01:00
rodzic adfbff858d
commit 75076abeac
11 zmienionych plików z 238 dodań i 412 usunięć

Wyświetl plik

@ -1,26 +0,0 @@
// THEME MIXINS
// standard container drop shadow
@mixin standard-panel-shadow {
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}
// common properties for all standard containers
@mixin standard-panel {
@include standard-panel-shadow;
border-radius: 10px;
}
// SHORTCUTS
@mixin avatar-radius {
border-radius: 50%;
background: transparent no-repeat;
background-position: 50%;
background-clip: padding-box;
}
@mixin avatar-size($size: 48px) {
width: $size;
height: $size;
background-size: $size $size;
}

Wyświetl plik

@ -1,8 +1,3 @@
.autosuggest-input {
position: relative;
}
.autosuggest-input input,
.react-datepicker__input-container input {
// display: block;
// box-sizing: border-box;

Wyświetl plik

@ -8,54 +8,6 @@ body.with-modals {
@apply overflow-hidden;
}
body {
&.player {
text-align: center;
}
&.embed {
margin: 0;
padding-bottom: 0;
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
}
&.admin {
position: fixed;
width: 100%;
height: 100%;
padding: 0;
}
&.error {
@apply text-gray-400;
position: absolute;
text-align: center;
width: 100%;
height: 100%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
.dialog {
vertical-align: middle;
margin: 20px;
h1 {
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
}
}
}
// Note: this is needed for React HotKeys performance. Removing this
// will cause severe performance degradation on Safari.
div[tabindex='-1']:focus {
@ -68,27 +20,6 @@ div[tabindex='-1']:focus {
noscript {
text-align: center;
img {
width: 200px;
opacity: 0.5;
animation: flicker 4s infinite;
}
div {
@apply text-gray-400;
font-size: 14px;
margin: 30px auto;
max-width: 400px;
a {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
}
.emojione {

Wyświetl plik

@ -1,29 +1,3 @@
.column {
width: 350px;
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex: 1 1 100%;
}
@media screen and (min-width: 631px) {
.column {
flex: 0 0 auto;
padding: 10px;
padding-left: 5px;
padding-right: 5px;
&:first-child {
padding-left: 10px;
}
&:last-child {
padding-right: 10px;
}
}
}
.empty-column-indicator,
.error-column {
@apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;

Wyświetl plik

@ -28,150 +28,152 @@
@apply text-gray-900 text-sm;
font-family: inherit;
}
}
.compose-form__upload-wrapper { overflow: hidden; }
&__upload-wrapper { overflow: hidden; }
.compose-form__uploads-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
&__uploads-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
&.contains-media {
padding: 5px;
}
}
.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;
&.contains-media {
padding: 5px;
}
}
&-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;
&__upload {
flex: 1 1 0;
min-width: 40%;
margin: 5px;
position: relative;
border-radius: 4px;
overflow: hidden;
&.active {
@apply opacity-100;
}
&__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;
textarea {
@apply bg-transparent text-white border-solid border border-white/25 p-2.5 rounded-md text-sm w-full m-0;
&.active {
@apply opacity-100;
}
&::placeholder {
@apply text-white/60;
.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;
}
}
}
&-preview {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
&-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;
video {
&.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%;
object-fit: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
&__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;
}
}
}
.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;
}
}
.privacy-dropdown__dropdown {
@apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
&.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;
.privacy-dropdown {
&.active {
@apply bg-gray-100 dark:bg-gray-800;
}
&.top .privacy-dropdown__value {
@apply rounded-t-md;
}
&:hover,
&.active {
.privacy-dropdown__option__content,
.privacy-dropdown__option__content strong {
@apply text-black dark:text-white;
.privacy-dropdown__dropdown {
@apply block shadow-md;
}
}
&.active {
@apply hover:bg-gray-200 dark:hover:bg-gray-700;
&__dropdown {
@apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
&.top {
transform-origin: 50% 100%;
}
&.bottom {
transform-origin: 50% 0;
}
}
}
.privacy-dropdown__option__icon {
@apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5;
}
&__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;
.privacy-dropdown__option__content {
@apply flex-auto text-primary-600 dark:text-primary-400;
&.active {
@apply bg-gray-100 dark:bg-gray-800;
}
strong {
@apply block font-medium text-black dark:text-white;
&:hover,
&.active {
.privacy-dropdown__option__content,
.privacy-dropdown__option__content strong {
@apply text-black dark:text-white;
}
}
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
@apply font-bold;
&.active {
@apply hover:bg-gray-200 dark:hover:bg-gray-700;
}
&__icon {
@apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5;
}
&__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 {
&.top .privacy-dropdown__value {
@apply rounded-t-md;
}
.privacy-dropdown__dropdown {
@apply block shadow-md;
}
}

Wyświetl plik

@ -1,3 +1,5 @@
$media-compact-size: 50px;
.media-gallery {
box-sizing: border-box;
overflow: hidden;
@ -6,147 +8,145 @@
position: relative;
width: 100%;
height: auto;
}
.media-gallery__item {
border: 0;
box-sizing: border-box;
display: block;
float: left;
position: relative;
border-radius: 10px;
overflow: hidden;
&__item {
border: 0;
box-sizing: border-box;
display: block;
float: left;
position: relative;
border-radius: 10px;
overflow: hidden;
&__icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&__icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.svg-icon {
@apply h-24 w-24;
.svg-icon {
@apply h-24 w-24;
}
}
&-overflow {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.75);
z-index: 2;
color: #333;
text-align: center;
font-weight: bold;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
&-thumbnail {
@apply text-gray-400;
cursor: zoom-in;
display: block;
text-decoration: none;
line-height: 0;
position: relative;
z-index: 1;
height: 100%;
width: 100%;
video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
&-overflow {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.75);
z-index: 2;
color: #333;
text-align: center;
font-weight: bold;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
}
.media-gallery__item-thumbnail {
@apply text-gray-400;
cursor: zoom-in;
display: block;
text-decoration: none;
line-height: 0;
position: relative;
z-index: 1;
height: 100%;
width: 100%;
video {
&__preview {
@apply bg-gray-200 dark:bg-gray-900 rounded-lg;
width: 100%;
height: 100%;
object-fit: cover;
}
}
position: absolute;
top: 0;
left: 0;
z-index: 0;
.media-gallery__preview {
@apply bg-gray-200 dark:bg-gray-900 rounded-lg;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
&--hidden {
display: none;
}
}
.media-gallery__gifv {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.media-gallery__item-gifv-thumbnail {
@apply rounded-md;
cursor: zoom-in;
height: 100%;
object-fit: cover;
position: relative;
width: 100%;
z-index: 1;
transform: none;
top: 0;
}
.media-gallery__gifv__label,
.media-gallery__filename__label,
.media-gallery__file-extension__label {
@apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
font-size: 11px;
transition: opacity 0.1s ease;
line-height: 18px;
}
.media-gallery__gifv {
&.autoplay {
.media-gallery__gifv__label {
&--hidden {
display: none;
}
}
&:hover {
.media-gallery__gifv__label {
opacity: 1;
&__gifv {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
&__item-gifv-thumbnail {
@apply rounded-md;
cursor: zoom-in;
height: 100%;
object-fit: cover;
position: relative;
width: 100%;
z-index: 1;
transform: none;
top: 0;
}
&__gifv__label,
&__filename__label,
&__file-extension__label {
@apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
font-size: 11px;
transition: opacity 0.1s ease;
line-height: 18px;
}
&__gifv {
&.autoplay {
.media-gallery__gifv__label {
display: none;
}
}
&:hover {
.media-gallery__gifv__label {
opacity: 1;
}
}
}
}
$media-compact-size: 50px;
.media-gallery--compact {
height: $media-compact-size !important;
background: transparent;
.media-gallery__item {
width: $media-compact-size !important;
&--compact {
height: $media-compact-size !important;
inset: auto !important;
float: left !important;
margin-right: 5px;
background: transparent;
&-overflow {
font-size: 20px;
.media-gallery__item {
width: $media-compact-size !important;
height: $media-compact-size !important;
inset: auto !important;
float: left !important;
margin-right: 5px;
&-overflow {
font-size: 20px;
}
&__icons .svg-icon {
@apply h-8 w-8;
}
}
&__icons .svg-icon {
@apply h-8 w-8;
.media-gallery__file-extension__label {
display: none;
}
}
.media-gallery__file-extension__label {
display: none;
}
}

Wyświetl plik

@ -254,11 +254,6 @@
svg {
stroke-width: 1.5;
&.feather {
// Feather icons are a little larger
transform: scale(0.9);
}
}
}
}

Wyświetl plik

@ -116,8 +116,9 @@ a.status-card {
padding-bottom: 10px;
&__status {
@include standard-panel;
padding: 15px 0 10px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.status {

Wyświetl plik

@ -2,21 +2,6 @@
// TYPEOGRAPHY MIXINS
// declare the font family using these shortcuts
@mixin font-inter { font-family: Inter, Arial, sans-serif !important; }
// Declare font weights as a numerical value in rendered output
// Prevents certain browsers which do not play nice with "light, medium" textual declarations
// Numeical values always work more consistently across browsers
// Each font-weight is linked with the @font-face declaration to the actual font file
@mixin font-weight($weight) {
@if $weight == 'light' { font-weight: 300; }
@if $weight == 'normal' { font-weight: 400; }
@if $weight == 'medium' { font-weight: 500; }
@if $weight == 'bold' { font-weight: 700; }
@if $weight == 'extrabold' { font-weight: 800; }
}
// Use these mixins to define font-size and line-height
// html and body declaration allows developer to pass px value as argument
// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
@ -26,10 +11,3 @@
font-size: #{$px + 'px'};
font-size: #{$rem + 'rem'};
}
@mixin line-height($size) {
$rem: math.div($size, 10);
$px: $size;
line-height: #{$px + 'px'};
line-height: #{$rem + 'rem'};
}

Wyświetl plik

@ -22,26 +22,8 @@ select {
margin-left: -1px;
}
.captcha {
background-color: #fff;
border-radius: 4px;
img {
display: table;
margin: 0 auto;
}
input[type='text'] {
border-radius: 0 0 4px 4px;
}
}
.input.with_label.toggle .label_input {
display: flex;
font-size: 14px;
align-items: center;
.theme-toggle {
margin-left: 10px;
}
}

Wyświetl plik

@ -125,12 +125,6 @@
font-family: inherit;
padding: 7px 0;
&:focus,
&:active {
@apply text-gray-900;
border-bottom-color: var(--highlight-text-color);
}
@media screen and (max-width: 600px) {
font-size: 16px;
}