diff --git a/css/light-grey.scss b/css/light-grey.scss index 6ad8d5843..f3de97538 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -3659,167 +3659,197 @@ input:checked + .slider:before { /////////////////////////// // Newsroom menu -#newsroom_menu li span { - display: block; - padding: 5px 12px; - text-decoration: none; - white-space: nowrap; -} - -#newsroom_menu li li p { - text-align: left; - margin: 2px; - margin-left: 5px; - margin-right: 5px; - cursor: pointer; - background-color: transparent; -} -#newsroom_menu > ul > li > ul { - margin-top: 8px; -} -#newsroom_menu > ul > li > ul > li { - display: block; - border-bottom: 1px $gray-lighter solid; - padding-top: 10px; - padding-bottom: 10px; - text-align: left; -} -#newsroom_menu > ul > li > ul > li:hover, #newsroom_menu > ul > li > ul > li:hover h1, #newsroom_menu > ul > li > ul > li:hover h2, #newsroom_menu > ul > li > ul > li:hover h3 { - background: $popup-menu-highlight-color; - color: $popup-menu-text-higlight-color; -} -#newsroom_menu li li:last-of-type { - border-bottom: 0; -} -#newsroom_menu li { - list-style: none; - cursor: pointer; - color: $popup-menu-text-color; -} -#newsroom_menu li ul { - width: 300px; -} #top-left-newsroom-cell { padding-right: 11px !important; } -#newsroom_menu_icon { - position:relative; - top:8px; +#newsroom_menu { + /* Reset for some tags */ + li { + list-style: none; + cursor: pointer; + color: $popup-menu-text-color; + } + h1 { + font-weight: 700; + font-size: 16px; + margin-bottom: 0.5em; + } + h2 { + font-weight: 700; + font-size: 14px; + margin-bottom: 0.5em; + } + h3, h4, h5 { + font-weight: 700; + font-size: 12px; + margin-bottom: 0.5em; + } + + #newsroom_menu_icon { + position:relative; + top:8px; + } + > ul > li { + > ul { + margin-top: 8px; + width: 300px; + + > li { + display: block; + border-bottom: 1px $gray-lighter solid; + padding-top: 10px; + padding-bottom: 10px; + text-align: left; + + &#newsroom_menu_dismiss_all, + &#newsroom_menu_show_all { + text-align: center !important; + } + #newsroom_show_all_submenu { + text-align: center; + padding-top: 0 !important; + padding-bottom: 0 !important; + + > ul { + padding-top: 10px; + padding-bottom: 10px; + + > li > ul { + margin-top: 8px; + width: 200px; + color:$text-color; + + > li { + display: block; + border-bottom: 1px $gray-lighter solid; + padding-left: 5px; + padding-top: 4px; + padding-bottom: 6px; + text-align: left; + + &:hover { + background: $popup-menu-highlight-color; + color: $popup-menu-text-higlight-color; + } + } + } + } + } + &#newsroom_menu_show_all, + #newsroom_show_all_submenu{ + .newsroom_extra_messages_counter { + display:inline-block !important; + padding:2px !important; + border-radius:8px; + text-align:center; + font-size: 8pt; + min-width: 12px; + background-color:$gray-light; + color: $white; + float: right; + margin-right: 5px; + } + } + + &.newsroom_menu_item{ + /* Icon */ + > div > img { + float:left; + width:32px; + max-height:32px; + margin: 0 5px; + } + /* Content */ + p { + text-align: left; + margin: 2px 5px 10px 5px; + cursor: pointer; + background-color: transparent; + + img { + max-width: 100%; + } + + &:last-of-type{ + margin-bottom: 0; + } + } + /* Provider and date */ + span { + display: block; + padding: 5px 12px; + text-decoration: none; + white-space: nowrap; + + &.newsroom_menu_item_date { + padding: 0 !important; + margin-bottom: -10px; + font-size: 8pt; + text-align: right; + margin-top: -2px; + margin-right: 5px; + color: $white; + } + } + } + + &:last-of-type{ + border-bottom: 0; + } + &:hover, + &:hover h1, + &:hover h2, + &:hover h3{ + background: $popup-menu-highlight-color; + color: $popup-menu-text-higlight-color; + } + } + } + } } #newsroom_menu_counter_container { position:relative; top:-23px; left:3px; -} -#newsroom_menu_counter { - display:inline-block; - padding:2px; - border-radius:8px; - text-align:center; - width: 12px; - box-shadow: 1px 1px 2px 0px $gray; - font-size: 8pt; - background-color:$complement-color; - color: $white; - cursor: pointer; -} -.newsroom_extra_messages_counter { - display:inline-block !important; - padding:2px !important; - border-radius:8px; - text-align:center; - font-size: 8pt; - min-width: 12px; - background-color:$gray-light; - color: $white; - float: right; - margin-right: 5px; -} -.newsroom_menu_item > div > img { - float:left; - width:32px; - max-height:32px; - margin-top: 0; - margin-bottom: 0; - margin-left:5px; - margin-right: 5px; -} -#newsroom_menu_dismiss_all, #newsroom_menu_show_all { - text-align: center !important; -} -#newsroom_show_all_submenu { - text-align: center; - padding-top: 0 !important; - padding-bottom: 0 !important; -} -#newsroom_show_all_submenu > ul { - padding-top: 10px; - padding-bottom: 10px; -} -#newsroom_show_all_submenu > ul > li > ul { - margin-top: 8px; -} -#newsroom_show_all_submenu > ul > li > ul > li { - display: block; - border-bottom: 1px $gray-lighter solid; - padding-left: 5px; - padding-top: 4px; - padding-bottom: 6px; - text-align: left; -} -#newsroom_show_all_submenu > ul > li > ul > li:hover { - background: $popup-menu-highlight-color; - color: $popup-menu-text-higlight-color; -} -#newsroom_show_all_submenu li ul { - width: 200px; - color:$text-color; -} -.no-padding { - padding: 0 !important; -} -.newsroom_menu_item_date { - padding: 0 !important; - margin-bottom: -10px; - font-size: 8pt; - text-align: right; - margin-top: -2px; - margin-right: 5px; - color: $white; + + #newsroom_menu_counter { + display:inline-block; + padding:2px; + border-radius:8px; + text-align:center; + width: 12px; + box-shadow: 1px 1px 2px 0px $gray; + font-size: 8pt; + background-color:$complement-color; + color: $white; + cursor: pointer; + } } #newsroom_display_size { height: 1em; width: 3em; } -#newsroom_no_new_message p { - text-align: center !important; - cursor: default !important; - font-style: italic; -} #newsroom_no_new_message { color: $gray-dark !important; -} -#newsroom_no_new_message:hover { - cursor: default !important; - color: $gray-dark !important; - background-color: $white !important; -} -#newsroom_menu h1 { - font-weight: 700; - font-size: 16px; - margin-bottom: 0.5em; -} -#newsroom_menu h2 { - font-weight: 700; - font-size: 14px; - margin-bottom: 0.5em; -} -#newsroom_menu h3, #newsroom_menu h4, #newsroom_menu h5 { - font-weight: 700; - font-size: 12px; - margin-bottom: 0.5em; -} + p { + text-align: center !important; + cursor: default !important; + font-style: italic; + + } + + &:hover { + cursor: default !important; + color: $gray-dark !important; + background-color: $white !important; + } +} + +/* Helpers */ +.no-padding { + padding: 0 !important; +} .clearboth { clear: both; }