<div id="RAgetContent" class="message">$MESSAGE$</div>

<div class="rm-overlay rm-c-light rm-o-font">
<div class="rm-progress"></div>
<div class="rm-wrap">
<div class="rm-scroll_up">
<i class="fas fa-chevron-up"></i>
</div>
<div class="rm-top">
<div class="rm-title">
<span>$ENTRY_TITLE$</span>
</div>
<div class="rm-option">
<div class="rm-button rm-light" title="Сменить цвет фона">
<i class="far fa-lightbulb"></i>
</div>
<div class="rm-button rm-size" title="Изменить размер шрифта">
<i class="fas fa-text-height"></i>
</div>
<div class="rm-button rm-close" title="Закрыть режим просмотра">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<div class="rm-content"></div>
</div>
</div>

<script>
var elemOverlay = $('.rm-overlay'), getContent = $('#RAgetContent').html();

if(localStorage.getItem('LC_Light')==null || localStorage.getItem('LC_Light')=='false') var LC_Light = false; else var LC_Light = true;
if(localStorage.getItem('LC_Size')==null || localStorage.getItem('LC_Size')=='false') var LC_Size = false; else var LC_Size = true;

$(window).on('load',function(){
if(!LC_Light) elemOverlay.removeClass('rm-c-dark').addClass('rm-c-light'); else elemOverlay.removeClass('rm-c-light').addClass('rm-c-dark');
if(LC_Size) elemOverlay.addClass('rm-o-size'); else elemOverlay.removeClass('rm-o-size');
$('.rm-content').html(getContent);
});

elemOverlay.bind('scroll',function(){
var wrapHeight = $('.rm-wrap').height(), windowHeight = $(this).height();
if(wrapHeight>windowHeight) {
var scrollVal = $(this).scrollTop(),
progressSize = (100 * (scrollVal / (wrapHeight - windowHeight))) | 0;
$('.rm-progress').css('width',(progressSize > 100 ? 100 : progressSize)+'%');

$('.rm-scroll_up').css('visibility',(scrollVal > windowHeight ? 'visible' : 'hidden'));
}
});

$('.rm-scroll_up').on('click',function(){
$('.rm-overlay').scrollTop(0);
});

$('.rm-button').on('click',function(){
var isLight = $(this).hasClass('rm-light'), isSize = $(this).hasClass('rm-size'), isOpen = $(this).hasClass('rm-open'), isClose = $(this).hasClass('rm-close');

if(isLight) {
if(!LC_Light) {
LC_Light = true;
elemOverlay.removeClass('rm-c-light').addClass('rm-c-dark');
} else {
LC_Light = false;
elemOverlay.removeClass('rm-c-dark').addClass('rm-c-light');
}
localStorage.setItem('LC_Light',LC_Light);
}

if(isSize) {
if(LC_Size) {
LC_Size = false;
elemOverlay.removeClass('rm-o-size');
} else {
LC_Size = true;
elemOverlay.addClass('rm-o-size');
}
localStorage.setItem('LC_Size',LC_Size);
}

if(isOpen) {
$('body').css('overflow','hidden');
$('.rm-overlay').show().css('overflow-y','auto');
}

if(isClose) {
$('body').css('overflow','auto');
$('.rm-overlay').hide().css('overflow-y','hidden');
}
});
</script>

.rm-c-light {color: #2b2b2b;}
.rm-c-dark {color: #ecf0f1;}
.rm-button {display: block; width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 30px; cursor: pointer; position: relative;}
.rm-button.rm-c-light:hover, .rm-overlay.rm-c-light .rm-button:hover {background-color: rgba(43,43,43,.25);}
.rm-button.rm-c-dark:hover, .rm-overlay.rm-c-dark .rm-button:hover {background-color: rgba(236,240,241,.25);}
.rm-overlay {display: none; width: 100vw; height: 100vh; overflow: hidden; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; overflow: auto hidden;}
.rm-overlay.rm-c-light {background-color: #ecf0f1;}
.rm-overlay.rm-c-dark {background-color: #2b2b2b;}
.rm-overlay.rm-o-size .rm-content {font-size: 2em;}
.rm-overlay.rm-o-size .rm-button.rm-size {color: #1abc9c;}
.rm-wrap {display: block; min-width: calc(300px - 40px); width: calc(100% - 40px); max-width: calc(1000px - 40px); padding: 10px 20px; margin: 0 auto;}
.rm-top {display: block; width: 100%; height: 50px; margin: 0 0 10px;}
.rm-title, .rm-option, .rm-option .rm-button {display: inline-block; float: left;}
.rm-title {width: calc(100% - 160px); margin-right: 10px; height: 50px; line-height: 50px; font-size: 2em; font-weight: bold;}
.rm-title span {display: block; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.rm-option {width: 150px;}
.rm-content {display: block; font-size: 1em;}
.rm-progress {display: block; width: 0; height: 3px; position: fixed; left: 0; top: 0; right: 0; background: #1abc9c; z-index: 2; pointer-events: none;}
.rm-scroll_up {display: block; width: 50px; height: 100%; line-height: 60px; text-align: center; position: fixed; top: 3px; bottom: 0; cursor: pointer; z-index: 1; margin-left: -55px; font-size: 20px; visibility: hidden;}
.rm-overlay.rm-c-light .rm-scroll_up {background-color: rgba(43,43,43,.1);}
.rm-overlay.rm-c-dark .rm-scroll_up {background-color: rgba(236,240,241,.1);}
.rm-overlay.rm-c-light .rm-scroll_up:hover {background-color: rgba(43,43,43,.25);}
.rm-overlay.rm-c-dark .rm-scroll_up:hover {background-color: rgba(236,240,241,.25);}
.rm-button, .rm-scroll_up {transition: all linear .2s;}
/* fixed */
.rm-content img,
.rm-content video,
.rm-content iframe {max-width: 100%; box-sizing: border-box;}
.rm-top::after {content: ''; display: block; clear: both;}
.rm-button {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
@media print, screen and (max-width: 1000px) {
.rm-scroll_up {margin-left: -30px; width: 30px;}
.rm-wrap {padding-left: 25px; padding-right: 5px;}
}