LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

style fixes

Browse source
This commit is contained in:
zeppi 2022-04-20 12:05:45 -04:00
parent 845f33b4f2
commit 32f6b379fe
27 changed files with 93 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/component/claimCollectionAdd/view.jsx
View file

@ -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}

2
ui/component/claimList/view.jsx
View file

@ -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();

2
ui/component/claimListHeader/view.jsx
View file

@ -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(),

1
ui/component/playlistsMine/view.jsx
View file

@ -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,

1
ui/component/searchOptions/view.jsx
View file

@ -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,

3
ui/component/txoList/view.jsx
View file

@ -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',

2
ui/component/walletTipAmountSelector/view.jsx
View file

@ -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,

2
ui/page/fileListDownloaded/view.jsx
View file

@ -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,

3
ui/page/fileListPublished/view.jsx
View file

@ -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);

2
ui/page/listBlocked/view.jsx
View file

@ -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();

2
ui/page/top/view.jsx
View file

@ -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,

2
ui/scss/component/_badge.scss
View file

@ -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);
} }

19
ui/scss/component/_button.scss
View file

@ -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;

5
ui/scss/component/_card.scss
View file

@ -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);
} }
} }
} }

66
ui/scss/component/_channel.scss
View file

@ -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 {

14
ui/scss/component/_claim-list.scss
View file

@ -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);

8
ui/scss/component/_claim-search.scss
View file

@ -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 {

11
ui/scss/component/_comments.scss
View file

@ -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);
}
} }
} }

6
ui/scss/component/_header.scss
View file

@ -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);
}
} }
} }

4
ui/scss/component/_main.scss
View file

@ -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);
}
} }
} }

7
ui/scss/component/_markdown-editor.scss
View file

@ -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 {

26
ui/scss/component/_modal.scss
View file

@ -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;

11
ui/scss/component/_textarea-suggestions.scss
View file

@ -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;
} }

24
ui/scss/component/menu-button.scss
View file

@ -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);
} }
} }

3
ui/scss/init/_gui.scss
View file

@ -896,6 +896,9 @@ img {
} }
} }
} }
&.card {
padding: 0;
}
} }
.scheduledLivestream-wrapper { .scheduledLivestream-wrapper {

1
ui/scss/themes/dark.scss
View file

@ -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;

34
ui/scss/themes/light.scss
View file

@ -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;