mirror of
https://github.com/nextcloud/server.git
synced 2026-02-19 02:38:40 -05:00
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:
parent
0af4e9d4fe
commit
443206965d
5 changed files with 85 additions and 8 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
|
|
@ -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 ------------------------------------------------------------------ */
|
||||
|
|
|
|||
|
|
@ -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
Loading…
Reference in a new issue