backend-skins 0.1.34 → 0.1.36
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/README.md +13 -1
- package/dist/modern/css/my-menu.styl +129 -36
- package/dist/modern/css/my-tables.styl +31 -4
- package/dist/modern/dialog-promise/dialog-promise.styl +10 -4
- package/dist/modern/pikaday/pikaday.styl +1 -1
- package/dist/modern/unlogged/css/chpass.styl +26 -17
- package/dist/modern/unlogged/css/login.styl +27 -13
- package/package.json +18 -8
package/README.md
CHANGED
|
@@ -33,4 +33,16 @@ confirmPromise("Confirm prompt", {
|
|
|
33
33
|
{label:'Cancel', value:false, attributes: { color: 'secondary', outline: true, }},
|
|
34
34
|
]
|
|
35
35
|
})
|
|
36
|
-
```
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Publicación
|
|
39
|
+
|
|
40
|
+
Se publica en npm desde GitHub Actions (`.github/workflows/publish.yml`), igual que backend-plus y dmencu. No hacer `npm publish` local.
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
npm test # compila todos los .styl de dist/
|
|
44
|
+
npm version patch # sube package.json, hace el commit y crea el tag vX.Y.Z
|
|
45
|
+
git push --follow-tags # el push del tag dispara el workflow
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Requisito (una sola vez): el paquete `backend-skins` en npmjs.com necesita un *Trusted publisher* para GitHub Actions con organización `codenautas`, repositorio `backend-skins` y workflow `publish.yml`.
|
|
@@ -1,54 +1,99 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--primary: #1976d2;
|
|
3
|
+
--primary-dark: #1565c0;
|
|
4
|
+
--primary-rgb: 25, 118, 210;
|
|
5
|
+
--font-family: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
|
|
6
|
+
}
|
|
7
|
+
|
|
1
8
|
* {
|
|
2
|
-
font-family:
|
|
9
|
+
font-family: var(--font-family) !important;
|
|
3
10
|
}
|
|
4
11
|
body {
|
|
5
|
-
background-color: #
|
|
12
|
+
background-color: #f5f5f5 !important; margin: 0;
|
|
13
|
+
min-height: 100vh;
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
-moz-osx-font-smoothing: grayscale;
|
|
6
16
|
}
|
|
7
17
|
|
|
8
18
|
#main-top-bar[dev-mode] {
|
|
9
|
-
background: repeating-linear-gradient(-45deg,
|
|
19
|
+
background: repeating-linear-gradient(-45deg, var(--primary), var(--primary) 8px, #5e7c9aff 8px, #5e7c9aff 16px) !important;
|
|
10
20
|
}
|
|
11
21
|
|
|
22
|
+
/* Si una grilla es más ancha que la ventana, las barras acompañan el scroll horizontal */
|
|
23
|
+
#total-layout {
|
|
24
|
+
min-width: max-content;
|
|
25
|
+
}
|
|
26
|
+
#main-top-bar, #main-top-bar1, .sub-menu-bar {
|
|
27
|
+
position: sticky;
|
|
28
|
+
left: 0;
|
|
29
|
+
width: 100vw;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
}
|
|
32
|
+
/* --- BARRA SUPERIOR (estilo Material: app bar con elevación y tabs) --- */
|
|
12
33
|
#main-top-bar {
|
|
13
34
|
top: 0;
|
|
14
|
-
background:
|
|
35
|
+
background: var(--primary);
|
|
15
36
|
border: none;
|
|
16
|
-
padding
|
|
37
|
+
padding: 0 !important;
|
|
17
38
|
display: flex;
|
|
18
39
|
box-sizing: border-box;
|
|
40
|
+
min-height: 40px;
|
|
41
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.14);
|
|
42
|
+
z-index: 10;
|
|
19
43
|
}
|
|
20
44
|
#main-top-bar * {
|
|
21
|
-
margin
|
|
22
|
-
|
|
45
|
+
margin: 0;
|
|
46
|
+
vertical-align: middle;
|
|
23
47
|
}
|
|
24
48
|
|
|
25
49
|
#main-top-bar1, .sub-menu-bar {
|
|
26
|
-
background:
|
|
50
|
+
background: var(--primary-dark);
|
|
27
51
|
border: none;
|
|
28
|
-
box-shadow: 0 2px 4px rgba(0,0,0,0.
|
|
52
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.12);
|
|
29
53
|
display: flex;
|
|
30
54
|
align-items: center;
|
|
31
55
|
padding: 0 16px !important;
|
|
32
56
|
}
|
|
33
57
|
|
|
58
|
+
/* Una sola fila: los items se achican antes de pasar de línea */
|
|
34
59
|
#main-top-bar > span {
|
|
35
60
|
display: flex;
|
|
36
61
|
align-items: center;
|
|
62
|
+
flex-wrap: nowrap;
|
|
37
63
|
width: 100%;
|
|
38
|
-
|
|
64
|
+
min-width: 0;
|
|
65
|
+
padding: 0 12px;
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
gap: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
#main-logo {
|
|
71
|
+
height: 28px !important;
|
|
72
|
+
width: 28px !important;
|
|
73
|
+
flex-shrink: 0;
|
|
74
|
+
margin-right: 12px !important;
|
|
75
|
+
border-radius: 4px;
|
|
39
76
|
}
|
|
40
77
|
|
|
41
78
|
/* 1. Las luces son el inicio del bloque derecho (Order 1) */
|
|
42
79
|
.right-lights {
|
|
43
80
|
order: 1;
|
|
44
81
|
margin-left: auto !important;
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: 8px;
|
|
85
|
+
flex-shrink: 0;
|
|
45
86
|
}
|
|
46
87
|
|
|
47
|
-
/* 2.
|
|
88
|
+
/* 2. Usuario va en el medio (Order 2) */
|
|
48
89
|
#active-user, #not-logged {
|
|
49
90
|
order: 2;
|
|
50
91
|
color: white;
|
|
51
|
-
margin-left:
|
|
92
|
+
margin-left: 12px !important;
|
|
93
|
+
flex-shrink: 0;
|
|
94
|
+
white-space: nowrap;
|
|
95
|
+
font-size: 14px;
|
|
96
|
+
font-weight: 500;
|
|
52
97
|
}
|
|
53
98
|
|
|
54
99
|
#active-user, #right-menu-icon, .right-lights {
|
|
@@ -58,48 +103,78 @@ body {
|
|
|
58
103
|
/* 3. Los puntos van al final (Order 3) */
|
|
59
104
|
#right-menu-icon {
|
|
60
105
|
order: 3;
|
|
61
|
-
margin-left:
|
|
62
|
-
|
|
106
|
+
margin-left: 8px !important;
|
|
107
|
+
height: 20px;
|
|
108
|
+
max-width: 40px !important;
|
|
109
|
+
padding: 8px;
|
|
110
|
+
border-radius: 50%;
|
|
111
|
+
box-sizing: content-box;
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
transition: background 0.2s;
|
|
114
|
+
}
|
|
115
|
+
#right-menu-icon:hover {
|
|
116
|
+
background: rgba(255,255,255,0.15);
|
|
63
117
|
}
|
|
64
118
|
|
|
65
119
|
#right-menu-icon, .right-lights img {
|
|
66
120
|
filter: brightness(0) invert(1) !important;
|
|
67
121
|
width: auto !important;
|
|
68
122
|
flex-shrink: 0 !important;
|
|
123
|
+
float: none !important;
|
|
124
|
+
height: 20px;
|
|
69
125
|
}
|
|
70
126
|
|
|
71
127
|
.top-menu-bar .menu-item, .sub-menu-bar .menu-item {
|
|
72
128
|
color: white;
|
|
73
129
|
background: transparent !important;
|
|
74
130
|
border: none;
|
|
75
|
-
font-size: 14px;
|
|
131
|
+
font-size: clamp(11px, 0.9vw, 14px);
|
|
76
132
|
font-weight: 500;
|
|
133
|
+
letter-spacing: 0.02em;
|
|
77
134
|
text-transform: uppercase;
|
|
78
|
-
padding: 8px;
|
|
135
|
+
padding: 0 clamp(4px, 0.45vw, 8px);
|
|
136
|
+
height: 40px;
|
|
137
|
+
line-height: 40px;
|
|
138
|
+
box-sizing: border-box;
|
|
79
139
|
margin: 0;
|
|
80
|
-
border-radius: 0px;
|
|
140
|
+
border-radius: 0px !important;
|
|
81
141
|
text-decoration: none;
|
|
82
142
|
transition: background 0.2s;
|
|
83
|
-
|
|
143
|
+
white-space: nowrap;
|
|
144
|
+
flex: 0 0 auto;
|
|
145
|
+
color: rgba(255,255,255,0.85);
|
|
146
|
+
cursor: pointer;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.top-menu-bar .menu-item:hover, .sub-menu-bar .menu-item:hover {
|
|
150
|
+
background: rgba(255,255,255,0.12) !important;
|
|
151
|
+
color: white;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.sub-menu-bar .menu-item {
|
|
155
|
+
height: 40px;
|
|
156
|
+
line-height: 40px;
|
|
84
157
|
}
|
|
85
158
|
|
|
86
159
|
.menu-item[menu-selected="yes"] {
|
|
87
|
-
background: rgba(
|
|
160
|
+
background: rgba(255,255,255,0.08) !important;
|
|
88
161
|
box-shadow: inset 0 -3px 0 white;
|
|
162
|
+
color: white;
|
|
89
163
|
}
|
|
90
164
|
|
|
91
165
|
.menu-item {
|
|
92
|
-
background-color:
|
|
93
|
-
border-radius:
|
|
166
|
+
background-color: var(--primary);
|
|
167
|
+
border-radius: 4px;
|
|
94
168
|
color: #fff;
|
|
95
169
|
text-transform: uppercase;
|
|
96
|
-
font-weight:
|
|
97
|
-
|
|
98
|
-
|
|
170
|
+
font-weight: 500;
|
|
171
|
+
letter-spacing: 0.04em;
|
|
172
|
+
transition: background-color 0.2s, box-shadow 0.2s;
|
|
173
|
+
padding: 6px 12px;
|
|
99
174
|
}
|
|
100
175
|
|
|
101
176
|
.menu-item:hover {
|
|
102
|
-
background-color:
|
|
177
|
+
background-color: var(--primary-dark) !important;
|
|
103
178
|
}
|
|
104
179
|
|
|
105
180
|
.menu-item[is-selected] {
|
|
@@ -107,11 +182,22 @@ body {
|
|
|
107
182
|
color: #666 !important;
|
|
108
183
|
}
|
|
109
184
|
|
|
185
|
+
/* En pantallas angostas se permite partir en dos filas */
|
|
186
|
+
@media (max-width: 760px) {
|
|
187
|
+
#main-top-bar > span {
|
|
188
|
+
flex-wrap: wrap;
|
|
189
|
+
}
|
|
190
|
+
.top-menu-bar .menu-item, .sub-menu-bar .menu-item {
|
|
191
|
+
height: 40px;
|
|
192
|
+
line-height: 40px;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
110
196
|
|
|
111
197
|
/* --- CONSOLA FLOTANTE --- */
|
|
112
198
|
#mini-console {
|
|
113
199
|
position: fixed;
|
|
114
|
-
top:
|
|
200
|
+
top: 56px;
|
|
115
201
|
right: 20px;
|
|
116
202
|
z-index: 2000;
|
|
117
203
|
background-color: #fde8e8;
|
|
@@ -133,34 +219,37 @@ button
|
|
|
133
219
|
/* BOTONES */
|
|
134
220
|
|
|
135
221
|
[color] {
|
|
136
|
-
border-radius:
|
|
137
|
-
padding:
|
|
222
|
+
border-radius: 4px;
|
|
223
|
+
padding: 6px 16px;
|
|
224
|
+
letter-spacing: 0.04em;
|
|
225
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.14);
|
|
138
226
|
cursor: pointer;
|
|
139
227
|
text-transform: uppercase;
|
|
140
228
|
text-decoration: none;
|
|
141
|
-
font-weight:
|
|
229
|
+
font-weight: 500;
|
|
142
230
|
}
|
|
143
231
|
|
|
144
232
|
[color=primary]:not([outline]) {
|
|
145
|
-
background-color:
|
|
233
|
+
background-color: var(--primary);
|
|
146
234
|
color: #fff;
|
|
147
|
-
border: 1px solid
|
|
235
|
+
border: 1px solid var(--primary);
|
|
148
236
|
transition: 0.1s;
|
|
149
237
|
}
|
|
150
238
|
|
|
151
239
|
[color=primary]:not([outline]):hover {
|
|
152
|
-
background-color:
|
|
240
|
+
background-color: var(--primary-dark);
|
|
241
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 4px 5px rgba(0,0,0,0.14);
|
|
153
242
|
}
|
|
154
243
|
|
|
155
244
|
[color=primary][outline=true] {
|
|
156
245
|
background-color: transparent;
|
|
157
|
-
border: 1px solid
|
|
158
|
-
color:
|
|
246
|
+
border: 1px solid var(--primary);
|
|
247
|
+
color: var(--primary);
|
|
159
248
|
transition: 0.1s;
|
|
160
249
|
}
|
|
161
250
|
|
|
162
251
|
[color=primary][outline=true]:hover {
|
|
163
|
-
background-color:
|
|
252
|
+
background-color: var(--primary);
|
|
164
253
|
color: #fff;
|
|
165
254
|
}
|
|
166
255
|
|
|
@@ -300,4 +389,8 @@ input
|
|
|
300
389
|
border-radius 4px // Un pequeño radio para que no sea tan rígido
|
|
301
390
|
font-size 14px
|
|
302
391
|
transition border-color 0.2s ease, box-shadow 0.2s ease
|
|
303
|
-
outline none // Quitamos el outline azul por defecto del navegador
|
|
392
|
+
outline none // Quitamos el outline azul por defecto del navegador
|
|
393
|
+
|
|
394
|
+
input:focus
|
|
395
|
+
border-color var(--primary)
|
|
396
|
+
box-shadow 0 0 0 1px var(--primary)
|
|
@@ -11,12 +11,24 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.my-grid td, .my-grid th {
|
|
14
|
-
border: 1px solid #
|
|
14
|
+
border: 1px solid #e0e0e0;
|
|
15
15
|
padding: 3px;
|
|
16
16
|
position: relative;
|
|
17
17
|
background: transparent;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
.my-grid > thead > tr > th {
|
|
21
|
+
background: #eceff1;
|
|
22
|
+
color: #37474f;
|
|
23
|
+
font-weight: 500;
|
|
24
|
+
font-size: 0.85rem;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* sólo la fila bajo el mouse: si el mouse está en una grilla hija no se pinta la fila de la grilla madre */
|
|
28
|
+
.my-grid > tbody > tr:hover:not(:has(tr:hover)) > td {
|
|
29
|
+
background: unquote("rgba(var(--primary-rgb), 0.06)");
|
|
30
|
+
}
|
|
31
|
+
|
|
20
32
|
.my-grid caption {
|
|
21
33
|
border: none;
|
|
22
34
|
font-size: large;
|
|
@@ -37,6 +49,7 @@
|
|
|
37
49
|
background-color: white;
|
|
38
50
|
border: 1px solid #d1d5db;
|
|
39
51
|
border-radius: 4px;
|
|
52
|
+
box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
|
|
40
53
|
padding-left: 24px;
|
|
41
54
|
background-position: 4px center;
|
|
42
55
|
background-repeat: no-repeat;
|
|
@@ -46,15 +59,23 @@
|
|
|
46
59
|
height: 24px;
|
|
47
60
|
font-size: 0.80rem !important;
|
|
48
61
|
align-items: center;
|
|
49
|
-
background-color:
|
|
62
|
+
background-color: var(--primary);
|
|
50
63
|
color: white;
|
|
51
64
|
border: none;
|
|
52
65
|
padding: 4px 12px;
|
|
53
66
|
border-radius: 4px;
|
|
54
67
|
font-size: 11px;
|
|
55
68
|
text-transform: uppercase;
|
|
56
|
-
|
|
69
|
+
letter-spacing: 0.04em;
|
|
70
|
+
font-weight: 500;
|
|
57
71
|
cursor: pointer;
|
|
72
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
73
|
+
transition: background-color 0.2s, box-shadow 0.2s;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.my-grid button:not(.table-button):hover, #button-filter:hover {
|
|
77
|
+
background-color: var(--primary-dark);
|
|
78
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
|
|
58
79
|
}
|
|
59
80
|
|
|
60
81
|
#main_layout .my-grid .menu-item
|
|
@@ -68,6 +89,12 @@
|
|
|
68
89
|
cursor: pointer;
|
|
69
90
|
display: inline-flex;
|
|
70
91
|
align-items: center;
|
|
92
|
+
border-radius: 50%;
|
|
93
|
+
transition: background 0.2s;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.table-button:hover {
|
|
97
|
+
background: rgba(0,0,0,0.08);
|
|
71
98
|
}
|
|
72
99
|
|
|
73
100
|
.table-button img, .dialog-promise img {
|
|
@@ -106,7 +133,7 @@ td[io-status=temporal-ok] { background-color: #f0fff4; color: #276749; }
|
|
|
106
133
|
}
|
|
107
134
|
|
|
108
135
|
.table-param-screen a {
|
|
109
|
-
background-color:
|
|
136
|
+
background-color: var(--primary) !important;
|
|
110
137
|
padding 8px;
|
|
111
138
|
color: #fff !important
|
|
112
139
|
border-radius: 5px;
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
background-color rgba(255,255,255,0.95) // Un toque más opaco para legibilidad
|
|
4
4
|
text-align center
|
|
5
5
|
margin 0px
|
|
6
|
-
border
|
|
7
|
-
|
|
6
|
+
border none
|
|
7
|
+
border-radius 4px
|
|
8
|
+
box-shadow 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12) // Elevación Material
|
|
8
9
|
width auto
|
|
9
10
|
max-width 90%
|
|
10
11
|
height auto
|
|
@@ -83,7 +84,7 @@ table.dialog-menu
|
|
|
83
84
|
border-radius 6px // Bordes redondeados en la fila
|
|
84
85
|
|
|
85
86
|
&:hover
|
|
86
|
-
background-color rgba(
|
|
87
|
+
background-color unquote("rgba(var(--primary-rgb), 0.08)") // Azul suave que combina con tu focus
|
|
87
88
|
// transform translateX(4px) // Opcional: pequeño desplazamiento al hacer hover
|
|
88
89
|
|
|
89
90
|
// Estilo de las celdas
|
|
@@ -92,6 +93,11 @@ table.dialog-menu
|
|
|
92
93
|
text-align left
|
|
93
94
|
color #475569 // Gris azulado moderno
|
|
94
95
|
font-size 14px
|
|
96
|
+
vertical-align middle
|
|
97
|
+
|
|
98
|
+
img
|
|
99
|
+
display block
|
|
100
|
+
margin 0 auto
|
|
95
101
|
|
|
96
102
|
// Primera columna (si está vacía la hacemos pequeña)
|
|
97
103
|
&:first-child
|
|
@@ -122,7 +128,7 @@ table.dialog-menu
|
|
|
122
128
|
// Efecto cuando el usuario hace clic para escribir
|
|
123
129
|
&:focus
|
|
124
130
|
border-color #ddd // Usamos el azul de tu .menu-item para coherencia
|
|
125
|
-
box-shadow 0 0 0 2px rgba(
|
|
131
|
+
box-shadow 0 0 0 2px unquote("rgba(var(--primary-rgb), 0.1)")
|
|
126
132
|
background #fff // Al escribir, un fondo blanco ayuda a la lectura
|
|
127
133
|
|
|
128
134
|
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
:root {
|
|
2
|
+
--primary: #1976d2;
|
|
3
|
+
--primary-dark: #1565c0;
|
|
4
|
+
--primary-rgb: 25, 118, 210;
|
|
5
|
+
--font-family: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
|
|
3
6
|
}
|
|
4
7
|
|
|
5
8
|
/* Solo se aplica si el formulario de login está presente */
|
|
@@ -9,8 +12,8 @@ body:has(#chPassForm) {
|
|
|
9
12
|
align-items: center;
|
|
10
13
|
justify-content: center;
|
|
11
14
|
min-height: 100vh;
|
|
12
|
-
background:
|
|
13
|
-
font-family:
|
|
15
|
+
background: #eceff1;
|
|
16
|
+
font-family: var(--font-family);
|
|
14
17
|
}
|
|
15
18
|
|
|
16
19
|
/* Contenedor Principal (Transformando la tabla en una Card) */
|
|
@@ -19,12 +22,12 @@ body:has(#chPassForm) {
|
|
|
19
22
|
justify-content: center;
|
|
20
23
|
background: #ffffff;
|
|
21
24
|
padding: 30px;
|
|
22
|
-
border-radius:
|
|
23
|
-
|
|
25
|
+
border-radius: 8px;
|
|
26
|
+
border-top: 4px solid var(--primary);
|
|
27
|
+
box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
|
|
24
28
|
width: 100%;
|
|
25
29
|
max-width: 380px;
|
|
26
30
|
animation: fadeIn 0.5s ease-out;
|
|
27
|
-
text-transform: uppercase;
|
|
28
31
|
}
|
|
29
32
|
|
|
30
33
|
.chpasstable {
|
|
@@ -40,7 +43,7 @@ body:has(#chPassForm) {
|
|
|
40
43
|
|
|
41
44
|
/* Título */
|
|
42
45
|
.formtitle {
|
|
43
|
-
color:
|
|
46
|
+
color: var(--primary-dark);
|
|
44
47
|
font-size: 1.3em;
|
|
45
48
|
font-weight: 700;
|
|
46
49
|
text-align: center;
|
|
@@ -67,22 +70,25 @@ body:has(#chPassForm) {
|
|
|
67
70
|
}
|
|
68
71
|
|
|
69
72
|
/* Inputs de Texto y Password */
|
|
73
|
+
.formtd input, .actions a, .actions input {
|
|
74
|
+
font-family: inherit;
|
|
75
|
+
}
|
|
76
|
+
|
|
70
77
|
.formtd input {
|
|
71
78
|
width: 94%;
|
|
72
79
|
padding: 12px 10px;
|
|
73
80
|
border: 1px solid #e2e8f0;
|
|
74
81
|
border-radius: 8px;
|
|
75
|
-
background-color: #
|
|
82
|
+
background-color: #f8fafc;
|
|
76
83
|
transition: all 0.2s ease;
|
|
77
84
|
outline: none;
|
|
78
85
|
color: #1e293b;
|
|
79
|
-
text-transform: uppercase;
|
|
80
86
|
}
|
|
81
87
|
|
|
82
88
|
.formtd input:focus {
|
|
83
|
-
border-color:
|
|
89
|
+
border-color: var(--primary);
|
|
84
90
|
background-color: #ffffff;
|
|
85
|
-
box-shadow: 0 0 0
|
|
91
|
+
box-shadow: 0 0 0 3px unquote("rgba(var(--primary-rgb), 0.2)");
|
|
86
92
|
}
|
|
87
93
|
|
|
88
94
|
/* Botones acción */
|
|
@@ -94,11 +100,12 @@ tr>td.actions {
|
|
|
94
100
|
|
|
95
101
|
.actions a, .actions input {
|
|
96
102
|
width: 47%;
|
|
97
|
-
border-radius:
|
|
103
|
+
border-radius: 4px;
|
|
98
104
|
text-transform: uppercase;
|
|
99
105
|
text-decoration: none;
|
|
100
|
-
font-weight:
|
|
101
|
-
|
|
106
|
+
font-weight: 500;
|
|
107
|
+
letter-spacing: 0.04em;
|
|
108
|
+
font-size: 1.1em;
|
|
102
109
|
}
|
|
103
110
|
|
|
104
111
|
/* Botón Cancelar */
|
|
@@ -121,15 +128,17 @@ td a:hover {
|
|
|
121
128
|
|
|
122
129
|
/* Botón Submit */
|
|
123
130
|
input[type=submit] {
|
|
124
|
-
background-color:
|
|
131
|
+
background-color: var(--primary);
|
|
125
132
|
color: #fff;
|
|
126
133
|
border: none;
|
|
127
134
|
padding: 5px;
|
|
135
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.14);
|
|
128
136
|
}
|
|
129
137
|
|
|
130
138
|
input[type=submit]:hover {
|
|
131
139
|
cursor: pointer;
|
|
132
|
-
background-color:
|
|
140
|
+
background-color: var(--primary-dark);
|
|
141
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 4px 5px rgba(0,0,0,0.14);
|
|
133
142
|
transition: 0.2s;
|
|
134
143
|
}
|
|
135
144
|
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--primary: #1976d2;
|
|
3
|
+
--primary-dark: #1565c0;
|
|
4
|
+
--primary-rgb: 25, 118, 210;
|
|
5
|
+
--font-family: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
|
|
6
|
+
}
|
|
7
|
+
|
|
1
8
|
body:has(#loginForm) {
|
|
2
9
|
width: 80%;
|
|
3
10
|
padding: 20px;
|
|
@@ -7,15 +14,16 @@ body:has(#loginForm) {
|
|
|
7
14
|
align-items: center;
|
|
8
15
|
justify-content: center;
|
|
9
16
|
justify-self: anchor-center;
|
|
10
|
-
background:
|
|
11
|
-
font-family:
|
|
17
|
+
background: #eceff1;
|
|
18
|
+
font-family: var(--font-family);
|
|
12
19
|
}
|
|
13
20
|
|
|
14
21
|
#loginForm {
|
|
15
22
|
background: #ffffff;
|
|
16
23
|
padding: 30px;
|
|
17
|
-
border-radius:
|
|
18
|
-
|
|
24
|
+
border-radius: 8px;
|
|
25
|
+
border-top: 4px solid var(--primary);
|
|
26
|
+
box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
|
|
19
27
|
width: 100%;
|
|
20
28
|
max-width: 500px;
|
|
21
29
|
animation: fadeIn 0.5s ease-out;
|
|
@@ -29,7 +37,7 @@ body:has(#loginForm) {
|
|
|
29
37
|
.logintable { width: 100%; border-collapse: collapse; }
|
|
30
38
|
|
|
31
39
|
.formtitle {
|
|
32
|
-
color:
|
|
40
|
+
color: var(--primary-dark);
|
|
33
41
|
font-size: 1.8em;
|
|
34
42
|
font-weight: 700;
|
|
35
43
|
text-align: center;
|
|
@@ -54,6 +62,10 @@ body:has(#loginForm) {
|
|
|
54
62
|
margin-top: 10px;
|
|
55
63
|
}
|
|
56
64
|
|
|
65
|
+
.formtd input, .submit {
|
|
66
|
+
font-family: inherit;
|
|
67
|
+
}
|
|
68
|
+
|
|
57
69
|
.formtd input {
|
|
58
70
|
width: 92%;
|
|
59
71
|
padding: 12px 14px;
|
|
@@ -67,27 +79,29 @@ body:has(#loginForm) {
|
|
|
67
79
|
}
|
|
68
80
|
|
|
69
81
|
.formtd input:focus {
|
|
70
|
-
border-color:
|
|
82
|
+
border-color: var(--primary);
|
|
71
83
|
background-color: #ffffff;
|
|
72
|
-
box-shadow: 0 0 0
|
|
84
|
+
box-shadow: 0 0 0 3px unquote("rgba(var(--primary-rgb), 0.2)");
|
|
73
85
|
}
|
|
74
86
|
|
|
75
87
|
.submit {
|
|
76
88
|
width: 100%;
|
|
77
|
-
background-color:
|
|
89
|
+
background-color: var(--primary);
|
|
78
90
|
color: white;
|
|
79
91
|
padding: 12px;
|
|
80
92
|
border: none;
|
|
81
|
-
border-radius:
|
|
82
|
-
font-size: 1.
|
|
83
|
-
font-weight:
|
|
93
|
+
border-radius: 4px;
|
|
94
|
+
font-size: 1.1em;
|
|
95
|
+
font-weight: 500;
|
|
96
|
+
letter-spacing: 0.04em;
|
|
97
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.14);
|
|
84
98
|
cursor: pointer;
|
|
85
99
|
margin-top: 25px;
|
|
86
|
-
transition: background 0.2s;
|
|
100
|
+
transition: background 0.2s, box-shadow 0.2s;
|
|
87
101
|
text-transform: uppercase;
|
|
88
102
|
}
|
|
89
103
|
|
|
90
|
-
.submit:hover { background-color:
|
|
104
|
+
.submit:hover { background-color: var(--primary-dark); box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 4px 5px rgba(0,0,0,0.14); }
|
|
91
105
|
|
|
92
106
|
/* Limpieza de basura visual del HTML original */
|
|
93
107
|
.logintableRightImg, #loginFormRightImg, .iconostd {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "backend-skins",
|
|
3
3
|
"description": "Skins for backend-plus",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.36",
|
|
5
5
|
"author": "Codenautas <codenautas@googlegroups.com>",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": "codenautas/backend-skins",
|
|
@@ -9,17 +9,27 @@
|
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
11
|
"contributors": [
|
|
12
|
-
{
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
{
|
|
13
|
+
"name": "Julieta Vicente",
|
|
14
|
+
"email": "julietaluciavicente@gmail.com"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"name": "Estefanía Capece",
|
|
18
|
+
"email": "eycapece@gmail.com"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "Emilio Platzer",
|
|
22
|
+
"email": "emilioplatzer@gmail.com"
|
|
23
|
+
}
|
|
15
24
|
],
|
|
16
|
-
"dependencies": {
|
|
17
|
-
},
|
|
25
|
+
"dependencies": {},
|
|
18
26
|
"devDependencies": {
|
|
19
|
-
"backend-plus": "~0.8.4"
|
|
27
|
+
"backend-plus": "~0.8.4",
|
|
28
|
+
"stylus": "^0.64.0"
|
|
20
29
|
},
|
|
21
30
|
"scripts": {
|
|
22
|
-
"start": "node --version"
|
|
31
|
+
"start": "node --version",
|
|
32
|
+
"test": "node test/compilar-styl.js"
|
|
23
33
|
},
|
|
24
34
|
"engines": {
|
|
25
35
|
"node": ">= 4.4"
|