diff --git a/app/themes/onepage_light/theme.css b/app/themes/onepage_light/theme.css
index 2d9f674..66020e2 100644
--- a/app/themes/onepage_light/theme.css
+++ b/app/themes/onepage_light/theme.css
@@ -576,4 +576,49 @@ figure .source {
background: #f1f1ef;
border: none;
box-shadow: 0 5px 20px #85858587;
+}
+
+
+.image,
+.lightbox-opened{
+ transition: all 0.3s ease;
+}
+.lightbox-opened {
+ background-color: #ffffffe6;
+ cursor: pointer;
+ height: 100%;
+ left: 0;
+ overflow-y: scroll;
+ padding: 24px;
+ position: fixed;
+ text-align: center;
+ top: 0;
+ width: 100%;
+ animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+ 0% {
+ opacity: 0.5;
+ padding: 100px;
+ }
+
+ 100% {
+ opacity: 1;
+ padding: 24px;
+ }
+}
+
+.lightbox-opened img {
+ box-shadow: 0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+ max-width: 100%;
+ border-radius: 10px;
+ max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+ overflow: hidden;
}
\ No newline at end of file
diff --git a/app/themes/onepage_light/theme.js b/app/themes/onepage_light/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/onepage_light/theme.js
+++ b/app/themes/onepage_light/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
// jump to selected page in sidebar
document.getElementById(elementid).scrollIntoView();
- if(cl_splithash.length > 1){
+ if (cl_splithash.length > 1) {
// when internal jumo mark clicked also jump to this position
let elementid2 = cl_splithash[1];
document.getElementById(elementid2).scrollIntoView();
$('#' + elementid2).addClass('n2web_jumpmark_selected');
}
}
-
- $( ".n2web_group" ).first().addClass('opened');
- $( ".n2web_file.has_children" ).first().addClass('opened');
+
+ $(".n2web_group").first().addClass('opened');
+ $(".n2web_file.has_children").first().addClass('opened');
// menu functionality
$(".n2web_show_children").click(function () {
- let n2webid = $(this).data( "n2webid" );
+ let n2webid = $(this).data("n2webid");
toggleMenuOpen(n2webid, true);
});
$("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
let element = $(n2webid);
highlightJumpMark(element);
});
- $(".n2web_header_mobile_menu_button").click(function (){
- var element = $(".n2web_header_menu.menu_right");
- if($(element).hasClass('opened')){
+ $(".n2web_header_mobile_menu_button").click(function () {
+ var element = $(".n2web_header_menu.menu_right");
+ if ($(element).hasClass('opened')) {
$(element).removeClass('opened');
$(element).removeClass('opened');
- }else{
+ } else {
$(element).addClass('opened');
$(element).addClass('opened');
}
})
+
+
+ // Open Lightbox
+ $(".image a").on("click", function (e) {
+ e.preventDefault();
+ var image = $(this).attr("href");
+ $("html").addClass("no-scroll");
+ $("body").append(
+ ''
+ );
+ });
+
+ // Close Lightbox
+ $("body").on("click", ".lightbox-opened", function () {
+ $("html").removeClass("no-scroll");
+ $(".lightbox-opened").remove();
+ });
});
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
var cl = '';
- if (manual == true){
- $('#'+n2webid+'_dir').addClass('manual');
- $('#'+n2webid+'_file').addClass('manual');
- }else{
+ if (manual == true) {
+ $('#' + n2webid + '_dir').addClass('manual');
+ $('#' + n2webid + '_file').addClass('manual');
+ } else {
// cl = 'opened';
}
- if($('#'+n2webid+'_dir').hasClass('opened')){
- $('#'+n2webid+'_dir').removeClass('opened');
- $('#'+n2webid+'_file').removeClass('opened');
- }else{
- $('#'+n2webid+'_dir').addClass('opened');
- $('#'+n2webid+'_file').addClass('opened');
+ if ($('#' + n2webid + '_dir').hasClass('opened')) {
+ $('#' + n2webid + '_dir').removeClass('opened');
+ $('#' + n2webid + '_file').removeClass('opened');
+ } else {
+ $('#' + n2webid + '_dir').addClass('opened');
+ $('#' + n2webid + '_file').addClass('opened');
}
}
-function openParentMenu(element, manual){
- if ($(element).hasClass('n2web_group')){
- let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+ if ($(element).hasClass('n2web_group')) {
+ let n2webid = $(element).data("n2webid");
toggleMenuOpen(n2webid, manual);
openParentMenu($(element).parent(), manual);
}
}
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
$('a').removeClass('n2web_jumpmark_selected');
$(element).addClass('n2web_jumpmark_selected');
}
//Smooth-Scrolling
-$(function() {
- $('a[href*="#"]:not([href="#"])').click(function() {
- if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
- var target = $(this.hash);
- target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
- if (target.length) {
- $('html, body').animate({
- scrollTop: target.offset().top
- }, 1000);
- return false;
+$(function () {
+ $('a[href*="#"]:not([href="#"])').click(function () {
+ if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+ var target = $(this.hash);
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+ if (target.length) {
+ $('html, body').animate({
+ scrollTop: target.offset().top
+ }, 1000);
+ return false;
+ }
}
- }
});
- });
+});
diff --git a/app/themes/sidebar_dark/theme.css b/app/themes/sidebar_dark/theme.css
index a33fb6d..d01ac94 100644
--- a/app/themes/sidebar_dark/theme.css
+++ b/app/themes/sidebar_dark/theme.css
@@ -18,4 +18,48 @@ html, body { font-family: inter-var, -apple-system, BlinkMacSystemFont, "Segoe U
}@keyframes opacity-fade {
0% { opacity: 0; }
100% { opacity: 1; }
-}.n2web_menu_item { float: left; padding: 6px 8px; margin: 10px 3px; border-radius: 5px; }.menu_right { float: right; }.n2web_menu_item:hover { background: rgba(0, 0, 0, 0.06); color: rgb(191, 191, 191); }a .n2web_menu_item { color: rgb(191, 191, 191); text-decoration: none; transition: all 0.3s ease 0s; }.footer_menu .n2web_menu_item { font-size: 14px; }.table_of_contents { float: right; padding: 15px; margin-left: 15px; border-radius: 5px; transition: all 0.8s ease 0s; }.table_of_contents:hover { background: rgb(33, 33, 33); }.n2web_header_main_logo { float: left; }.n2web_header_main_logo img, .n2web_header_main_logo a { height: 40px; margin-top: 5px; }.n2web_header_main_title { float: right; }.n2web_header_main_title h1 { color: rgb(191, 191, 191); font-weight: 200; font-size: 28px; padding: 8px; }.n2web_sidebar ul, .n2web_sidebar ul ul, .n2web_sidebar li { font-size: 12px; }li.n2web_file { list-style: none; padding: 2px 5px; margin: 2px 5px; border-radius: 3px; }li.n2web_file a { color: rgba(191, 191, 191, 0.6); font-size: 15px; line-height: 22px; text-decoration: none; font-weight: 430; padding: 0px 4px; border-radius: 3px; display: inline-block; }article a, summary { transition: all 0.3s ease 0s; }article a { background: rgb(65, 48, 16); }article figure.image a, article a.bookmark { background: transparent; }article a { padding: 3px 4px; margin: 0px -4px; border-radius: 3px; color: rgb(191, 191, 191); }article img.page-cover-image { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; width: calc(100% - 6px); margin: 3px; }article .table_of_contents-link { opacity: 1; }li.n2web_file a:hover, article a:hover, summary:hover, a.table_of_contents-link:hover { color: rgb(191, 191, 191); background: rgba(0, 0, 0, 0.06); }figure.image a:hover { background: transparent; }article img { opacity: 0; }article { animation: 0.5s ease 0s 1 normal none running opacity-fade; }article img { animation: 1s ease 0s 1 normal none running opacity-fade; }article img { opacity: 1; }.callout a:hover { color: rgb(191, 191, 191); background: rgb(28, 28, 28); }li.n2web_file a, .n2web_file.has_children a { max-width: calc(100% - 22px); transition: background 0.3s ease 0s, color 0.3s ease 0s; }li.n2web_file.selected a, .n2web_file.has_children.opened a { font-weight: 600; color: rgb(191, 191, 191); }figure:not(.image) a[target="_blank"]:not(.bookmark-image):not(.bookmark)::after { content: " ↗"; left: 0px; }article .code, article code { font-size: 100%; }article li, article ul, article p, .callout { line-height: 24px; }article p { margin-top: 0px; margin-bottom: 15px; }article .code, article .bookmark-info { overflow: scroll; }summary { cursor: pointer; padding: 3px 3px 3px 6px; margin: -3px -3px -3px -6px; border-radius: 3px; }article ul.toggle > li { list-style: none; overflow: scroll; }article figure.image img { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; }article a span.icon { line-height: 18px; }article .block-color-red_background, article .block-color-blue_background, article .block-color-teal_background { border-radius: 5px; padding: 5px; }
\ No newline at end of file
+}.n2web_menu_item { float: left; padding: 6px 8px; margin: 10px 3px; border-radius: 5px; }.menu_right { float: right; }.n2web_menu_item:hover { background: rgba(0, 0, 0, 0.06); color: rgb(191, 191, 191); }a .n2web_menu_item { color: rgb(191, 191, 191); text-decoration: none; transition: all 0.3s ease 0s; }.footer_menu .n2web_menu_item { font-size: 14px; }.table_of_contents { float: right; padding: 15px; margin-left: 15px; border-radius: 5px; transition: all 0.8s ease 0s; }.table_of_contents:hover { background: rgb(33, 33, 33); }.n2web_header_main_logo { float: left; }.n2web_header_main_logo img, .n2web_header_main_logo a { height: 40px; margin-top: 5px; }.n2web_header_main_title { float: right; }.n2web_header_main_title h1 { color: rgb(191, 191, 191); font-weight: 200; font-size: 28px; padding: 8px; }.n2web_sidebar ul, .n2web_sidebar ul ul, .n2web_sidebar li { font-size: 12px; }li.n2web_file { list-style: none; padding: 2px 5px; margin: 2px 5px; border-radius: 3px; }li.n2web_file a { color: rgba(191, 191, 191, 0.6); font-size: 15px; line-height: 22px; text-decoration: none; font-weight: 430; padding: 0px 4px; border-radius: 3px; display: inline-block; }article a, summary { transition: all 0.3s ease 0s; }article a { background: rgb(65, 48, 16); }article figure.image a, article a.bookmark { background: transparent; }article a { padding: 3px 4px; margin: 0px -4px; border-radius: 3px; color: rgb(191, 191, 191); }article img.page-cover-image { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; width: calc(100% - 6px); margin: 3px; }article .table_of_contents-link { opacity: 1; }li.n2web_file a:hover, article a:hover, summary:hover, a.table_of_contents-link:hover { color: rgb(191, 191, 191); background: rgba(0, 0, 0, 0.06); }figure.image a:hover { background: transparent; }article img { opacity: 0; }article { animation: 0.5s ease 0s 1 normal none running opacity-fade; }article img { animation: 1s ease 0s 1 normal none running opacity-fade; }article img { opacity: 1; }.callout a:hover { color: rgb(191, 191, 191); background: rgb(28, 28, 28); }li.n2web_file a, .n2web_file.has_children a { max-width: calc(100% - 22px); transition: background 0.3s ease 0s, color 0.3s ease 0s; }li.n2web_file.selected a, .n2web_file.has_children.opened a { font-weight: 600; color: rgb(191, 191, 191); }figure:not(.image) a[target="_blank"]:not(.bookmark-image):not(.bookmark)::after { content: " ↗"; left: 0px; }article .code, article code { font-size: 100%; }article li, article ul, article p, .callout { line-height: 24px; }article p { margin-top: 0px; margin-bottom: 15px; }article .code, article .bookmark-info { overflow: scroll; }summary { cursor: pointer; padding: 3px 3px 3px 6px; margin: -3px -3px -3px -6px; border-radius: 3px; }article ul.toggle > li { list-style: none; overflow: scroll; }article figure.image img { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; }article a span.icon { line-height: 18px; }article .block-color-red_background, article .block-color-blue_background, article .block-color-teal_background { border-radius: 5px; padding: 5px; }
+
+.image,
+.lightbox-opened{
+ transition: all 0.3s ease;
+}
+.lightbox-opened {
+ background-color: #ffffffe6;
+ cursor: pointer;
+ height: 100%;
+ left: 0;
+ overflow-y: scroll;
+ padding: 24px;
+ position: fixed;
+ text-align: center;
+ top: 0;
+ width: 100%;
+ animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+ 0% {
+ opacity: 0.5;
+ padding: 100px;
+ }
+
+ 100% {
+ opacity: 1;
+ padding: 24px;
+ }
+}
+
+.lightbox-opened img {
+ box-shadow: 0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+ max-width: 100%;
+ border-radius: 10px;
+ max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/app/themes/sidebar_dark/theme.js b/app/themes/sidebar_dark/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/sidebar_dark/theme.js
+++ b/app/themes/sidebar_dark/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
// jump to selected page in sidebar
document.getElementById(elementid).scrollIntoView();
- if(cl_splithash.length > 1){
+ if (cl_splithash.length > 1) {
// when internal jumo mark clicked also jump to this position
let elementid2 = cl_splithash[1];
document.getElementById(elementid2).scrollIntoView();
$('#' + elementid2).addClass('n2web_jumpmark_selected');
}
}
-
- $( ".n2web_group" ).first().addClass('opened');
- $( ".n2web_file.has_children" ).first().addClass('opened');
+
+ $(".n2web_group").first().addClass('opened');
+ $(".n2web_file.has_children").first().addClass('opened');
// menu functionality
$(".n2web_show_children").click(function () {
- let n2webid = $(this).data( "n2webid" );
+ let n2webid = $(this).data("n2webid");
toggleMenuOpen(n2webid, true);
});
$("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
let element = $(n2webid);
highlightJumpMark(element);
});
- $(".n2web_header_mobile_menu_button").click(function (){
- var element = $(".n2web_header_menu.menu_right");
- if($(element).hasClass('opened')){
+ $(".n2web_header_mobile_menu_button").click(function () {
+ var element = $(".n2web_header_menu.menu_right");
+ if ($(element).hasClass('opened')) {
$(element).removeClass('opened');
$(element).removeClass('opened');
- }else{
+ } else {
$(element).addClass('opened');
$(element).addClass('opened');
}
})
+
+
+ // Open Lightbox
+ $(".image a").on("click", function (e) {
+ e.preventDefault();
+ var image = $(this).attr("href");
+ $("html").addClass("no-scroll");
+ $("body").append(
+ ''
+ );
+ });
+
+ // Close Lightbox
+ $("body").on("click", ".lightbox-opened", function () {
+ $("html").removeClass("no-scroll");
+ $(".lightbox-opened").remove();
+ });
});
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
var cl = '';
- if (manual == true){
- $('#'+n2webid+'_dir').addClass('manual');
- $('#'+n2webid+'_file').addClass('manual');
- }else{
+ if (manual == true) {
+ $('#' + n2webid + '_dir').addClass('manual');
+ $('#' + n2webid + '_file').addClass('manual');
+ } else {
// cl = 'opened';
}
- if($('#'+n2webid+'_dir').hasClass('opened')){
- $('#'+n2webid+'_dir').removeClass('opened');
- $('#'+n2webid+'_file').removeClass('opened');
- }else{
- $('#'+n2webid+'_dir').addClass('opened');
- $('#'+n2webid+'_file').addClass('opened');
+ if ($('#' + n2webid + '_dir').hasClass('opened')) {
+ $('#' + n2webid + '_dir').removeClass('opened');
+ $('#' + n2webid + '_file').removeClass('opened');
+ } else {
+ $('#' + n2webid + '_dir').addClass('opened');
+ $('#' + n2webid + '_file').addClass('opened');
}
}
-function openParentMenu(element, manual){
- if ($(element).hasClass('n2web_group')){
- let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+ if ($(element).hasClass('n2web_group')) {
+ let n2webid = $(element).data("n2webid");
toggleMenuOpen(n2webid, manual);
openParentMenu($(element).parent(), manual);
}
}
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
$('a').removeClass('n2web_jumpmark_selected');
$(element).addClass('n2web_jumpmark_selected');
}
//Smooth-Scrolling
-$(function() {
- $('a[href*="#"]:not([href="#"])').click(function() {
- if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
- var target = $(this.hash);
- target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
- if (target.length) {
- $('html, body').animate({
- scrollTop: target.offset().top
- }, 1000);
- return false;
+$(function () {
+ $('a[href*="#"]:not([href="#"])').click(function () {
+ if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+ var target = $(this.hash);
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+ if (target.length) {
+ $('html, body').animate({
+ scrollTop: target.offset().top
+ }, 1000);
+ return false;
+ }
}
- }
});
- });
+});
diff --git a/app/themes/sidebar_dark_full_width/theme.css b/app/themes/sidebar_dark_full_width/theme.css
index 5f4a10f..49fe26f 100644
--- a/app/themes/sidebar_dark_full_width/theme.css
+++ b/app/themes/sidebar_dark_full_width/theme.css
@@ -18,4 +18,48 @@ html, body { font-family: inter-var, -apple-system, BlinkMacSystemFont, "Segoe U
}@keyframes opacity-fade {
0% { opacity: 0; }
100% { opacity: 1; }
-}.n2web_menu_item { float: left; padding: 6px 8px; margin: 10px 3px; border-radius: 5px; }.menu_right { float: right; }.n2web_menu_item:hover { background: rgba(0, 0, 0, 0.06); color: rgb(191, 191, 191); }a .n2web_menu_item { color: rgb(191, 191, 191); text-decoration: none; transition: all 0.3s ease 0s; }.footer_menu .n2web_menu_item { font-size: 14px; }.table_of_contents { float: right; padding: 15px; margin-left: 15px; border-radius: 5px; transition: all 0.8s ease 0s; }.table_of_contents:hover { background: rgb(33, 33, 33); }.n2web_header_main_logo { float: left; }.n2web_header_main_logo img, .n2web_header_main_logo a { height: 40px; margin-top: 5px; }.n2web_header_main_title { float: right; }.n2web_header_main_title h1 { color: rgb(191, 191, 191); font-weight: 200; font-size: 28px; padding: 8px; }.n2web_sidebar ul, .n2web_sidebar ul ul, .n2web_sidebar li { font-size: 12px; }li.n2web_file { list-style: none; padding: 2px 5px; margin: 2px 5px; border-radius: 3px; }li.n2web_file a { color: rgba(191, 191, 191, 0.6); font-size: 15px; line-height: 22px; text-decoration: none; font-weight: 430; padding: 0px 4px; border-radius: 3px; display: inline-block; }article a, summary { transition: all 0.3s ease 0s; }article a { background: rgb(65, 48, 16); }article figure.image a, article a.bookmark { background: transparent; }article a { padding: 3px 4px; margin: 0px -4px; border-radius: 3px; color: rgb(191, 191, 191); }article img.page-cover-image { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; width: calc(100% - 6px); margin: 3px; }article .table_of_contents-link { opacity: 1; }li.n2web_file a:hover, article a:hover, summary:hover, a.table_of_contents-link:hover { color: rgb(191, 191, 191); background: rgba(0, 0, 0, 0.06); }figure.image a:hover { background: transparent; }article img { opacity: 0; }article { animation: 0.5s ease 0s 1 normal none running opacity-fade; padding-right: 15px; }article img { animation: 1s ease 0s 1 normal none running opacity-fade; }article img { opacity: 1; }.callout a:hover { color: rgb(191, 191, 191); background: rgb(28, 28, 28); }li.n2web_file a, .n2web_file.has_children a { max-width: calc(100% - 22px); transition: background 0.3s ease 0s, color 0.3s ease 0s; }li.n2web_file.selected a, .n2web_file.has_children.opened a { font-weight: 600; color: rgb(191, 191, 191); }figure:not(.image) a[target="_blank"]:not(.bookmark-image):not(.bookmark)::after { content: " ↗"; left: 0px; }article .code, article code { font-size: 100%; }article li, article ul, article p, .callout { line-height: 24px; }article p { margin-top: 0px; margin-bottom: 15px; }article .code, article .bookmark-info { overflow: scroll; }summary { cursor: pointer; padding: 3px 3px 3px 6px; margin: -3px -3px -3px -6px; border-radius: 3px; }article ul.toggle > li { list-style: none; overflow: scroll; }article figure.image img { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; }article a span.icon { line-height: 18px; }article .block-color-red_background, article .block-color-blue_background, article .block-color-teal_background { border-radius: 5px; padding: 5px; }
\ No newline at end of file
+}.n2web_menu_item { float: left; padding: 6px 8px; margin: 10px 3px; border-radius: 5px; }.menu_right { float: right; }.n2web_menu_item:hover { background: rgba(0, 0, 0, 0.06); color: rgb(191, 191, 191); }a .n2web_menu_item { color: rgb(191, 191, 191); text-decoration: none; transition: all 0.3s ease 0s; }.footer_menu .n2web_menu_item { font-size: 14px; }.table_of_contents { float: right; padding: 15px; margin-left: 15px; border-radius: 5px; transition: all 0.8s ease 0s; }.table_of_contents:hover { background: rgb(33, 33, 33); }.n2web_header_main_logo { float: left; }.n2web_header_main_logo img, .n2web_header_main_logo a { height: 40px; margin-top: 5px; }.n2web_header_main_title { float: right; }.n2web_header_main_title h1 { color: rgb(191, 191, 191); font-weight: 200; font-size: 28px; padding: 8px; }.n2web_sidebar ul, .n2web_sidebar ul ul, .n2web_sidebar li { font-size: 12px; }li.n2web_file { list-style: none; padding: 2px 5px; margin: 2px 5px; border-radius: 3px; }li.n2web_file a { color: rgba(191, 191, 191, 0.6); font-size: 15px; line-height: 22px; text-decoration: none; font-weight: 430; padding: 0px 4px; border-radius: 3px; display: inline-block; }article a, summary { transition: all 0.3s ease 0s; }article a { background: rgb(65, 48, 16); }article figure.image a, article a.bookmark { background: transparent; }article a { padding: 3px 4px; margin: 0px -4px; border-radius: 3px; color: rgb(191, 191, 191); }article img.page-cover-image { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; width: calc(100% - 6px); margin: 3px; }article .table_of_contents-link { opacity: 1; }li.n2web_file a:hover, article a:hover, summary:hover, a.table_of_contents-link:hover { color: rgb(191, 191, 191); background: rgba(0, 0, 0, 0.06); }figure.image a:hover { background: transparent; }article img { opacity: 0; }article { animation: 0.5s ease 0s 1 normal none running opacity-fade; padding-right: 15px; }article img { animation: 1s ease 0s 1 normal none running opacity-fade; }article img { opacity: 1; }.callout a:hover { color: rgb(191, 191, 191); background: rgb(28, 28, 28); }li.n2web_file a, .n2web_file.has_children a { max-width: calc(100% - 22px); transition: background 0.3s ease 0s, color 0.3s ease 0s; }li.n2web_file.selected a, .n2web_file.has_children.opened a { font-weight: 600; color: rgb(191, 191, 191); }figure:not(.image) a[target="_blank"]:not(.bookmark-image):not(.bookmark)::after { content: " ↗"; left: 0px; }article .code, article code { font-size: 100%; }article li, article ul, article p, .callout { line-height: 24px; }article p { margin-top: 0px; margin-bottom: 15px; }article .code, article .bookmark-info { overflow: scroll; }summary { cursor: pointer; padding: 3px 3px 3px 6px; margin: -3px -3px -3px -6px; border-radius: 3px; }article ul.toggle > li { list-style: none; overflow: scroll; }article figure.image img { border-radius: 5px; box-shadow: rgb(86, 80, 67) 0px 2px 4px; }article a span.icon { line-height: 18px; }article .block-color-red_background, article .block-color-blue_background, article .block-color-teal_background { border-radius: 5px; padding: 5px; }
+
+.image,
+.lightbox-opened{
+ transition: all 0.3s ease;
+}
+.lightbox-opened {
+ background-color: #ffffffe6;
+ cursor: pointer;
+ height: 100%;
+ left: 0;
+ overflow-y: scroll;
+ padding: 24px;
+ position: fixed;
+ text-align: center;
+ top: 0;
+ width: 100%;
+ animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+ 0% {
+ opacity: 0.5;
+ padding: 100px;
+ }
+
+ 100% {
+ opacity: 1;
+ padding: 24px;
+ }
+}
+
+.lightbox-opened img {
+ box-shadow: 0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+ max-width: 100%;
+ border-radius: 10px;
+ max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/app/themes/sidebar_dark_full_width/theme.js b/app/themes/sidebar_dark_full_width/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/sidebar_dark_full_width/theme.js
+++ b/app/themes/sidebar_dark_full_width/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
// jump to selected page in sidebar
document.getElementById(elementid).scrollIntoView();
- if(cl_splithash.length > 1){
+ if (cl_splithash.length > 1) {
// when internal jumo mark clicked also jump to this position
let elementid2 = cl_splithash[1];
document.getElementById(elementid2).scrollIntoView();
$('#' + elementid2).addClass('n2web_jumpmark_selected');
}
}
-
- $( ".n2web_group" ).first().addClass('opened');
- $( ".n2web_file.has_children" ).first().addClass('opened');
+
+ $(".n2web_group").first().addClass('opened');
+ $(".n2web_file.has_children").first().addClass('opened');
// menu functionality
$(".n2web_show_children").click(function () {
- let n2webid = $(this).data( "n2webid" );
+ let n2webid = $(this).data("n2webid");
toggleMenuOpen(n2webid, true);
});
$("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
let element = $(n2webid);
highlightJumpMark(element);
});
- $(".n2web_header_mobile_menu_button").click(function (){
- var element = $(".n2web_header_menu.menu_right");
- if($(element).hasClass('opened')){
+ $(".n2web_header_mobile_menu_button").click(function () {
+ var element = $(".n2web_header_menu.menu_right");
+ if ($(element).hasClass('opened')) {
$(element).removeClass('opened');
$(element).removeClass('opened');
- }else{
+ } else {
$(element).addClass('opened');
$(element).addClass('opened');
}
})
+
+
+ // Open Lightbox
+ $(".image a").on("click", function (e) {
+ e.preventDefault();
+ var image = $(this).attr("href");
+ $("html").addClass("no-scroll");
+ $("body").append(
+ ''
+ );
+ });
+
+ // Close Lightbox
+ $("body").on("click", ".lightbox-opened", function () {
+ $("html").removeClass("no-scroll");
+ $(".lightbox-opened").remove();
+ });
});
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
var cl = '';
- if (manual == true){
- $('#'+n2webid+'_dir').addClass('manual');
- $('#'+n2webid+'_file').addClass('manual');
- }else{
+ if (manual == true) {
+ $('#' + n2webid + '_dir').addClass('manual');
+ $('#' + n2webid + '_file').addClass('manual');
+ } else {
// cl = 'opened';
}
- if($('#'+n2webid+'_dir').hasClass('opened')){
- $('#'+n2webid+'_dir').removeClass('opened');
- $('#'+n2webid+'_file').removeClass('opened');
- }else{
- $('#'+n2webid+'_dir').addClass('opened');
- $('#'+n2webid+'_file').addClass('opened');
+ if ($('#' + n2webid + '_dir').hasClass('opened')) {
+ $('#' + n2webid + '_dir').removeClass('opened');
+ $('#' + n2webid + '_file').removeClass('opened');
+ } else {
+ $('#' + n2webid + '_dir').addClass('opened');
+ $('#' + n2webid + '_file').addClass('opened');
}
}
-function openParentMenu(element, manual){
- if ($(element).hasClass('n2web_group')){
- let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+ if ($(element).hasClass('n2web_group')) {
+ let n2webid = $(element).data("n2webid");
toggleMenuOpen(n2webid, manual);
openParentMenu($(element).parent(), manual);
}
}
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
$('a').removeClass('n2web_jumpmark_selected');
$(element).addClass('n2web_jumpmark_selected');
}
//Smooth-Scrolling
-$(function() {
- $('a[href*="#"]:not([href="#"])').click(function() {
- if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
- var target = $(this.hash);
- target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
- if (target.length) {
- $('html, body').animate({
- scrollTop: target.offset().top
- }, 1000);
- return false;
+$(function () {
+ $('a[href*="#"]:not([href="#"])').click(function () {
+ if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+ var target = $(this.hash);
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+ if (target.length) {
+ $('html, body').animate({
+ scrollTop: target.offset().top
+ }, 1000);
+ return false;
+ }
}
- }
});
- });
+});
diff --git a/app/themes/sidebar_light/theme.css b/app/themes/sidebar_light/theme.css
index 3582a02..b713fd7 100644
--- a/app/themes/sidebar_light/theme.css
+++ b/app/themes/sidebar_light/theme.css
@@ -550,4 +550,48 @@ article .block-color-orange_background {
article .block-color-gray {
color: #706f6f;
fill: #706f6f;
+}
+
+.image,
+.lightbox-opened{
+ transition: all 0.3s ease;
+}
+.lightbox-opened {
+ background-color: #ffffffe6;
+ cursor: pointer;
+ height: 100%;
+ left: 0;
+ overflow-y: scroll;
+ padding: 24px;
+ position: fixed;
+ text-align: center;
+ top: 0;
+ width: 100%;
+ animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+ 0% {
+ opacity: 0.5;
+ padding: 100px;
+ }
+
+ 100% {
+ opacity: 1;
+ padding: 24px;
+ }
+}
+
+.lightbox-opened img {
+ box-shadow: 0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+ max-width: 100%;
+ border-radius: 10px;
+ max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+ overflow: hidden;
}
\ No newline at end of file
diff --git a/app/themes/sidebar_light/theme.js b/app/themes/sidebar_light/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/sidebar_light/theme.js
+++ b/app/themes/sidebar_light/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
// jump to selected page in sidebar
document.getElementById(elementid).scrollIntoView();
- if(cl_splithash.length > 1){
+ if (cl_splithash.length > 1) {
// when internal jumo mark clicked also jump to this position
let elementid2 = cl_splithash[1];
document.getElementById(elementid2).scrollIntoView();
$('#' + elementid2).addClass('n2web_jumpmark_selected');
}
}
-
- $( ".n2web_group" ).first().addClass('opened');
- $( ".n2web_file.has_children" ).first().addClass('opened');
+
+ $(".n2web_group").first().addClass('opened');
+ $(".n2web_file.has_children").first().addClass('opened');
// menu functionality
$(".n2web_show_children").click(function () {
- let n2webid = $(this).data( "n2webid" );
+ let n2webid = $(this).data("n2webid");
toggleMenuOpen(n2webid, true);
});
$("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
let element = $(n2webid);
highlightJumpMark(element);
});
- $(".n2web_header_mobile_menu_button").click(function (){
- var element = $(".n2web_header_menu.menu_right");
- if($(element).hasClass('opened')){
+ $(".n2web_header_mobile_menu_button").click(function () {
+ var element = $(".n2web_header_menu.menu_right");
+ if ($(element).hasClass('opened')) {
$(element).removeClass('opened');
$(element).removeClass('opened');
- }else{
+ } else {
$(element).addClass('opened');
$(element).addClass('opened');
}
})
+
+
+ // Open Lightbox
+ $(".image a").on("click", function (e) {
+ e.preventDefault();
+ var image = $(this).attr("href");
+ $("html").addClass("no-scroll");
+ $("body").append(
+ ''
+ );
+ });
+
+ // Close Lightbox
+ $("body").on("click", ".lightbox-opened", function () {
+ $("html").removeClass("no-scroll");
+ $(".lightbox-opened").remove();
+ });
});
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
var cl = '';
- if (manual == true){
- $('#'+n2webid+'_dir').addClass('manual');
- $('#'+n2webid+'_file').addClass('manual');
- }else{
+ if (manual == true) {
+ $('#' + n2webid + '_dir').addClass('manual');
+ $('#' + n2webid + '_file').addClass('manual');
+ } else {
// cl = 'opened';
}
- if($('#'+n2webid+'_dir').hasClass('opened')){
- $('#'+n2webid+'_dir').removeClass('opened');
- $('#'+n2webid+'_file').removeClass('opened');
- }else{
- $('#'+n2webid+'_dir').addClass('opened');
- $('#'+n2webid+'_file').addClass('opened');
+ if ($('#' + n2webid + '_dir').hasClass('opened')) {
+ $('#' + n2webid + '_dir').removeClass('opened');
+ $('#' + n2webid + '_file').removeClass('opened');
+ } else {
+ $('#' + n2webid + '_dir').addClass('opened');
+ $('#' + n2webid + '_file').addClass('opened');
}
}
-function openParentMenu(element, manual){
- if ($(element).hasClass('n2web_group')){
- let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+ if ($(element).hasClass('n2web_group')) {
+ let n2webid = $(element).data("n2webid");
toggleMenuOpen(n2webid, manual);
openParentMenu($(element).parent(), manual);
}
}
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
$('a').removeClass('n2web_jumpmark_selected');
$(element).addClass('n2web_jumpmark_selected');
}
//Smooth-Scrolling
-$(function() {
- $('a[href*="#"]:not([href="#"])').click(function() {
- if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
- var target = $(this.hash);
- target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
- if (target.length) {
- $('html, body').animate({
- scrollTop: target.offset().top
- }, 1000);
- return false;
+$(function () {
+ $('a[href*="#"]:not([href="#"])').click(function () {
+ if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+ var target = $(this.hash);
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+ if (target.length) {
+ $('html, body').animate({
+ scrollTop: target.offset().top
+ }, 1000);
+ return false;
+ }
}
- }
});
- });
+});
diff --git a/app/themes/sidebar_light_full_width/theme.css b/app/themes/sidebar_light_full_width/theme.css
index 8b7b079..d6fa07d 100644
--- a/app/themes/sidebar_light_full_width/theme.css
+++ b/app/themes/sidebar_light_full_width/theme.css
@@ -539,3 +539,48 @@ article .block-color-teal_background {
border-radius: 5px;
padding: 5px;
}
+
+
+.image,
+.lightbox-opened{
+ transition: all 0.3s ease;
+}
+.lightbox-opened {
+ background-color: #ffffffe6;
+ cursor: pointer;
+ height: 100%;
+ left: 0;
+ overflow-y: scroll;
+ padding: 24px;
+ position: fixed;
+ text-align: center;
+ top: 0;
+ width: 100%;
+ animation: lightbox-in 0.5s;
+}
+
+@keyframes lightbox-in {
+ 0% {
+ opacity: 0.5;
+ padding: 100px;
+ }
+
+ 100% {
+ opacity: 1;
+ padding: 24px;
+ }
+}
+
+.lightbox-opened img {
+ box-shadow: 0 0 6px 3px #33333352;;
+}
+
+.lightbox-opened img {
+ max-width: 100%;
+ border-radius: 10px;
+ max-height: calc(100% - 48px);
+}
+
+.no-scroll {
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/app/themes/sidebar_light_full_width/theme.js b/app/themes/sidebar_light_full_width/theme.js
index f9cdd78..734a6f8 100644
--- a/app/themes/sidebar_light_full_width/theme.js
+++ b/app/themes/sidebar_light_full_width/theme.js
@@ -15,21 +15,21 @@ $(document).ready(function () {
// jump to selected page in sidebar
document.getElementById(elementid).scrollIntoView();
- if(cl_splithash.length > 1){
+ if (cl_splithash.length > 1) {
// when internal jumo mark clicked also jump to this position
let elementid2 = cl_splithash[1];
document.getElementById(elementid2).scrollIntoView();
$('#' + elementid2).addClass('n2web_jumpmark_selected');
}
}
-
- $( ".n2web_group" ).first().addClass('opened');
- $( ".n2web_file.has_children" ).first().addClass('opened');
+
+ $(".n2web_group").first().addClass('opened');
+ $(".n2web_file.has_children").first().addClass('opened');
// menu functionality
$(".n2web_show_children").click(function () {
- let n2webid = $(this).data( "n2webid" );
+ let n2webid = $(this).data("n2webid");
toggleMenuOpen(n2webid, true);
});
$("a.table_of_contents-link").click(function () {
@@ -37,65 +37,82 @@ $(document).ready(function () {
let element = $(n2webid);
highlightJumpMark(element);
});
- $(".n2web_header_mobile_menu_button").click(function (){
- var element = $(".n2web_header_menu.menu_right");
- if($(element).hasClass('opened')){
+ $(".n2web_header_mobile_menu_button").click(function () {
+ var element = $(".n2web_header_menu.menu_right");
+ if ($(element).hasClass('opened')) {
$(element).removeClass('opened');
$(element).removeClass('opened');
- }else{
+ } else {
$(element).addClass('opened');
$(element).addClass('opened');
}
})
+
+
+ // Open Lightbox
+ $(".image a").on("click", function (e) {
+ e.preventDefault();
+ var image = $(this).attr("href");
+ $("html").addClass("no-scroll");
+ $("body").append(
+ ''
+ );
+ });
+
+ // Close Lightbox
+ $("body").on("click", ".lightbox-opened", function () {
+ $("html").removeClass("no-scroll");
+ $(".lightbox-opened").remove();
+ });
});
-function toggleMenuOpen(n2webid, manual){
+function toggleMenuOpen(n2webid, manual) {
var cl = '';
- if (manual == true){
- $('#'+n2webid+'_dir').addClass('manual');
- $('#'+n2webid+'_file').addClass('manual');
- }else{
+ if (manual == true) {
+ $('#' + n2webid + '_dir').addClass('manual');
+ $('#' + n2webid + '_file').addClass('manual');
+ } else {
// cl = 'opened';
}
- if($('#'+n2webid+'_dir').hasClass('opened')){
- $('#'+n2webid+'_dir').removeClass('opened');
- $('#'+n2webid+'_file').removeClass('opened');
- }else{
- $('#'+n2webid+'_dir').addClass('opened');
- $('#'+n2webid+'_file').addClass('opened');
+ if ($('#' + n2webid + '_dir').hasClass('opened')) {
+ $('#' + n2webid + '_dir').removeClass('opened');
+ $('#' + n2webid + '_file').removeClass('opened');
+ } else {
+ $('#' + n2webid + '_dir').addClass('opened');
+ $('#' + n2webid + '_file').addClass('opened');
}
}
-function openParentMenu(element, manual){
- if ($(element).hasClass('n2web_group')){
- let n2webid = $(element).data( "n2webid" );
+function openParentMenu(element, manual) {
+ if ($(element).hasClass('n2web_group')) {
+ let n2webid = $(element).data("n2webid");
toggleMenuOpen(n2webid, manual);
openParentMenu($(element).parent(), manual);
}
}
-function highlightJumpMark(element){
+function highlightJumpMark(element) {
$('a').removeClass('n2web_jumpmark_selected');
$(element).addClass('n2web_jumpmark_selected');
}
//Smooth-Scrolling
-$(function() {
- $('a[href*="#"]:not([href="#"])').click(function() {
- if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
- var target = $(this.hash);
- target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
- if (target.length) {
- $('html, body').animate({
- scrollTop: target.offset().top
- }, 1000);
- return false;
+$(function () {
+ $('a[href*="#"]:not([href="#"])').click(function () {
+ if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+ var target = $(this.hash);
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+ if (target.length) {
+ $('html, body').animate({
+ scrollTop: target.offset().top
+ }, 1000);
+ return false;
+ }
}
- }
});
- });
+});