style fixes (#7548)
This commit is contained in:
parent
845f33b4f2
commit
c133d5b53a
27 changed files with 93 additions and 176 deletions
|
@ -115,19 +115,13 @@ const ClaimCollectionAdd = (props: Props) => {
|
||||||
inputButton={
|
inputButton={
|
||||||
<>
|
<>
|
||||||
<Button
|
<Button
|
||||||
button={'alt'}
|
|
||||||
icon={ICONS.ADD}
|
icon={ICONS.ADD}
|
||||||
className={'button-toggle'}
|
className={'button-toggle'}
|
||||||
disabled={!newCollectionName.length}
|
disabled={!newCollectionName.length}
|
||||||
onClick={() => handleAddCollection()}
|
onClick={() => handleAddCollection()}
|
||||||
ref={buttonref}
|
ref={buttonref}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button className={'button-toggle'} icon={ICONS.REMOVE} onClick={() => handleClearNew()} />
|
||||||
button={'alt'}
|
|
||||||
className={'button-toggle'}
|
|
||||||
icon={ICONS.REMOVE}
|
|
||||||
onClick={() => handleClearNew()}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
onChange={handleNameInput}
|
onChange={handleNameInput}
|
||||||
|
|
|
@ -144,7 +144,7 @@ export default function ClaimList(props: Props) {
|
||||||
const mainEl = document.querySelector(`.${MAIN_CLASS}`);
|
const mainEl = document.querySelector(`.${MAIN_CLASS}`);
|
||||||
|
|
||||||
if (mainEl && !loading && urisLength >= pageSize) {
|
if (mainEl && !loading && urisLength >= pageSize) {
|
||||||
const contentWrapperAtBottomOfPage = mainEl.getBoundingClientRect().bottom - 0.5 <= window.innerHeight;
|
const contentWrapperAtBottomOfPage = mainEl.getBoundingClientRect().bottom - 1.5 <= window.innerHeight;
|
||||||
|
|
||||||
if (contentWrapperAtBottomOfPage) {
|
if (contentWrapperAtBottomOfPage) {
|
||||||
onScrollBottom();
|
onScrollBottom();
|
||||||
|
|
|
@ -230,7 +230,6 @@ function ClaimListHeader(props: Props) {
|
||||||
{CS.ORDER_BY_TYPES.map((type) => (
|
{CS.ORDER_BY_TYPES.map((type) => (
|
||||||
<Button
|
<Button
|
||||||
key={type}
|
key={type}
|
||||||
button="alt"
|
|
||||||
onClick={(e) =>
|
onClick={(e) =>
|
||||||
handleChange({
|
handleChange({
|
||||||
key: CS.ORDER_BY_KEY,
|
key: CS.ORDER_BY_KEY,
|
||||||
|
@ -251,7 +250,6 @@ function ClaimListHeader(props: Props) {
|
||||||
<div className="claim-search__menu-group">
|
<div className="claim-search__menu-group">
|
||||||
{!hideAdvancedFilter && (
|
{!hideAdvancedFilter && (
|
||||||
<Button
|
<Button
|
||||||
button="alt"
|
|
||||||
aria-label={__('More')}
|
aria-label={__('More')}
|
||||||
className={classnames(`button-toggle button-toggle--top button-toggle--more`, {
|
className={classnames(`button-toggle button-toggle--top button-toggle--more`, {
|
||||||
'button-toggle--custom': isFiltered(),
|
'button-toggle--custom': isFiltered(),
|
||||||
|
|
|
@ -125,7 +125,6 @@ export default function PlaylistsMine(props: Props) {
|
||||||
<Button
|
<Button
|
||||||
label={__(value)}
|
label={__(value)}
|
||||||
key={value}
|
key={value}
|
||||||
button="alt"
|
|
||||||
onClick={() => handleFilterType(value)}
|
onClick={() => handleFilterType(value)}
|
||||||
className={classnames('button-toggle', {
|
className={classnames('button-toggle', {
|
||||||
'button-toggle--active': filterType === value,
|
'button-toggle--active': filterType === value,
|
||||||
|
|
|
@ -109,7 +109,6 @@ const SearchOptions = (props: Props) => {
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
key={option}
|
key={option}
|
||||||
button="alt"
|
|
||||||
label={t[1]}
|
label={t[1]}
|
||||||
className={classnames(`button-toggle`, {
|
className={classnames(`button-toggle`, {
|
||||||
'button-toggle--active': options[SEARCH_OPTIONS.CLAIM_TYPE] === option,
|
'button-toggle--active': options[SEARCH_OPTIONS.CLAIM_TYPE] === option,
|
||||||
|
|
|
@ -254,7 +254,6 @@ function TxoList(props: Props) {
|
||||||
<div className={'txo__radios'}>
|
<div className={'txo__radios'}>
|
||||||
{/* active transactions button */}
|
{/* active transactions button */}
|
||||||
<Button
|
<Button
|
||||||
button="alt"
|
|
||||||
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
|
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
|
||||||
className={classnames(`button-toggle`, {
|
className={classnames(`button-toggle`, {
|
||||||
'button-toggle--active': active === TXO.ACTIVE,
|
'button-toggle--active': active === TXO.ACTIVE,
|
||||||
|
@ -263,7 +262,6 @@ function TxoList(props: Props) {
|
||||||
/>
|
/>
|
||||||
{/* historical transactions button */}
|
{/* historical transactions button */}
|
||||||
<Button
|
<Button
|
||||||
button="alt"
|
|
||||||
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
|
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
|
||||||
className={classnames(`button-toggle`, {
|
className={classnames(`button-toggle`, {
|
||||||
'button-toggle--active': active === 'spent',
|
'button-toggle--active': active === 'spent',
|
||||||
|
@ -272,7 +270,6 @@ function TxoList(props: Props) {
|
||||||
/>
|
/>
|
||||||
{/* all transactions button */}
|
{/* all transactions button */}
|
||||||
<Button
|
<Button
|
||||||
button="alt"
|
|
||||||
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
|
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
|
||||||
className={classnames(`button-toggle`, {
|
className={classnames(`button-toggle`, {
|
||||||
'button-toggle--active': active === 'all',
|
'button-toggle--active': active === 'all',
|
||||||
|
|
|
@ -231,7 +231,6 @@ function WalletTipAmountSelector(props: Props) {
|
||||||
<Button
|
<Button
|
||||||
key={defaultAmount}
|
key={defaultAmount}
|
||||||
disabled={shouldDisableAmountSelector(defaultAmount)}
|
disabled={shouldDisableAmountSelector(defaultAmount)}
|
||||||
button="alt"
|
|
||||||
className={classnames('button-toggle button-toggle--expandformobile', {
|
className={classnames('button-toggle button-toggle--expandformobile', {
|
||||||
'button-toggle--active':
|
'button-toggle--active':
|
||||||
convertToTwoDecimalsOrMore(defaultAmount) === convertToTwoDecimalsOrMore(amount) && !useCustomTip,
|
convertToTwoDecimalsOrMore(defaultAmount) === convertToTwoDecimalsOrMore(amount) && !useCustomTip,
|
||||||
|
@ -247,7 +246,6 @@ function WalletTipAmountSelector(props: Props) {
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
button="alt"
|
|
||||||
disabled={shouldDisableFiatSelectors}
|
disabled={shouldDisableFiatSelectors}
|
||||||
className={classnames('button-toggle button-toggle--expandformobile', {
|
className={classnames('button-toggle button-toggle--expandformobile', {
|
||||||
'button-toggle--active': useCustomTip,
|
'button-toggle--active': useCustomTip,
|
||||||
|
|
|
@ -59,7 +59,6 @@ function FileListDownloaded(props: Props) {
|
||||||
<div className="section__actions--inline">
|
<div className="section__actions--inline">
|
||||||
<Button
|
<Button
|
||||||
icon={ICONS.LIBRARY}
|
icon={ICONS.LIBRARY}
|
||||||
button="alt"
|
|
||||||
label={__('Downloads')}
|
label={__('Downloads')}
|
||||||
className={classnames(`button-toggle`, {
|
className={classnames(`button-toggle`, {
|
||||||
'button-toggle--active': viewMode === VIEW_DOWNLOADS,
|
'button-toggle--active': viewMode === VIEW_DOWNLOADS,
|
||||||
|
@ -68,7 +67,6 @@ function FileListDownloaded(props: Props) {
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
icon={ICONS.PURCHASED}
|
icon={ICONS.PURCHASED}
|
||||||
button="alt"
|
|
||||||
label={__('Purchases')}
|
label={__('Purchases')}
|
||||||
className={classnames(`button-toggle`, {
|
className={classnames(`button-toggle`, {
|
||||||
'button-toggle--active': viewMode === VIEW_PURCHASES,
|
'button-toggle--active': viewMode === VIEW_PURCHASES,
|
||||||
|
|
|
@ -134,7 +134,6 @@ function FileListPublished(props: Props) {
|
||||||
header={
|
header={
|
||||||
<span>
|
<span>
|
||||||
<Button
|
<Button
|
||||||
button="alt"
|
|
||||||
label={__('All')}
|
label={__('All')}
|
||||||
aria-label={__('All uploads')}
|
aria-label={__('All uploads')}
|
||||||
onClick={() => setFilterBy(FILTER_ALL)}
|
onClick={() => setFilterBy(FILTER_ALL)}
|
||||||
|
@ -143,7 +142,6 @@ function FileListPublished(props: Props) {
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
button="alt"
|
|
||||||
label={__('Uploads')}
|
label={__('Uploads')}
|
||||||
onClick={() => setFilterBy(FILTER_UPLOADS)}
|
onClick={() => setFilterBy(FILTER_UPLOADS)}
|
||||||
className={classnames(`button-toggle`, {
|
className={classnames(`button-toggle`, {
|
||||||
|
@ -151,7 +149,6 @@ function FileListPublished(props: Props) {
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
button="alt"
|
|
||||||
label={__('Reposts')}
|
label={__('Reposts')}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setFilterBy(FILTER_REPOSTS);
|
setFilterBy(FILTER_REPOSTS);
|
||||||
|
|
|
@ -206,7 +206,6 @@ function ListBlocked(props: Props) {
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
icon={icon}
|
icon={icon}
|
||||||
button="alt"
|
|
||||||
label={__(label)}
|
label={__(label)}
|
||||||
className={classnames(`button-toggle`, {
|
className={classnames(`button-toggle`, {
|
||||||
'button-toggle--active': viewMode === view,
|
'button-toggle--active': viewMode === view,
|
||||||
|
@ -221,7 +220,6 @@ function ListBlocked(props: Props) {
|
||||||
myChannelClaimIds && (
|
myChannelClaimIds && (
|
||||||
<Button
|
<Button
|
||||||
icon={ICONS.REFRESH}
|
icon={ICONS.REFRESH}
|
||||||
button="alt"
|
|
||||||
label={__('Refresh')}
|
label={__('Refresh')}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
fetchModBlockedList();
|
fetchModBlockedList();
|
||||||
|
|
|
@ -58,7 +58,6 @@ function TopPage(props: Props) {
|
||||||
<div className="claim-search__menu-group">
|
<div className="claim-search__menu-group">
|
||||||
<Button
|
<Button
|
||||||
label={queryName}
|
label={queryName}
|
||||||
button="alt"
|
|
||||||
onClick={() => setChannelActive(false)}
|
onClick={() => setChannelActive(false)}
|
||||||
className={classnames('button-toggle', {
|
className={classnames('button-toggle', {
|
||||||
'button-toggle--active': !channelActive,
|
'button-toggle--active': !channelActive,
|
||||||
|
@ -66,7 +65,6 @@ function TopPage(props: Props) {
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
label={`@${queryName}`}
|
label={`@${queryName}`}
|
||||||
button="alt"
|
|
||||||
onClick={() => setChannelActive(true)}
|
onClick={() => setChannelActive(true)}
|
||||||
className={classnames('button-toggle', {
|
className={classnames('button-toggle', {
|
||||||
'button-toggle--active': channelActive,
|
'button-toggle--active': channelActive,
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
|
|
||||||
.badge--tag-mature {
|
.badge--tag-mature {
|
||||||
@extend .badge;
|
@extend .badge;
|
||||||
background-color: var(--color-tertiary-alt);
|
background-color: var(--color-tertiary) !important;
|
||||||
color: var(--color-tertiary);
|
color: var(--color-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -85,10 +85,10 @@
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--color-button-secondary-bg-hover) !important;
|
background-color: var(--color-button-secondary-bg-hover) !important;
|
||||||
.button__label {
|
.button__label {
|
||||||
color: var(--color-button-secondary-text-hover) !important;
|
color: var(--color-button-secondary-text-hover);
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
stroke: var(--color-button-secondary-text-hover) !important;
|
stroke: var(--color-button-secondary-text-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -107,8 +107,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--alt {
|
.button--alt {
|
||||||
background-color: var(--color-button-alt-bg);
|
background-color: var(--color-feature-background);
|
||||||
color: var(--color-button-alt-text);
|
color: var(--color-text);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--color-button-alt-bg-hover);
|
background-color: var(--color-button-alt-bg-hover);
|
||||||
color: var(--color-button-alt-text-hover);
|
color: var(--color-button-alt-text-hover);
|
||||||
|
@ -468,14 +468,15 @@ svg + .button__label {
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-toggle {
|
.button-toggle {
|
||||||
|
@extend .button--alt;
|
||||||
padding: 0 var(--spacing-m);
|
padding: 0 var(--spacing-m);
|
||||||
height: var(--height-button);
|
height: var(--height-button);
|
||||||
font-size: var(--font-base);
|
font-size: var(--font-base);
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--color-button-toggle-text) !important;
|
color: var(--color-button-toggle-text);
|
||||||
background-color: var(--color-button-toggle-bg) !important;
|
background-color: var(--color-button-toggle-bg);
|
||||||
|
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
@ -490,6 +491,10 @@ svg + .button__label {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-toggle--active {
|
||||||
|
background-color: var(--color-button-toggle-bg-active);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
padding: var(--spacing-m) var(--spacing-s);
|
padding: var(--spacing-m) var(--spacing-s);
|
||||||
}
|
}
|
||||||
|
@ -524,7 +529,7 @@ svg + .button__label {
|
||||||
// color: var(--color-button-toggle-text) !important;
|
// color: var(--color-button-toggle-text) !important;
|
||||||
//box-shadow: 0px 0px 0px 1px var(--color-primary) inset;
|
//box-shadow: 0px 0px 0px 1px var(--color-primary) inset;
|
||||||
color: var(--color-button-toggle-text-active) !important;
|
color: var(--color-button-toggle-text-active) !important;
|
||||||
background-color: var(--color-button-toggle-bg-active) !important;
|
background-color: var(--color-button-toggle-bg-active);
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
@ -416,12 +416,9 @@
|
||||||
|
|
||||||
.button--alt {
|
.button--alt {
|
||||||
color: var(--color-button-alt-text);
|
color: var(--color-button-alt-text);
|
||||||
background-color: var(--color-button-alt-bg);
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--color-primary-contrast);
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
.icon {
|
.icon {
|
||||||
stroke: var(--color-primary-contrast);
|
stroke: var(--color-button-alt-text-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,26 +3,27 @@ $metadata-z-index: 1;
|
||||||
$actions-z-index: 2;
|
$actions-z-index: 2;
|
||||||
|
|
||||||
.channelPage-wrapper {
|
.channelPage-wrapper {
|
||||||
.button-group {
|
.channel__quick-actions {
|
||||||
.button__content {
|
.button-group {
|
||||||
.icon {
|
.button__content {
|
||||||
stroke: var(--color-text);
|
.icon {
|
||||||
|
stroke: var(--color-text);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
.button-following {
|
||||||
.button-following {
|
&.button--alt {
|
||||||
color: var(--color-text) !important;
|
color: var(--color-text);
|
||||||
background-color: var(--color-button-alt-bg) !important;
|
background-color: var(--color-button-alt-bg);
|
||||||
.icon {
|
.icon {
|
||||||
stroke: var(--color-text) !important;
|
stroke: var(--color-text);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
.button-following:last-of-type {
|
||||||
color: var(--color-primary) !important;
|
margin-left: 2px;
|
||||||
}
|
|
||||||
}
|
|
||||||
.button-following:last-of-type {
|
|
||||||
margin-left: 2px;
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-text) !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -407,12 +408,13 @@ $actions-z-index: 2;
|
||||||
|
|
||||||
.button,
|
.button,
|
||||||
.menu__button {
|
.menu__button {
|
||||||
|
background-color: var(--color-header-background);
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--color-link);
|
//color: var(--color-link);
|
||||||
background-color: rgba(var(--color-header-background-base), 0.95);
|
background-color: rgba(var(--color-header-background-base), 0.95);
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
stroke: var(--color-link);
|
//stroke: var(--color-link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -457,16 +459,6 @@ $actions-z-index: 2;
|
||||||
[role='menuitem'] {
|
[role='menuitem'] {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
&[data-selected] {
|
|
||||||
// background: transparent;
|
|
||||||
.channel__list-item,
|
|
||||||
.channel-staked__wrapper {
|
|
||||||
.claim-preview__title {
|
|
||||||
color: var(--color-primary-contrast);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
.channel__list-item {
|
.channel__list-item {
|
||||||
border-bottom-left-radius: var(--border-radius);
|
border-bottom-left-radius: var(--border-radius);
|
||||||
|
@ -529,14 +521,6 @@ $actions-z-index: 2;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
|
|
||||||
.channel__list-text {
|
|
||||||
color: var(--color-menu-icon-active);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel__list-item--selected {
|
.channel__list-item--selected {
|
||||||
|
@ -545,12 +529,6 @@ $actions-z-index: 2;
|
||||||
.icon--ChevronDown {
|
.icon--ChevronDown {
|
||||||
margin-left: var(--spacing-l);
|
margin-left: var(--spacing-l);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.claim-preview__title {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel__list-text {
|
.channel__list-text {
|
||||||
|
|
|
@ -119,18 +119,6 @@
|
||||||
margin-top: var(--spacing-xxs);
|
margin-top: var(--spacing-xxs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim__tags {
|
|
||||||
.tag {
|
|
||||||
color: var(--color-text);
|
|
||||||
background-color: var(--color-header-button);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
color: var(--color-primary-contrast);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.claim-preview__repost-author {
|
.claim-preview__repost-author {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
|
@ -567,7 +555,7 @@
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
||||||
.button--alt {
|
.button--alt {
|
||||||
color: var(--color-primary-contrast);
|
color: var(--color-text);
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
stroke: var(--color-primary-contrast);
|
stroke: var(--color-primary-contrast);
|
||||||
|
|
|
@ -29,13 +29,15 @@
|
||||||
|
|
||||||
.claim-search__dropdown {
|
.claim-search__dropdown {
|
||||||
font-size: var(--font-body);
|
font-size: var(--font-body);
|
||||||
background-color: var(--color-card-background);
|
background-color: var(--color-input-bg);
|
||||||
background-position: right var(--spacing-m) center;
|
background-position: right var(--spacing-m) center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-search__dropdown--selected {
|
.claim-search__dropdown--selected {
|
||||||
color: var(--color-primary-contrast);
|
color: var(--color-brand-blue);
|
||||||
background-color: var(--color-brand-blue);
|
option {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-search__input-container {
|
.claim-search__input-container {
|
||||||
|
|
|
@ -72,13 +72,6 @@ $thumbnailWidthSmall: 1rem;
|
||||||
@media (min-width: $breakpoint-small) {
|
@media (min-width: $breakpoint-small) {
|
||||||
@include handleChannelGif($thumbnailWidth);
|
@include handleChannelGif($thumbnailWidth);
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel-staked__wrapper {
|
|
||||||
padding: 0;
|
|
||||||
bottom: -1rem;
|
|
||||||
padding: -1rem;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
.channel-staked__indicator {
|
.channel-staked__indicator {
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
margin-left: 0.1rem;
|
margin-left: 0.1rem;
|
||||||
|
@ -222,10 +215,6 @@ $thumbnailWidthSmall: 1rem;
|
||||||
|
|
||||||
.channel-name {
|
.channel-name {
|
||||||
color: var(--color-link);
|
color: var(--color-link);
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-secondary);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -207,7 +207,7 @@
|
||||||
height: calc(var(--header-height-mobile) - var(--spacing-m));
|
height: calc(var(--header-height-mobile) - var(--spacing-m));
|
||||||
background-color: rgba(var(--color-primary-static), 0.6);
|
background-color: rgba(var(--color-primary-static), 0.6);
|
||||||
.icon {
|
.icon {
|
||||||
stroke: var(--color-brand-contrast);
|
stroke: var(--color-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -285,10 +285,6 @@
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
&:not(.button-rotate) {
|
&:not(.button-rotate) {
|
||||||
background-color: var(--color-header-button-hover);
|
background-color: var(--color-header-button-hover);
|
||||||
|
|
||||||
.icon {
|
|
||||||
stroke: var(--color-brand-contrast);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -152,10 +152,6 @@ body {
|
||||||
.date_time {
|
.date_time {
|
||||||
font-size: var(--font-xsmall) !important;
|
font-size: var(--font-xsmall) !important;
|
||||||
color: rgba(var(--color-text-base), 0.6);
|
color: rgba(var(--color-text-base), 0.6);
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -41,6 +41,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.active {
|
||||||
|
&.preview {
|
||||||
|
color: var(--color-brand-blue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
color: var(--color-header-link);
|
color: var(--color-header-link);
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
@ -107,7 +113,6 @@
|
||||||
button:not(.button) {
|
button:not(.button) {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
background-color: transparent !important;
|
|
||||||
border: transparent;
|
border: transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -97,13 +97,13 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
padding: var(--spacing-l);
|
padding: var(--spacing-l);
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
|
|
||||||
.button-toggle {
|
.button-toggle:not(.button-toggle--active) {
|
||||||
background-color: rgba(var(--color-header-button-base), 0.4) !important;
|
&.button--alt {
|
||||||
&:hover {
|
background-color: rgba(var(--color-header-button-base), 0.4);
|
||||||
background-color: rgba(var(--color-header-button-base), 0.9) !important;
|
&:hover {
|
||||||
|
background-color: rgba(var(--color-header-button-base), 0.9) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -114,24 +114,20 @@
|
||||||
}
|
}
|
||||||
.channel__list-item {
|
.channel__list-item {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--color-primary);
|
background-color: var(--color-feature-background);
|
||||||
color: var(--color-primary-contrast);
|
color: var(--color-primary-contrast);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-toggle--active {
|
||||||
|
background-color: var(--color-feature-background);
|
||||||
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
font-size: var(--font-medium);
|
font-size: var(--font-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-reach-menu-button] {
|
|
||||||
&:hover {
|
|
||||||
.channel__list-item--selected {
|
|
||||||
background-color: var(--color-primary) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
.card__main-actions {
|
.card__main-actions {
|
||||||
border-top: unset !important;
|
border-top: unset !important;
|
||||||
|
|
|
@ -133,6 +133,10 @@
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
color: var(--color-text) !important;
|
color: var(--color-text) !important;
|
||||||
|
|
||||||
|
.textareaSuggestions__topSeparator {
|
||||||
|
margin-top: var(--spacing-m);
|
||||||
|
margin-bottom: var(--spacing-m);
|
||||||
|
}
|
||||||
.textarea-suggestions__group {
|
.textarea-suggestions__group {
|
||||||
&:last-child hr {
|
&:last-child hr {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -275,13 +279,6 @@
|
||||||
background-color: var(--color-header-button);
|
background-color: var(--color-header-button);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-toggle {
|
|
||||||
background-color: rgba(var(--color-header-button-base), 0.4) !important;
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(var(--color-header-button-base), 0.9) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.button-toggle--active {
|
.button-toggle--active {
|
||||||
background-color: rgba(var(--color-header-button-base), 0.9) !important;
|
background-color: rgba(var(--color-header-button-base), 0.9) !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,18 +8,15 @@ reach-portal {
|
||||||
[data-reach-menu] {
|
[data-reach-menu] {
|
||||||
[data-reach-menu-items] {
|
[data-reach-menu-items] {
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
//background-color: var(--color-header-background);
|
|
||||||
background-color: var(--color-header-background);
|
background-color: var(--color-header-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-reach-menu-item][data-selected] {
|
[data-reach-menu-item][data-selected] {
|
||||||
.menu__link {
|
.menu__link {
|
||||||
//color: var(--color-primary-contrast);
|
color: var(--color-primary-contrast);
|
||||||
color: var(--color-alt-contrast);
|
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
//stroke: var(--color-primary-contrast);
|
stroke: var(--color-primary-contrast);
|
||||||
stroke: var(--color-alt-contrast);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -72,7 +69,6 @@ reach-portal {
|
||||||
|
|
||||||
[data-reach-menu-item][data-selected] {
|
[data-reach-menu-item][data-selected] {
|
||||||
background-color: var(--color-menu-background--active);
|
background-color: var(--color-menu-background--active);
|
||||||
color: var(--color-primary-contrast) !important;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
@ -125,25 +121,15 @@ reach-portal {
|
||||||
@extend .menu__list;
|
@extend .menu__list;
|
||||||
|
|
||||||
[data-reach-menu-item][data-selected] {
|
[data-reach-menu-item][data-selected] {
|
||||||
.menu__link {
|
background-color: var(--color-menu-background--active);
|
||||||
color: var(--color-brand-contrast) !important;
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
stroke: var(--color-primary-contrast);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-reach-menu-item][data-selected] {
|
|
||||||
color: var(--color-brand-contrast) !important;
|
|
||||||
background-color: var(--color-brand) !important;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
stroke: var(--color-brand-contrast) !important;
|
stroke: var(--color-brand-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment__menu-help {
|
.comment__menu-help {
|
||||||
color: var(--color-brand-contrast) !important;
|
color: var(--color-brand-contrast);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -896,6 +896,9 @@ img {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.card {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.scheduledLivestream-wrapper {
|
.scheduledLivestream-wrapper {
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
--color-card-background: var(--color-gray-9);
|
--color-card-background: var(--color-gray-9);
|
||||||
--color-card-background2: var(--color-header-background);
|
--color-card-background2: var(--color-header-background);
|
||||||
--color-card-background-highlighted: var(--color-gray-8);
|
--color-card-background-highlighted: var(--color-gray-8);
|
||||||
|
--color-feature-background: var(--color-header-background);
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
--color-text-base: 255, 255, 255;
|
--color-text-base: 255, 255, 255;
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
--color-brand: var(--color-primary-static);
|
--color-brand: var(--color-primary-static);
|
||||||
--color-brand-bright: rgb(56, 217, 169);
|
--color-brand-bright: rgb(56, 217, 169);
|
||||||
--color-accent: var(--color-brand-blue);
|
--color-accent: var(--color-brand-blue);
|
||||||
--color-secondary: rgb(219, 234, 254);
|
--color-secondary: var(--color-brand-blue);
|
||||||
--color-secondary-alt: rgb(191, 219, 254);
|
--color-secondary-alt: rgb(191, 219, 254);
|
||||||
--color-secondary-alt-2: rgb(30, 64, 175);
|
--color-secondary-alt-2: rgb(30, 64, 175);
|
||||||
--color-secondary-static: var(--color-secondary);
|
--color-secondary-static: var(--color-secondary);
|
||||||
|
@ -24,7 +24,7 @@
|
||||||
--color-border: #ededed;
|
--color-border: #ededed;
|
||||||
--color-background: #fafafa;
|
--color-background: #fafafa;
|
||||||
--color-background-overlay: #21252980;
|
--color-background-overlay: #21252980;
|
||||||
--color-card-background: #ffffff;
|
--color-card-background: var(--color-gray-1);
|
||||||
--color-card-background-highlighted: #fff5f5;
|
--color-card-background-highlighted: #fff5f5;
|
||||||
|
|
||||||
//Text
|
//Text
|
||||||
|
@ -43,14 +43,16 @@
|
||||||
--color-tooltip-text: #fafafa;
|
--color-tooltip-text: #fafafa;
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
--color-header-button: var(--color-button-alt-bg);
|
--color-header-button: var(--color-white); //var(--color-button-alt-bg);
|
||||||
--color-header-button-text: var(--color-black);
|
--color-header-button-text: var(--color-black);
|
||||||
--color-header-background: #ffffff;
|
--color-header-background: #ffffff;
|
||||||
|
--color-feature-background: #ffffff;
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
--color-button-alt-bg: var(--color-gray-1);
|
--color-button-alt-bg: var(--color-feature-background);
|
||||||
--color-button-alt-bg-hover: var(--color-gray-2);
|
--color-button-alt-bg-hover: var(--color-gray-1);
|
||||||
--color-button-alt-text: black;
|
--color-button-alt-text: var(--color-text);
|
||||||
|
--color-button-alt-text-hover: var(--color-text);
|
||||||
// pri
|
// pri
|
||||||
--color-button-primary-bg: var(--color-primary);
|
--color-button-primary-bg: var(--color-primary);
|
||||||
--color-button-primary-bg-hover: var(--color-accent);
|
--color-button-primary-bg-hover: var(--color-accent);
|
||||||
|
@ -60,22 +62,22 @@
|
||||||
--color-button-secondary-bg: var(--color-gray-1);
|
--color-button-secondary-bg: var(--color-gray-1);
|
||||||
--color-button-secondary-border: var(--color-secondary-alt-3);
|
--color-button-secondary-border: var(--color-secondary-alt-3);
|
||||||
--color-button-secondary-text: var(--color-gray-6);
|
--color-button-secondary-text: var(--color-gray-6);
|
||||||
--color-button-secondary-bg-hover: var(--color-card-background);
|
--color-button-secondary-bg-hover: var(--color-feature-background);
|
||||||
--color-button-secondary-text-hover: var(--color-primary);
|
--color-button-secondary-text-hover: var(--color-primary);
|
||||||
// toggle
|
// toggle
|
||||||
--color-button-toggle-text: var(--color-gray-6);
|
--color-button-toggle-text: var(--color-gray-6);
|
||||||
--color-button-toggle-bg: var(--color-gray-1);
|
--color-button-toggle-bg: var(--color-gray-1);
|
||||||
--color-button-toggle-bg-hover: var(--color-card-background);
|
--color-button-toggle-bg-hover: var(--color-feature-background);
|
||||||
--color-button-border: var(--color-gray-3);
|
--color-button-border: var(--color-gray-3);
|
||||||
--color-button-toggle-text-hover: var(--color-primary);
|
--color-button-toggle-text-hover: var(--color-text);
|
||||||
--color-button-toggle-bg-active: var(--color-card-background);
|
--color-button-toggle-bg-active: var(--color-header-background);
|
||||||
--color-button-toggle-text-active: var(--color-gray-6);
|
--color-button-toggle-text-active: var(--color-text);
|
||||||
--color-toggle-custom: var(--color-secondary);
|
--color-toggle-custom: var(--color-brand-blue);
|
||||||
// link / util
|
// link / util
|
||||||
--color-link-active: var(--color-primary);
|
--color-link-active: var(--color-primary);
|
||||||
--color-link-focus-bg: #f1f1f1;
|
--color-link-focus-bg: #f1f1f1;
|
||||||
--color-link: var(--color-primary-alt-2);
|
--color-link: var(--color-primary-alt-2);
|
||||||
--color-button-alt-text-hover: var(--color-text);
|
|
||||||
--color-link-hover: var(--color-primary);
|
--color-link-hover: var(--color-primary);
|
||||||
|
|
||||||
// Input
|
// Input
|
||||||
|
@ -143,10 +145,10 @@
|
||||||
--color-spinner-light: #ffffff;
|
--color-spinner-light: #ffffff;
|
||||||
--color-spinner-dark: #212529;
|
--color-spinner-dark: #212529;
|
||||||
--color-placeholder-background: #f0f0f0;
|
--color-placeholder-background: #f0f0f0;
|
||||||
--color-file-viewer-background: var(--color-card-background);
|
--color-file-viewer-background: var(--color-feature-background);
|
||||||
--color-tabs-background: var(--color-card-background);
|
--color-tabs-background: var(--color-feature-background);
|
||||||
--color-tab-divider: var(--color-primary);
|
--color-tab-divider: var(--color-primary);
|
||||||
--color-modal-background: var(--color-card-background);
|
--color-modal-background: var(--color-gray-1);
|
||||||
|
|
||||||
// Icons
|
// Icons
|
||||||
--color-follow-bg: #ffd4da;
|
--color-follow-bg: #ffd4da;
|
||||||
|
|
Loading…
Reference in a new issue