uvos/vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
vibe/vibe/setup/onboarding/onboarding.tcss
Mathias Gesbert 3f8487f761
v2.14.0 (#743) 
Co-authored-by: Alexis Tacnet <alexis@mistral.ai>
Co-authored-by: Clément Drouin <clement.drouin@mistral.ai>
Co-authored-by: Guillaume LE GOFF <guillaume.lgf@gmail.com>
Co-authored-by: Lucas Marandat <31749711+lucasmrdt@users.noreply.github.com>
Co-authored-by: Maxime Dolores <maxime.dolores@ext.mistral.ai>
Co-authored-by: Pierre Rossinès <pierre.rossines@mistral.ai>
Co-authored-by: Quentin <quentin.torroba@mistral.ai>
Co-authored-by: Val <102326092+vdeva@users.noreply.github.com>
Co-authored-by: Vincent G <10739306+VinceOPS@users.noreply.github.com>
Co-authored-by: p.vezia <166131032+le-codeur-rapide@users.noreply.github.com>
Co-authored-by: Hiba Chaabnia <Hiba-Chaabnia@users.noreply.github.com>
Co-authored-by: Nikhil Bhima <nikhilbhima@users.noreply.github.com>
Co-authored-by: Nkipohcs <Nkipohcs@users.noreply.github.com>
Co-authored-by: Mistral Vibe <vibe@mistral.ai>
2026-06-04 18:26:35 +02:00

453 lines
7.2 KiB
Text
Raw Blame History

/* Onboarding App Styles */
$mistral_orange: #FF8205;
$mistral_orange_title: #ff5a00;
$browser_sign_in_card_border: #303040;
Screen,
OnboardingScreen {
align: center middle;
}
/* Welcome Screen */
#welcome-container {
align: center middle;
}
#welcome-text {
border: round $foreground-muted;
padding: 1 3;
margin-bottom: 2;
text-align: center;
width: auto;
}
WelcomeScreen #enter-hint {
color: $text;
min-width: 16;
text-align: center;
}
WelcomeScreen #enter-hint.hidden {
visibility: hidden;
}
/* Theme Selection Screen */
#theme-outer {
width: 100%;
height: 100%;
align: center middle;
overflow-y: auto;
}
#theme-content {
width: auto;
height: auto;
}
#theme-title {
text-align: center;
width: 100%;
margin-bottom: 2;
}
#theme-row {
width: auto;
height: auto;
}
#nav-hint {
color: $text;
width: 16;
height: 100%;
content-align: right middle;
padding-right: 2;
}
#theme-list {
width: 30;
height: auto;
}
.theme-item {
text-align: center;
width: 100%;
background: transparent;
}
.theme-item.selected {
color: $text;
text-style: bold;
border: round $foreground-muted;
padding: 0 2;
}
.theme-item.fade-1 {
text-opacity: 50%;
}
.theme-item.fade-2 {
text-opacity: 25%;
}
.theme-item.fade-3 {
text-opacity: 10%;
}
ThemeSelectionScreen #enter-hint {
color: $text;
width: 16;
height: 100%;
content-align: left middle;
padding-left: 2;
}
#preview-center {
width: 100%;
height: auto;
margin-top: 2;
align: center middle;
}
#preview {
min-width: 50;
max-width: 70;
height: auto;
max-height: 100%;
overflow: auto;
border: round $foreground-muted;
border-title-align: center;
}
#preview-inner {
width: 100%;
height: auto;
padding: 0 1 0 1;
}
/* =============================================================================
Auth Method Screen
============================================================================= */
.onboarding-content {
width: 100%;
height: auto;
}
.onboarding-panel {
width: 70;
max-width: 88w;
height: auto;
}
.onboarding-chat {
width: auto;
height: auto;
margin-left: 2;
margin-bottom: 0;
}
.onboarding-chat .petit-chat {
width: auto;
color: $text;
}
.onboarding-heading {
width: 100%;
margin-left: 2;
margin-bottom: 0;
text-style: bold;
}
#auth-method-title {
color: $mistral_orange_title;
}
#auth-method-subtitle {
width: 100%;
margin-left: 2;
margin-bottom: 2;
color: $text;
text-style: bold;
}
#auth-method-options {
width: 100%;
height: auto;
}
.onboarding-option-row {
width: 100%;
height: auto;
margin: 0 0;
}
.auth-method-option-marker {
width: 2;
height: 3;
content-align: center middle;
color: transparent;
}
.auth-method-option-marker.selected {
color: $mistral_orange;
}
.onboarding-card {
border: solid $browser_sign_in_card_border;
padding: 0 1;
width: 1fr;
height: auto;
}
.auth-method-option {
color: $foreground-muted;
border-title-align: right;
border-title-color: $primary;
border-title-style: bold;
}
.auth-method-option.selected {
border: solid $browser_sign_in_card_border;
border-left: solid $mistral_orange;
color: $text;
}
.auth-method-separator {
width: 100%;
height: 1;
margin: 1 0 1 2;
color: $text-muted;
text-style: dim;
&:ansi {
text-style: dim;
}
}
.onboarding-hint-row {
width: 100%;
color: $foreground-muted;
margin-top: 2;
padding-left: 2;
}
/* =============================================================================
Browser Sign-In Screen
============================================================================= */
#browser-sign-in-subtitle {
width: 100%;
color: $foreground-muted;
margin-left: 2;
margin-bottom: 1;
}
#browser-sign-in-steps {
width: 100%;
height: auto;
}
.browser-sign-in-step-marker {
width: 2;
height: 3;
margin-top: 0;
content-align: center middle;
color: $mistral_orange;
}
.browser-sign-in-step-marker.idle,
.browser-sign-in-step-marker.done {
color: transparent;
}
.browser-sign-in-step {
color: $foreground-muted;
}
.browser-sign-in-step.active {
color: $text;
}
.browser-sign-in-step.done {
border-left: solid $success;
color: $text;
}
.browser-sign-in-step.idle {
color: $foreground-muted;
}
.browser-sign-in-step-title,
.browser-sign-in-step-detail {
width: 100%;
height: auto;
padding-left: 2;
}
.browser-sign-in-step-title {
text-style: bold;
}
.browser-sign-in-step-title.idle {
color: $foreground-muted;
text-style: bold dim;
}
.browser-sign-in-step-detail.idle,
.browser-sign-in-step-detail.done {
color: $foreground-muted;
text-style: dim;
}
.browser-sign-in-step-title.active,
.browser-sign-in-step-title.done {
color: $text;
}
.browser-sign-in-step-detail.pending {
color: $mistral_orange;
text-style: bold;
}
.browser-sign-in-step-detail.error {
color: $error;
text-style: bold;
}
.browser-sign-in-step-detail.success {
color: $success;
text-style: bold;
}
#browser-sign-in-hint {
width: 100%;
color: $foreground-muted;
text-align: center;
margin-top: 2;
padding-left: 2;
}
#browser-sign-in-url {
width: 100%;
height: auto;
color: $foreground-muted;
link-style: none;
link-style-hover: none;
margin-top: 1;
padding-left: 2;
&:ansi {
text-style: dim;
}
}
/* =============================================================================
API Key Screen
============================================================================= */
#api-key-outer {
width: 100%;
height: auto;
}
#api-key-title {
color: $mistral_orange_title;
}
#api-key-panel {
width: 76;
max-width: 100%;
}
#api-key-subtitle {
width: 100%;
margin-left: 2;
margin-bottom: 1;
color: $text;
text-style: bold;
}
#api-key-provider-link {
width: 100%;
height: auto;
margin-left: 2;
margin-bottom: 2;
color: $primary;
text-style: underline;
pointer: pointer;
&:hover {
color: $secondary;
text-style: bold underline;
}
}
#input-box {
border-title-align: left;
border-title-color: $text;
border-title-style: bold;
margin-left: 2;
margin-bottom: 1;
width: 100%;
height: 3;
}
#input-box.valid {
border: solid $success;
}
#input-box.invalid {
border: solid $error;
}
#key {
border: none;
width: 100%;
height: 1;
padding: 0 1;
}
#feedback {
width: 100%;
height: 1;
color: $text-muted;
padding-left: 2;
&:ansi {
text-style: dim;
}
}
#feedback.error {
color: $error;
}
#feedback.success {
color: $text-muted;
}
#config-docs-label {
width: 100%;
height: 1;
margin-left: 2;
margin-top: 1;
color: $text-muted;
text-style: dim;
}
#config-docs-link {
width: 100%;
height: 1;
color: $text;
margin-left: 2;
text-style: dim;
pointer: pointer;
&:hover {
color: $primary;
text-style: bold underline;
}
}
Reference in a new issue View git blame Copy permalink