PRJ-Game-Ideas/game-ideas
3
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactoring css

Browse Source
This commit is contained in:
Egamorf
2025-04-07 22:35:12 +02:00
parent 003f2547a3
commit 558416e7ad
13 changed files with 70 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
View File

@@ -6,7 +6,7 @@
.orb { .orb {
position: absolute; position: absolute;
border-radius: 100%; border-radius: 100%;
z-index: -999; z-index: var(--index-orb);
} }
.green { .green {
@@ -42,5 +42,5 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1000; z-index: var(--index-background);
} }

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
View File

@@ -5,7 +5,8 @@
padding-right: 20px; padding-right: 20px;
padding-left: 10px; padding-left: 10px;
height: 100%; height: 100%;
border-left: 2px solid var(--light-grey); border-left: 2px solid var(--line);
z-index: var(--index-component);
} }
.duplicate { .duplicate {

5
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
View File

@@ -3,6 +3,7 @@
flex-direction: row; flex-direction: row;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
z-index: var(--index-component);
} }
.search-container { .search-container {
@@ -26,7 +27,7 @@
width: 28px; width: 28px;
min-width: 28px; min-width: 28px;
border-radius: var(--small-radius); border-radius: var(--small-radius);
background: var(--black); background: var(--input-primary);
overflow: hidden; overflow: hidden;
} }
@@ -40,7 +41,7 @@
.square-button svg:hover { .square-button svg:hover {
cursor: pointer; cursor: pointer;
background: var(--low-white); background: var(--input-selected);
} }
.selected-icon { .selected-icon {

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
View File

@@ -7,5 +7,5 @@
} }
.content { .content {
z-index: var(--index-content);
} }

15
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
View File

@@ -4,10 +4,11 @@
position: fixed; position: fixed;
animation-name: fade-in; animation-name: fade-in;
animation-duration: 0.4s; animation-duration: 0.4s;
border: 2px solid var(--low-white); border: 2px solid var(--input-selected);
background: var(--semi-black); background: var(--dropdown-content);
right: 10px; right: 10px;
margin-top: 4px; margin-top: 4px;
z-index: var(--index-floating);
} }
.invisible { .invisible {
@@ -30,8 +31,8 @@
} }
::deep .input-text { ::deep .input-text {
background: var(--low-white); background: var(--input-selected);
border: 2px solid var(--low-white); border: 2px solid var(--input-selected);
border-radius: var(--small-radius); border-radius: var(--small-radius);
padding: 6px; padding: 6px;
color: var(--white); color: var(--white);
@@ -64,7 +65,7 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 50%; border-radius: 50%;
border: 3px solid var(--line-black); border: 3px solid rgba(0, 0, 0, 0.2);
border-top-color: var(--white); border-top-color: var(--white);
animation: loading 1s linear infinite; animation: loading 1s linear infinite;
justify-self: center; justify-self: center;
@@ -77,7 +78,7 @@
.line { .line {
margin: 0 6px; margin: 0 6px;
border-bottom: 2px solid var(--light-grey); border-bottom: 2px solid var(--line);
} }
.settings-element { .settings-element {
@@ -88,7 +89,7 @@
} }
.settings-element:hover { .settings-element:hover {
background: var(--light-grey) background: var(--line)
} }

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
View File

@@ -6,10 +6,11 @@
padding-left: 8px; padding-left: 8px;
padding-right: 2px; padding-right: 2px;
border-radius: var(--small-radius); border-radius: var(--small-radius);
background: var(--black); background: var(--input-primary);
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
width: 140px; width: 140px;
z-index: var(--index-component);
} }
::deep .search-field { ::deep .search-field {

23
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
View File

@@ -6,7 +6,6 @@
gap: 6px; gap: 6px;
height: 20px; height: 20px;
align-items: center; align-items: center;
z-index: 501;
} }
.select-element:hover { .select-element:hover {
@@ -43,7 +42,7 @@
} }
.sort:hover { .sort:hover {
background: var(--low-white); background: var(--input-selected);
} }
.sort .select-label { .sort .select-label {
@@ -57,7 +56,7 @@
} }
.filter:hover { .filter:hover {
background: var(--low-white); background: var(--input-selected);
} }
.filter .select-label { .filter .select-label {
@@ -65,27 +64,13 @@
margin-right: 6px; margin-right: 6px;
} }
/***** Filter Theme *****/ /***** Advanced Filter Theme *****/
.filter {
padding: 2px 6px;
}
.filter:hover {
background: var(--low-white);
}
.filter .select-label {
text-wrap: nowrap;
margin-right: 6px;
}
/***** Filter Theme *****/
.advancedfilter { .advancedfilter {
padding: 2px 6px; padding: 2px 6px;
} }
.advancedfilter:hover { .advancedfilter:hover {
background: var(--low-white); background: var(--input-selected);
} }
.advancedfilter .select-label { .advancedfilter .select-label {

40
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
View File

@@ -5,7 +5,7 @@
.select-container { .select-container {
margin-top: 4px; margin-top: 4px;
position: absolute; position: absolute;
z-index: 500; z-index: var(--index-dropdown)
} }
.align-right { .align-right {
@@ -19,47 +19,33 @@
border-radius: var(--small-radius); border-radius: var(--small-radius);
animation-name: fade-in; animation-name: fade-in;
animation-duration: 0.4s; animation-duration: 0.4s;
z-index: 500; background: var(--dropdown-content);
box-shadow: var(--drop-shadow);
padding: 4px 0;
}
.select-button {
z-index: var(--index-component)
} }
.line { .line {
margin: 2px 6px; margin: 2px 6px;
border-bottom: 2px solid var(--low-white); border-bottom: 2px solid var(--input-selected);
}
/***** Navigation Theme *****/
.select-content.navigation {
background: var(--violet);
box-shadow: var(--drop-shadow);
}
/***** Sort Theme *****/
.select-content.sort {
background: var(--semi-black);
box-shadow: var(--drop-shadow);
padding: 4px 0;
} }
/***** Filter Theme *****/ /***** Filter Theme *****/
.select-content.filter { .select-content.filter {
background: var(--semi-black); min-width: 140px;
box-shadow: var(--drop-shadow);
padding: 4px 0;
min-width: 150px;
} }
/***** AdvanceFilter Theme *****/ /***** Advanced Filter Theme *****/
.select-content.advancedfilter { .select-content.advancedfilter {
background: var(--light-grey); min-width: 210px;
box-shadow: var(--drop-shadow);
padding: 4px 0;
min-width: 150px;
} }
::deep .select-button.advancedfilter .search-container { ::deep .select-button.advancedfilter .search-container {
height: 24px; height: 24px;
width: 210px; width: 210px;
border: 2px solid var(--low-white); border: 2px solid var(--input-selected);
} }

9
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
View File

@@ -5,6 +5,7 @@
.select-container { .select-container {
margin-top: 4px; margin-top: 4px;
position: absolute; position: absolute;
z-index: var(--index-dropdown)
} }
.align-right { .align-right {
@@ -20,9 +21,13 @@
animation-duration: 0.4s; animation-duration: 0.4s;
} }
.select-button {
z-index: var(--index-component)
}
.line { .line {
margin: 2px 6px; margin: 2px 6px;
border-bottom: 2px solid var(--low-white); border-bottom: 2px solid var(--input-selected);
} }
@@ -34,7 +39,7 @@
/***** Sort Theme *****/ /***** Sort Theme *****/
.select-content.sort { .select-content.sort {
background: var(--semi-black); background: var(--dropdown-content);
box-shadow: var(--drop-shadow); box-shadow: var(--drop-shadow);
padding: 4px 0; padding: 4px 0;
} }

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
View File

@@ -37,7 +37,7 @@ public partial class SliderRange
{ {
var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100; var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100;
var percent2 = (double)(Params.ValueMax - Params.Min) / (Params.Max - Params.Min) * 100; var percent2 = (double)(Params.ValueMax - Params.Min) / (Params.Max - Params.Min) * 100;
return $"background: linear-gradient(to right, var(--light-grey) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--light-grey) {percent2}%)"; return $"background: linear-gradient(to right, var(--line) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--line) {percent2}%)";
} }
private string StatusColor(int value) private string StatusColor(int value)

1
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
View File

@@ -1,6 +1,7 @@
.container { .container {
position: relative; position: relative;
width: 100%; width: 100%;
z-index: var(--index-component)
} }
input[type="range"] { input[type="range"] {

13
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
View File

@@ -5,6 +5,7 @@
align-items: flex-end; align-items: flex-end;
padding: 0px 10px; padding: 0px 10px;
height: 40px; height: 40px;
z-index: var(--index-layout)
} }
.icon-container { .icon-container {
@@ -33,7 +34,6 @@
} }
.add-container { .add-container {
overflow: visible;
margin-right: 40px; margin-right: 40px;
} }
@@ -42,7 +42,6 @@
flex-direction: row; flex-direction: row;
background: var(--violet); background: var(--violet);
border-radius: var(--small-radius); border-radius: var(--small-radius);
overflow: visible;
} }
.button { .button {
@@ -54,11 +53,15 @@
} }
.first-button { .first-button {
border-right: 2px solid var(--line-black); border-right: 2px solid var(--violet-selected);
border-radius: var(--small-radius) 0 0 var(--small-radius);
overflow: hidden;
} }
.second-button .button-icon { .second-button .button-icon {
padding: 6px; padding: 6px;
border-radius: 0 var(--small-radius) var(--small-radius) 0;
overflow: hidden;
} }
.button-icon { .button-icon {
@@ -66,10 +69,10 @@
} }
.button-icon:hover { .button-icon:hover {
background: var(--line-black); background: var(--violet-selected);
cursor: pointer; cursor: pointer;
} }
.account-icon { .account-icon {
fill: var(--light-grey); fill: var(--line);
} }

23
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
View File

@@ -7,16 +7,27 @@
--red: #FF5E51; --red: #FF5E51;
--yellow: #FFC107; --yellow: #FFC107;
--green: #43F8C0; --green: #43F8C0;
--light-grey: #5C5C5E;
--black: rgba(0, 0, 0, 0.8);
--white: #fff; --white: #fff;
--low-white: rgb(255, 255, 255, 0.1); --line: #5C5C5E;
--semi-black: rgba(0, 0, 0, 0.5); --input-primary: rgba(0, 0, 0, 0.8);
--line-black: rgba(0, 0, 0, 0.2); --input-secondary: rgb(45, 45, 48);
--input-selected: rgb(255, 255, 255, 0.1);
--dropdown-content: rgb(45, 45, 48);
--small-radius: 4px; --small-radius: 4px;
--big-radius: 10px; --big-radius: 10px;
--radius: 6px;
--drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); --drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
--index-background: -100;
--index-orb: -1;
--index-content: 0;
--index-layout: 100;
--index-component: 300;
--index-floating: 500;
--index-dropdown: 700;
--index-backdrop: 900;
--index-popup: 1000;
} }
html { html {