diff options
Diffstat (limited to 'core/css/header.css')
| -rw-r--r-- | core/css/header.css | 382 |
1 files changed, 1 insertions, 381 deletions
diff --git a/core/css/header.css b/core/css/header.css index 1dc751ad910..966102e57f5 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -1,381 +1 @@ -@charset "UTF-8"; -/** - * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) - * - * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * - */ -/** - * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com> - * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net> - * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch> - * @copyright Copyright (c) 2016, Jos Poortvliet <jos@opensuse.org> - * @copyright Copyright (c) 2016, Erik Pellikka <erik@pellikka.org> - * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch> - * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de> - * @copyright Copyright (c) 2015, Volker E <volker.e@temporaer.net> - * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net> - * - * @license GNU AGPL version 3 or any later version - * - */ -/* prevent ugly selection effect on accidental selection */ -#header, -#expanddiv { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} -#header a:not(.button):focus-visible, #header button:not(.button-vue):focus-visible, #header div[role=button]:focus-visible, -#expanddiv a:not(.button):focus-visible, -#expanddiv button:not(.button-vue):focus-visible, -#expanddiv div[role=button]:focus-visible { - 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, -#body-settings #header, -#body-public #header { - display: inline-flex; - position: absolute; - top: 0; - width: 100%; - z-index: 2000; - height: 50px; - box-sizing: border-box; - justify-content: space-between; -} - -/* LOGO and APP NAME -------------------------------------------------------- */ -#nextcloud { - padding: 5px 0; - padding-left: 86px; - position: relative; - height: calc(100% - 4px); - box-sizing: border-box; - opacity: 1; - align-items: center; - display: flex; - flex-wrap: wrap; - overflow: hidden; - margin: 2px; -} -#nextcloud:hover, #nextcloud:active { - opacity: 1; -} - -#header { - /* Header menu */ - /* Right header standard */ -} -#header .header-right > div > .menu { - background-color: var(--color-main-background); - filter: drop-shadow(0 1px 5px var(--color-box-shadow)); - border-radius: var(--border-radius-large); - box-sizing: border-box; - z-index: 2000; - position: absolute; - max-width: 350px; - min-height: 66px; - max-height: calc(100vh - 50px - 8px); - right: 8px; - top: 50px; - margin: 0; - overflow-y: auto; - /* Dropdown arrow */ - /* Use by the settings right menu */ -} -#header .header-right > div > .menu:not(.popovermenu) { - display: none; -} -#header .header-right > div > .menu:after { - border: 10px solid transparent; - border-bottom-color: var(--color-main-background); - bottom: 100%; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - right: 10px; -} -#header .header-right > div > .menu > div, #header .header-right > div > .menu > ul { - -webkit-overflow-scrolling: touch; - min-height: 66px; - max-height: calc(100vh - 50px - 8px); -} -#header .header-right > div > .menu.settings-menu > ul { - padding: 4px; - display: flex; - flex-direction: column; - gap: 2px; -} -#header .header-right > div > .menu.settings-menu > ul li a { - border-radius: 6px; - display: inline-flex; - align-items: center; - height: 44px; - color: var(--color-main-text); - padding: 10px 12px; - box-sizing: border-box; - white-space: nowrap; - position: relative; - width: 100%; -} -#header .header-right > div > .menu.settings-menu > ul li a:hover, #header .header-right > div > .menu.settings-menu > ul li a:focus { - background-color: var(--color-background-hover); -} -#header .header-right > div > .menu.settings-menu > ul li a:active, #header .header-right > div > .menu.settings-menu > ul li a.active { - background-color: var(--color-primary-light); -} -#header .header-right > div > .menu.settings-menu > ul li a:focus-visible { - box-shadow: inset 0 0 0 2px var(--color-primary); - outline: none; -} -#header .header-right > div > .menu.settings-menu > ul li a span { - display: inline-block; - padding-bottom: 0; - color: var(--color-main-text); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 110px; -} -#header .header-right > div > .menu.settings-menu > ul li a .icon-loading-small { - margin-right: 10px; - background-size: 16px 16px; -} -#header .header-right > div > .menu.settings-menu > ul li a img, -#header .header-right > div > .menu.settings-menu > ul li a svg { - opacity: 0.7; - margin-right: 10px; - height: 16px; - width: 16px; - filter: var(--background-invert-if-dark); -} -#header .logo { - display: inline-flex; - width: 62px; - position: absolute; - left: 12px; - filter: var(--image-logoheader-custom, var(--background-image-invert-if-bright)); -} -#header .header-appname-container { - display: none; - padding-right: 10px; - flex-shrink: 0; -} -#header #header-left, #header .header-left, -#header #header-right, #header .header-right { - display: inline-flex; - align-items: center; -} -#header #header-left, #header .header-left { - flex: 1 0; - white-space: nowrap; - min-width: 0; -} -#header #header-right, #header .header-right { - justify-content: flex-end; - flex-shrink: 1; -} -#header .header-right > div, -#header .header-right > form { - height: 100%; - position: relative; -} -#header .header-right > div > .menutoggle, -#header .header-right > form > .menutoggle { - display: flex; - justify-content: center; - align-items: center; - width: 50px; - height: 44px; - cursor: pointer; - opacity: 0.85; - padding: 0; - margin: 2px 0; -} -#header .header-right > div > .menutoggle:focus, -#header .header-right > form > .menutoggle:focus { - opacity: 1; -} -#header .header-right > div > .menutoggle:focus-visible, -#header .header-right > form > .menutoggle:focus-visible { - outline: none; -} - -/* hover effect for app switcher label */ -.header-appname-container .header-appname { - opacity: 0.75; -} - -/* TODO: move into minimal css file for public shared template */ -/* only used for public share pages now as we have the app icons when logged in */ -.header-appname { - color: var(--color-primary-text); - font-size: 16px; - font-weight: bold; - margin: 0; - padding: 0; - padding-right: 5px; - overflow: hidden; - text-overflow: ellipsis; - flex: 1 1 100%; -} - -.header-shared-by { - color: var(--color-primary-text); - position: relative; - font-weight: 300; - font-size: 11px; - line-height: 11px; - overflow: hidden; - text-overflow: ellipsis; -} - -/* USER MENU -----------------------------------------------------------------*/ -#settings { - display: inline-block; - height: 100%; - cursor: pointer; - flex: 0 0 auto; - /* User menu on the right */ -} -#settings #expand { - opacity: 1; /* override icon opacity */ - margin-right: 12px; - /* Profile picture in header */ - /* show triangle below user menu if active */ -} -#settings #expand:hover, #settings #expand:focus, #settings #expand:active { - color: var(--color-primary-text); -} -#settings #expand:hover #expandDisplayName, -#settings #expand:hover .avatardiv, #settings #expand:focus #expandDisplayName, -#settings #expand:focus .avatardiv, #settings #expand:active #expandDisplayName, -#settings #expand:active .avatardiv { - border-radius: 50%; - border: 2px solid var(--color-primary-text); - margin: -2px; -} -#settings #expand:hover .avatardiv, #settings #expand:focus .avatardiv, #settings #expand:active .avatardiv { - background-color: var(--color-primary-text); -} -#settings #expand:hover #expandDisplayName, #settings #expand:focus #expandDisplayName, #settings #expand:active #expandDisplayName { - opacity: 1; -} -#settings #expand .avatardiv { - cursor: pointer; - height: 32px; - width: 32px; - /* do not show display name when profile picture is present */ -} -#settings #expand .avatardiv img { - opacity: 1; - cursor: pointer; -} -#settings #expand .avatardiv.avatardiv-shown + #expandDisplayName { - display: none; -} -#settings #expand #expandDisplayName { - padding: 8px; - opacity: 0.6; - cursor: pointer; - /* full opacity for gear icon if active */ -} -#body-settings #settings #expand #expandDisplayName { - opacity: 1; -} -#body-settings #settings #expand:before { - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - bottom: 2px; - z-index: 100; - display: block; - width: 10px; - height: 5px; - border-radius: 3px; - background-color: var(--color-primary-text); -} -#settings #expanddiv:after { - right: 22px; -} - -/* Skip navigation links – show only on keyboard focus */ -#skip-actions { - position: absolute; - overflow: hidden; - z-index: 9999; - top: -999px; - left: 3px; - height: 50px; - padding: 11px; -} -#skip-actions:focus-within { - top: 50px; -} - -/* Empty content messages in the header e.g. notifications, contacts menu, … */ -header #emptycontent h2, -header .emptycontent h2 { - font-weight: normal; - font-size: 16px; -} -header #emptycontent [class^=icon-], -header #emptycontent [class*=icon-], -header .emptycontent [class^=icon-], -header .emptycontent [class*=icon-] { - background-size: 48px; - height: 48px; - width: 48px; -} - -/*# sourceMappingURL=header.css.map */ +#header,#expanddiv{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#header a:not(.button):focus-visible,#header button:not(.button-vue):focus-visible,#header div[role=button]:focus-visible,#expanddiv a:not(.button):focus-visible,#expanddiv button:not(.button-vue):focus-visible,#expanddiv div[role=button]:focus-visible{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%}#body-user #header,#body-settings #header,#body-public #header{display:inline-flex;position:absolute;top:0;width:100%;z-index:2000;height:50px;box-sizing:border-box;justify-content:space-between}#nextcloud{padding:5px 0;padding-left:86px;position:relative;height:calc(100% - 4px);box-sizing:border-box;opacity:1;align-items:center;display:flex;flex-wrap:wrap;overflow:hidden;margin:2px}#nextcloud:hover,#nextcloud:active{opacity:1}#header .header-right>div>.menu{background-color:var(--color-main-background);filter:drop-shadow(0 1px 5px var(--color-box-shadow));border-radius:var(--border-radius-large);box-sizing:border-box;z-index:2000;position:absolute;max-width:350px;min-height:66px;max-height:calc(100vh - 50px - 8px);right:8px;top:50px;margin:0;overflow-y:auto}#header .header-right>div>.menu:not(.popovermenu){display:none}#header .header-right>div>.menu:after{border:10px solid rgba(0,0,0,0);border-bottom-color:var(--color-main-background);bottom:100%;content:" ";height:0;width:0;position:absolute;pointer-events:none;right:10px}#header .header-right>div>.menu>div,#header .header-right>div>.menu>ul{-webkit-overflow-scrolling:touch;min-height:66px;max-height:calc(100vh - 50px - 8px)}#header .header-right>div>.menu.settings-menu>ul{padding:4px;display:flex;flex-direction:column;gap:2px}#header .header-right>div>.menu.settings-menu>ul li a{border-radius:6px;display:inline-flex;align-items:center;height:44px;color:var(--color-main-text);padding:10px 12px;box-sizing:border-box;white-space:nowrap;position:relative;width:100%}#header .header-right>div>.menu.settings-menu>ul li a:hover,#header .header-right>div>.menu.settings-menu>ul li a:focus{background-color:var(--color-background-hover)}#header .header-right>div>.menu.settings-menu>ul li a:active,#header .header-right>div>.menu.settings-menu>ul li a.active{background-color:var(--color-primary-light)}#header .header-right>div>.menu.settings-menu>ul li a:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary);outline:none}#header .header-right>div>.menu.settings-menu>ul li a span{display:inline-block;padding-bottom:0;color:var(--color-main-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}#header .header-right>div>.menu.settings-menu>ul li a .icon-loading-small{margin-right:10px;background-size:16px 16px}#header .header-right>div>.menu.settings-menu>ul li a img,#header .header-right>div>.menu.settings-menu>ul li a svg{opacity:.7;margin-right:10px;height:16px;width:16px;filter:var(--background-invert-if-dark)}#header .logo{display:inline-flex;width:62px;position:absolute;left:12px;filter:var(--image-logoheader-custom, var(--background-image-invert-if-bright))}#header .header-appname-container{display:none;padding-right:10px;flex-shrink:0}#header #header-left,#header .header-left,#header #header-right,#header .header-right{display:inline-flex;align-items:center}#header #header-left,#header .header-left{flex:1 0;white-space:nowrap;min-width:0}#header #header-right,#header .header-right{justify-content:flex-end;flex-shrink:1}#header .header-right>div,#header .header-right>form{height:100%;position:relative}#header .header-right>div>.menutoggle,#header .header-right>form>.menutoggle{display:flex;justify-content:center;align-items:center;width:50px;height:44px;cursor:pointer;opacity:.85;padding:0;margin:2px 0}#header .header-right>div>.menutoggle:focus,#header .header-right>form>.menutoggle:focus{opacity:1}#header .header-right>div>.menutoggle:focus-visible,#header .header-right>form>.menutoggle:focus-visible{outline:none}.header-appname-container .header-appname{opacity:.75}.header-appname{color:var(--color-primary-text);font-size:16px;font-weight:bold;margin:0;padding:0;padding-right:5px;overflow:hidden;text-overflow:ellipsis;flex:1 1 100%}.header-shared-by{color:var(--color-primary-text);position:relative;font-weight:300;font-size:11px;line-height:11px;overflow:hidden;text-overflow:ellipsis}#settings{display:inline-block;height:100%;cursor:pointer;flex:0 0 auto}#settings #expand{opacity:1;margin-right:12px}#settings #expand:hover,#settings #expand:focus,#settings #expand:active{color:var(--color-primary-text)}#settings #expand:hover #expandDisplayName,#settings #expand:hover .avatardiv,#settings #expand:focus #expandDisplayName,#settings #expand:focus .avatardiv,#settings #expand:active #expandDisplayName,#settings #expand:active .avatardiv{border-radius:50%;border:2px solid var(--color-primary-text);margin:-2px}#settings #expand:hover .avatardiv,#settings #expand:focus .avatardiv,#settings #expand:active .avatardiv{background-color:var(--color-primary-text)}#settings #expand:hover #expandDisplayName,#settings #expand:focus #expandDisplayName,#settings #expand:active #expandDisplayName{opacity:1}#settings #expand .avatardiv{cursor:pointer;height:32px;width:32px}#settings #expand .avatardiv img{opacity:1;cursor:pointer}#settings #expand .avatardiv.avatardiv-shown+#expandDisplayName{display:none}#settings #expand #expandDisplayName{padding:8px;opacity:.6;cursor:pointer}#body-settings #settings #expand #expandDisplayName{opacity:1}#body-settings #settings #expand:before{content:" ";height:0;width:0;position:absolute;pointer-events:none;bottom:2px;z-index:100;display:block;width:10px;height:5px;border-radius:3px;background-color:var(--color-primary-text)}#settings #expanddiv:after{right:22px}#skip-actions{position:absolute;overflow:hidden;z-index:9999;top:-999px;left:3px;height:50px;padding:11px}#skip-actions:focus-within{top:50px}header #emptycontent h2,header .emptycontent h2{font-weight:normal;font-size:16px}header #emptycontent [class^=icon-],header #emptycontent [class*=icon-],header .emptycontent [class^=icon-],header .emptycontent [class*=icon-]{background-size:48px;height:48px;width:48px}/*# sourceMappingURL=header.css.map */ |