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

bring in styles #7542

Merged
jessopb merged 21 commits from odystyles into master 2022-04-17 19:04:57 +02:00
Conversation 0 Commits 21 Files changed 136 +5 -576
15 changed files with 5 additions and 576 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit de9e56899f - Show all commits

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

@ -1,6 +1,5 @@
// @flow // @flow
import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from '@reach/combobox'; import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from '@reach/combobox';
// import '@reach/combobox/styles.css'; --> 'scss/third-party.scss'
import { matchSorter } from 'match-sorter'; import { matchSorter } from 'match-sorter';
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';

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

@ -212,7 +212,6 @@ function ChannelForm(props: Props) {
function handleSubmit() { function handleSubmit() {
if (uri) { if (uri) {
console.log('Params A: ', params);
updateChannel(params).then((success) => { updateChannel(params).then((success) => {
if (success) { if (success) {
onDone(); onDone();
@ -270,7 +269,6 @@ function ChannelForm(props: Props) {
} }
// TODO clear and bail after submit // TODO clear and bail after submit
// <div className={classnames('main--contained', { 'card--disabled': disabled })}></div>
return ( return (
<> <>
<div className={classnames({ 'card--disabled': disabled })}> <div className={classnames({ 'card--disabled': disabled })}>

15
ui/component/channelStakedIndicator/view.jsx
View file

@ -28,20 +28,8 @@ function getChannelIcon(level: number): string {
return icons[level] || ICONS.CHANNEL_LEVEL_1; return icons[level] || ICONS.CHANNEL_LEVEL_1;
} }
// function getChannelIconB(level: number): string {
// const icons = {
// '1': ICONS.CHANNEL_LEVEL_1_B,
// '2': ICONS.CHANNEL_LEVEL_2_B,
// '3': ICONS.CHANNEL_LEVEL_3_B,
// '4': ICONS.CHANNEL_LEVEL_4_B,
// '5': ICONS.CHANNEL_LEVEL_5_B,
// };
//
// return icons[level] || ICONS.CHANNEL_LEVEL_1_B;
// }
function ChannelStakedIndicator(props: Props) { function ChannelStakedIndicator(props: Props) {
const { channelClaim, amount, level, large = false, inline = false, hideTooltip = false } = props; const { channelClaim, amount, level, large = false, inline = false, hideTooltip } = props;
if (!channelClaim || !channelClaim.meta) { if (!channelClaim || !channelClaim.meta) {
return null; return null;
@ -49,7 +37,6 @@ function ChannelStakedIndicator(props: Props) {
const isControlling = channelClaim && channelClaim.meta.is_controlling; const isControlling = channelClaim && channelClaim.meta.is_controlling;
const icon = getChannelIcon(level); const icon = getChannelIcon(level);
// const icon_b = getChannelIconB(level);
if (!hideTooltip) { if (!hideTooltip) {
return ( return (

21
ui/component/claimTilesDiscover/view.jsx
View file

@ -4,27 +4,6 @@ import React from 'react';
import ClaimPreviewTile from 'component/claimPreviewTile'; import ClaimPreviewTile from 'component/claimPreviewTile';
import useFetchViewCount from 'effects/use-fetch-view-count'; import useFetchViewCount from 'effects/use-fetch-view-count';
// type SearchOptions = {
// page_size: number,
// page: number,
// no_totals: boolean,
// any_tags: Array<string>,
// channel_ids: Array<string>,
// claim_ids?: Array<string>,
// not_channel_ids: Array<string>,
// not_tags: Array<string>,
// order_by: Array<string>,
// languages?: Array<string>,
// release_time?: string,
// claim_type?: string | Array<string>,
// timestamp?: string,
// fee_amount?: string,
// limit_claims_per_channel?: number,
// stream_types?: Array<string>,
// has_source?: boolean,
// has_no_source?: boolean,
// };
function urisEqual(prev: ?Array<string>, next: ?Array<string>) { function urisEqual(prev: ?Array<string>, next: ?Array<string>) {
if (!prev || !next) { if (!prev || !next) {
// ClaimList: "null" and "undefined" have special meaning, // ClaimList: "null" and "undefined" have special meaning,

6
ui/component/colorPicker/index.js
View file

@ -1,6 +0,0 @@
import { connect } from 'react-redux';
import ColorPicker from './view';
const select = (state) => ({});
export default connect(select)(ColorPicker);

63
ui/component/colorPicker/view.jsx
View file

@ -1,63 +0,0 @@
// @flow
'use strict';
import React, { useState } from 'react';
import reactCSS from 'reactcss';
import { SketchPicker } from 'react-color';
import classNames from 'classnames';
import { changeColor, getPrimaryColor } from 'util/theme';
type Props = {
disabled?: boolean,
};
function ColorPicker(props: Props) {
const { disabled } = props;
const [displayColorPicker, toggleDisplayColorPicker] = useState(false);
let dynamic = getPrimaryColor();
var rgb = dynamic.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i);
var hex = rgb
? (rgb[1] | (1 << 8)).toString(16).slice(1) +
(rgb[2] | (1 << 8)).toString(16).slice(1) +
(rgb[3] | (1 << 8)).toString(16).slice(1)
: dynamic;
const [color, setColor] = useState({
hex: '#' + hex,
rgb: { r: parseInt(rgb[1]), g: parseInt(rgb[2]), b: parseInt(rgb[3]), a: 1 },
});
const styles = reactCSS({
default: {
color: {
background: `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`,
},
},
});
function handleChange(color) {
console.log('Color: ', color);
changeColor(color.rgb);
setColor(color);
}
return (
<div
className={classNames('color-picker', {
disabled: disabled,
})}
>
<input value={color.hex} />
<div className="swatch" onClick={() => toggleDisplayColorPicker(!displayColorPicker)}>
<div className="color" style={styles.color} />
</div>
{displayColorPicker ? (
<div className="popover">
<div className="cover" onClick={() => toggleDisplayColorPicker(false)} />
<SketchPicker color={color} onChange={handleChange} disableAlpha />
</div>
) : null}
</div>
);
}
export default ColorPicker;

12
ui/page/elements/index.js
View file

@ -1,12 +0,0 @@
import { connect } from 'react-redux';
import { selectTotalBalance } from 'redux/selectors/wallet';
import { doOpenModal } from 'redux/actions/app';
import Elements from './view';
const select = (state) => ({
totalBalance: selectTotalBalance(state),
});
export default connect(select, {
doOpenModal,
})(Elements);

42
ui/page/elements/view.jsx
View file

@ -1,42 +0,0 @@
// @flow
import React from 'react';
import { useHistory } from 'react-router';
import TxoList from 'component/txoList';
import Page from 'component/page';
import WalletBalance from 'component/walletBalance';
import ClaimList from 'component/claimList';
type Props = {
history: { action: string, push: (string) => void, replace: (string) => void },
location: { search: string, pathname: string },
};
const Elements = (props: Props) => {
const {
location: { search },
} = useHistory();
return (
<Page>
<div className="card-stack">
<label>claims</label>
<ClaimList uris={'lbry://@Odysee#8/Odysee-Android-App#1'} showUnresolvedClaims showHiddenByUser hideMenu />
<ClaimList
uris={'lbry://@Odysee#8/Odysee-Android-App#1'}
showUnresolvedClaims
showHiddenByUser
hideMenu
tileLayout
/>
<label>channels</label>
<ClaimList uris={'lbry://@Odysee#8'} showUnresolvedClaims showHiddenByUser hideMenu />
<ClaimList uris={'lbry://@Odysee#8'} showUnresolvedClaims showHiddenByUser hideMenu tileLayout />
<WalletBalance />
<TxoList search={search} />
</div>
</Page>
);
};
export default Elements;

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

@ -408,215 +408,6 @@ a.button--alt {
background-color: var(--color-header-background) !important; background-color: var(--color-header-background) !important;
} }
//.button--fire {
// position: relative;
// .button__content {
// .button__label {
// color: var(--color-fire) !important;
// }
// }
// path {
// stroke: var(--color-fire-outside);
// }
//}
//.button__fire-particle {
// position: absolute;
// top: 60%;
// left: 20%;
// width: 2px;
// height: 2px;
// background-color: #ef5a00;
// border-radius: 50%;
// filter: drop-shadow(0 0 10px #d43322);
// animation-iteration-count: 2;
// animation-fill-mode: both;
//}
//
//.button__fire-glow {
// width: 1px;
// height: 1px;
// left: var(--spacing-s);
// bottom: var(--spacing-m);
// position: absolute;
// box-shadow: 4px 0px 10px 10px var(--color-glow);
// animation: glowDecay 2.5s ease-out;
// opacity: 0;
//}
//
//.button__fire-particle1 {
// @extend .button__fire-particle;
// right: 10%;
// top: 40%;
// animation: particleUp 1.5s ease-out 0;
// animation-iteration-count: 2;
// animation-fill-mode: both;
//}
//.button__fire-particle2 {
// @extend .button__fire-particle;
// animation: particleUp2 2s ease-out 0;
// animation-iteration-count: 2;
// animation-fill-mode: both;
//}
//.button__fire-particle3 {
// @extend .button__fire-particle;
// animation: particleUp3 2.2s ease-out 0;
// animation-iteration-count: 2;
// animation-fill-mode: both;
//}
//.button__fire-particle4 {
// @extend .button__fire-particle1;
// animation-delay: 0.5s;
//}
//.button__fire-particle5 {
// @extend .button__fire-particle2;
// animation-delay: 0.75s;
//}
//.button__fire-particle6 {
// @extend .button__fire-particle3;
// animation-delay: 0.25s;
//}
//
//@keyframes glowDecay {
// 0% {
// opacity: 1;
// }
//
// 100% {
// opacity: 0;
// }
//}
//
//@keyframes particleUp {
// 0% {
// opacity: 0;
// left: 0;
// }
// 20% {
// opacity: 1;
// right: 10%;
// }
//
// 50% {
// right: 20%;
// }
//
// 50% {
// left: 10%;
// }
// 80% {
// opacity: 1;
// right: 40%;
// }
// 100% {
// opacity: 0;
// top: -50%;
// transform: scale(0.5);
// }
//}
//
//@keyframes particleUp2 {
// 0% {
// opacity: 0;
// right: 0;
// }
// 20% {
// opacity: 1;
// left: 10%;
// }
//
// 50% {
// left: 20%;
// }
//
// 50% {
// right: 10%;
// }
// 80% {
// opacity: 1;
// left: 40%;
// }
// 100% {
// opacity: 0;
// top: -50%;
// transform: scale(0.5);
// }
//}
//
//@keyframes particleUp3 {
// 0% {
// opacity: 0;
// left: 30%;
// }
// 20% {
// opacity: 1;
// left: 60%;
// }
//
// 40% {
// left: 50%;
// }
//
// 80% {
// opacity: 1;
// right: 80%;
// }
// 100% {
// opacity: 0;
// top: -50%;
// transform: scale(0.5);
// }
//}
//
//.button--slime {
// .button__content {
// .button__label {
// //color: var(--color-slime) !important;
// }
// }
//}
//
//.button__slime-drop {
// position: absolute;
// top: 60%;
// left: 15%;
// width: 5px;
// height: 5px;
// background-color: #81c554;
// border-radius: 50%;
// filter: drop-shadow(0 0 10px #d43322);
// animation-iteration-count: 2;
// animation-fill-mode: both;
//}
//
//.button__slime-drop1 {
// @extend .button__slime-drop;
// top: 40%;
// animation: dropDown 1.5s ease-out 0;
// animation-iteration-count: 1;
// animation-fill-mode: both;
//}
//
//.button__slime-drop2 {
// @extend .button__slime-drop;
// left: 35%;
// top: 40%;
// animation: dropDown2 1.5s ease-out 0;
// animation-iteration-count: 1;
// animation-fill-mode: both;
//}
//
//.button__slime-stain {
// width: 1px;
// height: 1px;
// left: var(--spacing-s);
// bottom: var(--spacing-m);
// position: absolute;
// box-shadow: 4px 0px 10px 10px var(--color-slime);
// animation: glowDecay 2.5s ease-out;
// opacity: 0;
//}
@keyframes dropDown { @keyframes dropDown {
0% { 0% {
opacity: 1; opacity: 1;
@ -709,14 +500,6 @@ svg + .button__label {
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);
} }
// why?
//&:nth-child(2),
//&:nth-child(3),
//&:nth-child(4),
//&:nth-child(5) {
// // margin-left: 2px;
//}
&:last-of-type { &:last-of-type {
border-top-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius);
@ -909,28 +692,6 @@ svg + .button__label {
transition: transform 0.2s; transition: transform 0.2s;
margin-right: var(--spacing-s) !important; margin-right: var(--spacing-s) !important;
} }
//
//.button-like {
// &:hover {
// .button__label {
// color: var(--color-fire) !important;
// }
// .icon {
// stroke: var(--color-fire) !important;
// }
// }
// &:focus-visible {
// box-shadow: 0px 0px 0px 2px var(--color-fire) inset !important;
// .button__content {
// .button__label {
// color: var(--color-fire) !important;
// }
// .icon {
// stroke: var(--color-fire) !important;
// }
// }
// }
//}
.button-like.comment__action--active { .button-like.comment__action--active {
.comment__reaction-count { .comment__reaction-count {
@ -938,28 +699,6 @@ svg + .button__label {
} }
} }
//.button-dislike {
// &:hover {
// .button__label {
// color: var(--color-slime) !important;
// }
// .icon {
// //stroke: var(--color-slime) !important;
// }
// }
// &:focus-visible {
// box-shadow: 0px 0px 0px 2px var(--color-slime) inset !important;
// .button__content {
// .button__label {
// //color: var(--color-slime) !important;
// }
// .icon {
// //stroke: var(--color-slime) !important;
// }
// }
// }
//}
.button-dislike.comment__action--active { .button-dislike.comment__action--active {
.comment__reaction-count { .comment__reaction-count {
color: var(--color-slime); color: var(--color-slime);

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

@ -247,28 +247,6 @@ $thumbnailWidthSmall: 1rem;
} }
} }
//.comment__badge {
// padding-right: var(--spacing-xxs);
//
// .icon {
// margin-bottom: -3px;
// }
//}
//
//.comment__badge--global-mod {
// .st0 {
// // @see: ICONS.BADGE_MOD
// fill: #fe7500;
// }
//}
//
//.comment__badge--mod {
// .st0 {
// // @see: ICONS.BADGE_MOD
// fill: #ff3850;
// }
//}
.comment__message { .comment__message {
word-break: break-word; word-break: break-word;
padding-right: var(--spacing-xl); padding-right: var(--spacing-xl);

23
ui/scss/component/_media.scss
View file

@ -160,29 +160,6 @@
} }
} }
// CUSTOM LIKE COLORS
//.button-like {
// &:hover {
// .button__label {
// color: var(--color-fire) !important;
// }
// svg {
// stroke: var(--color-fire);
// }
// }
//}
//
//.button-dislike {
// &:hover {
// .button__label {
// //color: var(--color-slime) !important;
// }
// svg {
// //stroke: var(--color-slime);
// }
// }
//}
.ratio-wrapper { .ratio-wrapper {
position: relative; position: relative;
width: 100%; width: 100%;

26
ui/scss/init/_base-theme.scss
View file

@ -5,9 +5,9 @@
// //
:root { :root {
// Generic colors // Generic colors
--color-primary: rgb(4, 120, 87); //4, 120,87 --color-primary: rgb(4, 120, 87);
--color-primary-alt: rgb(228, 244, 239); //6 --color-primary-alt: rgb(228, 244, 239);
--color-primary-alt-2: rgb(6, 95, 70); //6 --color-primary-alt-2: rgb(6, 95, 70);
--color-primary-alt-3: rgb(16, 185, 129); --color-primary-alt-3: rgb(16, 185, 129);
--color-secondary: rgb(30, 58, 138); --color-secondary: rgb(30, 58, 138);
--color-secondary-alt: rgb(219, 234, 254); --color-secondary-alt: rgb(219, 234, 254);
@ -49,15 +49,11 @@
// Text // Text
--color-text-selection-bg: var(--color-secondary-alt); --color-text-selection-bg: var(--color-secondary-alt);
//--color-text-selection-bg: var(--color-primary);
--color-text-selection: var(--color-secondary); --color-text-selection: var(--color-secondary);
--color-text-empty: #999999; --color-text-empty: #999999;
--color-text-help: #999999; --color-text-help: #999999;
--color-text-subtitle: #767676; --color-text-subtitle: #767676;
--color-text-warning: #212529; --color-text-warning: #212529;
//--color-help-warning-bg: #fef3c7;
//--color-help-warning-text: #555555;
//--color-text-warning--background: var(--lbry-yellow-1);
--color-blockquote: var(--color-gray-3); --color-blockquote: var(--color-gray-3);
--color-text-error: var(--color-danger); --color-text-error: var(--color-danger);
--color-error: var(--color-danger-alt); --color-error: var(--color-danger-alt);
@ -67,9 +63,6 @@
// Header // Header
--color-header-background: #ffffff; --color-header-background: #ffffff;
--color-header-button: var(--color-button-alt-bg); --color-header-button: var(--color-button-alt-bg);
--color-header-button-active: var(--color-primary);
//--color-header-button-hover: var(--color-primary);
--color-header-button-hover: rgba(var(--color-primary-static), 1);
--color-header-button-active: var(--color-primary-alt); --color-header-button-active: var(--color-primary-alt);
--color-header-button-hover: var(--color-primary-alt); --color-header-button-hover: var(--color-primary-alt);
@ -88,7 +81,6 @@
--color-button-toggle-text: var(--color-primary); --color-button-toggle-text: var(--color-primary);
--color-button-toggle-bg: var(--color-primary-alt); --color-button-toggle-bg: var(--color-primary-alt);
--color-button-toggle-bg-active: var(--color-navigation-link); --color-button-toggle-bg-active: var(--color-navigation-link);
//--color-button-toggle-bg: var(--color-secondary);
--color-button-border: var(--color-gray-3); --color-button-border: var(--color-gray-3);
--color-link: var(--color-primary); --color-link: var(--color-primary);
--color-link-hover: var(--color-black); --color-link-hover: var(--color-black);
@ -100,7 +92,6 @@
--color-input-placeholder: var(--color-gray-8); --color-input-placeholder: var(--color-gray-8);
--color-input-bg: var(--color-gray-1); --color-input-bg: var(--color-gray-1);
--color-input-border: var(--color-border); --color-input-border: var(--color-border);
--color-input-bg: var(--color-gray-1);
--color-input-border-active: var(--color-secondary); --color-input-border-active: var(--color-secondary);
--color-input-toggle: var(--color-secondary); --color-input-toggle: var(--color-secondary);
--color-input-toggle-bg: var(--color-gray-1); --color-input-toggle-bg: var(--color-gray-1);
@ -108,14 +99,12 @@
--color-input-prefix-bg: var(--color-gray-2); --color-input-prefix-bg: var(--color-gray-2);
--color-input-prefix-border: var(--color-gray-5); --color-input-prefix-border: var(--color-gray-5);
--color-input-bg-selected: var(--color-primary-alt); --color-input-bg-selected: var(--color-primary-alt);
//--color-input-bg-selected: var(--color-secondary);
--select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A"); --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
// Navigation // Navigation
--color-navigation-icon: var(--color-gray-5); --color-navigation-icon: var(--color-gray-5);
--color-navigation-link: var(--color-gray-5); --color-navigation-link: var(--color-gray-5);
--color-navigation-active: var(--color-primary-alt); --color-navigation-active: var(--color-primary-alt);
//--color-navigation-active: var(--color-secondary);
--color-navigation-active-text: var(--color-primary); --color-navigation-active-text: var(--color-primary);
--color-navigation-hover: var(--color-gray-1); --color-navigation-hover: var(--color-gray-1);
--color-navigation-hover-text: var(--color-primary); --color-navigation-hover-text: var(--color-primary);
@ -124,14 +113,9 @@
--color-tag: var(--color-gray-5); --color-tag: var(--color-gray-5);
--color-tag-bg: var(--color-button-alt-bg); --color-tag-bg: var(--color-button-alt-bg);
--color-tag-hover: var(--color-primary-alt); --color-tag-hover: var(--color-primary-alt);
//--color-tag-hover: var(--color-secondary);
--color-tag-bg-hover: var(--color-button-primary-bg); --color-tag-bg-hover: var(--color-button-primary-bg);
// Tags (words) // Tags (words)
//--color-tag-words: var(--color-primary);
//--color-tag-words-bg: var(--color-primary-alt);
//--color-tag-words-hover: var(--color-primary);
//--color-tag-words-bg-hover: var(--color-primary-alt-3);
--color-tag-words: var(--color-primary); --color-tag-words: var(--color-primary);
--color-tag-words-bg: var(--color-secondary); --color-tag-words-bg: var(--color-secondary);
--color-tag-words-hover: var(--color-primary); --color-tag-words-hover: var(--color-primary);
@ -151,13 +135,10 @@
--color-comment-threadline-hover: var(--color-gray-4); --color-comment-threadline-hover: var(--color-gray-4);
// Icons // Icons
//--color-follow-bg: #ffd4da;
--color-follow-bg: var(--color-header-background); --color-follow-bg: var(--color-header-background);
--color-follow-icon: #e2495e; --color-follow-icon: #e2495e;
--color-view-bg: var(--color-header-background); --color-view-bg: var(--color-header-background);
--color-view-icon: #0f9f11; --color-view-icon: #0f9f11;
//--color-view-bg: var(--color-secondary-alt);
//--color-view-icon: var(--color-secondary);
// Snack // Snack
--color-snack-bg: var(--color-primary); --color-snack-bg: var(--color-primary);
@ -208,7 +189,6 @@
--color-tabs-background: var(--color-card-background); --color-tabs-background: var(--color-card-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-card-background);
//--color-login-graphic-background: var(--color-primary-alt);
--color-login-graphic-background: var(--color-secondary); --color-login-graphic-background: var(--color-secondary);
// Ads // Ads

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

@ -51,7 +51,7 @@
--color-tag-words-hover: var(--color-white); --color-tag-words-hover: var(--color-white);
--color-tag-words-bg-hover: var(--color-gray-4); --color-tag-words-bg-hover: var(--color-gray-4);
// Buttons ================ // Buttons
// pri // pri
--color-button-primary-text-hover: white; --color-button-primary-text-hover: white;
--color-button-primary-background: var(--color-background); --color-button-primary-background: var(--color-background);
@ -115,12 +115,6 @@
--color-navigation-hover: red; --color-navigation-hover: red;
--color-navigation-hover-text: var(--color-primary); --color-navigation-hover-text: var(--color-primary);
// Tags
//--color-tag: var(--color-primary-alt-3);
//--color-tag-bg: var(--color-gray-7);
//--color-tag-hover: var(--color-white);
//--color-tag-bg-hover: var(--color-primary-alt);
// ->
// Tags // Tags
--color-tag: var(--color-secondary-contrast); --color-tag: var(--color-secondary-contrast);
--color-tag-bg: var(--color-secondary); --color-tag-bg: var(--color-secondary);
@ -176,7 +170,6 @@
--color-placeholder-background: var(--color-header-background); --color-placeholder-background: var(--color-header-background);
--color-spinner-light: white; --color-spinner-light: white;
--color-spinner-dark: #212529; --color-spinner-dark: #212529;
--color-login-graphic-background: var(--color-background);
// Editor // Editor
--color-editor-cursor: var(--color-text); --color-editor-cursor: var(--color-text);

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

@ -9,10 +9,8 @@
--color-primary-contrast-static: #ffffff; --color-primary-contrast-static: #ffffff;
--color-primary-contrast: #ffffff; --color-primary-contrast: #ffffff;
--color-primary-text-hover: #ffffff; --color-primary-text-hover: #ffffff;
--color-primary-bg: var(--color-primary); --color-primary-bg: var(--color-primary);
--color-primary-text: var(--color-gray-9); --color-primary-text: var(--color-gray-9);
--color-brand-blue: rgb(49, 135, 148); --color-brand-blue: rgb(49, 135, 148);
--color-brand-contrast: var(--color-primary-contrast-static); --color-brand-contrast: var(--color-primary-contrast-static);
--color-brand: var(--color-primary-static); --color-brand: var(--color-primary-static);
@ -29,10 +27,6 @@
--color-secondary-dynamic: var(--color-secondary); --color-secondary-dynamic: var(--color-secondary);
--color-secondary-contrast-static: #ffffff; --color-secondary-contrast-static: #ffffff;
--color-secondary-contrast: #ffffff; --color-secondary-contrast: #ffffff;
//--color-fire: #d62912;
--color-fire: #c91800;
--color-fire-outside: #ff9b20;
--color-slime: #7bc45e;
//Structure //Structure
--color-border: #ededed; --color-border: #ededed;
@ -72,7 +66,6 @@
// sec // sec
--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-secondary-alt-2);
--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-card-background);
--color-button-secondary-text-hover: var(--color-primary); --color-button-secondary-text-hover: var(--color-primary);
@ -91,7 +84,6 @@
--color-link: var(--color-primary-alt-2); --color-link: var(--color-primary-alt-2);
--color-button-alt-text-hover: var(--color-text); --color-button-alt-text-hover: var(--color-text);
--color-link-hover: var(--color-primary); --color-link-hover: var(--color-primary);
// nav
// Input // Input
--color-input-bg-selected: var(--color-primary-alt); --color-input-bg-selected: var(--color-primary-alt);
@ -193,8 +185,6 @@
--color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2); --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
--color-scrollbar-track-bg: transparent; --color-scrollbar-track-bg: transparent;
/////
// Structure // Structure
--color-border: rgba(0, 0, 0, 0.2); --color-border: rgba(0, 0, 0, 0.2);
--color-background-base: 231, 231, 231; --color-background-base: 231, 231, 231;

68
ui/util/theme.js
View file

@ -1,68 +0,0 @@
export function changeColor(rgb) {
setPrimaryColor(rgb);
setSecondaryColor(rgb);
}
export function getPrimaryColor() {
return getComputedStyle(document.documentElement).getPropertyValue('--color-primary');
}
export function resetColors(odysee = false) {
if (odysee) {
document.documentElement !== null &&
document.documentElement.style.setProperty('--color-primary-dynamic', 'var(--color-primary-static)');
document.documentElement !== null &&
document.documentElement.style.setProperty('--color-primary-contrast', 'var(--color-primary-contrast-static)');
document.documentElement !== null &&
document.documentElement.style.setProperty('--color-secondary-dynamic', 'var(--color-secondary-static)');
document.documentElement !== null &&
document.documentElement.style.setProperty(
'--color-secondary-contrast',
'var(--color-secondary-contrast-static)'
);
document.documentElement !== null &&
document.documentElement.style.setProperty('--color-link', 'var(--color-primary)');
}
}
function setPrimaryColor(rgb) {
document.documentElement !== null &&
document.documentElement.style.setProperty('--color-primary-dynamic', rgb.r + ',' + rgb.g + ',' + rgb.b);
document.documentElement !== null &&
document.documentElement.style.setProperty(
'--color-primary-contrast',
getBrightness(rgb) > 155 ? 'black' : 'white'
);
}
function setSecondaryColor(rgb) {
var threshold = 155;
if (document.documentElement !== null) {
threshold = getComputedStyle(document.documentElement).getPropertyValue('--color-text') === ' #000000' ? 70 : 155;
}
rgb = colorMixer(rgb, getBrightness(rgb) > threshold ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 }, 0.6);
document.documentElement !== null &&
document.documentElement.style.setProperty('--color-secondary-dynamic', rgb.r + ',' + rgb.g + ',' + rgb.b);
document.documentElement !== null &&
document.documentElement.style.setProperty(
'--color-secondary-contrast',
getBrightness(rgb) > 155 ? 'black' : 'white'
);
}
function getBrightness(rgb) {
return Math.round((parseInt(rgb.r) * 299 + parseInt(rgb.g) * 587 + parseInt(rgb.b) * 114) / 1000);
}
function colorMixer(rgbA, rgbB, mix) {
let r = colorChannelMixer(rgbA.r, rgbB.r, mix);
let g = colorChannelMixer(rgbA.g, rgbB.g, mix);
let b = colorChannelMixer(rgbA.b, rgbB.b, mix);
return { r: r, g: g, b: b };
}
function colorChannelMixer(a, b, mix) {
let channelA = a * mix;
let channelB = b * (1 - mix);
return parseInt(channelA + channelB);
}