Skip to content

Commit 5da5aa7

Browse files
JasminDreasondJasminDreasond
committed
cssFile updated.
1 parent 995a461 commit 5da5aa7

2 files changed

Lines changed: 39 additions & 338 deletions

File tree

‎src/global/CssFile.mjs‎

Lines changed: 39 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -94,21 +94,13 @@ export const getDefaultWindowFrameRoot = () => {
9494
* dynamic class selectors for component names.
9595
*
9696
* @param {Object} [settings={}] - Optional settings to customize the CSS output.
97-
* @param {(className?: string, extra?: string, extra2?: string) => string} [settings.getElementName]
98-
* Function that returns a valid CSS selector string based on provided class names or modifiers.
99-
*
100-
* @param {string} [settings.fullscreenClass]
101-
* Class name applied to `<body>` to indicate fullscreen mode, which affects frame visibility.
102-
*
103-
* @param {string} [settings.blurClass]
104-
* Class name applied to `<body>` to indicate blur mode, changing color schemes for certain elements.
105-
*
106-
* @param {string} [settings.maximizedClass]
107-
* Class name applied to `<body>` to indicate maximized mode, changing color schemes for certain elements.
97+
* @param {(className?: string, extra?: string, extra2?: string) => string} [settings.getElementName] - Function that returns a valid CSS selector string.
98+
* @param {string} [settings.fullscreenClass] - Class name applied to body to indicate fullscreen mode.
99+
* @param {string} [settings.blurClass] - Class name applied to body to indicate blur mode.
100+
* @param {string} [settings.maximizedClass] - Class name applied to body to indicate maximized mode.
108101
*
109102
* @returns {string} CSS string for the full custom window frame styling.
110-
*
111-
* @throws {Error} If any of the settings are invalid, such as missing `getElementName` or invalid class names.
103+
* @throws {Error} If any of the required settings are invalid.
112104
*/
113105
export const getDefaultWindowFrameStyle = ({
114106
getElementName,
@@ -124,12 +116,18 @@ export const getDefaultWindowFrameStyle = ({
124116
throw new Error('Invalid argument: "fullscreenClass" must be a string.');
125117
if (typeof blurClass !== 'string')
126118
throw new Error('Invalid argument: "blurClass" must be a string.');
119+
if (typeof maximizedClass !== 'string')
120+
throw new Error('Invalid argument: "maximizedClass" must be a string.');
127121

128122
return `
129123
/* Base */
130124
body {
131-
height: 100%;
132-
width: 100%;
125+
margin: 0;
126+
padding: 0;
127+
height: 100vh;
128+
width: 100vw;
129+
overflow: hidden;
130+
box-sizing: border-box;
133131
}
134132
135133
${getElementName()} {
@@ -141,10 +139,18 @@ export const getDefaultWindowFrameStyle = ({
141139
}
142140
143141
/* Border */
142+
${getElementName('.custom-window-frame')},
143+
${getElementName('.window-content')} {
144+
box-sizing: border-box;
145+
}
146+
144147
${getElementName('.custom-window-frame')} {
145148
border-top: var(--frame-border-size) solid var(--frame-border-color);
146149
border-left: var(--frame-border-size) solid var(--frame-border-color);
147150
border-right: var(--frame-border-size) solid var(--frame-border-color);
151+
pointer-events: none;
152+
user-select: none;
153+
color: var(--frame-font-color);
148154
}
149155
150156
${getElementName('.custom-window-frame')},
@@ -167,22 +173,13 @@ export const getDefaultWindowFrameStyle = ({
167173
border-right: var(--frame-border-size) solid var(--frame-border-color);
168174
border-bottom-left-radius: var(--frame-border-radius);
169175
border-bottom-right-radius: var(--frame-border-radius);
170-
}
171-
172-
/* Frame */
173-
${getElementName('.custom-window-frame')} {
174-
pointer-events: none;
175-
user-select: none;
176-
color: var(--frame-font-color);
177-
}
178-
179-
${getElementName('.window-content')} {
180176
flex: 1;
181177
overflow: auto;
182178
pointer-events: all;
183179
background: var(--frame-root-background);
184180
}
185181
182+
/* Frame */
186183
${getElementName('.frame-top')} {
187184
position: relative;
188185
width: 100%;
@@ -204,8 +201,7 @@ export const getDefaultWindowFrameStyle = ({
204201
${getElementName('.frame-top-left')},
205202
${getElementName('.frame-top-right')} {
206203
flex: 0 0 auto;
207-
padding-top: 0px;
208-
padding-bottom: 0px;
204+
padding: 0;
209205
}
210206
211207
${getElementName('.frame-top-left')} {
@@ -222,10 +218,6 @@ export const getDefaultWindowFrameStyle = ({
222218
right: 0;
223219
}
224220
225-
${getElementName('.frame-top')} {
226-
position: relative;
227-
}
228-
229221
${getElementName('.frame-top-center')} {
230222
position: absolute;
231223
left: 50%;
@@ -261,21 +253,21 @@ export const getDefaultWindowFrameStyle = ({
261253
/* Buttons style base */
262254
${getElementName('.frame-menu > button')},
263255
${getElementName('.frame-buttons > button')},
264-
${getElementName('.frame-menu > button')}:focus,
265-
${getElementName('.frame-menu > button')}:active,
266-
${getElementName('.frame-menu > button')}:hover,
267-
${getElementName('.frame-buttons > button')}:focus,
268-
${getElementName('.frame-buttons > button')}:active,
269-
${getElementName('.frame-buttons > button')}:hover,
270-
${getElementName('.frame-menu > button')}:disabled,
271-
${getElementName('.frame-buttons > button')}:disabled {
256+
${getElementName('.frame-menu > button:focus')},
257+
${getElementName('.frame-menu > button:active')},
258+
${getElementName('.frame-menu > button:hover')},
259+
${getElementName('.frame-buttons > button:focus')},
260+
${getElementName('.frame-buttons > button:active')},
261+
${getElementName('.frame-buttons > button:hover')},
262+
${getElementName('.frame-menu > button:disabled')},
263+
${getElementName('.frame-buttons > button:disabled')} {
272264
outline: none;
273265
box-shadow: none;
274266
text-shadow: none;
275267
}
276268
277-
${getElementName('.frame-menu > button')}:disabled,
278-
${getElementName('.frame-buttons > button')}:disabled {
269+
${getElementName('.frame-menu > button:disabled')},
270+
${getElementName('.frame-buttons > button:disabled')} {
279271
opacity: 0.5;
280272
}
281273
@@ -406,20 +398,16 @@ export const getDefaultWindowFrameStyle = ({
406398
}
407399
408400
${getElementName('.custom-window-frame', '', `body.${maximizedClass}`)} {
409-
border-top-left-radius: 0px !important;
410-
border-top-right-radius: 0px !important;
411-
border-top: 0px solid transparent !important;
412-
border-left: 0px solid transparent !important;
413-
border-right: 0px solid transparent !important;
401+
border-top-left-radius: 0 !important;
402+
border-top-right-radius: 0 !important;
403+
border: none !important;
414404
}
415405
416406
${getElementName('.window-content', '', `body.${fullscreenClass}`)},
417407
${getElementName('.window-content', '', `body.${maximizedClass}`)} {
418-
border-bottom: 0px solid transparent !important;
419-
border-left: 0px solid transparent !important;
420-
border-right: 0px solid transparent !important;
421-
border-bottom-left-radius: 0px !important;
422-
border-bottom-right-radius: 0px !important;
408+
border: none !important;
409+
border-bottom-left-radius: 0 !important;
410+
border-bottom-right-radius: 0 !important;
423411
}
424412
425413
/* Close Button */

0 commit comments

Comments
 (0)