ad19495702
Naomi comment websockets increase slow mode time to 5 seconds fix to prevent duplicate comments update livestream details fix channel pin electron boom fix rebase prune unused icons updating meme updating meme update livestream for naomi fix rebase DigitalCashNetwork remove electroboom pin Slavguns Joel So he can edit his claims add streamTypes param to claimTilesDiscover so following section can search for all types of content fix typo
461 lines
8.6 KiB
SCSS
461 lines
8.6 KiB
SCSS
@import 'init/mixins';
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
height: var(--height-input);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid;
|
|
color: var(--color-input);
|
|
border-color: var(--color-input-border);
|
|
background-color: var(--color-input-bg);
|
|
padding-right: var(--spacing-s);
|
|
padding-left: var(--spacing-s);
|
|
|
|
&:focus {
|
|
@include focus;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-input-placeholder);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.4;
|
|
|
|
& + label {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
&[type='range'] {
|
|
height: auto;
|
|
height: 0.5rem;
|
|
background-color: var(--color-secondary);
|
|
}
|
|
}
|
|
|
|
checkbox-element,
|
|
radio-element,
|
|
select {
|
|
cursor: pointer;
|
|
}
|
|
|
|
select {
|
|
background-image: var(--select-toggle-background);
|
|
background-position: 99% center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1rem;
|
|
padding-right: var(--spacing-l);
|
|
padding-left: var(--spacing-s);
|
|
font-weight: bold;
|
|
}
|
|
|
|
fieldset-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
&.fieldset-group--smushed {
|
|
fieldset-section + fieldset-section {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
fieldset-section,
|
|
fieldset-group,
|
|
form,
|
|
.checkbox,
|
|
.radio,
|
|
.form-field--SimpleMDE,
|
|
.form-field__help {
|
|
+ fieldset-section,
|
|
+ fieldset-group,
|
|
+ form,
|
|
+ .checkbox,
|
|
+ .radio,
|
|
+ .form-field--SimpleMDE {
|
|
margin-top: var(--spacing-l);
|
|
}
|
|
|
|
+ .form-field__help {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
fieldset-section,
|
|
.checkbox,
|
|
.radio {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
label {
|
|
font-size: var(--font-small);
|
|
color: var(--color-input-label);
|
|
display: inline-block;
|
|
margin-bottom: 0.1rem;
|
|
|
|
.icon__lbc {
|
|
margin-bottom: 4px;
|
|
}
|
|
}
|
|
|
|
input-submit {
|
|
display: flex;
|
|
|
|
& > *:first-child,
|
|
& > *:nth-child(2) {
|
|
margin: 0;
|
|
}
|
|
|
|
& > *:first-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-right: none;
|
|
}
|
|
|
|
& > *:nth-child(2) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
}
|
|
|
|
.checkbox,
|
|
.radio {
|
|
position: relative;
|
|
|
|
input[type='checkbox'],
|
|
input[type='radio'] {
|
|
height: var(--height-checkbox);
|
|
width: var(--height-checkbox);
|
|
position: absolute;
|
|
border: none;
|
|
left: 0;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
|
|
&:disabled + label {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
label {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 0;
|
|
font-size: var(--font-base);
|
|
padding-left: calc(var(--height-checkbox) + var(--spacing-s));
|
|
min-height: var(--height-checkbox);
|
|
|
|
&::before {
|
|
background-color: var(--color-input-toggle-bg);
|
|
}
|
|
|
|
&:hover {
|
|
&::before {
|
|
background-color: var(--color-input-toggle-bg-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
label::before,
|
|
label::after {
|
|
position: absolute;
|
|
content: '';
|
|
}
|
|
|
|
// Hide the checkmark by default
|
|
input[type='checkbox'] + label::after,
|
|
input[type='radio'] + label::after {
|
|
content: none;
|
|
}
|
|
|
|
// Unhide on the checked state
|
|
input[type='checkbox']:checked + label::after,
|
|
input[type='radio']:checked + label::after {
|
|
content: '';
|
|
}
|
|
|
|
input[type='checkbox']:focus + label::before,
|
|
input[type='radio']:focus + label::before {
|
|
@include focus;
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
// Outer box of the fake checkbox
|
|
label::before {
|
|
height: var(--height-checkbox);
|
|
width: var(--height-checkbox);
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--border-radius);
|
|
left: 0px;
|
|
top: -1px;
|
|
}
|
|
|
|
// Checkmark of the fake checkbox
|
|
label::after {
|
|
height: 6px;
|
|
width: 12px;
|
|
border-left: 2px solid;
|
|
border-bottom: 2px solid;
|
|
border-color: var(--color-input-toggle);
|
|
border-left-color: var(--color-input-toggle);
|
|
transform: rotate(-45deg);
|
|
left: 6px;
|
|
top: 6px;
|
|
}
|
|
}
|
|
|
|
.radio {
|
|
input[type='radio'] {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
// Outer box of the fake radio
|
|
label::before {
|
|
height: var(--height-radio);
|
|
width: var(--height-radio);
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: calc(var(--height-radio) * 0.5);
|
|
left: 0px;
|
|
top: -1px;
|
|
}
|
|
|
|
// Checkmark of the fake radio
|
|
label::after {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-primary);
|
|
left: 6px;
|
|
top: 5px;
|
|
}
|
|
}
|
|
|
|
.range__label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
> * {
|
|
width: 33%;
|
|
text-align: center;
|
|
|
|
&:first-of-type {
|
|
text-align: left;
|
|
}
|
|
&:last-of-type {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fieldset-group {
|
|
@extend fieldset-group;
|
|
}
|
|
|
|
.fieldset-section {
|
|
@extend fieldset-section;
|
|
}
|
|
|
|
.input-submit {
|
|
@extend input-submit;
|
|
}
|
|
|
|
input-submit {
|
|
align-items: center;
|
|
|
|
input {
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
input[type='number'] {
|
|
width: 8rem;
|
|
}
|
|
|
|
fieldset-group {
|
|
+ fieldset-group {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
|
|
&.fieldset-group--smushed {
|
|
justify-content: flex-start;
|
|
|
|
fieldset-section {
|
|
width: auto;
|
|
margin: 0;
|
|
|
|
&:first-child {
|
|
input,
|
|
select {
|
|
border-right: none;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
input,
|
|
select {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
label {
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.fieldgroup--paginate {
|
|
padding-bottom: var(--spacing-l);
|
|
margin-top: var(--spacing-l);
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
// This is a special case where the prefix appears "inside" the input
|
|
// It would be way simpler to just use position: absolute and give it a width
|
|
// but the width can change when we use it for the name prefix
|
|
// lbry:// {input}, lbry://@short {input}, @lbry://longername {input}
|
|
// The spacing/alignment isn't very robust and will probably need to be changed
|
|
// if we use this in more places
|
|
&.fieldset-group--disabled-prefix {
|
|
align-items: flex-end;
|
|
|
|
label {
|
|
min-height: 18px;
|
|
white-space: nowrap;
|
|
// Set width 0 and overflow visible so the label can act as if it's the input label and not a random text node in a side by side div
|
|
overflow: visible;
|
|
width: 0;
|
|
}
|
|
|
|
fieldset-section:first-child {
|
|
max-width: 40%;
|
|
|
|
.form-field__prefix {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
padding: 0.5rem;
|
|
height: var(--height-input);
|
|
border: 1px solid;
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-color: var(--color-input-border);
|
|
color: var(--color-text-help);
|
|
background-color: var(--color-input-bg);
|
|
}
|
|
}
|
|
|
|
fieldset-section:last-child {
|
|
width: 100%;
|
|
|
|
label {
|
|
// Overwrite the input's label to wrap instead. This is usually
|
|
// an error message, which could be long in other languages.
|
|
width: 100%;
|
|
white-space: normal;
|
|
}
|
|
|
|
input {
|
|
border-left: 0;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-color: var(--color-input-border);
|
|
padding-left: var(--spacing-xs);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-field--copyable {
|
|
padding: 0.2rem 0.75rem;
|
|
text-overflow: ellipsis;
|
|
user-select: text;
|
|
cursor: default;
|
|
}
|
|
|
|
.form-field--short {
|
|
width: 100%;
|
|
@media (min-width: $breakpoint-small) {
|
|
width: 25em;
|
|
}
|
|
}
|
|
|
|
.form-field--price-amount {
|
|
width: 7em;
|
|
}
|
|
|
|
.form-field--address {
|
|
min-width: 18em;
|
|
}
|
|
|
|
.form-field__help {
|
|
@extend .help;
|
|
}
|
|
|
|
.form-field__help + .checkbox,
|
|
.form-field__help + .radio {
|
|
margin-top: var(--spacing-l);
|
|
}
|
|
|
|
.form-field__conjuction {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.form-field__two-column {
|
|
@media (min-width: $breakpoint-small) {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
.form-field__quick-action {
|
|
float: right;
|
|
font-size: var(--font-xsmall);
|
|
margin-top: 2.5%;
|
|
}
|
|
|
|
fieldset-section {
|
|
.form-field__internal-option {
|
|
margin-top: var(--spacing-s);
|
|
margin-left: 2.2rem;
|
|
|
|
&:first-of-type {
|
|
margin-top: var(--spacing-s); // Extra specificity needed here since _section.scss is applied after this file
|
|
}
|
|
}
|
|
|
|
.select--slim {
|
|
margin-bottom: var(--spacing-xxs);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
max-width: none;
|
|
}
|
|
|
|
select {
|
|
max-height: 1.5rem !important;
|
|
padding: 0 var(--spacing-xs);
|
|
padding-right: var(--spacing-l);
|
|
}
|
|
}
|
|
}
|