.notification-canvas .tab-content a{ color:#212121; } .notification-canvas-container{ position: fixed; top: 0; bottom:0; overflow-y: auto; overflow-x: hidden; width: 0; right: 0; z-index: 999999; } .notification-canvas-backdrop{ background: #000; opacity: .5; position: fixed; top:0; right:0; width:100%; height: 100%; z-index: 1100; } .site-alarm-head a.text-btn { display:block; text-align:right; font-size:13px; position:absolute; right:12px; top:18px; z-index:50; color:#999; } .site-alarm-head .btn.goback { position : absolute; font-size :16px; top :10px; padding : 6px 16px; line-height : 1.42857143; border : 0; } .site-alarm-body .board-alaram { display:block; margin-top:59px; text-align:left; font-size:15px; padding-bottom:10px; border-bottom:1px solid #3c3c3b; color:#fff; } .notification-canvas{ overflow:hidden; min-width: 0; width: 300px; height: 100%; position: absolute; padding-left: 0; z-index: 1500; top: 0; right:0; margin: 0; webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition:transform 300ms ease 0s; transform:translate3d(500px,0px,0px); display: none; } .notification_show .notification-canvas{ transform: translate3d(0px, 0px, 0px); } body.offcanvas-expanded { overflow:hidden; } body.offcanvas-expanded { padding-right:0!important; overflow:visible; width:100%; } .offcanvas { position:fixed; top:0; bottom:0; right:0; z-index:150000; } .notification-canvas .site-alarm-head { position: absolute; width: 100%; background: #fff; color:#212121; z-index: 50; top:0; } .notification-canvas .site-alarm-head header { font-size:20px; text-align:center; padding:12px 0; } .notification-canvas .site-alarm-head .zmdi-long-arrow-left { position:absolute; left:20px; top:50%; margin-top:-16px; cursor:pointer; font-size:24px; color:#fff; } @-moz-document url-prefix() { .notification-canvas .site-alarm-head .zmdi-long-arrow-left { margin-top:-14px; } } .notification-canvas .tab-content .txt-btn { display:inline-block; width:100%; text-align:right; margin-top:15px; color:#bdbdbd } .tab-content .notify-body { padding:0 15px; } .site-alarm-body .notify-body .board-alaram { display:block; margin-top:25px; text-align:left; font-size:15px; padding-bottom:10px; border-bottom:1px solid #3c3c3b } .site-alarm-body .notify-body .board-alaram:first-child{ margin-top:0; } .alarm_slide.notification-canvas { width:300px; background: #fff; } .notification-canvas .notify-body .tile{ padding-top:13px } .notification-canvas .notify-body .tile:nth-child(1){ padding-top:0; } .notification-canvas .alarm-setting .notify-body .tile:nth-child(1){ padding-top:10px; } .notification-canvas .notify-body .tile-text { width:100%; font-size:13px; display: block; word-wrap: break-word; max-width: 235px; } .notification-canvas .alarm-setting .notify-body .tile-text { padding-right:35px; line-height:1.4; font-size:13px; position: relative; } .notification-canvas .tile-text .tile-body { margin:5px 0 10px; } .notification-canvas .tile-text .tile-body .bodytext { padding:0 9px; line-height:20px; border-left:3px solid #999; } .notification-canvas .disabled .tile-text .tile-body .bodytext { color:#666; border-left:3px solid #eee; } .notification-canvas .tile-text .tile-body img{ margin-bottom: 10px; max-width:238px; height:auto; width:100%; } .notification-canvas .disabled .tile-text .tile-body img{ opacity: 0.5; } .notification-canvas .notify-body .text-sm { margin:3px 0 14px } .notification-canvas .alarm-setting .notify-body .text-sm { margin:4px 0 13px; font-size:13px } .notification-canvas .notify-body .text-gray-bright { color:#858585 } .tab-content .notify-body .tile { position: relative; display: table; width: 100%; min-height: auto; padding-left:35px } .alarm-setting .tab-content .notify-body .tile { padding-left:0; cursor:default; } .alarm-setting .tab-content .notify-body .tile .round-check{ position:absolute; right:0; top:50%; margin-top:-6px; width:20px } .tab-content .notify-body .tile.more { padding-left:0; padding:12px 0; } .tab-content .notify-body .tile:visited .tile-text{ color:#999 } .tab-content .notify-body .tile:visited .tile-text .text-gray-bright{ color:#999 } .tab-content .notify-body .tile:visited .tile-icon { opacity:0.5 } .alarm-setting .tab-content .notify-body .tile.disabled .tile-text{ color:#fff } .alarm-setting .tab-content .notify-body .tile.disabled .tile-text .text-gray-bright{ color:#858585 } .alarm-setting .tab-content .notify-body .tile.disabled .tile-icon { opacity:1 } .tab-content .notify-body .tile .tile-content { display: table-cell; border-bottom:1px solid #eee; } .site-alarm-body .notify-body .board-alaram { display:block; } .notification-canvas .notify-body .tile:nth-child(1) .tile-icon { position:absolute; left:0; top:0 } .notification-canvas .notify-body .tile .tile-icon { position:absolute; left:0; top:13px } .tab-content .notify-body .tile .tile-icon img { width: 20px; height: 20px; border-radius: 50%; } .notification-canvas .notify-body .tile.more .tile-content { text-align:center; border-bottom:none } .notification-canvas .zmdi.zmdi-close { color:#999; } .notifi-none { display:inline-block; font-weight:normal; text-align:center; color:#999; width:100%; margin-top:145px } .notifi-none .zmdi-notifications, .notifi-none .btl, .notifi-none .im-ico-bell { font-size:80px; color:#bcbcbc; width:80px; line-height:80px; height:80px; margin-bottom:24px; } .tile .tile-content > div { padding-top:2px } .site_alarm_close{ transform: translate3d(320px, 0px, 0px); } @media screen and (max-width: 991px) { .notification-canvas { right:auto; left:0; transform:translate3d(-500px,0px,0px); } } @media screen and (max-width: 640px) { .notification-canvas .site-alarm-head .alarm-tools { margin-top:-15px } .notification-canvas .site-alarm-head .alarm-tools .zmdi { display: block } } @media screen and (max-width: 320px) { .alarm_slide.notification-canvas { width: 280px; } } .alarm-setting .checkbox-styled:not(ie8) label,.alarm-setting .radio-styled:not(ie8) label { width: 16px; padding:0; } .alarm-setting .checkbox-styled:not(ie8),.alarm-setting .radio-styled:not(ie8) { position:relative; margin-top:0; display: inline-block; } .alarm-setting .checkbox-styled:not(ie8) input ~ span,.alarm-setting .radio-styled:not(ie8) input ~ span { position:relative; padding-left:40px; display:inline-block; cursor:pointer; line-height:1; vertical-align:text-top; } .alarm-setting .checkbox-styled:not(ie8) input ~ span:before,.alarm-setting .radio-styled:not(ie8) input ~ span:before { content:''; position: absolute; left:0; top:0; height: 16px; width: 16px; display: inline-block; vertical-align: top; background: #fff; color: #fff; font-size: 14px; text-indent: .07em; line-height: 13px; font-weight: 600; border-radius: 3px; border: 1px solid #cfd6d9; text-align: left; } .alarm-setting .checkbox-styled:not(ie8) input:checked ~ span:before { content: '\f012'; font-family: 'Black Tie'; font-size: inherit; vertical-align: -14.28571429%; text-rendering: auto; font-size:9px; color:#fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0,0); background: #1C90F3; border: 1px solid #1C90F3; border-left-width: 2px; border-right-width: 2px; } .alarm-setting .notify-body .check { position: absolute; right: 0; top: 3px; z-index: 1; }