Skip to content

Commit 191f660

Browse files
nibrobbnibrobb
committed
Fix visibility issue
* And reformat .css file because why not
1 parent cb63bd6 commit 191f660

File tree

2 files changed

+107
-97
lines changed

2 files changed

+107
-97
lines changed

‎src-tauri/tauri.conf.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
{
1616
"title": "luxafor-ui",
1717
"width": 300,
18-
"height": 600
18+
"height": 600,
19+
"center": true,
20+
"resizable": false
1921
}
2022
],
2123
"security": {

‎styles.css

+104-96
Original file line numberDiff line numberDiff line change
@@ -4,94 +4,96 @@
44

55

66
:root {
7-
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
8-
font-size: 16px;
9-
line-height: 24px;
10-
font-weight: 400;
11-
font-synthesis: none;
12-
text-rendering: optimizeLegibility;
13-
background: var(--background-color);
14-
-webkit-font-smoothing: antialiased;
15-
-moz-osx-font-smoothing: grayscale;
7+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
8+
font-size: 16px;
9+
line-height: 24px;
10+
font-weight: 400;
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
background: var(--background-color);
14+
-webkit-font-smoothing: antialiased;
15+
-moz-osx-font-smoothing: grayscale;
1616
-webkit-text-size-adjust: 100%;
1717

18-
--primary-color: #396cd8;
19-
--text-color: #0f0f0f;
20-
--background-color: rgb(235, 235, 235);
21-
22-
--button-bg: #ffffff;
23-
--button-active-bg: #e8e8e8;
24-
--dark-text-color: #f6f6f6;
25-
--dark-bg: #2f2f2f;
26-
--dark-button-bg: #0f0f0f98;
27-
--dark-button-active-bg: #0f0f0f69;
18+
--primary-color: #396cd8;
19+
--text-color: #0f0f0f;
20+
--background-color: rgb(235, 235, 235);
21+
22+
--button-bg: #ffffff;
23+
--button-active-bg: #e8e8e8;
24+
--dark-text-color: #f6f6f6;
25+
--dark-bg: #2f2f2f;
26+
--dark-button-bg: #0f0f0f98;
27+
--dark-button-active-bg: #0f0f0f69;
2828

2929
/* Color map for buttons */
30-
--color-red: #F00;
31-
--color-green: #0F0;
32-
--color-blue: #00F;
33-
--color-yellow: rgb(251, 255, 0);
34-
--color-cyan: rgb(0, 204, 255);
35-
--color-magenta: rgb(225, 0, 255);
36-
--color-white: #FFF;
37-
--color-off: #272727;
38-
39-
--window-width: 300px;
30+
--color-red: #F00;
31+
--color-green: #0F0;
32+
--color-blue: #00F;
33+
--color-yellow: rgb(251, 255, 0);
34+
--color-cyan: rgb(0, 204, 255);
35+
--color-magenta: rgb(225, 0, 255);
36+
--color-white: #FFF;
37+
--color-off: #272727;
38+
39+
--window-width: 300px;
4040
--container-side-padding: 20px;
4141
}
4242

4343
html, body {
44-
height: 100%;
44+
height: 100%;
4545
overflow: hidden;
46-
margin: 0;
47-
padding: 1vh 0;
48-
display: grid;
46+
margin: 0;
47+
padding: 1vh 0;
48+
display: grid;
4949
}
5050

5151
.header {
52-
display: flex;
53-
flex-direction: column;
52+
display: flex;
53+
flex-direction: column;
5454
justify-content: center;
55-
text-align: center;
55+
text-align: center;
5656
}
5757

5858
.container {
59-
height: 100%;
60-
display: flex;
61-
flex-direction: column;
59+
height: 100%;
60+
display: flex;
61+
flex-direction: column;
6262
justify-content: space-evenly;
63-
align-items: center;
64-
text-align: center;
65-
row-gap: 1vh;
66-
overflow: inherit;
67-
max-height: 100%;
63+
align-items: center;
64+
text-align: center;
65+
row-gap: 1vh;
66+
overflow: inherit;
67+
max-height: 100%;
6868

69-
width: 100%;
70-
max-width: var(--window-width) - var(--container-side-padding);
71-
margin: 0 auto; /* Center the container */
72-
padding: 0 var(--container-side-padding); /* Add inner spacing */
69+
width: 100%;
70+
max-width: var(--window-width) - var(--container-side-padding);
71+
margin: 0 auto; /* Center the container */
72+
padding: 0 var(--container-side-padding); /* Add inner spacing */
7373
}
7474

7575
.logo {
76-
height: 6em;
76+
height: 6em;
7777
will-change: filter;
78-
transition: 0.75s;
78+
transition: 0.75s;
7979
}
8080

8181
.logo.leptos:hover {
8282
filter: drop-shadow(0 0 2em #a82e20);
8383
}
84+
8485
.logo.tauri:hover {
8586
filter: drop-shadow(0 0 2em #24c8db);
8687
}
88+
8789
#logo-row {
88-
display: flex;
90+
display: flex;
8991
justify-content: center;
9092
}
9193

9294
a {
93-
font-weight: 500;
94-
color: var(--primary-color);
95+
font-weight: 500;
96+
color: var(--primary-color);
9597
text-decoration: inherit;
9698
}
9799

@@ -104,82 +106,88 @@ h1 {
104106
}
105107

106108
button {
107-
cursor: pointer;
108-
border-radius: 8px;
109-
border: 1px solid transparent;
110-
font-size: 1em;
111-
font-weight: 500;
112-
font-family: inherit;
113-
width: 100%;
114-
--btn-width: 150px;
115-
max-width: var(--btn-width);
116-
min-width: var(--btn-width);
117-
padding: 0.6em 1.2em;
118-
color: var(--text-color);
109+
cursor: pointer;
110+
border-radius: 8px;
111+
border: 1px solid transparent;
112+
font-size: 1em;
113+
font-weight: 500;
114+
font-family: inherit;
115+
width: 100%;
116+
--btn-width: 150px;
117+
max-width: var(--btn-width);
118+
min-width: var(--btn-width);
119+
padding: 0.6em 1.2em;
120+
color: var(--text-color);
119121
background-color: var(--button-bg);
120-
transition: all 0.2s ease-in-out;
121-
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
122-
outline: none;
123-
width: 100%;
124-
box-sizing: border-box;
122+
transition: all 0.2s ease-in-out;
123+
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
124+
outline: none;
125+
box-sizing: border-box;
125126
}
127+
126128
button:hover {
127129
border-color: var(--primary-color);
128130
}
131+
129132
button:active {
130-
border-color: var(--primary-color);
133+
border-color: var(--primary-color);
131134
background-color: var(--button-active-bg);
132135
}
133136

134137
/* Dynamic button color */
135138
button[data-color] {
136-
--btn-color: var(--primary-color); /* Fallback/default if not set */
139+
--btn-color: var(--primary-color); /* Fallback/default if not set */
137140
--btn-text-hover: #000;
138141
}
139142

140143
button[data-color]:hover,
141144
button[data-color]:active {
142-
border-color: var(--btn-color);
145+
border-color: var(--btn-color);
143146
background-color: var(--btn-color);
144-
box-shadow: 0 5px 15px var(--btn-color);
145-
color: var(--btn-text-hover);
147+
box-shadow: 0 5px 15px var(--btn-color);
148+
color: var(--btn-text-hover);
146149
}
147150

148-
button[data-color="Red"] {
149-
--btn-color: var(--color-red);
151+
button[data-color="Red"] {
152+
--btn-color: var(--color-red);
150153
}
151-
button[data-color="Green"] {
152-
--btn-color: var(--color-green);
154+
155+
button[data-color="Green"] {
156+
--btn-color: var(--color-green);
153157
}
154-
button[data-color="Blue"] {
155-
--btn-color: var(--color-blue);
156-
--btn-text-hover: var(--dark-text-color);
158+
159+
button[data-color="Blue"] {
160+
--btn-color: var(--color-blue);
161+
--btn-text-hover: var(--dark-text-color);
157162
}
158-
button[data-color="Yellow"] {
159-
--btn-color: var(--color-yellow);
160-
--btn-text-hover: var(--dark-text-color);
163+
164+
button[data-color="Yellow"] {
165+
--btn-color: var(--color-yellow);
161166
}
162-
button[data-color="Cyan"] {
163-
--btn-color: var(--color-cyan);
167+
168+
button[data-color="Cyan"] {
169+
--btn-color: var(--color-cyan);
164170
}
171+
165172
button[data-color="Magenta"] {
166-
--btn-color: var(--color-magenta);
173+
--btn-color: var(--color-magenta);
167174
}
168-
button[data-color="White"] {
169-
--btn-color: var(--color-white);
170-
--btn-text-hover: var(--dark-text-color);
175+
176+
button[data-color="White"] {
177+
--btn-color: var(--color-white);
171178
}
172-
button[data-color="Off"] {
173-
--btn-color: var(--color-off);
174-
--btn-text-hover: var(--dark-text-color);
179+
180+
button[data-color="Off"] {
181+
--btn-color: var(--color-off);
182+
--btn-text-hover: var(--dark-text-color);
175183
}
176184

177185

178186
@media (prefers-color-scheme: dark) {
179187
:root {
180-
--text-color: var(--dark-text-color);
188+
--text-color: var(--dark-text-color);
181189
--background-color: var(--dark-bg);
182-
--button-bg: var(--dark-button-bg);
190+
--button-bg: var(--dark-button-bg);
183191
--button-active-bg: var(--dark-button-active-bg);
184192
}
185193

0 commit comments

Comments
 (0)