mirror of
https://github.com/voideditor/void
synced 2026-05-23 09:28:23 +00:00
add image
This commit is contained in:
parent
3bd6d08841
commit
bd580946ce
2 changed files with 65 additions and 35 deletions
|
|
@ -3,7 +3,7 @@
|
|||
* Licensed under the Apache License, Version 2.0. See LICENSE.txt for more information.
|
||||
*--------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-editor .void-sweepIdxBG {
|
||||
.monaco-editor .void-sweepIdxBG {
|
||||
background-color: var(--vscode-void-sweepIdxBG);
|
||||
}
|
||||
|
||||
|
|
@ -24,47 +24,65 @@
|
|||
}
|
||||
|
||||
.void-watermark-button {
|
||||
margin: 8px 0;
|
||||
padding: 8px 20px;
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none !important;
|
||||
margin: 8px 0;
|
||||
padding: 8px 20px;
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.void-watermark-button:hover {
|
||||
background-color: #2563eb;
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.void-watermark-button:active {
|
||||
background-color: #2563eb;
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.void-settings-watermark-button {
|
||||
margin: 8px 0;
|
||||
padding: 8px 20px;
|
||||
background-color: var(--vscode-input-background);
|
||||
margin: 8px 0;
|
||||
padding: 8px 20px;
|
||||
background-color: var(--vscode-input-background);
|
||||
color: var(--vscode-input-foreground);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none !important;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.void-settings-watermark-button:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.void-settings-watermark-button:active {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
|
||||
.void-slice-of-void-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
/* Has no shadow */
|
||||
background-image: url('../../../../../../../scripts/appimage/void.png');
|
||||
/* Has shadow */
|
||||
/* background-image: url('../../../../browser/parts/editor/media/slice_of_void.png'); */
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
.void-link {
|
||||
|
|
@ -72,6 +90,7 @@
|
|||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.void-link:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
|
|
@ -86,7 +105,8 @@
|
|||
.void-scope,
|
||||
.void-scope * {
|
||||
scrollbar-width: thin !important;
|
||||
scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important; /* For Firefox */
|
||||
scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important;
|
||||
/* For Firefox */
|
||||
}
|
||||
|
||||
.void-scope::-webkit-scrollbar,
|
||||
|
|
@ -133,13 +153,16 @@
|
|||
background-color: var(--vscode-editor-background);
|
||||
--scrollbar-vertical-width: 14px;
|
||||
--scrollbar-horizontal-height: 6px;
|
||||
overflow: auto; /* Ensure scrollbars are shown when needed */
|
||||
overflow: auto;
|
||||
/* Ensure scrollbars are shown when needed */
|
||||
}
|
||||
|
||||
.void-scrollable-element,
|
||||
.void-scrollable-element * {
|
||||
scrollbar-width: thin !important; /* For Firefox */
|
||||
scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important; /* For Firefox */
|
||||
scrollbar-width: thin !important;
|
||||
/* For Firefox */
|
||||
scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important;
|
||||
/* For Firefox */
|
||||
}
|
||||
|
||||
.void-scrollable-element::-webkit-scrollbar,
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ const NextButton = ({ onClick, ...props }: { onClick: () => void } & React.Butto
|
|||
className="px-6 py-2 bg-zinc-100 enabled:hover:bg-zinc-100 disabled:bg-zinc-100/40 disabled:cursor-not-allowed rounded text-black duration-600 transition-all"
|
||||
{...props.disabled && {
|
||||
'data-tooltip-id': 'void-tooltip',
|
||||
'data-tooltip-content': 'Disabled (Please enter all required fields or choose another provider)',
|
||||
'data-tooltip-content': 'Please enter all required fields or choose another provider',
|
||||
'data-tooltip-place': 'top',
|
||||
}}
|
||||
{...props}
|
||||
|
|
@ -389,10 +389,9 @@ const PrimaryActionButton = ({ children, className, ...props }: { children: Reac
|
|||
hover:ring-2 hover:ring-black/90 dark:hover:ring-white/90
|
||||
active:ring-2 active:ring-black/90 dark:active:ring-white/90
|
||||
|
||||
transition-all duration-300
|
||||
transition-all duration-300 ease-in-out
|
||||
|
||||
rounded-lg
|
||||
shadow-md hover:shadow-lg
|
||||
group
|
||||
"
|
||||
{...props}
|
||||
|
|
@ -400,7 +399,7 @@ const PrimaryActionButton = ({ children, className, ...props }: { children: Reac
|
|||
{children}
|
||||
<ChevronRight
|
||||
className="
|
||||
transition-all duration-300
|
||||
transition-all duration-300 ease-in-out
|
||||
|
||||
transform
|
||||
group-hover:translate-x-1
|
||||
|
|
@ -526,18 +525,26 @@ const VoidOnboardingContent = () => {
|
|||
const contentOfIdx: { [pageIndex: number]: React.ReactNode } = {
|
||||
0: <OnboardingPageShell
|
||||
content={
|
||||
<>
|
||||
<div className='flex flex-col items-center gap-8'>
|
||||
<div className="text-5xl font-light text-center">Welcome to Void</div>
|
||||
|
||||
{/* Slice of Void image */}
|
||||
<div className='max-w-md w-full h-64 mx-auto'>
|
||||
<div className="slice-of-void-image" />
|
||||
</div>
|
||||
|
||||
|
||||
<FadeIn
|
||||
delayMs={1500}
|
||||
className='flex justify-center'
|
||||
delayMs={2000}
|
||||
>
|
||||
<PrimaryActionButton
|
||||
onClick={() => { setPageIndex(pageIndex + 1) }}
|
||||
>Get Started</PrimaryActionButton>
|
||||
>
|
||||
Get Started
|
||||
</PrimaryActionButton>
|
||||
</FadeIn>
|
||||
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
/>,
|
||||
1: <OnboardingPageShell
|
||||
|
|
@ -794,7 +801,7 @@ const VoidOnboardingContent = () => {
|
|||
}
|
||||
|
||||
|
||||
return <div key={pageIndex} className="w-full h-full text-left mx-auto overflow-y-auto flex flex-col items-center justify-around">
|
||||
return <div key={pageIndex} className="w-full h-full text-left mx-auto overflow-y-scroll flex flex-col items-center justify-around">
|
||||
{contentOfIdx[pageIndex]}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue