Igor Zhukov
10 years ago
10 changed files with 587 additions and 241 deletions
@ -0,0 +1,153 @@ |
|||||||
|
/** initial setup **/ |
||||||
|
.nano { |
||||||
|
position : relative; |
||||||
|
width : 100%; |
||||||
|
height : 100%; |
||||||
|
overflow : hidden; |
||||||
|
} |
||||||
|
.nano > .nano-content { |
||||||
|
position : absolute; |
||||||
|
overflow : scroll; |
||||||
|
overflow-x : hidden; |
||||||
|
top : 0; |
||||||
|
right : 0; |
||||||
|
bottom : 0; |
||||||
|
left : 0; |
||||||
|
} |
||||||
|
.nano > .nano-content:focus { |
||||||
|
outline: thin dotted; |
||||||
|
} |
||||||
|
.nano > .nano-content::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.has-scrollbar > .nano-content::-webkit-scrollbar { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.nano > .nano-pane { |
||||||
|
background : rgba(0,0,0,.25); |
||||||
|
position : absolute; |
||||||
|
width : 10px; |
||||||
|
right : 0; |
||||||
|
top : 0; |
||||||
|
bottom : 0; |
||||||
|
visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ |
||||||
|
opacity : .01; |
||||||
|
-webkit-transition : .2s; |
||||||
|
-moz-transition : .2s; |
||||||
|
-o-transition : .2s; |
||||||
|
transition : .2s; |
||||||
|
-moz-border-radius : 5px; |
||||||
|
-webkit-border-radius : 5px; |
||||||
|
border-radius : 5px; |
||||||
|
} |
||||||
|
.nano > .nano-pane > .nano-slider { |
||||||
|
background: #444; |
||||||
|
background: rgba(0,0,0,.5); |
||||||
|
position : relative; |
||||||
|
margin : 0 1px; |
||||||
|
-moz-border-radius : 3px; |
||||||
|
-webkit-border-radius : 3px; |
||||||
|
border-radius : 3px; |
||||||
|
} |
||||||
|
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { |
||||||
|
visibility : visible\9; /* Target only IE7 and IE8 with this hack */ |
||||||
|
opacity : 0.99; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.im_page_wrap { |
||||||
|
background: #FFF; |
||||||
|
max-width: 1000px; |
||||||
|
min-width: 300px; |
||||||
|
margin: 0 auto; |
||||||
|
|
||||||
|
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
||||||
|
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
||||||
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
||||||
|
|
||||||
|
border-radius: 0 0 3px 3px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.im_page_footer { |
||||||
|
font-size: 11px; |
||||||
|
text-align: center; |
||||||
|
color: #9cacb9; |
||||||
|
line-height: 40px; |
||||||
|
} |
||||||
|
.im_page_footer_brand { |
||||||
|
color: #9cacb9; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.im_page_footer_brand:hover, |
||||||
|
.im_page_footer_brand:active { |
||||||
|
color: #8499aa; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.im_dialogs_col { |
||||||
|
margin-right: -7px; |
||||||
|
} |
||||||
|
.im_dialogs_col_wrap { |
||||||
|
float: left; |
||||||
|
width: 31%; |
||||||
|
border-right: 2px solid #E9EBED; |
||||||
|
padding-bottom: 10px; |
||||||
|
} |
||||||
|
.im_dialogs_scrollable_wrap { |
||||||
|
padding: 0 19px 0 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.im_history_col_wrap { |
||||||
|
float: left; |
||||||
|
width: 69%; |
||||||
|
} |
||||||
|
.im_history_col .nano > .nano-pane, |
||||||
|
.contacts_modal_col .nano > .nano-pane, |
||||||
|
.im_dialogs_modal_col .nano > .nano-pane { |
||||||
|
background : rgba(3,36,64,0.08); |
||||||
|
width : 9px; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
/*-webkit-transition : .2s; |
||||||
|
-moz-transition : .2s; |
||||||
|
-o-transition : .2s; |
||||||
|
transition : .2s;*/ |
||||||
|
-moz-border-radius : 2px; |
||||||
|
-webkit-border-radius : 2px; |
||||||
|
border-radius : 2px; |
||||||
|
|
||||||
|
-webkit-transition : none; |
||||||
|
-moz-transition : none; |
||||||
|
-o-transition : none; |
||||||
|
transition : none; |
||||||
|
} |
||||||
|
|
||||||
|
.contacts_modal_col .nano > .nano-pane { |
||||||
|
width: 6px; |
||||||
|
right: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
.im_dialogs_modal_col .nano > .nano-pane { |
||||||
|
width: 6px; |
||||||
|
right: 2px; |
||||||
|
} |
||||||
|
.im_dialogs_modal_col .im_dialogs_scrollable_wrap { |
||||||
|
padding: 0 12px 0 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.im_history_col .nano > .nano-pane { |
||||||
|
top: 10px; |
||||||
|
right: 8px; |
||||||
|
} |
||||||
|
.im_history_col .nano > .nano-pane > .nano-slider, |
||||||
|
.contacts_modal_col .nano > .nano-pane > .nano-slider, |
||||||
|
.im_dialogs_modal_col .nano > .nano-pane > .nano-slider { |
||||||
|
background : rgba(3,46,79,0.22); |
||||||
|
margin: 0; |
||||||
|
-moz-border-radius : 2px; |
||||||
|
-webkit-border-radius : 2px; |
||||||
|
border-radius : 2px; |
||||||
|
} |
||||||
@ -0,0 +1,381 @@ |
|||||||
|
/*! |
||||||
|
* Webogram v0.3.0 - messaging web application for MTProto |
||||||
|
* https://github.com/zhukov/webogram
|
||||||
|
* Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com> |
||||||
|
* https://github.com/zhukov/webogram/blob/master/LICENSE
|
||||||
|
*/ |
||||||
|
|
||||||
|
'use strict'; |
||||||
|
|
||||||
|
/* Directives */ |
||||||
|
|
||||||
|
|
||||||
|
angular.module('myApp.directives') |
||||||
|
|
||||||
|
.directive('myDialogsListMobile', function($window, $timeout) { |
||||||
|
|
||||||
|
return { |
||||||
|
link: link |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
function link ($scope, element, attrs) { |
||||||
|
var dialogsColWrap = $('.im_dialogs_col_wrap')[0], |
||||||
|
scrollableWrap = element[0], |
||||||
|
headWrap = $('.tg_page_head')[0], |
||||||
|
panelWrapSelector = attrs.modal |
||||||
|
? '.mobile_modal_body .im_dialogs_panel' |
||||||
|
: '.im_dialogs_panel', |
||||||
|
panelWrap = $(panelWrapSelector)[0], |
||||||
|
hasTabs = false, |
||||||
|
moreNotified = false; |
||||||
|
|
||||||
|
$scope.$on('ui_dialogs_tabs', function (e, newHasTabs) { |
||||||
|
hasTabs = newHasTabs; |
||||||
|
updateSizes(); |
||||||
|
}); |
||||||
|
$scope.$on('ui_dialogs_search', updateSizes); |
||||||
|
$scope.$on('ui_dialogs_update', updateSizes); |
||||||
|
|
||||||
|
|
||||||
|
$scope.$on('ui_dialogs_append', function () { |
||||||
|
onContentLoaded(function () { |
||||||
|
moreNotified = false; |
||||||
|
|
||||||
|
$timeout(function () { |
||||||
|
$(scrollableWrap).trigger('scroll'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on('ui_dialogs_change', function () { |
||||||
|
onContentLoaded(function () { |
||||||
|
moreNotified = false; |
||||||
|
|
||||||
|
$timeout(function () { |
||||||
|
$(scrollableWrap).trigger('scroll'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
$(scrollableWrap).on('scroll', function (e) { |
||||||
|
if (!element.is(':visible')) return; |
||||||
|
if (!moreNotified && scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) { |
||||||
|
$scope.$emit('dialogs_need_more'); |
||||||
|
moreNotified = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
function updateSizes () { |
||||||
|
if (!panelWrap || !panelWrap.offsetHeight) { |
||||||
|
panelWrap = $(panelWrapSelector)[0]; |
||||||
|
} |
||||||
|
|
||||||
|
if (attrs.modal) { |
||||||
|
$(element).css({ |
||||||
|
height: $($window).height() - |
||||||
|
(panelWrap ? panelWrap.offsetHeight : 58) - 46 |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (!headWrap || !headWrap.offsetHeight) { |
||||||
|
headWrap = $('.tg_page_head')[0]; |
||||||
|
} |
||||||
|
|
||||||
|
if (!dialogsColWrap || !dialogsColWrap.offsetHeight) { |
||||||
|
dialogsColWrap = $('.im_dialogs_col_wrap')[0]; |
||||||
|
} |
||||||
|
$(element).css({ |
||||||
|
height: $($window).height() - |
||||||
|
(headWrap ? headWrap.offsetHeight : 44) - |
||||||
|
(panelWrap ? panelWrap.offsetHeight : 58) - |
||||||
|
parseInt($(dialogsColWrap).css('paddingBottom') || 0) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
$($window).on('resize', updateSizes); |
||||||
|
|
||||||
|
updateSizes(); |
||||||
|
setTimeout(updateSizes, 1000); |
||||||
|
}; |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
.directive('myHistoryMobile', function ($window, $timeout, $rootScope, $transition) { |
||||||
|
|
||||||
|
return { |
||||||
|
link: link |
||||||
|
}; |
||||||
|
|
||||||
|
function link ($scope, element, attrs) { |
||||||
|
var historyWrap = $('.im_history_wrap', element)[0], |
||||||
|
historyMessagesEl = $('.im_history_messages', element)[0], |
||||||
|
historyEl = $('.im_history', element)[0], |
||||||
|
scrollableWrap = $('.im_history_scrollable_wrap', element)[0], |
||||||
|
scrollable = $('.im_history_scrollable', element)[0], |
||||||
|
panelWrap = $('.im_history_panel_wrap', element)[0], |
||||||
|
bottomPanelWrap = $('.im_bottom_panel_wrap', element)[0], |
||||||
|
sendFormWrap = $('.im_send_form_wrap', element)[0], |
||||||
|
headWrap = $('.tg_page_head')[0], |
||||||
|
sendForm = $('.im_send_form', element)[0], |
||||||
|
moreNotified = false, |
||||||
|
lessNotified = false; |
||||||
|
|
||||||
|
onContentLoaded(function () { |
||||||
|
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||||
|
}); |
||||||
|
$(historyWrap).nanoScroller({preventPageScrolling: true, tabIndex: -1, iOSNativeScrolling: true}); |
||||||
|
|
||||||
|
var updateScroller = function (delay) { |
||||||
|
// console.trace('scroller update', delay);
|
||||||
|
$timeout(function () { |
||||||
|
if (!$(scrollableWrap).hasClass('im_history_to_bottom')) { |
||||||
|
$(historyWrap).nanoScroller(); |
||||||
|
} |
||||||
|
}, delay || 0); |
||||||
|
} |
||||||
|
|
||||||
|
var transform = false, |
||||||
|
trs = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'], |
||||||
|
i; |
||||||
|
for (i = 0; i < trs.length; i++) { |
||||||
|
if (trs[i] in historyMessagesEl.style) { |
||||||
|
transform = trs[i]; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var animated = transform ? true : false, |
||||||
|
curAnimation = false; |
||||||
|
|
||||||
|
$scope.$on('ui_history_append_new', function (e, options) { |
||||||
|
if (!atBottom && !options.my) { |
||||||
|
return; |
||||||
|
} |
||||||
|
var curAnimated = animated && |
||||||
|
!$rootScope.idle.isIDLE && |
||||||
|
historyMessagesEl.clientHeight > 0, |
||||||
|
wasH; |
||||||
|
|
||||||
|
if (curAnimated) { |
||||||
|
wasH = scrollableWrap.scrollHeight; |
||||||
|
} else { |
||||||
|
$(scrollable).css({bottom: 0}); |
||||||
|
$(scrollableWrap).addClass('im_history_to_bottom'); |
||||||
|
} |
||||||
|
|
||||||
|
onContentLoaded(function () { |
||||||
|
if (curAnimated) { |
||||||
|
curAnimation = true; |
||||||
|
$(historyMessagesEl).removeClass('im_history_appending'); |
||||||
|
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||||
|
$(historyMessagesEl).css(transform, 'translate(0px, ' + (scrollableWrap.scrollHeight - wasH) + 'px)'); |
||||||
|
$(historyWrap).nanoScroller(); |
||||||
|
var styles = {}; |
||||||
|
styles[transform] = 'translate(0px, 0px)'; |
||||||
|
$(historyMessagesEl).addClass('im_history_appending'); |
||||||
|
$transition($(historyMessagesEl), styles).then(function () { |
||||||
|
curAnimation = false; |
||||||
|
$(historyMessagesEl).removeClass('im_history_appending'); |
||||||
|
updateBottomizer(); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
$(scrollableWrap).removeClass('im_history_to_bottom'); |
||||||
|
$(scrollable).css({bottom: ''}); |
||||||
|
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||||
|
updateBottomizer(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
function changeScroll () { |
||||||
|
var unreadSplit, focusMessage; |
||||||
|
|
||||||
|
if (focusMessage = $('.im_message_focus', scrollableWrap)[0]) { |
||||||
|
scrollableWrap.scrollTop = Math.max(0, focusMessage.offsetTop - Math.floor(scrollableWrap.clientHeight / 2) + 26); |
||||||
|
atBottom = false; |
||||||
|
} else if (unreadSplit = $('.im_message_unread_split', scrollableWrap)[0]) { |
||||||
|
scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52); |
||||||
|
atBottom = false; |
||||||
|
} else { |
||||||
|
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||||
|
atBottom = true; |
||||||
|
} |
||||||
|
updateScroller(); |
||||||
|
$timeout(function () { |
||||||
|
$(scrollableWrap).trigger('scroll'); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.$on('ui_history_change', function () { |
||||||
|
$(scrollableWrap).addClass('im_history_to_bottom'); |
||||||
|
$(scrollable).css({bottom: 0}); |
||||||
|
onContentLoaded(function () { |
||||||
|
$(scrollableWrap).removeClass('im_history_to_bottom'); |
||||||
|
$(scrollable).css({bottom: ''}); |
||||||
|
updateSizes(true); |
||||||
|
moreNotified = false; |
||||||
|
lessNotified = false; |
||||||
|
changeScroll(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on('ui_history_change_scroll', function () { |
||||||
|
onContentLoaded(changeScroll) |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on('ui_history_focus', function () { |
||||||
|
if (!atBottom) { |
||||||
|
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||||
|
updateScroller(); |
||||||
|
atBottom = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on('ui_history_prepend', function () { |
||||||
|
var sh = scrollableWrap.scrollHeight, |
||||||
|
st = scrollableWrap.scrollTop, |
||||||
|
pr = parseInt($(scrollableWrap).css('paddingRight')), |
||||||
|
ch = scrollableWrap.clientHeight; |
||||||
|
|
||||||
|
$(scrollableWrap).addClass('im_history_to_bottom'); |
||||||
|
scrollableWrap.scrollHeight; // Some strange Chrome bug workaround
|
||||||
|
$(scrollable).css({bottom: -(sh - st - ch), marginLeft: -Math.ceil(pr / 2)}); |
||||||
|
|
||||||
|
var upd = function () { |
||||||
|
$(scrollableWrap).removeClass('im_history_to_bottom'); |
||||||
|
$(scrollable).css({bottom: '', marginLeft: ''}); |
||||||
|
scrollableWrap.scrollTop = st + scrollableWrap.scrollHeight - sh; |
||||||
|
|
||||||
|
updateBottomizer(); |
||||||
|
moreNotified = false; |
||||||
|
|
||||||
|
$timeout(function () { |
||||||
|
if (scrollableWrap.scrollHeight != sh) { |
||||||
|
$(scrollableWrap).trigger('scroll'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
clearTimeout(timer); |
||||||
|
unreg(); |
||||||
|
}, |
||||||
|
timer = setTimeout(upd, 0), |
||||||
|
unreg = $scope.$on('$viewContentLoaded', upd); |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on('ui_history_append', function () { |
||||||
|
var sh = scrollableWrap.scrollHeight; |
||||||
|
onContentLoaded(function () { |
||||||
|
atBottom = false; |
||||||
|
updateBottomizer(); |
||||||
|
lessNotified = false; |
||||||
|
|
||||||
|
$timeout(function () { |
||||||
|
if (scrollableWrap.scrollHeight != sh) { |
||||||
|
$(scrollableWrap).trigger('scroll'); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on('ui_panel_update', function () { |
||||||
|
onContentLoaded(function () { |
||||||
|
updateSizes(); |
||||||
|
$scope.$broadcast('ui_message_send'); |
||||||
|
|
||||||
|
$timeout(function () { |
||||||
|
$(scrollableWrap).trigger('scroll'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on('ui_selection_clear', function () { |
||||||
|
if (window.getSelection) { |
||||||
|
if (window.getSelection().empty) { // Chrome
|
||||||
|
window.getSelection().empty(); |
||||||
|
} else if (window.getSelection().removeAllRanges) { // Firefox
|
||||||
|
window.getSelection().removeAllRanges(); |
||||||
|
} |
||||||
|
} else if (document.selection) { // IE?
|
||||||
|
document.selection.empty(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$scope.$on('ui_editor_resize', updateSizes); |
||||||
|
$scope.$on('ui_height', function () { |
||||||
|
onContentLoaded(updateSizes); |
||||||
|
// updateSizes();
|
||||||
|
}); |
||||||
|
|
||||||
|
var atBottom = true; |
||||||
|
$(scrollableWrap).on('scroll', function (e) { |
||||||
|
if (!element.is(':visible') || |
||||||
|
$(scrollableWrap).hasClass('im_history_to_bottom') || |
||||||
|
curAnimation) { |
||||||
|
return; |
||||||
|
} |
||||||
|
atBottom = scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight; |
||||||
|
|
||||||
|
if (!moreNotified && scrollableWrap.scrollTop <= 300) { |
||||||
|
moreNotified = true; |
||||||
|
$scope.$emit('history_need_more'); |
||||||
|
} |
||||||
|
else if (!lessNotified && scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) { |
||||||
|
lessNotified = true; |
||||||
|
$scope.$emit('history_need_less'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function updateSizes (heightOnly) { |
||||||
|
if (!element.is(':visible') && !$(element[0].parentNode.parentNode).is(':visible')) { |
||||||
|
return; |
||||||
|
} |
||||||
|
if ($(sendFormWrap).is(':visible')) { |
||||||
|
$(sendFormWrap).css({ |
||||||
|
height: $(sendForm).height() |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if (!headWrap || !headWrap.offsetHeight) { |
||||||
|
headWrap = $('.tg_page_head')[0]; |
||||||
|
} |
||||||
|
var historyH = $($window).height() - panelWrap.offsetHeight - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44); |
||||||
|
$(historyWrap).css({ |
||||||
|
height: historyH |
||||||
|
}); |
||||||
|
|
||||||
|
updateBottomizer(); |
||||||
|
|
||||||
|
|
||||||
|
if (heightOnly === true) return; |
||||||
|
if (atBottom) { |
||||||
|
onContentLoaded(function () { |
||||||
|
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||||
|
updateScroller(); |
||||||
|
}); |
||||||
|
} |
||||||
|
updateScroller(100); |
||||||
|
} |
||||||
|
|
||||||
|
function updateBottomizer () { |
||||||
|
$(historyMessagesEl).css({marginTop: 0}); |
||||||
|
var marginTop = scrollableWrap.offsetHeight |
||||||
|
- historyMessagesEl.offsetHeight |
||||||
|
- 20 |
||||||
|
- (Config.Mobile ? 0 : 49); |
||||||
|
|
||||||
|
if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) { |
||||||
|
$(historyMessagesEl).css({marginTop: marginTop}); |
||||||
|
} |
||||||
|
$(historyWrap).nanoScroller(); |
||||||
|
} |
||||||
|
|
||||||
|
$($window).on('resize', updateSizes); |
||||||
|
|
||||||
|
updateSizes(); |
||||||
|
onContentLoaded(updateSizes); |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
@ -1,55 +0,0 @@ |
|||||||
/** initial setup **/ |
|
||||||
.nano { |
|
||||||
position : relative; |
|
||||||
width : 100%; |
|
||||||
height : 100%; |
|
||||||
overflow : hidden; |
|
||||||
} |
|
||||||
.nano > .nano-content { |
|
||||||
position : absolute; |
|
||||||
overflow : scroll; |
|
||||||
overflow-x : hidden; |
|
||||||
top : 0; |
|
||||||
right : 0; |
|
||||||
bottom : 0; |
|
||||||
left : 0; |
|
||||||
} |
|
||||||
.nano > .nano-content:focus { |
|
||||||
outline: thin dotted; |
|
||||||
} |
|
||||||
.nano > .nano-content::-webkit-scrollbar { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.has-scrollbar > .nano-content::-webkit-scrollbar { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
.nano > .nano-pane { |
|
||||||
background : rgba(0,0,0,.25); |
|
||||||
position : absolute; |
|
||||||
width : 10px; |
|
||||||
right : 0; |
|
||||||
top : 0; |
|
||||||
bottom : 0; |
|
||||||
visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ |
|
||||||
opacity : .01; |
|
||||||
-webkit-transition : .2s; |
|
||||||
-moz-transition : .2s; |
|
||||||
-o-transition : .2s; |
|
||||||
transition : .2s; |
|
||||||
-moz-border-radius : 5px; |
|
||||||
-webkit-border-radius : 5px; |
|
||||||
border-radius : 5px; |
|
||||||
} |
|
||||||
.nano > .nano-pane > .nano-slider { |
|
||||||
background: #444; |
|
||||||
background: rgba(0,0,0,.5); |
|
||||||
position : relative; |
|
||||||
margin : 0 1px; |
|
||||||
-moz-border-radius : 3px; |
|
||||||
-webkit-border-radius : 3px; |
|
||||||
border-radius : 3px; |
|
||||||
} |
|
||||||
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { |
|
||||||
visibility : visible\9; /* Target only IE7 and IE8 with this hack */ |
|
||||||
opacity : 0.99; |
|
||||||
} |
|
||||||
Loading…
Reference in new issue