mirror of https://github.com/mue/mue.git
72 lines
1.4 KiB
SCSS
72 lines
1.4 KiB
SCSS
@import 'scss/variables';
|
|
|
|
// The following CSS is to work around some assumptions made by the react-color-gradient-picker
|
|
* {
|
|
// workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
div.picker-area > div.preview > div.color-hue-alpha > div.alpha,
|
|
div.color-preview-area > div > div:nth-child(5) {
|
|
display: none;
|
|
}
|
|
|
|
.ui-color-picker {
|
|
padding: 10px;
|
|
|
|
@include themed {
|
|
background: t($modal-secondaryColour);
|
|
border-radius: t($borderRadius);
|
|
box-shadow: t($boxShadow);
|
|
}
|
|
}
|
|
|
|
.input-field .label {
|
|
color: var(--modal-text) !important;
|
|
}
|
|
|
|
// other styling for themes support etc
|
|
.gradient-degrees {
|
|
border: 3px solid var(--modal-text) !important;
|
|
}
|
|
|
|
.gradient-degree-pointer {
|
|
background-color: var(--modal-text) !important;
|
|
}
|
|
|
|
.gradient-type-item.active::after {
|
|
border: 2px solid var(--modal-text) !important;
|
|
}
|
|
|
|
.text-input,
|
|
.number-input {
|
|
@include themed {
|
|
background-color: t($modal-secondaryColour) !important;
|
|
color: t($color) !important;
|
|
}
|
|
}
|
|
|
|
.colourInput {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-flow: row-reverse;
|
|
gap: 20px;
|
|
}
|
|
|
|
.gradient-controls {
|
|
margin-bottom: 10px !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
.colourReset {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.input-field .input-container .input {
|
|
text-align: center;
|
|
}
|