Salastil/creamlinux-installer
1
0
Fork 0
mirror of https://github.com/Novattz/creamlinux-installer.git synced 2026-01-24 12:22:49 -05:00
Code Issues Packages Projects Releases Wiki Activity

unlocker selection styling #61

Browse Source
This commit is contained in:
Novattz
2026-01-17 17:56:57 +01:00
parent 03cae08df1
commit 05e4275962
2 changed files with 123 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/components/dialogs/_index.scss
View File

@@ -5,3 +5,4 @@
@forward './smokeapi_settings_dialog'; @forward './smokeapi_settings_dialog';
@forward './conflict_dialog'; @forward './conflict_dialog';
@forward './disclaimer_dialog'; @forward './disclaimer_dialog';
@forward './unlocker_selection_dialog';

122
src/styles/components/dialogs/_unlocker_selection_dialog.scss Normal file
View File

@@ -0,0 +1,122 @@
@use '../../themes/index' as *;
@use '../../abstracts/index' as *;
/*
Unlocker Selection Dialog styles
For choosing between CreamLinux and SmokeAPI on native games
*/
.unlocker-selection-header {
display: flex;
align-items: center;
gap: 0.75rem;
h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
}
}
.unlocker-selection-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
.game-title-info {
font-size: 1rem;
color: var(--text-secondary);
margin: 0;
strong {
color: var(--text-primary);
}
}
.unlocker-options {
display: flex;
flex-direction: column;
gap: 1rem;
}
.unlocker-option {
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 1.25rem;
transition: all var(--duration-normal) var(--easing-ease-out);
&:hover {
background-color: rgba(255, 255, 255, 0.05);
border-color: var(--border);
}
&.recommended {
border-color: var(--primary-color);
background-color: rgba(245, 150, 130, 0.05);
&:hover {
background-color: rgba(245, 150, 130, 0.08);
}
}
.option-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
h4 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
.recommended-badge {
background-color: var(--primary-color);
color: var(--text-heavy);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.alternative-badge {
background-color: var(--border);
color: var(--text-secondary);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
}
.option-description {
font-size: 0.9rem;
color: var(--text-secondary);
margin: 0 0 1rem 0;
line-height: 1.5;
}
}
.selection-info {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-soft);
border-radius: 6px;
font-size: 0.85rem;
color: var(--text-muted);
svg {
flex-shrink: 0;
color: var(--info);
}
}
}