diff options
28 files changed, 553 insertions, 214 deletions
diff --git a/app/layout/header.phtml b/app/layout/header.phtml index 9977a2b2c..75dacfe1d 100644 --- a/app/layout/header.phtml +++ b/app/layout/header.phtml @@ -48,38 +48,59 @@ <ul class="dropdown-menu scrollbar-thin"> <li class="dropdown-header-close"><a class="toggle_aside" href="#close"><?= _i('close') ?></a></li> - <li class="dropdown-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?></li> - <li class="item"><a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a></li> - <?php if (FreshRSS_Auth::accessNeedsAction()): ?> - <li class="item"><a class="signout" href="<?= _url('auth', 'logout') ?>"><?= _t('gen.auth.logout'); ?><?= _i('logout') ?></a></li> - <?php else: ?> - <li class="item"><span class="signout">(<?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?>)</span></li> - <?php endif; ?> - <li class="dropdown-header"><?= _t('gen.menu.configuration') ?></li> - <li class="item"><a href="<?= _url('configure', 'display') ?>"><?= _t('gen.menu.display') ?></a></li> - <li class="item"><a href="<?= _url('configure', 'reading') ?>"><?= _t('gen.menu.reading') ?></a></li> - <li class="item"><a href="<?= _url('configure', 'archiving') ?>"><?= _t('gen.menu.archiving') ?></a></li> - <li class="item"><a href="<?= _url('configure', 'integration') ?>"><?= _t('gen.menu.sharing') ?></a></li> - <li class="item"><a href="<?= _url('configure', 'shortcut') ?>"><?= _t('gen.menu.shortcuts') ?></a></li> - <li class="item"><a href="<?= _url('configure', 'queries') ?>"><?= _t('gen.menu.queries') ?></a></li> - <li class="item"><a href="<?= _url('extension', 'index') ?>"><?= _t('gen.menu.extensions') ?></a></li> - <?= Minz_ExtensionManager::callHook('menu_configuration_entry') ?> - + <li class="item dropdown-section"> + <div class="dropdown-section-title"> + <?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?> + </div> + <ul> + <li class="item"><a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a></li> + <?php if (FreshRSS_Auth::accessNeedsAction()): ?> + <li class="item"><a class="signout" href="<?= _url('auth', 'logout') ?>"><?= _t('gen.auth.logout'); ?><?= _i('logout') ?></a></li> + <?php else: ?> + <li class="item"><span class="signout">(<?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?>)</span></li> + <?php endif; ?> + </ul> + </li> + <li class="item dropdown-section"> + <div class="dropdown-section-title"> + <?= _t('gen.menu.configuration') ?> + </div> + <ul> + <li class="item"><a href="<?= _url('configure', 'display') ?>"><?= _t('gen.menu.display') ?></a></li> + <li class="item"><a href="<?= _url('configure', 'reading') ?>"><?= _t('gen.menu.reading') ?></a></li> + <li class="item"><a href="<?= _url('configure', 'archiving') ?>"><?= _t('gen.menu.archiving') ?></a></li> + <li class="item"><a href="<?= _url('configure', 'integration') ?>"><?= _t('gen.menu.sharing') ?></a></li> + <li class="item"><a href="<?= _url('configure', 'shortcut') ?>"><?= _t('gen.menu.shortcuts') ?></a></li> + <li class="item"><a href="<?= _url('configure', 'queries') ?>"><?= _t('gen.menu.queries') ?></a></li> + <li class="item"><a href="<?= _url('extension', 'index') ?>"><?= _t('gen.menu.extensions') ?></a></li> + <?= Minz_ExtensionManager::callHook('menu_configuration_entry') ?> + </ul> + </li> <?php if (FreshRSS_Auth::hasAccess('admin')) { ?> - <li class="dropdown-header"><?= _t('gen.menu.admin') ?></li> - <li class="item"><a href="<?= _url('configure', 'system') ?>"><?= _t('gen.menu.system') ?></a></li> - <li class="item"><a href="<?= _url('user', 'manage') ?>"><?= _t('gen.menu.user_management') ?></a></li> - <li class="item"><a href="<?= _url('auth', 'index') ?>"><?= _t('gen.menu.authentication') ?></a></li> - <li class="item"><a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a></li> - <?php if (!FreshRSS_Context::$system_conf->disable_update) { ?> - <li class="item"><a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a></li> - <?php } ?> - <?= Minz_ExtensionManager::callHook('menu_admin_entry') ?> + <li class="item dropdown-section"> + <div class="dropdown-section-title"> + <?= _t('gen.menu.admin') ?> + </div> + <ul> + <li class="item"><a href="<?= _url('configure', 'system') ?>"><?= _t('gen.menu.system') ?></a></li> + <li class="item"><a href="<?= _url('user', 'manage') ?>"><?= _t('gen.menu.user_management') ?></a></li> + <li class="item"><a href="<?= _url('auth', 'index') ?>"><?= _t('gen.menu.authentication') ?></a></li> + <li class="item"><a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a></li> + <?php if (!FreshRSS_Context::$system_conf->disable_update) { ?> + <li class="item"><a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a></li> + <?php } ?> + <?= Minz_ExtensionManager::callHook('menu_admin_entry') ?> + </ul> + </li> <?php } ?> - - <li class="item"><a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a></li> - <li class="item"><a href="<?= _url('index', 'about') ?>"><?= _t('gen.menu.about') ?></a></li> - <?= Minz_ExtensionManager::callHook('menu_other_entry') ?> + + <li class="item dropdown-section"> + <ul> + <li class="item"><a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a></li> + <li class="item"><a href="<?= _url('index', 'about') ?>"><?= _t('gen.menu.about') ?></a></li> + <?= Minz_ExtensionManager::callHook('menu_other_entry') ?> + </ul> + </li> </ul> <a class="dropdown-close" href="#close">❌</a> </div> diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css index 35480c31b..f32d91e53 100644 --- a/p/themes/Alternative-Dark/adark.css +++ b/p/themes/Alternative-Dark/adark.css @@ -341,7 +341,7 @@ a.btn { /*=== Dropdown */ .dropdown-menu { margin: 5px 0 0; - padding: 5px 0; + padding: 0.5rem 0 0.25rem 0; background: var(--background-color-active); font-size: 0.8rem; border: 2px solid var(--background-color-light); @@ -353,23 +353,35 @@ a.btn { border-color: var(--border-color-dark); } -.dropdown-header { - padding: 0 5px 5px; +.dropdown-header, +.dropdown-section .dropdown-section-title { + padding: 0.25rem 0.5rem 0.25rem 1rem; color: var(--font-color-middle); font-weight: bold; text-align: left; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-left: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: var(--background-color-hover); color: var(--font-color-light); } @@ -387,6 +399,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: var(--border-color-dark); } diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css index c01f77896..9cb07185d 100644 --- a/p/themes/Alternative-Dark/adark.rtl.css +++ b/p/themes/Alternative-Dark/adark.rtl.css @@ -341,7 +341,7 @@ a.btn { /*=== Dropdown */ .dropdown-menu { margin: 5px 0 0; - padding: 5px 0; + padding: 0.5rem 0 0.25rem 0; background: var(--background-color-active); font-size: 0.8rem; border: 2px solid var(--background-color-light); @@ -353,23 +353,35 @@ a.btn { border-color: var(--border-color-dark); } -.dropdown-header { - padding: 0 5px 5px; +.dropdown-header, +.dropdown-section .dropdown-section-title { + padding: 0.25rem 1rem 0.25rem 0.5rem; color: var(--font-color-middle); font-weight: bold; text-align: right; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-right: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: var(--background-color-hover); color: var(--font-color-light); } @@ -387,6 +399,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: var(--border-color-dark); } diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss index 35298b4de..001d31578 100644 --- a/p/themes/Ansum/_components.scss +++ b/p/themes/Ansum/_components.scss @@ -37,15 +37,14 @@ right: 17px; } - .dropdown-header { - padding: 1rem 0.5rem 1rem 1rem; + .dropdown-header, + .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; font-weight: bold; text-align: left; color: variables.$grey-dark; text-transform: uppercase; letter-spacing: 1px; - - } .item { @@ -57,19 +56,28 @@ color: variables.$main-font-color; font-size: 1rem; line-height: 2.5em; + + &:not(.addItem):hover { + background: variables.$main-first; + color: variables.$white; + + .icon { + filter: grayscale(100%) brightness(2.5); + } + } } - &:not(.addItem):hover { - background: variables.$main-first; - color: variables.$white; + &.dropdown-section { + margin-top: 0.75rem; - a, button, label { - text-decoration: none; - color: variables.$white; + ~ .dropdown-section { + border-top-color: variables.$grey-light; } - .icon { - filter: grayscale(100%) brightness(2.5); + .item { + a, span, .as-link { + padding-left: 2rem; + } } } diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css index 07586f8fb..f07ba86ad 100644 --- a/p/themes/Ansum/ansum.css +++ b/p/themes/Ansum/ansum.css @@ -240,8 +240,9 @@ form th { border: none; right: 17px; } -.dropdown-menu .dropdown-header { - padding: 1rem 0.5rem 1rem 1rem; +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; font-weight: bold; text-align: left; color: #766556; @@ -257,17 +258,22 @@ form th { font-size: 1rem; line-height: 2.5em; } -.dropdown-menu .item:not(.addItem):hover { +.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover { background: #ca7227; color: #fff; } -.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label { - text-decoration: none; - color: #fff; -} -.dropdown-menu .item:not(.addItem):hover .icon { +.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon { filter: grayscale(100%) brightness(2.5); } +.dropdown-menu .item.dropdown-section { + margin-top: 0.75rem; +} +.dropdown-menu .item.dropdown-section ~ .dropdown-section { + border-top-color: #f5f0ec; +} +.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link { + padding-left: 2rem; +} .dropdown-menu .item:not(.addItem) a:hover, .dropdown-menu .item:not(.addItem) button:hover { background: #ca7227; diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css index 7ab296aa5..beb5de8a8 100644 --- a/p/themes/Ansum/ansum.rtl.css +++ b/p/themes/Ansum/ansum.rtl.css @@ -240,8 +240,9 @@ form th { border: none; left: 17px; } -.dropdown-menu .dropdown-header { - padding: 1rem 1rem 1rem 0.5rem; +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; font-weight: bold; text-align: right; color: #766556; @@ -257,17 +258,22 @@ form th { font-size: 1rem; line-height: 2.5em; } -.dropdown-menu .item:not(.addItem):hover { +.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover { background: #ca7227; color: #fff; } -.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label { - text-decoration: none; - color: #fff; -} -.dropdown-menu .item:not(.addItem):hover .icon { +.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon { filter: grayscale(100%) brightness(2.5); } +.dropdown-menu .item.dropdown-section { + margin-top: 0.75rem; +} +.dropdown-menu .item.dropdown-section ~ .dropdown-section { + border-top-color: #f5f0ec; +} +.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link { + padding-right: 2rem; +} .dropdown-menu .item:not(.addItem) a:hover, .dropdown-menu .item:not(.addItem) button:hover { background: #ca7227; diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css index 56e43bf04..276b50c8a 100644 --- a/p/themes/BlueLagoon/BlueLagoon.css +++ b/p/themes/BlueLagoon/BlueLagoon.css @@ -350,7 +350,8 @@ a.btn { transform: rotate(45deg); } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 5px 5px; color: #ccc; font-weight: bold; @@ -360,9 +361,9 @@ a.btn { filter: grayscale(100%) brightness(2.5); } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5em; color: #ccc; @@ -373,8 +374,19 @@ a.btn { color: #ccc; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-left: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: linear-gradient(180deg, #0090ff 0%, #0062be 100%) #e4992c; background: -webkit-linear-gradient(top, #0090ff 0%, #0062be 100%); color: #fff; diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css index 035898fa9..1713a89ed 100644 --- a/p/themes/BlueLagoon/BlueLagoon.rtl.css +++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css @@ -350,7 +350,8 @@ a.btn { transform: rotate(-45deg); } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 5px 5px; color: #ccc; font-weight: bold; @@ -360,9 +361,9 @@ a.btn { filter: grayscale(100%) brightness(2.5); } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5em; color: #ccc; @@ -373,8 +374,19 @@ a.btn { color: #ccc; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-right: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: linear-gradient(-180deg, #0090ff 0%, #0062be 100%) #e4992c; background: -webkit-linear-gradient(top, #0090ff 0%, #0062be 100%); color: #fff; diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css index a4aed0c2d..4a13c4099 100644 --- a/p/themes/Dark/dark.css +++ b/p/themes/Dark/dark.css @@ -336,23 +336,35 @@ a.btn { border-color: #888; } -.dropdown-header { - padding: 0 5px 5px; +.dropdown-header, +.dropdown-section .dropdown-section-title { + padding: 0.25rem 0.5rem 0.25rem 1rem; font-weight: bold; text-align: left; color: #888; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5em; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-left: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: #26303f; color: #888; } @@ -370,6 +382,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: #333; } diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css index 4736e069f..82f30827e 100644 --- a/p/themes/Dark/dark.rtl.css +++ b/p/themes/Dark/dark.rtl.css @@ -336,23 +336,35 @@ a.btn { border-color: #888; } -.dropdown-header { - padding: 0 5px 5px; +.dropdown-header, +.dropdown-section .dropdown-section-title { + padding: 0.25rem 1rem 0.25rem 0.5rem; font-weight: bold; text-align: right; color: #888; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5em; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-right: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: #26303f; color: #888; } @@ -370,6 +382,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: #333; } diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css index 5bdc1779a..67d823cac 100644 --- a/p/themes/Flat/flat.css +++ b/p/themes/Flat/flat.css @@ -311,7 +311,7 @@ a.btn { /*=== Dropdown */ .dropdown-menu { margin: 0.5rem 0 0; - padding: 0.5rem 0; + padding: 0.5rem 0 0.25rem 0; background: #fafafa; font-size: 0.8rem; border: 1px solid #95a5a6; @@ -324,7 +324,8 @@ a.btn { right: 12px; } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 0.5rem 0.5rem; font-weight: bold; text-align: left; @@ -336,16 +337,27 @@ a.btn { right: 0.5rem; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5em; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-left: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: #2980b9; color: #fff; } @@ -368,6 +380,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: #ddd; } diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css index b6c95b7a6..dbbb9a6aa 100644 --- a/p/themes/Flat/flat.rtl.css +++ b/p/themes/Flat/flat.rtl.css @@ -311,7 +311,7 @@ a.btn { /*=== Dropdown */ .dropdown-menu { margin: 0.5rem 0 0; - padding: 0.5rem 0; + padding: 0.5rem 0 0.25rem 0; background: #fafafa; font-size: 0.8rem; border: 1px solid #95a5a6; @@ -324,7 +324,8 @@ a.btn { left: 12px; } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 0.5rem 0.5rem; font-weight: bold; text-align: right; @@ -336,16 +337,27 @@ a.btn { left: 0.5rem; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5em; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-right: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: #2980b9; color: #fff; } @@ -368,6 +380,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: #ddd; } diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss index cf7aca73d..55542f2e7 100644 --- a/p/themes/Mapco/_components.scss +++ b/p/themes/Mapco/_components.scss @@ -37,8 +37,9 @@ right: 18px; } - .dropdown-header { - padding: 1rem 0.5rem 1rem 1rem; + .dropdown-header, + .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; font-weight: bold; text-align: left; color: variables.$grey-dark; @@ -55,11 +56,8 @@ color: variables.$main-font-color; font-size: 1rem; line-height: 2.5em; - } - &:not(.addItem) { - a:hover, - button:hover { + &:not(.addItem):hover { background: variables.$main-first; color: variables.$white; @@ -69,6 +67,20 @@ } } + &.dropdown-section { + margin-top: 0.75rem; + + ~ .dropdown-section { + border-top-color: variables.$grey-light; + } + + .item { + a, span, .as-link { + padding-left: 2rem; + } + } + } + &[aria-checked="true"] { a::before { margin: 0 0 0 -14px; diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css index 7d014cb0b..170938509 100644 --- a/p/themes/Mapco/mapco.css +++ b/p/themes/Mapco/mapco.css @@ -239,8 +239,9 @@ form th { border: none; right: 18px; } -.dropdown-menu .dropdown-header { - padding: 1rem 0.5rem 1rem 1rem; +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; font-weight: bold; text-align: left; color: #5b6871; @@ -256,15 +257,22 @@ form th { font-size: 1rem; line-height: 2.5em; } -.dropdown-menu .item:not(.addItem) a:hover, -.dropdown-menu .item:not(.addItem) button:hover { +.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover { background: #36c; color: #fff; } -.dropdown-menu .item:not(.addItem) a:hover .icon, -.dropdown-menu .item:not(.addItem) button:hover .icon { +.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon { filter: brightness(3); } +.dropdown-menu .item.dropdown-section { + margin-top: 0.75rem; +} +.dropdown-menu .item.dropdown-section ~ .dropdown-section { + border-top-color: #eff0f2; +} +.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link { + padding-left: 2rem; +} .dropdown-menu .item[aria-checked=true] a::before { margin: 0 0 0 -14px; font-weight: bold; diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css index 4c5cc5944..c2096b11c 100644 --- a/p/themes/Mapco/mapco.rtl.css +++ b/p/themes/Mapco/mapco.rtl.css @@ -239,8 +239,9 @@ form th { border: none; left: 18px; } -.dropdown-menu .dropdown-header { - padding: 1rem 1rem 1rem 0.5rem; +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-section .dropdown-section-title { + padding: 1rem 1.5rem; font-weight: bold; text-align: right; color: #5b6871; @@ -256,15 +257,22 @@ form th { font-size: 1rem; line-height: 2.5em; } -.dropdown-menu .item:not(.addItem) a:hover, -.dropdown-menu .item:not(.addItem) button:hover { +.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover { background: #36c; color: #fff; } -.dropdown-menu .item:not(.addItem) a:hover .icon, -.dropdown-menu .item:not(.addItem) button:hover .icon { +.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon { filter: brightness(3); } +.dropdown-menu .item.dropdown-section { + margin-top: 0.75rem; +} +.dropdown-menu .item.dropdown-section ~ .dropdown-section { + border-top-color: #eff0f2; +} +.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link { + padding-right: 2rem; +} .dropdown-menu .item[aria-checked=true] a::before { margin: 0 -14px 0 0; font-weight: bold; diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css index 3a6fc12af..8ce9727a3 100644 --- a/p/themes/Nord/nord.css +++ b/p/themes/Nord/nord.css @@ -198,7 +198,7 @@ a.btn { .dropdown-menu { margin: 5px 0 0; - padding: 5px 0; + padding: 0.5rem 0 0.25rem 0; background: var(--accent-bg); font-size: 0.8rem; border: 1px solid var(--border); @@ -206,21 +206,38 @@ a.btn { text-align: left; } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 5px 5px; font-weight: bold; text-align: left; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; color: var(--text); line-height: 2.5em; min-width: 200px; } +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-left: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { + /* no hover color */ +} + .dropdown-menu > .item[aria-checked="true"] > a::before { font-weight: bold; margin: 0 0 0 -14px; @@ -276,6 +293,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: var(--border); } diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css index e3b3a7d78..f7b0c4a64 100644 --- a/p/themes/Nord/nord.rtl.css +++ b/p/themes/Nord/nord.rtl.css @@ -198,7 +198,7 @@ a.btn { .dropdown-menu { margin: 5px 0 0; - padding: 5px 0; + padding: 0.5rem 0 0.25rem 0; background: var(--accent-bg); font-size: 0.8rem; border: 1px solid var(--border); @@ -206,21 +206,38 @@ a.btn { text-align: right; } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 5px 5px; font-weight: bold; text-align: right; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; color: var(--text); line-height: 2.5em; min-width: 200px; } +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-right: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { + /* no hover color */ +} + .dropdown-menu > .item[aria-checked="true"] > a::before { font-weight: bold; margin: 0 -14px 0 0; @@ -276,6 +293,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: var(--border); } diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index b8bf4c5ab..457a25ecc 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -436,33 +436,45 @@ a:hover .icon { border-color: var(--border-color); } -.dropdown-header { - padding: 0 5px 5px; +.dropdown-header, +.dropdown-section .dropdown-section-title { + padding: 0.25rem 0.5rem 0.25rem 1rem; color: var(--font-color-grey); font-weight: bold; text-align: left; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover, -.dropdown-menu > .item > label:hover:not(.noHover) { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-left: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background-color: var(--contrast-background-color-active); color: var(--font-color-light); } -.dropdown-menu > .item > label { +.dropdown-menu .item > label { padding: 0; } -.dropdown-menu > .item:hover .icon { +.dropdown-menu > .item:hover > a > .icon, +.dropdown-menu .item.dropdown-section .item:hover .icon { filter: grayscale(100%) brightness(2.5); } @@ -479,6 +491,7 @@ a:hover .icon { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: var(--border-color); } @@ -1164,6 +1177,10 @@ a:hover .icon { border-left: 1px solid var(--border-color); } + .dropdown-menu .dropdown-section:last-child { + margin-bottom: 3rem; + } + .form-group.form-actions { margin-left: -15px; margin-right: -15px; diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index 2a85b77ad..72cf63969 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -436,33 +436,45 @@ a:hover .icon { border-color: var(--border-color); } -.dropdown-header { - padding: 0 5px 5px; +.dropdown-header, +.dropdown-section .dropdown-section-title { + padding: 0.25rem 1rem 0.25rem 0.5rem; color: var(--font-color-grey); font-weight: bold; text-align: right; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover, -.dropdown-menu > .item > label:hover:not(.noHover) { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-right: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background-color: var(--contrast-background-color-active); color: var(--font-color-light); } -.dropdown-menu > .item > label { +.dropdown-menu .item > label { padding: 0; } -.dropdown-menu > .item:hover .icon { +.dropdown-menu > .item:hover > a > .icon, +.dropdown-menu .item.dropdown-section .item:hover .icon { filter: grayscale(100%) brightness(2.5); } @@ -479,6 +491,7 @@ a:hover .icon { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: var(--border-color); } @@ -1164,6 +1177,10 @@ a:hover .icon { border-right: 1px solid var(--border-color); } + .dropdown-menu .dropdown-section:last-child { + margin-bottom: 3rem; + } + .form-group.form-actions { margin-right: -15px; margin-left: -15px; diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css index f390a1c1c..d64521573 100644 --- a/p/themes/Pafat/pafat.css +++ b/p/themes/Pafat/pafat.css @@ -283,7 +283,7 @@ a.btn { /*=== Dropdown */ .dropdown-menu { margin: 5px 0 0; - padding: 5px 0; + padding: 0.5rem 0 0.25rem 0; font-size: 0.8rem; border: 1px solid #aaa; border-radius: 5px; @@ -295,24 +295,36 @@ a.btn { right: 8px; } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 5px 5px; color: #888; font-weight: bold; text-align: left; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5; color: #666; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-left: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: #eee; color: #666; } @@ -330,6 +342,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: #ddd; } diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css index 20c204cb9..55e255369 100644 --- a/p/themes/Pafat/pafat.rtl.css +++ b/p/themes/Pafat/pafat.rtl.css @@ -283,7 +283,7 @@ a.btn { /*=== Dropdown */ .dropdown-menu { margin: 5px 0 0; - padding: 5px 0; + padding: 0.5rem 0 0.25rem 0; font-size: 0.8rem; border: 1px solid #aaa; border-radius: 5px; @@ -295,24 +295,36 @@ a.btn { left: 8px; } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 5px 5px; color: #888; font-weight: bold; text-align: right; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5; color: #666; font-size: 0.8rem; } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-right: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; +} + +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: #eee; color: #666; } @@ -330,6 +342,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: #ddd; } diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css index eddbdd136..490381fb6 100644 --- a/p/themes/Screwdriver/screwdriver.css +++ b/p/themes/Screwdriver/screwdriver.css @@ -331,7 +331,7 @@ a.btn { /*=== Dropdown */ .dropdown-menu { margin: 5px 0 0; - padding: 5px 0; + padding: 0.5rem 0 0.25rem 0; background: #222; font-size: 0.8rem; border: 1px solid #171717; @@ -344,30 +344,43 @@ a.btn { border-color: #171717; } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 5px 5px; color: #ccc; font-weight: bold; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5em; color: #ccc; font-size: 0.8rem; } -.dropdown-menu > .item > label { - color: #ccc; +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-left: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; } -.dropdown-menu > .item:hover { +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: #171717; color: #fff; } +.dropdown-menu > .item > label { + color: #ccc; +} + .dropdown-menu > .item[aria-checked="true"] > a::before { font-weight: bold; margin: 0 0 0 -14px; @@ -379,6 +392,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: rgba(255,255,255,0.08); } diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css index aef02ecdb..e8a30d326 100644 --- a/p/themes/Screwdriver/screwdriver.rtl.css +++ b/p/themes/Screwdriver/screwdriver.rtl.css @@ -331,7 +331,7 @@ a.btn { /*=== Dropdown */ .dropdown-menu { margin: 5px 0 0; - padding: 5px 0; + padding: 0.5rem 0 0.25rem 0; background: #222; font-size: 0.8rem; border: 1px solid #171717; @@ -344,30 +344,43 @@ a.btn { border-color: #171717; } -.dropdown-header { +.dropdown-header, +.dropdown-section .dropdown-section-title { padding: 0 5px 5px; color: #ccc; font-weight: bold; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > span, -.dropdown-menu > .item > .as-link { +.dropdown-menu .item > a, +.dropdown-menu .item > span, +.dropdown-menu .item > .as-link { padding: 0 22px; line-height: 2.5em; color: #ccc; font-size: 0.8rem; } -.dropdown-menu > .item > label { - color: #ccc; +.dropdown-menu .dropdown-section .item > a, +.dropdown-menu .dropdown-section .item > span, +.dropdown-menu .dropdown-section .item > .as-link { + padding-right: 2rem; +} + +.dropdown-menu .dropdown-section .item:last-child { + margin-bottom: 0.5rem; } -.dropdown-menu > .item:hover { +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover, +.dropdown-menu .item > label:hover:not(.noHover) { background: #171717; color: #fff; } +.dropdown-menu > .item > label { + color: #ccc; +} + .dropdown-menu > .item[aria-checked="true"] > a::before { font-weight: bold; margin: 0 -14px 0 0; @@ -379,6 +392,7 @@ a.btn { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { border-top-color: rgba(255,255,255,0.08); } diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index 3a3202154..2397160b2 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -332,12 +332,23 @@ form th { .dropdown-menu .dropdown-header a:hover { background-color: var(--color-background-nav); } +.dropdown-menu .dropdown-section .dropdown-section-title { + cursor: default; + padding: 0.25rem 0.5rem 0.125rem 0.25rem; + font-weight: bold; + color: var(--color-text-light); +} +.dropdown-menu .dropdown-section .item a { + padding: 0 22px; +} +.dropdown-menu .dropdown-section .item a:hover { + background-color: var(--color-background-nav); +} .dropdown-menu::after { content: none; } .dropdown-menu > .item { - padding: 0; - margin-left: 10px; + padding: 0 0 0 0.5rem; } .dropdown-menu > .item > a { min-width: initial; diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css index 35cda9308..a021a70cd 100644 --- a/p/themes/Swage/swage.rtl.css +++ b/p/themes/Swage/swage.rtl.css @@ -332,12 +332,23 @@ form th { .dropdown-menu .dropdown-header a:hover { background-color: var(--color-background-nav); } +.dropdown-menu .dropdown-section .dropdown-section-title { + cursor: default; + padding: 0.25rem 0.25rem 0.125rem 0.5rem; + font-weight: bold; + color: var(--color-text-light); +} +.dropdown-menu .dropdown-section .item a { + padding: 0 22px; +} +.dropdown-menu .dropdown-section .item a:hover { + background-color: var(--color-background-nav); +} .dropdown-menu::after { content: none; } .dropdown-menu > .item { - padding: 0; - margin-right: 10px; + padding: 0 0.5rem 0 0; } .dropdown-menu > .item > a { min-width: initial; diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss index fddb287be..9ca316aff 100644 --- a/p/themes/Swage/swage.scss +++ b/p/themes/Swage/swage.scss @@ -431,6 +431,25 @@ form { } } + .dropdown-section { + .dropdown-section-title { + cursor: default; + padding: 0.25rem 0.5rem 0.125rem 0.25rem; + font-weight: bold; + color: var(--color-text-light); + } + + .item { + a { + padding: 0 22px; + + &:hover { + background-color: var(--color-background-nav); + } + } + } + } + &::after { content: none; } @@ -439,8 +458,7 @@ form { .item { @extend %dropdown; - padding: 0; - margin-left: 10px; + padding: 0 0 0 0.5rem; > a, > span, diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css index 235012fb7..50671f556 100644 --- a/p/themes/base-theme/frss.css +++ b/p/themes/base-theme/frss.css @@ -286,8 +286,8 @@ input[type="checkbox"] { width: calc(99% - 5em); } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover { text-decoration: none; } @@ -655,13 +655,13 @@ input[type="checkbox"]:focus-visible { display: block; } -.dropdown-menu > .item { +.dropdown-menu .item { display: block; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > .as-link, -.dropdown-menu > .item > span { +.dropdown-menu .item > a, +.dropdown-menu .item > .as-link, +.dropdown-menu .item > span { display: block; width: 100%; white-space: nowrap; @@ -702,6 +702,7 @@ input[type="checkbox"]:focus-visible { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { margin-top: 5px; padding-top: 5px; @@ -1980,7 +1981,7 @@ input:checked + .slide-container .properties { #panel .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { - padding: 1rem; + padding: 1rem 0; display: block; width: 100%; border-bottom: 1px solid var(--frss-border-color); @@ -2005,7 +2006,8 @@ input:checked + .slide-container .properties { position: inherit; } - .dropdown .dropdown-header { + .dropdown .dropdown-header, + .dropdown .dropdown-section { line-height: 2; } diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css index 582836b48..cb76b53ca 100644 --- a/p/themes/base-theme/frss.rtl.css +++ b/p/themes/base-theme/frss.rtl.css @@ -286,8 +286,8 @@ input[type="checkbox"] { width: calc(99% - 5em); } -.dropdown-menu > .item > a:hover, -.dropdown-menu > .item > button:hover { +.dropdown-menu .item > a:hover, +.dropdown-menu .item > button:hover { text-decoration: none; } @@ -655,13 +655,13 @@ input[type="checkbox"]:focus-visible { display: block; } -.dropdown-menu > .item { +.dropdown-menu .item { display: block; } -.dropdown-menu > .item > a, -.dropdown-menu > .item > .as-link, -.dropdown-menu > .item > span { +.dropdown-menu .item > a, +.dropdown-menu .item > .as-link, +.dropdown-menu .item > span { display: block; width: 100%; white-space: nowrap; @@ -702,6 +702,7 @@ input[type="checkbox"]:focus-visible { } .item ~ .dropdown-header, +.dropdown-section ~ .dropdown-section, .item.separator { margin-top: 5px; padding-top: 5px; @@ -1980,7 +1981,7 @@ input:checked + .slide-container .properties { #panel .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { - padding: 1rem; + padding: 1rem 0; display: block; width: 100%; border-bottom: 1px solid var(--frss-border-color); @@ -2005,7 +2006,8 @@ input:checked + .slide-container .properties { position: inherit; } - .dropdown .dropdown-header { + .dropdown .dropdown-header, + .dropdown .dropdown-section { line-height: 2; } |