Change focused items behavior that neighbor elements (text and border) have no overlapping.

Add native tooltips to items.

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
This commit is contained in:
julia.kirschenheuter 2022-11-29 17:55:23 +01:00 committed by Christoph Wurst
parent 0af4e9d4fe
commit 443206965d
No known key found for this signature in database
GPG key ID: CC42AC2A7F0E56D8
5 changed files with 85 additions and 8 deletions

View file

@ -45,10 +45,36 @@
#expanddiv a:not(.button):focus-visible,
#expanddiv button:not(.button-vue):focus-visible,
#expanddiv div[role=button]:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-primary-text);
border-radius: var(--border-radius);
outline: none;
}
#header a:not(.button):focus-visible::after, #header .button-vue:focus-visible::after, #header div[role=button]:focus-visible::after,
#expanddiv a:not(.button):focus-visible::after,
#expanddiv .button-vue:focus-visible::after,
#expanddiv div[role=button]:focus-visible::after {
content: " ";
position: absolute;
transform: translateX(-50%);
width: 12px;
height: 2px;
border-radius: 3px;
background-color: var(--color-primary-text);
left: 50%;
opacity: 1;
}
#header a:not(.button):focus-visible::after, #header .button-vue:focus-visible::after,
#expanddiv a:not(.button):focus-visible::after,
#expanddiv .button-vue:focus-visible::after {
bottom: 2px;
}
#header .header-right a:not(.button):focus-visible::after, #header .header-right div[role=button]:focus-visible::after,
#expanddiv .header-right a:not(.button):focus-visible::after,
#expanddiv .header-right div[role=button]:focus-visible::after {
bottom: 4px;
}
#header .header-right #expand.menutoggle:focus-visible::after,
#expanddiv .header-right #expand.menutoggle:focus-visible::after {
left: 40%;
}
/* HEADERS ------------------------------------------------------------------ */
#body-user #header,

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["variables.scss","header.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AAAA;EAEC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAIF;AACA;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA,QDoEe;ECnEf;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AASF;AACC;AA+HA;;AA5HA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAfD;EACA;EAgBC;EACA,KDyBc;ECxBd;EACA;AAMA;AAmBA;;AAvBA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAEC;EAzCF;EACA;;AA6CC;EACC;EACA;EACA;EACA;;AAEC;EACC;EACA;EACA;EACA,QAlDuB;EAmDvB;EACA;EACA;EACA;EACA;EACA;;AACA;EAEC;;AAED;EAEC;;AAED;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAML;EACC;EACA;EACA;EACA;EAEA;;AAGD;EACC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAKA;AAAA;EAEC;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA,ODnGY;ECoGZ;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;;;AAOL;AAEA;EACC;;;AAGD;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;AAEA;;AACA;EACC;EACA;AAqBA;AA2BA;;AA9CA;EAGC;;AAEA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAKF;EACC;EACA;EACA;AAMA;;AAJA;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;AAEA;;AACA;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,KDhPc;;;ACqPhB;AAGC;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA","file":"header.css"}
{"version":3,"sourceRoot":"","sources":["variables.scss","header.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AAAA;EAEC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;EACC;;AAIA;AAAA;AAAA;EACC;;AAGD;AAAA;EACC;;;AAMH;AACA;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA,QD2Ce;EC1Cf;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AASF;AACC;AA+HA;;AA5HA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAfD;EACA;EAgBC;EACA;EACA;EACA;AAMA;AAmBA;;AAvBA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAEC;EAzCF;EACA;;AA6CC;EACC;EACA;EACA;EACA;;AAEC;EACC;EACA;EACA;EACA,QAlDuB;EAmDvB;EACA;EACA;EACA;EACA;EACA;;AACA;EAEC;;AAED;EAEC;;AAED;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAML;EACC;EACA;EACA;EACA;EAEA;;AAGD;EACC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAKA;AAAA;EAEC;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA,OD5HY;EC6HZ;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;;;AAOL;AAEA;EACC;;;AAGD;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;AAEA;;AACA;EACC;EACA;AAqBA;AA2BA;;AA9CA;EAGC;;AAEA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAKF;EACC;EACA;EACA;AAMA;;AAJA;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;AAEA;;AACA;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,KDzQc;;;AC8QhB;AAGC;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA","file":"header.css"}

View file

@ -21,10 +21,35 @@
-moz-user-select: none;
-ms-user-select: none;
a:not(.button):focus-visible, button:not(.button-vue):focus-visible, div[role="button"]:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-primary-text);
border-radius: var(--border-radius);
outline: none;
}
a:not(.button):focus-visible::after, .button-vue:focus-visible::after, div[role=button]:focus-visible::after {
content: " ";
position: absolute;
transform: translateX(-50%);
width: 12px;
height: 2px;
border-radius: 3px;
background-color: var(--color-primary-text);
left: 50%;
opacity: 1;
}
a:not(.button):focus-visible::after, .button-vue:focus-visible::after {
bottom: 2px;
}
.header-right {
a:not(.button):focus-visible::after, div[role=button]:focus-visible::after {
bottom: 4px;
}
#expand.menutoggle:focus-visible::after {
left: 40%;
}
}
}
/* HEADERS ------------------------------------------------------------------ */

View file

@ -2160,10 +2160,36 @@ label.infield {
#expanddiv a:not(.button):focus-visible,
#expanddiv button:not(.button-vue):focus-visible,
#expanddiv div[role=button]:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-primary-text);
border-radius: var(--border-radius);
outline: none;
}
#header a:not(.button):focus-visible::after, #header .button-vue:focus-visible::after, #header div[role=button]:focus-visible::after,
#expanddiv a:not(.button):focus-visible::after,
#expanddiv .button-vue:focus-visible::after,
#expanddiv div[role=button]:focus-visible::after {
content: " ";
position: absolute;
transform: translateX(-50%);
width: 12px;
height: 2px;
border-radius: 3px;
background-color: var(--color-primary-text);
left: 50%;
opacity: 1;
}
#header a:not(.button):focus-visible::after, #header .button-vue:focus-visible::after,
#expanddiv a:not(.button):focus-visible::after,
#expanddiv .button-vue:focus-visible::after {
bottom: 2px;
}
#header .header-right a:not(.button):focus-visible::after, #header .header-right div[role=button]:focus-visible::after,
#expanddiv .header-right a:not(.button):focus-visible::after,
#expanddiv .header-right div[role=button]:focus-visible::after {
bottom: 4px;
}
#header .header-right #expand.menutoggle:focus-visible::after,
#expanddiv .header-right #expand.menutoggle:focus-visible::after {
left: 40%;
}
/* HEADERS ------------------------------------------------------------------ */
#body-user #header,

File diff suppressed because one or more lines are too long