@frontpanel/css 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base.css +1 -9
- package/components.css +1026 -5
- package/package.json +1 -1
- package/page.css +7 -0
- package/tailwind-base.css +1 -9
- package/tailwind-page.css +7 -0
- package/tailwind.css +1026 -5
- package/tokens.css +6 -3
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@frontpanel/css",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.3.0",
|
|
5
5
|
"description": "Early-2000s hardware skin as plain CSS: liquid-chrome bezels, gel buttons, LCDs and LEDs. Tokens, classes and an optional Tailwind 4 entry.",
|
|
6
6
|
"author": "Dulan Katukurundage",
|
|
7
7
|
"license": "MIT",
|
package/page.css
CHANGED
|
@@ -63,16 +63,23 @@
|
|
|
63
63
|
*/
|
|
64
64
|
/** A matte panel lifted over the device as a bottom sheet on phones; dock it as an fp-module on wide screens. */
|
|
65
65
|
.fp-sheet-panel {
|
|
66
|
+
color-scheme: var(--fp-scheme);
|
|
66
67
|
border-radius: 14px 14px 0 0;
|
|
67
68
|
background-color: var(--fp-color-shell-matte);
|
|
68
69
|
box-shadow:
|
|
69
70
|
0 0 0 1px var(--fp-color-edge),
|
|
70
71
|
inset 1px 1px 0 var(--fp-color-bevel-hi),
|
|
71
72
|
0 -10px 28px var(--fp-color-cast);
|
|
73
|
+
|
|
74
|
+
/* Forced colours drop the shadow that lifts it off the device: an outline keeps its edge. */
|
|
75
|
+
@media (forced-colors: active) {
|
|
76
|
+
outline: 1px solid CanvasText;
|
|
77
|
+
}
|
|
72
78
|
}
|
|
73
79
|
|
|
74
80
|
/** Inset text field or select on a matte panel. Its border keeps 3:1 against the panel in both skins. */
|
|
75
81
|
.fp-field {
|
|
82
|
+
color-scheme: var(--fp-scheme);
|
|
76
83
|
min-height: 2.75rem;
|
|
77
84
|
width: 100%;
|
|
78
85
|
border-radius: 6px;
|
package/tailwind-base.css
CHANGED
|
@@ -12,21 +12,13 @@
|
|
|
12
12
|
*/
|
|
13
13
|
/* The page wears the skin. Native controls and scrollbars follow it, forced or not. */
|
|
14
14
|
:root {
|
|
15
|
-
color-scheme:
|
|
15
|
+
color-scheme: var(--fp-scheme);
|
|
16
16
|
background-color: var(--fp-color-backdrop);
|
|
17
17
|
color: var(--fp-color-ink);
|
|
18
18
|
font-family: var(--fp-font-ui);
|
|
19
19
|
-webkit-text-size-adjust: 100%;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
:root[data-fp-skin="silver"] {
|
|
23
|
-
color-scheme: light;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
:root[data-fp-skin="gunmetal"] {
|
|
27
|
-
color-scheme: dark;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
22
|
body {
|
|
31
23
|
margin: 0;
|
|
32
24
|
min-height: 100dvh;
|
package/tailwind-page.css
CHANGED
|
@@ -64,16 +64,23 @@
|
|
|
64
64
|
*/
|
|
65
65
|
/** A matte panel lifted over the device as a bottom sheet on phones; dock it as an fp-module on wide screens. */
|
|
66
66
|
@utility fp-sheet-panel {
|
|
67
|
+
color-scheme: var(--fp-scheme);
|
|
67
68
|
border-radius: 14px 14px 0 0;
|
|
68
69
|
background-color: var(--fp-color-shell-matte);
|
|
69
70
|
box-shadow:
|
|
70
71
|
0 0 0 1px var(--fp-color-edge),
|
|
71
72
|
inset 1px 1px 0 var(--fp-color-bevel-hi),
|
|
72
73
|
0 -10px 28px var(--fp-color-cast);
|
|
74
|
+
|
|
75
|
+
/* Forced colours drop the shadow that lifts it off the device: an outline keeps its edge. */
|
|
76
|
+
@media (forced-colors: active) {
|
|
77
|
+
outline: 1px solid CanvasText;
|
|
78
|
+
}
|
|
73
79
|
}
|
|
74
80
|
|
|
75
81
|
/** Inset text field or select on a matte panel. Its border keeps 3:1 against the panel in both skins. */
|
|
76
82
|
@utility fp-field {
|
|
83
|
+
color-scheme: var(--fp-scheme);
|
|
77
84
|
min-height: 2.75rem;
|
|
78
85
|
width: 100%;
|
|
79
86
|
border-radius: 6px;
|