Skip to content

Commit d213399

Browse files
susnuxsusnux
committed
fix: Adjust legacy CSS styles for new Nextcloud 30 design
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
1 parent 2c24c3c commit d213399

File tree

3 files changed

+61
-53
lines changed

3 files changed

+61
-53
lines changed

‎apps/settings/css/settings.scss

+15-12
Original file line numberDiff line numberDiff line change
@@ -133,25 +133,28 @@ select {
133133

134134
.link-button {
135135
display: inline-block;
136-
margin: 16px;
137-
padding: 14px 20px;
136+
margin: calc(2 * var(--default-grid-baseline));
137+
padding: calc(2 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
138138
background-color: var(--color-primary-element);
139139
color: var(--color-primary-element-text);
140-
border-radius: var(--border-radius-pill);
140+
border-radius: var(--border-radius-element);
141141
border: 1px solid var(--color-primary-element);
142142
box-shadow: 0 2px 9px var(--color-box-shadow);
143143

144-
&:active,
145144
&:hover,
146-
&:focus,
145+
&:focus {
146+
background-color: var(--color-primary-element-hover);
147+
}
148+
149+
&:active,
147150
&:focus-visible {
148151
box-shadow: 0 0 0 4px var(--color-main-background) !important;
149152
outline: 2px solid var(--color-main-text) !important;
150153
}
151154

152155
&.icon-file {
153-
padding-left: 48px;
154-
background-position: 24px;
156+
padding-left: calc(var(--default-grid-baseline) + var(--default-clickable-area));
157+
background-position: calc(2 * var(--default-grid-baseline));
155158
}
156159
}
157160

@@ -236,17 +239,17 @@ select {
236239
.federation-menu {
237240
position: relative;
238241
cursor: pointer;
239-
width: 44px;
240-
height: 44px;
241-
padding: 10px;
242+
width: var(--default-clickable-area);
243+
height: var(--default-clickable-area);
244+
padding: calc(2 * var(--default-grid-baseline));
242245
margin: 0;
243246
background: none;
244247
border: none;
245248

246249
&:hover,
247250
&:focus {
248251
background-color: var(--color-background-hover);
249-
border-radius: var(--border-radius-pill);
252+
border-radius: var(--border-radius-element);
250253

251254
.icon-federation-menu {
252255
opacity: 0.8;
@@ -268,7 +271,7 @@ select {
268271
}
269272

270273
.federationScopeMenu {
271-
top: 44px;
274+
top: var(--default-clickable-area);
272275

273276
&.popovermenu {
274277
.menuitem {

‎core/css/apps.scss

+35-37
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,6 @@ kbd {
112112
/* APP-NAVIGATION ------------------------------------------------------------ */
113113
/* Navigation: folder like structure */
114114
#app-navigation:not(.vue) {
115-
// We use fixed variable for the pill style as we have larger containers around nested list entries
116-
--border-radius-pill: calc(var(--default-clickable-area) / 2);
117115
// Ensure the maxcontrast color is set for the background
118116
--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
119117

@@ -136,8 +134,8 @@ kbd {
136134

137135
.app-navigation-caption {
138136
font-weight: bold;
139-
line-height: 44px;
140-
padding: 10px 44px 0 44px;
137+
line-height: var(--default-clickable-area);
138+
padding: 10px var(--default-clickable-area) 0 var(--default-clickable-area);
141139
white-space: nowrap;
142140
text-overflow: ellipsis;
143141
box-shadow: none !important;
@@ -192,7 +190,7 @@ kbd {
192190
margin: 0;
193191
margin-bottom: 3px;
194192
width: 100%;
195-
border-radius: var(--border-radius-pill);
193+
border-radius: var(--border-radius-element);
196194

197195
/* Pinned-to-bottom entries */
198196
&.pinned {
@@ -204,13 +202,13 @@ kbd {
204202

205203
> .app-navigation-entry-deleted {
206204
/* Ugly hack for overriding the main entry link */
207-
padding-left: 44px !important;
205+
padding-left: var(--default-clickable-area) !important;
208206
}
209207
> .app-navigation-entry-edit {
210208
/* Ugly hack for overriding the main entry link */
211209
/* align the input correctly with the link text
212210
44px-6px padding for the input */
213-
padding-left: 38px !important;
211+
padding-left: calc(var(--default-clickable-area) - 6px) !important;
214212
}
215213

216214
a:hover,
@@ -262,23 +260,23 @@ kbd {
262260
> li {
263261
display: inline-flex;
264262
flex-wrap: wrap;
265-
padding-left: 44px;
263+
padding-left: var(--default-clickable-area);
266264
width: 100%;
267265
margin-bottom: 3px;
268266

269267
&:hover,
270268
&:focus {
271269
&,
272270
> a {
273-
border-radius: var(--border-radius-pill);
271+
border-radius: var(--border-radius-element);
274272
background-color: var(--color-background-hover);
275273
}
276274
}
277275
&.active,
278276
a.selected {
279277
&,
280278
> a {
281-
border-radius: var(--border-radius-pill);
279+
border-radius: var(--border-radius-element);
282280
background-color: var(--color-primary-element-light);
283281
&:first-child > img {
284282
filter: var(--primary-invert-if-dark);
@@ -288,7 +286,7 @@ kbd {
288286

289287
/* align loader */
290288
&.icon-loading-small:after {
291-
left: 22px; /* 44px / 2 */
289+
left: calc(var(--default-clickable-area) / 2);
292290
}
293291

294292
> .app-navigation-entry-deleted {
@@ -302,7 +300,7 @@ kbd {
302300
margin-left: 4px;
303301
/* align the input correctly with the link text
304302
44px+44px-4px-6px padding for the input */
305-
padding-left: 78px !important;
303+
padding-left: calc(2 * var(--default-clickable-area) - 10px) !important;
306304
}
307305
}
308306
}
@@ -327,23 +325,23 @@ kbd {
327325
background-repeat: no-repeat;
328326
display: block;
329327
justify-content: space-between;
330-
line-height: 44px;
331-
min-height: 44px;
328+
line-height: var(--default-clickable-area);
329+
min-height: var(--default-clickable-area);
332330
padding: 0 12px 0 14px;
333331
overflow: hidden;
334332
box-sizing: border-box;
335333
white-space: nowrap;
336334
text-overflow: ellipsis;
337-
border-radius: var(--border-radius-pill);
335+
border-radius: var(--border-radius-element);
338336
color: var(--color-main-text);
339337
flex: 1 1 0px;
340338
z-index: 100; /* above the bullet to allow click*/
341339
/* TODO: forbid using img as icon in menu? */
342340

343341
&.svg {
344-
padding: 0 12px 0 44px;
342+
padding: 0 12px 0 var(--default-clickable-area);
345343
:focus-visible {
346-
padding: 0 8px 0 42px;
344+
padding: 0 8px 0 calc(var(--default-clickable-area) - 2px);
347345
}
348346
}
349347
&:first-child img {
@@ -383,7 +381,7 @@ kbd {
383381

384382
/* popover fix the flex positionning of the li parent */
385383
> .app-navigation-entry-menu {
386-
top: 44px;
384+
top: var(--default-clickable-area);
387385
}
388386

389387
/* show edit/undo field if editing/deleted */
@@ -427,8 +425,8 @@ kbd {
427425
.collapse {
428426
opacity: 0;
429427
position: absolute;
430-
width: 44px;
431-
height: 44px;
428+
width: var(--default-clickable-area);
429+
height: var(--default-clickable-area);
432430
margin: 0;
433431
z-index: 110;
434432

@@ -445,8 +443,8 @@ kbd {
445443
}
446444
&:before {
447445
position: absolute;
448-
height: 44px;
449-
width: 44px;
446+
height: var(--default-clickable-area);
447+
width: var(--default-clickable-area);
450448
margin: 0;
451449
padding: 0;
452450
background: none;
@@ -472,7 +470,7 @@ kbd {
472470

473471
/* force padding on link no matter if 'a' has an icon class */
474472
> a:first-child {
475-
padding-left: 44px;
473+
padding-left: var(--default-clickable-area);
476474
}
477475
&:hover,
478476
&:focus {
@@ -506,8 +504,8 @@ kbd {
506504
justify-content: flex-end;
507505
}
508506
li {
509-
width: 44px !important;
510-
height: 44px;
507+
width: var(--default-clickable-area) !important;
508+
height: var(--default-clickable-area);
511509
}
512510
button {
513511
height: 100%;
@@ -530,7 +528,7 @@ kbd {
530528
overflow: hidden;
531529
text-align: right;
532530
font-size: 9pt;
533-
line-height: 44px;
531+
line-height: var(--default-clickable-area);
534532
padding: 0 12px; /* Same padding as all li > a in the app-navigation */
535533

536534
&.highlighted {
@@ -605,21 +603,21 @@ kbd {
605603
*/
606604
.app-navigation-entry-deleted {
607605
display: inline-flex;
608-
padding-left: 44px;
606+
padding-left: var(--default-clickable-area);
609607
transform: translateX(#{variables.$navigation-width});
610608
.app-navigation-entry-deleted-description {
611609
position: relative;
612610
white-space: nowrap;
613611
text-overflow: ellipsis;
614612
overflow: hidden;
615613
flex: 1 1 0px;
616-
line-height: 44px;
614+
line-height: var(--default-clickable-area);
617615
}
618616
.app-navigation-entry-deleted-button {
619617
margin: 0;
620-
height: 44px;
621-
width: 44px;
622-
line-height: 44px;
618+
height: var(--default-clickable-area);
619+
width: var(--default-clickable-area);
620+
line-height: var(--default-clickable-area);
623621
&:hover,
624622
&:focus {
625623
opacity: 1;
@@ -827,7 +825,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
827825
.settings-button {
828826
display: flex;
829827
align-items: center;
830-
height: 44px;
828+
height: var(--default-clickable-area);
831829
width: 100%;
832830
padding: 0;
833831
margin: 0;
@@ -858,8 +856,8 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
858856
background-position: 14px center;
859857
background-repeat: no-repeat;
860858
content: '';
861-
width: 44px;
862-
height: 44px;
859+
width: var(--default-clickable-area);
860+
height: var(--default-clickable-area);
863861
top: 0;
864862
left: 0;
865863
display: block;
@@ -976,7 +974,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
976974
}
977975

978976
/* POPOVER MENU ------------------------------------------------------------ */
979-
$popoveritem-height: 44px;
977+
$popoveritem-height: 34px;
980978
$popovericon-size: 16px;
981979
$outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
982980

@@ -1125,7 +1123,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
11251123
box-shadow: 0 0 0 2px var(--color-primary-element);
11261124
}
11271125
&.active {
1128-
border-radius: var(--border-radius-pill);
1126+
border-radius: var(--border-radius-element);
11291127
background-color: var(--color-primary-element-light);
11301128
}
11311129
/* prevent .action class to break the design */
@@ -1405,7 +1403,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
14051403
opacity: .5;
14061404
order: 3;
14071405
flex: 1 0;
1408-
flex-basis: calc(100% - 44px);
1406+
flex-basis: calc(100% - var(--default-clickable-area));
14091407
}
14101408

14111409
.app-content-list-item-details {

‎core/css/inputs.scss

+11-4
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ button:not(
8888
&:focus,
8989
&.active {
9090
/* active class used for multiselect */
91-
border-color: var(--color-primary-element);
91+
border-color: var(--color-main-text);
9292
outline: none;
9393
}
9494
&:active {
@@ -211,13 +211,20 @@ button:not(
211211
input[type='button'],
212212
input[type='submit'],
213213
input[type='reset'] {
214-
padding: 8px 14px;
214+
padding: calc((var(--default-clickable-area) - 1lh) / 2) calc(3 * var(--default-grid-baseline));
215215
font-size: var(--default-font-size);
216216
width: auto;
217217
min-height: var(--default-clickable-area);
218218
cursor: pointer;
219219
box-sizing: border-box;
220-
background-color: var(--color-background-dark);
220+
color: var(--color-primary-element-light-text);
221+
background-color: var(--color-primary-element-light);
222+
border: none;
223+
224+
&:hover,
225+
&:focus {
226+
background-color: var(--color-primary-element-light-hover);
227+
}
221228

222229
&:disabled {
223230
cursor: default;
@@ -303,7 +310,7 @@ input[type='button'],
303310
input[type='submit'],
304311
input[type='reset'] {
305312
font-weight: bold;
306-
border-radius: var(--border-radius-pill);
313+
border-radius: var(--border-radius-element);
307314

308315
/* Get rid of the inside dotted line in Firefox */
309316
&::-moz-focus-inner {

0 commit comments

Comments
 (0)