Salastil/creamlinux-installer
1
0
Fork 0
mirror of https://github.com/Novattz/creamlinux-installer.git synced 2026-04-30 03:52:04 -04:00
Code Issues Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Novattz
2026-03-28 15:06:33 +01:00
parent 1a1c7dfb3d
commit ff53cc7a46
7 changed files with 315 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/styles/components/buttons/_button.scss
View File

@@ -160,3 +160,33 @@
transform: rotate(360deg);
}
}
// Rating button on game card
.rate-button {
svg {
color: var(--elevated-bg);
transition: transform var(--duration-normal) var(--easing-ease-out);
}
&:hover {
background-color: rgba(255, 255, 255, 0.28);
transform: translateY(-2px);
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.25);
svg {
transform: scale(1.1);
}
}
&:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
&:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
}

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

@@ -1,3 +1,4 @@
@forward './loading';
@forward './progress_bar';
@forward './dropdown';
@forward './votes_display';

43
src/styles/components/common/_votes_display.scss Normal file
View File

@@ -0,0 +1,43 @@
@use '../../themes/index' as *;
@use '../../abstracts/index' as *;
.unlocker-votes {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.35rem;
margin-bottom: 0.35rem;
.votes-bar-wrap {
flex: 1;
height: 6px;
background-color: var(--border-soft);
border-radius: 99px;
overflow: hidden;
.votes-bar-fill {
height: 100%;
background-color: var(--success);
border-radius: 99px;
transition: width 0.4s ease;
}
}
.votes-label {
font-size: 0.75rem;
white-space: nowrap;
color: var(--text-muted);
&.votes-label--positive {
color: var(--success);
}
&.votes-label--negative {
color: var(--danger);
}
&.votes-label--none {
color: var(--text-muted);
}
}
}

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

@@ -6,3 +6,6 @@
@forward './conflict_dialog';
@forward './disclaimer_dialog';
@forward './unlocker_selection_dialog';
@forward './optin_dialog';
@forward './rating_dialog';
@forward './smokeapi_votes_dialog';

84
src/styles/components/dialogs/_optin_dialog.scss Normal file
View File

@@ -0,0 +1,84 @@
@use '../../themes/index' as *;
@use '../../abstracts/index' as *;
.optin-content {
display: flex;
flex-direction: column;
gap: 1rem;
.optin-icon-row {
display: flex;
justify-content: center;
color: var(--info);
margin-bottom: 0.25rem;
}
.optin-intro {
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.optin-details {
background-color: var(--border-dark);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
padding: 0.85rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
h4 {
margin: 0.4rem 0 0.2rem;
font-size: 0.85rem;
font-weight: var(--bold);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
&:first-child {
margin-top: 0;
}
}
ul {
margin: 0;
padding-left: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
li {
font-size: 0.88rem;
color: var(--text-secondary);
line-height: 1.45;
strong {
color: var(--text-primary);
}
em {
color: var(--text-muted);
}
}
}
}
.optin-notice {
display: flex;
align-items: flex-start;
gap: 0.5rem;
background-color: var(--info-soft);
border-radius: var(--radius-sm);
padding: 0.65rem 0.85rem;
font-size: 0.83rem;
color: var(--text-secondary);
line-height: 1.45;
svg {
flex-shrink: 0;
color: var(--info);
margin-top: 0.1rem;
}
}
}

97
src/styles/components/dialogs/_rating_dialog.scss Normal file
View File

@@ -0,0 +1,97 @@
@use '../../themes/index' as *;
@use '../../abstracts/index' as *;
.rating-content {
display: flex;
flex-direction: column;
gap: 0.85rem;
p {
margin: 0;
color: var(--text-secondary);
line-height: 1.5;
strong {
color: var(--text-primary);
}
}
.rating-subtext {
font-size: 0.85rem;
color: var(--text-muted);
}
}
.rating-buttons {
display: flex;
gap: 0.75rem;
margin: 0.25rem 0;
}
.rating-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.7rem 1rem;
border: none;
border-radius: var(--radius-sm);
font-size: 0.95rem;
font-weight: var(--bold);
cursor: pointer;
transition: all var(--duration-normal) var(--easing-ease-out);
color: var(--text-heavy);
&--worked {
background-color: var(--success);
&:hover:not(:disabled) {
background-color: var(--success-light);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(140, 200, 147, 0.3);
}
}
&--broken {
background-color: var(--danger);
&:hover:not(:disabled) {
background-color: var(--danger-light);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(217, 107, 107, 0.3);
}
}
&:active:not(:disabled) {
transform: scale(0.97);
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
}
.rating-notice {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--text-muted);
svg {
flex-shrink: 0;
color: var(--info);
}
}
.rating-submitted {
p {
margin: 0;
color: var(--text-secondary);
text-align: center;
padding: 0.5rem 0;
}
}

57
src/styles/components/dialogs/_smokeapi_votes_dialog.scss Normal file
View File

@@ -0,0 +1,57 @@
@use '../../themes/index' as *;
@use '../../abstracts/index' as *;
.smokeapi-votes-content {
display: flex;
flex-direction: column;
gap: 1rem;
.smokeapi-votes-game {
margin: 0;
color: var(--text-secondary);
strong {
color: var(--text-primary);
}
}
.smokeapi-votes-section {
background-color: var(--border-dark);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
padding: 0.85rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.smokeapi-votes-label {
margin: 0;
font-size: 0.8rem;
font-weight: var(--bold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.smokeapi-votes-loading {
margin: 0;
font-size: 0.85rem;
color: var(--text-muted);
}
.smokeapi-votes-notice {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.83rem;
color: var(--text-muted);
line-height: 1.45;
svg {
flex-shrink: 0;
color: var(--info);
margin-top: 0.1rem;
}
}
}