Rework background gradient colors
global.css, subpanel.module.css, index.module.css, index.tsx, EntityOptions.tsx, Graph.tsx, index.tsx, and LandingPage.tsx
This commit is contained in:
@@ -54,7 +54,7 @@ button {
|
||||
html {
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
|
||||
background-image: radial-gradient(49% 81% at 45% 47%, #0048ffcb 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #151a3eaa 1%, #0015ffcb 99%),radial-gradient(142% 91% at 83% 7%, #0d8d8f 1%, #2b00ffda 99%),radial-gradient(142% 91% at -6% 74%, #002aff70 1%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #0040ff 25%, #452296 95%);
|
||||
background-image: radial-gradient(49% 81% at 45% 47%, #0048ffcb 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #001547fa 1%, #1100a7cb 99%),radial-gradient(142% 91% at 83% 7%, #8f1a0dd6 1%, #005f46da 99%),radial-gradient(142% 91% at -6% 74%, #002aff70 1%, #a81010c1 99%),radial-gradient(142% 91% at 111% 84%, #0040ff 25%, #452296 95%);
|
||||
}
|
||||
|
||||
/* https://gradienta.io/editor */
|
||||
@@ -92,13 +92,13 @@ figcaption {
|
||||
Works on Chrome, Edge, and Safari
|
||||
*/
|
||||
*::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
width: 10px;
|
||||
border-radius: none;
|
||||
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
background: #19233433;
|
||||
width: 7px;
|
||||
width: 10px;
|
||||
border-radius: none;
|
||||
|
||||
}
|
||||
@@ -108,7 +108,7 @@ figcaption {
|
||||
border-right: 9px solid #1b243a84;
|
||||
}
|
||||
* {
|
||||
scrollbar-width: 7px;
|
||||
scrollbar-width: 10px;
|
||||
scrollbar-color: #1d222f62 #202d4333;
|
||||
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
@apply text-sm px-1 font-medium font-display leading-3 text-slate-600 focus:outline-none cursor-pointer
|
||||
}
|
||||
.subpanel-header svg {
|
||||
@apply h-5 w-5 mr-2 hover:rotate-3 origin-center text-slate-600 ml-auto transform focus:outline-none cursor-pointer
|
||||
@apply h-5 w-5 mr-1 hover:rotate-3 origin-center text-slate-600 ml-auto transform focus:outline-none cursor-pointer
|
||||
}
|
||||
.subpanel-header:hover svg {
|
||||
@apply border-primary-300/40
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
.subpanel-link {
|
||||
@apply mt-1 focus:outline-none bg-transparent border rounded-md border-transparent
|
||||
@apply mt-1.5 focus:outline-none bg-transparent border rounded-md border-transparent
|
||||
hover:ring-slate-700/20 hover:to-mirage-400/30 shadow hover:bg-gradient-to-tl from-10% hover:translate-x-px z-50 transition-transform hover:from-mirage-400/10 text-slate-400 hover:text-slate-400/20 focus:text-slate-400/40 w-full flex items-center -translate-x-px
|
||||
}
|
||||
|
||||
|
||||
@@ -52,6 +52,6 @@
|
||||
@apply -translate-x-[97px] scale-x-[106%] cursor-pointer
|
||||
}
|
||||
.tab-panel {
|
||||
@apply w-full relative overflow-y-scroll;
|
||||
@apply w-full relative ;
|
||||
}
|
||||
|
||||
|
||||
@@ -142,7 +142,7 @@ export default function DashboardPage() {
|
||||
</Tab>
|
||||
<div className={styles["tab-slider"]}></div>
|
||||
</Tab.List>
|
||||
<section className="h-full overflow-y-scroll mb-20 px-2.5 -mr-1">
|
||||
<section className="h-full overflow-y-scroll px-2 ">
|
||||
<Tab.Panel className={styles["tab-panel"]}>
|
||||
<GraphPanel
|
||||
refetchGraphs={async () => await refetchGraphs()}
|
||||
|
||||
@@ -196,7 +196,7 @@ export default function EntityOptions({ positionMode, activeGraph, setElkLayout,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className=' overflow-hidden rounded-md z-10 border border-mirage-400/70 from-mirage-500/95 to-mirage-500/90 bg-gradient-to-br flex flex-col h-min'
|
||||
className=' overflow-hidden rounded-md z-10 border border-mirage-400/70 from-mirage-500/80 to-slate-900/90 bg-gradient-to-br flex flex-col h-min'
|
||||
key='entities'
|
||||
id='node-options-tour'
|
||||
>
|
||||
|
||||
@@ -198,7 +198,7 @@ export default function Graph({
|
||||
connectionLineComponent={NewConnectionLine}
|
||||
elevateNodesOnSelect={true}
|
||||
>
|
||||
<Background size={2} variant={BackgroundVariant.Dots} className='bg-transparent' color='#35426FAA' />
|
||||
<Background size={2} variant={BackgroundVariant.Dots} className='bg-transparent' color='#35426F' />
|
||||
</ReactFlow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -402,7 +402,7 @@ export default function GraphInquiry({ }: GraphInquiryProps) {
|
||||
activeGraph={activeGraph}
|
||||
setElkLayout={setElkLayout}
|
||||
/>
|
||||
<div className='h-full w-full justify-between bg-mirage-500/70'>
|
||||
<div className='h-full w-full justify-between bg-mirage-600/50'>
|
||||
<div style={{ width: '100%', height: '100vh' }} ref={graphRef}>
|
||||
<Graph
|
||||
onSelectionCtxMenu={onSelectionCtxMenu}
|
||||
|
||||
@@ -19,7 +19,7 @@ export default function LandingPage(): React.ReactElement {
|
||||
rotateSpeed: 0.0005,
|
||||
pointColor: 0x242E4D,
|
||||
pointHighlight: 0x394778,
|
||||
fogColor: 0x0d628f,
|
||||
fogColor: 0x005f46,
|
||||
lineHighlightSize: 10,
|
||||
minLineSpacing: 30,
|
||||
maxLineSpacing: 1000,
|
||||
@@ -49,11 +49,11 @@ export default function LandingPage(): React.ReactElement {
|
||||
<div className='mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 lg:max-w-8xl lg:grid-cols-2 '>
|
||||
<div className='relative px- sm:px-3 z-10 md:text-center lg:text-left'>
|
||||
<div className='relative pb-12'>
|
||||
<p className='inline bg-gradient-to-r from-primary-300 via-primary-200 to-primary-400/90 bg-clip-text text-5xl font-display font-medium tracking-tight text-transparent'>
|
||||
Elevate Your Research;<br /> Unlock the Webs Wisdom
|
||||
<p className='inline bg-gradient-to-r from-primary-300 via-primary-200 to-primary-400/90 bg-clip-text text-4xl font-display font-medium tracking-tight text-transparent'>
|
||||
Elevate your Research with<br /> Strategic Insights from Public Data
|
||||
</p>
|
||||
<p className=' text-lg tracking-tight text-slate-400'>
|
||||
Stay informed with targeted insights from public data. We're on a mission to democratize access to open source intelligence. Let's reveal the connections that shape our world.
|
||||
<p className='pt-1 text-lg tracking-tight text-slate-400'>
|
||||
Reveal the connections that shape our world and stay informed with targeted insights from public data. We're on a mission to democratize access to open source intelligence and analytics.
|
||||
</p>
|
||||
<div className='mt-5 lg:mt-4 flex gap-4 md:justify-center lg:justify-start'>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user