bring in styles #7542
15 changed files with 5 additions and 576 deletions
|
|
@ -1,6 +1,5 @@
|
|||
// @flow
|
||||
import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from '@reach/combobox';
|
||||
// import '@reach/combobox/styles.css'; --> 'scss/third-party.scss'
|
||||
import { matchSorter } from 'match-sorter';
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
|
|
|||
|
|
@ -212,7 +212,6 @@ function ChannelForm(props: Props) {
|
|||
|
||||
function handleSubmit() {
|
||||
if (uri) {
|
||||
console.log('Params A: ', params);
|
||||
updateChannel(params).then((success) => {
|
||||
if (success) {
|
||||
onDone();
|
||||
|
|
@ -270,7 +269,6 @@ function ChannelForm(props: Props) {
|
|||
}
|
||||
|
||||
// TODO clear and bail after submit
|
||||
// <div className={classnames('main--contained', { 'card--disabled': disabled })}></div>
|
||||
return (
|
||||
<>
|
||||
<div className={classnames({ 'card--disabled': disabled })}>
|
||||
|
|
|
|||
|
|
@ -28,20 +28,8 @@ function getChannelIcon(level: number): string {
|
|||
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) {
|
||||
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) {
|
||||
return null;
|
||||
|
|
@ -49,7 +37,6 @@ function ChannelStakedIndicator(props: Props) {
|
|||
|
||||
const isControlling = channelClaim && channelClaim.meta.is_controlling;
|
||||
const icon = getChannelIcon(level);
|
||||
// const icon_b = getChannelIconB(level);
|
||||
|
||||
if (!hideTooltip) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -4,27 +4,6 @@ import React from 'react';
|
|||
import ClaimPreviewTile from 'component/claimPreviewTile';
|
||||
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>) {
|
||||
if (!prev || !next) {
|
||||
// ClaimList: "null" and "undefined" have special meaning,
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
import { connect } from 'react-redux';
|
||||
import ColorPicker from './view';
|
||||
|
||||
const select = (state) => ({});
|
||||
|
||||
export default connect(select)(ColorPicker);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -408,215 +408,6 @@ a.button--alt {
|
|||
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 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
|
@ -709,14 +500,6 @@ svg + .button__label {
|
|||
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 {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
|
|
@ -909,28 +692,6 @@ svg + .button__label {
|
|||
transition: transform 0.2s;
|
||||
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 {
|
||||
.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 {
|
||||
.comment__reaction-count {
|
||||
color: var(--color-slime);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
word-break: break-word;
|
||||
padding-right: var(--spacing-xl);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
//
|
||||
:root {
|
||||
// Generic colors
|
||||
--color-primary: rgb(4, 120, 87); //4, 120,87
|
||||
--color-primary-alt: rgb(228, 244, 239); //6
|
||||
--color-primary-alt-2: rgb(6, 95, 70); //6
|
||||
--color-primary: rgb(4, 120, 87);
|
||||
--color-primary-alt: rgb(228, 244, 239);
|
||||
--color-primary-alt-2: rgb(6, 95, 70);
|
||||
--color-primary-alt-3: rgb(16, 185, 129);
|
||||
--color-secondary: rgb(30, 58, 138);
|
||||
--color-secondary-alt: rgb(219, 234, 254);
|
||||
|
|
@ -49,15 +49,11 @@
|
|||
|
||||
// Text
|
||||
--color-text-selection-bg: var(--color-secondary-alt);
|
||||
//--color-text-selection-bg: var(--color-primary);
|
||||
--color-text-selection: var(--color-secondary);
|
||||
--color-text-empty: #999999;
|
||||
--color-text-help: #999999;
|
||||
--color-text-subtitle: #767676;
|
||||
--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-text-error: var(--color-danger);
|
||||
--color-error: var(--color-danger-alt);
|
||||
|
|
@ -67,9 +63,6 @@
|
|||
// Header
|
||||
--color-header-background: #ffffff;
|
||||
--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-hover: var(--color-primary-alt);
|
||||
|
||||
|
|
@ -88,7 +81,6 @@
|
|||
--color-button-toggle-text: var(--color-primary);
|
||||
--color-button-toggle-bg: var(--color-primary-alt);
|
||||
--color-button-toggle-bg-active: var(--color-navigation-link);
|
||||
//--color-button-toggle-bg: var(--color-secondary);
|
||||
--color-button-border: var(--color-gray-3);
|
||||
--color-link: var(--color-primary);
|
||||
--color-link-hover: var(--color-black);
|
||||
|
|
@ -100,7 +92,6 @@
|
|||
--color-input-placeholder: var(--color-gray-8);
|
||||
--color-input-bg: var(--color-gray-1);
|
||||
--color-input-border: var(--color-border);
|
||||
--color-input-bg: var(--color-gray-1);
|
||||
--color-input-border-active: var(--color-secondary);
|
||||
--color-input-toggle: var(--color-secondary);
|
||||
--color-input-toggle-bg: var(--color-gray-1);
|
||||
|
|
@ -108,14 +99,12 @@
|
|||
--color-input-prefix-bg: var(--color-gray-2);
|
||||
--color-input-prefix-border: var(--color-gray-5);
|
||||
--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");
|
||||
|
||||
// Navigation
|
||||
--color-navigation-icon: var(--color-gray-5);
|
||||
--color-navigation-link: var(--color-gray-5);
|
||||
--color-navigation-active: var(--color-primary-alt);
|
||||
//--color-navigation-active: var(--color-secondary);
|
||||
--color-navigation-active-text: var(--color-primary);
|
||||
--color-navigation-hover: var(--color-gray-1);
|
||||
--color-navigation-hover-text: var(--color-primary);
|
||||
|
|
@ -124,14 +113,9 @@
|
|||
--color-tag: var(--color-gray-5);
|
||||
--color-tag-bg: var(--color-button-alt-bg);
|
||||
--color-tag-hover: var(--color-primary-alt);
|
||||
//--color-tag-hover: var(--color-secondary);
|
||||
--color-tag-bg-hover: var(--color-button-primary-bg);
|
||||
|
||||
// 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-bg: var(--color-secondary);
|
||||
--color-tag-words-hover: var(--color-primary);
|
||||
|
|
@ -151,13 +135,10 @@
|
|||
--color-comment-threadline-hover: var(--color-gray-4);
|
||||
|
||||
// Icons
|
||||
//--color-follow-bg: #ffd4da;
|
||||
--color-follow-bg: var(--color-header-background);
|
||||
--color-follow-icon: #e2495e;
|
||||
--color-view-bg: var(--color-header-background);
|
||||
--color-view-icon: #0f9f11;
|
||||
//--color-view-bg: var(--color-secondary-alt);
|
||||
//--color-view-icon: var(--color-secondary);
|
||||
|
||||
// Snack
|
||||
--color-snack-bg: var(--color-primary);
|
||||
|
|
@ -208,7 +189,6 @@
|
|||
--color-tabs-background: var(--color-card-background);
|
||||
--color-tab-divider: var(--color-primary);
|
||||
--color-modal-background: var(--color-card-background);
|
||||
//--color-login-graphic-background: var(--color-primary-alt);
|
||||
--color-login-graphic-background: var(--color-secondary);
|
||||
|
||||
// Ads
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
--color-tag-words-hover: var(--color-white);
|
||||
--color-tag-words-bg-hover: var(--color-gray-4);
|
||||
|
||||
// Buttons ================
|
||||
// Buttons
|
||||
// pri
|
||||
--color-button-primary-text-hover: white;
|
||||
--color-button-primary-background: var(--color-background);
|
||||
|
|
@ -115,12 +115,6 @@
|
|||
--color-navigation-hover: red;
|
||||
--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
|
||||
--color-tag: var(--color-secondary-contrast);
|
||||
--color-tag-bg: var(--color-secondary);
|
||||
|
|
@ -176,7 +170,6 @@
|
|||
--color-placeholder-background: var(--color-header-background);
|
||||
--color-spinner-light: white;
|
||||
--color-spinner-dark: #212529;
|
||||
--color-login-graphic-background: var(--color-background);
|
||||
|
||||
// Editor
|
||||
--color-editor-cursor: var(--color-text);
|
||||
|
|
|
|||
|
|
@ -9,10 +9,8 @@
|
|||
--color-primary-contrast-static: #ffffff;
|
||||
--color-primary-contrast: #ffffff;
|
||||
--color-primary-text-hover: #ffffff;
|
||||
|
||||
--color-primary-bg: var(--color-primary);
|
||||
--color-primary-text: var(--color-gray-9);
|
||||
|
||||
--color-brand-blue: rgb(49, 135, 148);
|
||||
--color-brand-contrast: var(--color-primary-contrast-static);
|
||||
--color-brand: var(--color-primary-static);
|
||||
|
|
@ -29,10 +27,6 @@
|
|||
--color-secondary-dynamic: var(--color-secondary);
|
||||
--color-secondary-contrast-static: #ffffff;
|
||||
--color-secondary-contrast: #ffffff;
|
||||
//--color-fire: #d62912;
|
||||
--color-fire: #c91800;
|
||||
--color-fire-outside: #ff9b20;
|
||||
--color-slime: #7bc45e;
|
||||
|
||||
//Structure
|
||||
--color-border: #ededed;
|
||||
|
|
@ -72,7 +66,6 @@
|
|||
// sec
|
||||
--color-button-secondary-bg: var(--color-gray-1);
|
||||
--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-bg-hover: var(--color-card-background);
|
||||
--color-button-secondary-text-hover: var(--color-primary);
|
||||
|
|
@ -91,7 +84,6 @@
|
|||
--color-link: var(--color-primary-alt-2);
|
||||
--color-button-alt-text-hover: var(--color-text);
|
||||
--color-link-hover: var(--color-primary);
|
||||
// nav
|
||||
|
||||
// Input
|
||||
--color-input-bg-selected: var(--color-primary-alt);
|
||||
|
|
@ -193,8 +185,6 @@
|
|||
--color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
|
||||
--color-scrollbar-track-bg: transparent;
|
||||
|
||||
/////
|
||||
|
||||
// Structure
|
||||
--color-border: rgba(0, 0, 0, 0.2);
|
||||
--color-background-base: 231, 231, 231;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
Loading…
Reference in a new issue