| // Licensed under the Apache License, Version 2.0 (the "License"); you may not |
| // use this file except in compliance with the License. You may obtain a copy of |
| // the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, software |
| // distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
| // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
| // License for the specific language governing permissions and limitations under |
| // the License. |
| |
| @import "variables.less"; |
| @import "mixins.less"; |
| |
| body #dashboard #notification-center-btn { |
| border: 0; |
| background-color: @background; |
| border-left: 1px solid #cccccc; |
| font-size: 24px; |
| color: #666; |
| padding: 0; |
| cursor: pointer; |
| .flex(0 0 auto); |
| |
| &>div { |
| padding: 17px 16px 16px; |
| } |
| &:hover { |
| color: @hoverHighlight; |
| } |
| } |
| |
| #notification-center { |
| .notification-center-panel { |
| z-index: 112; |
| position: fixed; |
| box-shadow: 0 6px 5px 4px rgba(0, 0, 0, 0.1); |
| top: 0; |
| right: 0; |
| width: 300px; |
| height: 100%; |
| background-color: #333333; |
| color: #dddddd; |
| |
| header { |
| .flex(0 0 auto); |
| padding: 16px; |
| |
| h1 { |
| font-size: 16px; |
| line-height: 20px; |
| margin: 0; |
| color: white; |
| font-weight: normal; |
| } |
| .fonticon-bell { |
| .flex(0 0 30px); |
| } |
| button { |
| .flex(0 0 46px); |
| background-color: transparent; |
| border: 0; |
| margin: -18px -16px -14px; /* enlarges the hit area */ |
| font-size: 21px; |
| color: #dddddd; |
| &:hover { |
| color: @hoverHighlight; |
| } |
| } |
| } |
| |
| .notification-filter { |
| .flex(0 0 29px); |
| |
| list-style: none; |
| margin: 0; |
| font-size: 13px; |
| |
| li { |
| text-align: center; |
| margin-right: 1px; |
| background-color: #444444; |
| padding: 4px 0 3px; |
| cursor: pointer; |
| |
| &.selected { |
| background-color: #555555; |
| } |
| &:hover { |
| background-color: @hoverHighlight; |
| .fonticon { |
| color: white; |
| } |
| } |
| } |
| .fonticon { |
| font-size: 16px; |
| } |
| .fonticon-ok-circled { |
| font-size: 14px; |
| } |
| } |
| |
| .notification-list { |
| margin: 15px 0 0; |
| list-style-type: none; |
| |
| li { |
| margin: 0 16px; |
| line-height: 16px; |
| font-size: 12px; |
| overflow: hidden; |
| border-bottom: 1px solid #222222; |
| |
| &.no-notifications { |
| color: #999999; |
| margin-top: 25px; |
| border-bottom: 0; |
| } |
| &>div { |
| padding: 10px 0 15px; |
| } |
| span { |
| .flex(0 0 30px); |
| } |
| button { |
| .flex(0 0 22px); |
| color: #dddddd; |
| background: transparent; |
| border: 0; |
| height: 20px; |
| margin-top: -4px; |
| margin-left: 6px; |
| font-size: 100%; |
| &:hover { |
| color: @hoverHighlight; |
| } |
| } |
| p { |
| margin-bottom: 0; |
| overflow-wrap: break-word; |
| } |
| div.flex-body { |
| overflow: hidden; |
| } |
| } |
| .fonticon { |
| font-size: 15px; |
| } |
| .fonticon-ok-circled { |
| font-size: 13px; |
| } |
| a { |
| color: white; |
| text-decoration: underline; |
| } |
| .notification-actions { |
| font-size: 11px; |
| margin-top: 2px; |
| span.divider { |
| color: #444444; |
| padding: 0 5px; |
| } |
| } |
| .time-elapsed { |
| color: #565656; |
| } |
| .copy { |
| color: @blue; |
| text-decoration: none; |
| } |
| } |
| |
| footer { |
| border-top: 1px solid #555555; |
| .flex(0 0 auto); |
| text-align: center; |
| padding: 4px; |
| } |
| } |
| |
| .fonticon-ok-circled { |
| color: @successAlertBackground; |
| } |
| .fonticon-attention-circled { |
| color: @globalErrorAlertBackground; |
| } |
| .fonticon-info-circled { |
| color: @infoAlertBackground; |
| } |
| |
| .notification-page-mask { |
| z-index: -1; |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| opacity: 0; |
| |
| &.visible { |
| z-index: 110; |
| opacity: 0.3; |
| background-color: #000000; |
| } |
| } |
| } |
| |
| //Leaving this in for now as I'm not sure where it is used |
| // @-webkit-keyframes in { |
| // 0% { max-height: 0; } |
| // 100% { max-height: 1000px; } |
| // } |
| // |
| // @-webkit-keyframes out { |
| // 0% { max-height: 1000px; } |
| // 100% { max-height:0; } |
| // } |
| // |
| // @keyframes in { |
| // 0% { max-height: 0; } |
| // 100% { max-height: 1000px; } |
| // } |
| // |
| // @keyframes out { |
| // 0% { max-height: 1000px; } |
| // 100% { max-height:0; } |
| // } |