diff --git a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt index b54219ba2fecf4847c7ba35cf887e9ac8e72f168..c4b101bc43807db5bcb06b20cc599dae8ae66f10 100644 --- a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt +++ b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt @@ -813,8 +813,45 @@ div[data-gadget-scope='editor_panel'] { min-width: @sub-line-min-width-desktop; } -div[data-gadget-scope='header'] .ui-header { +.renderTabletSubLink() { + padding-top: @half-margin-size; + padding-bottom: @half-margin-size; + white-space: nowrap; + overflow: hidden; + &::before { + font-size: 1.2em; + display: block; + } +} + +.renderTabletSubListElement() { + flex: 1; + // XXX TODO Hardcoded color + border-left: 1px solid rgba(0, 0, 0, 0.55); + &:first-child { + border-left: none; + } + + a { + display: block; + } +} +.renderTabletNotALinkTitle() { + padding-left: @headertitlespanleftmiddlepadding; + &::before { + margin-right:@headertitlespanleftlargemargin; + } +} + +.renderTabletHeaderButton() { + // https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/ + // Default size + background-color: @colorheaderbackground; + width: 8em; +} + +div[data-gadget-scope='header'] .ui-header { position: fixed; z-index: 1000; text-align: center; @@ -848,8 +885,9 @@ div[data-gadget-scope='header'] .ui-header { @media @desktop { background-color: @colorsubheaderbackground; } - @media @smartphone, @tablet { + @media @smartphone { background-color: @colorheaderbackground; + .hide_text(); } transition: background-color @transition-timing; @@ -860,12 +898,7 @@ div[data-gadget-scope='header'] .ui-header { line-height: @headerheight; @media @tablet { - // https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/ - // Default size - width: 8em; - } - @media @smartphone { - .hide_text(); + .renderTabletHeaderButton(); } &::before { @@ -938,17 +971,14 @@ div[data-gadget-scope='header'] .ui-header { } @media @tablet { - padding-left: @headertitlespanleftmiddlepadding; - &::before { - margin-right:@headertitlespanleftlargemargin; - } + .renderTabletNotALinkTitle(); } @media @smartphone { - padding-left: @headertitlespanleftsmallpadding; - &::before { - margin-right:@headertitlespanleftsmallmargin; - } + padding-left: @headertitlespanleftsmallpadding; + &::before { + margin-right:@headertitlespanleftsmallmargin; + } } } // Clickable title @@ -999,28 +1029,12 @@ div[data-gadget-scope='header'] .ui-header { li { @media @tablet, @smartphone { - flex: 1; - // XXX TODO Hardcoded color - border-left: 1px solid rgba(0, 0, 0, 0.55); - &:first-child { - border-left: none; - } - - a { - display: block; - } + .renderTabletSubListElement(); } @media @tablet { a { - padding-top: @half-margin-size; - padding-bottom: @half-margin-size; - white-space: nowrap; - overflow: hidden; - &::before { - font-size: 1.2em; - display: block; - } + .renderTabletSubLink(); } } @@ -1053,13 +1067,9 @@ div[data-gadget-scope='header'] .ui-header { } } } - } - } - } - /********************************************** * Gadget: main **********************************************/