more styles cleanup
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
adfbff858d
commit
75076abeac
11 changed files with 238 additions and 412 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,8 +1,3 @@
|
|||
.autosuggest-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.autosuggest-input input,
|
||||
.react-datepicker__input-container input {
|
||||
// display: block;
|
||||
// box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -28,11 +28,10 @@
|
|||
@apply text-gray-900 text-sm;
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__upload-wrapper { overflow: hidden; }
|
||||
&__upload-wrapper { overflow: hidden; }
|
||||
|
||||
.compose-form__uploads-wrapper {
|
||||
&__uploads-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -40,9 +39,9 @@
|
|||
&.contains-media {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__upload {
|
||||
&__upload {
|
||||
flex: 1 1 0;
|
||||
min-width: 40%;
|
||||
margin: 5px;
|
||||
|
|
@ -94,9 +93,9 @@
|
|||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__upload-thumbnail {
|
||||
&__upload-thumbnail {
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -114,9 +113,21 @@
|
|||
background-image: url('../assets/images/audio-placeholder.png');
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
.privacy-dropdown {
|
||||
&.active {
|
||||
&.top .privacy-dropdown__value {
|
||||
@apply rounded-t-md;
|
||||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
@apply block shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
@apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
|
||||
|
||||
&.top {
|
||||
|
|
@ -126,9 +137,9 @@
|
|||
&.bottom {
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown__option {
|
||||
&__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 {
|
||||
|
|
@ -146,13 +157,12 @@
|
|||
&.active {
|
||||
@apply hover:bg-gray-200 dark:hover:bg-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown__option__icon {
|
||||
&__icon {
|
||||
@apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5;
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
&__content {
|
||||
@apply flex-auto text-primary-600 dark:text-primary-400;
|
||||
|
||||
strong {
|
||||
|
|
@ -164,14 +174,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown.active {
|
||||
&.top .privacy-dropdown__value {
|
||||
@apply rounded-t-md;
|
||||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
@apply block shadow-md;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
$media-compact-size: 50px;
|
||||
|
||||
.media-gallery {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
|
@ -6,9 +8,8 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.media-gallery__item {
|
||||
&__item {
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
|
|
@ -47,9 +48,8 @@
|
|||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery__item-thumbnail {
|
||||
&-thumbnail {
|
||||
@apply text-gray-400;
|
||||
cursor: zoom-in;
|
||||
display: block;
|
||||
|
|
@ -65,9 +65,10 @@
|
|||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery__preview {
|
||||
&__preview {
|
||||
@apply bg-gray-200 dark:bg-gray-900 rounded-lg;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -80,16 +81,16 @@
|
|||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery__gifv {
|
||||
&__gifv {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery__item-gifv-thumbnail {
|
||||
&__item-gifv-thumbnail {
|
||||
@apply rounded-md;
|
||||
cursor: zoom-in;
|
||||
height: 100%;
|
||||
|
|
@ -99,18 +100,18 @@
|
|||
z-index: 1;
|
||||
transform: none;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery__gifv__label,
|
||||
.media-gallery__filename__label,
|
||||
.media-gallery__file-extension__label {
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery__gifv {
|
||||
&__gifv {
|
||||
&.autoplay {
|
||||
.media-gallery__gifv__label {
|
||||
display: none;
|
||||
|
|
@ -122,11 +123,9 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$media-compact-size: 50px;
|
||||
|
||||
.media-gallery--compact {
|
||||
&--compact {
|
||||
height: $media-compact-size !important;
|
||||
background: transparent;
|
||||
|
||||
|
|
@ -149,4 +148,5 @@ $media-compact-size: 50px;
|
|||
.media-gallery__file-extension__label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -254,11 +254,6 @@
|
|||
|
||||
svg {
|
||||
stroke-width: 1.5;
|
||||
|
||||
&.feather {
|
||||
// Feather icons are a little larger
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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'};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue