2e87b2fd22
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
update meme
fixes
publish page fixes
pending
fix notifications
fix comments finally
fix claim preview
no mature for simplesite
Revert "no mature for simplesite"
This reverts commit 9f89242d85.
fix livestream preview click
no mature on simple site
try fixing invite page crash
probably needs more changes.
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);
|
|
}
|
|
}
|
|
}
|