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