Initial commit: Backup der Webseiten

- zoesch.de
- blitzkiste.net
- gruene-hassberge (norbert.zoesch.de)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

zoesch.de/galerie/themes/Sylvia/icon/index.php

@@ -0,0 +1,30 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | Piwigo - a PHP based photo gallery                                    |
+// +-----------------------------------------------------------------------+
+// | Copyright(C) 2008-2016 Piwigo Team                  http://piwigo.org |
+// | Copyright(C) 2003-2008 PhpWebGallery Team    http://phpwebgallery.net |
+// | Copyright(C) 2002-2003 Pierrick LE GALL   http://le-gall.net/pierrick |
+// +-----------------------------------------------------------------------+
+// | This program is free software; you can redistribute it and/or modify  |
+// | it under the terms of the GNU General Public License as published by  |
+// | the Free Software Foundation                                          |
+// |                                                                       |
+// | This program is distributed in the hope that it will be useful, but   |
+// | WITHOUT ANY WARRANTY; without even the implied warranty of            |
+// | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU      |
+// | General Public License for more details.                              |
+// |                                                                       |
+// | You should have received a copy of the GNU General Public License     |
+// | along with this program; if not, write to the Free Software           |
+// | Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, |
+// | USA.                                                                  |
+// +-----------------------------------------------------------------------+
+
+// Recursive call
+$url = '../';
+header( 'Request-URI: '.$url );
+header( 'Content-Location: '.$url );
+header( 'Location: '.$url );
+exit();
+?>

zoesch.de/galerie/themes/Sylvia/icon/mimetypes/index.php

@@ -0,0 +1,30 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | Piwigo - a PHP based photo gallery                                    |
+// +-----------------------------------------------------------------------+
+// | Copyright(C) 2008-2016 Piwigo Team                  http://piwigo.org |
+// | Copyright(C) 2003-2008 PhpWebGallery Team    http://phpwebgallery.net |
+// | Copyright(C) 2002-2003 Pierrick LE GALL   http://le-gall.net/pierrick |
+// +-----------------------------------------------------------------------+
+// | This program is free software; you can redistribute it and/or modify  |
+// | it under the terms of the GNU General Public License as published by  |
+// | the Free Software Foundation                                          |
+// |                                                                       |
+// | This program is distributed in the hope that it will be useful, but   |
+// | WITHOUT ANY WARRANTY; without even the implied warranty of            |
+// | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU      |
+// | General Public License for more details.                              |
+// |                                                                       |
+// | You should have received a copy of the GNU General Public License     |
+// | along with this program; if not, write to the Free Software           |
+// | Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, |
+// | USA.                                                                  |
+// +-----------------------------------------------------------------------+
+
+// Recursive call
+$url = '../';
+header( 'Request-URI: '.$url );
+header( 'Content-Location: '.$url );
+header( 'Location: '.$url );
+exit();
+?>

zoesch.de/galerie/themes/Sylvia/index.php

@@ -0,0 +1,30 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | Piwigo - a PHP based photo gallery                                    |
+// +-----------------------------------------------------------------------+
+// | Copyright(C) 2008-2016 Piwigo Team                  http://piwigo.org |
+// | Copyright(C) 2003-2008 PhpWebGallery Team    http://phpwebgallery.net |
+// | Copyright(C) 2002-2003 Pierrick LE GALL   http://le-gall.net/pierrick |
+// +-----------------------------------------------------------------------+
+// | This program is free software; you can redistribute it and/or modify  |
+// | it under the terms of the GNU General Public License as published by  |
+// | the Free Software Foundation                                          |
+// |                                                                       |
+// | This program is distributed in the hope that it will be useful, but   |
+// | WITHOUT ANY WARRANTY; without even the implied warranty of            |
+// | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU      |
+// | General Public License for more details.                              |
+// |                                                                       |
+// | You should have received a copy of the GNU General Public License     |
+// | along with this program; if not, write to the Free Software           |
+// | Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, |
+// | USA.                                                                  |
+// +-----------------------------------------------------------------------+
+
+// Recursive call
+$url = '../';
+header( 'Request-URI: '.$url );
+header( 'Content-Location: '.$url );
+header( 'Location: '.$url );
+exit();
+?>

zoesch.de/galerie/themes/Sylvia/local_head.tpl

@@ -0,0 +1,3 @@
+<!--[if IE]> 
+	<link rel="stylesheet" href="{$ROOT_URL}themes/Sylvia/theme-ie.css" type="text/css">
+<![endif]-->

zoesch.de/galerie/themes/Sylvia/theme-ie.css

@@ -0,0 +1,12 @@
+#content .thumbnailCategory .description .text {
+	scrollbar-face-color:#222;
+	scrollbar-shadow-color:#444;
+	scrollbar-highlight-color:#000;
+	scrollbar-darkshadow-color:#333;
+	scrollbar-track-color:#111;
+	scrollbar-arrow-color:#f70;
+}
+
+#debug { word-wrap:break-word; }
+/* IE6... Hacks: */
+/*\*/ * html #menubar #mbIdentification .button { margin-right:25px; } /* */ 

zoesch.de/galerie/themes/Sylvia/theme.css

@@ -0,0 +1,483 @@
+/* thumbnail wrap size */
+.thumbnailCategory .illustration { 
+	min-width:165px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */ 
+}
+ .commentElement .illustration { 
+	min-width:220px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */ 
+}
+
+/**
+ * Menubar
+ */
+#menubar DL { 
+	background:transparent url(images/menuBox_top.gif) no-repeat scroll left top;
+	margin:0 0 5px 40px; 
+	padding:0; 
+	width: 231px; 
+	min-width: 231px; 
+	border: 0; 
+	min-height: 32px; 
+	overflow-x: hidden;
+}
+#menubar DT { 
+	background-color:#111; 
+	border:0; 
+	display:inline; 
+	margin-left:8px; 
+	text-align:left; 
+}
+#menubar DD { 
+	background:transparent url(images/menuBox_bottom.gif) no-repeat scroll left bottom;
+	margin:14px 0 0 0; 
+	padding:0 0 22px; 
+	width: 231px; 
+	min-width: 231px; 
+	border: 0; 
+	overflow-x: hidden;
+}
+#menubar DD P {
+  background:transparent url(images/menuBox_sides.gif) repeat-y scroll left bottom; 
+  padding: 2px 16px 0; 
+  margin: 0;
+}
+#menubar UL, #menubar #mbCategories p, #menubar .illustration  { 
+	background:transparent url(images/menuBox_sides.gif) repeat-y scroll left bottom;
+	margin:0; 
+}
+#menubar DT A { 
+	font-size: 100%; 
+}
+#menubar UL { 
+	color:#333; 
+	font-size: 16px; 
+	line-height: 15px; 
+}
+#menubar UL SPAN.menuInfoCat { 
+	color:#666;
+}
+#menubar LI { 
+	padding-left: 12px; 
+}
+#menubar LI UL {
+  background: transparent url(images/transparent.gif);
+}
+#menubar A, .menuInfoCat { 
+	font-size: 13px; 
+}
+#menubar form { 
+	background:transparent url(images/menuBox_sides.gif) repeat-y scroll left bottom; 
+	margin:0; 
+}
+#menubar p { 
+	padding: 16px 16px 0; 
+}
+
+.menubarFilter {
+	position: relative; 
+	right: 8px; 
+	top: 16px; 
+}
+
+#menubar #mbIdentification { 
+	background:transparent url(images/menuId_top.gif) no-repeat scroll left top !important;
+}
+#menubar #mbIdentification DD { 
+	background:transparent url(images/menuId_bottom.gif) no-repeat scroll left bottom; 
+}
+#menubar #mbIdentification UL, #menubar #mbIdentification p, #menubar #mbIdentification .illustration  { 
+	background:transparent url(images/menuId_sides.gif) repeat-y scroll left bottom; 
+}
+#menubar #mbIdentification form { 
+	background:transparent url(images/menuId_sides.gif) repeat-y scroll left bottom; 
+}
+#menubar #mbIdentification form  p { 
+	background:transparent none repeat-y scroll left bottom; 
+}
+#menubar #mbIdentification p { 
+	padding: 2px 16px 0; 
+	margin: 0;
+}
+#menubar #mbIdentification fieldset div input[type="text"] { 
+	margin: 0 0 3px; 
+	width: 174px; 
+	display: inline; 
+}
+#menubar #mbIdentification .button { 
+	height:24px; 
+	width:24px; 
+	right:0px; 
+	top:-40px; 
+}
+#menubar #mbIdentification fieldset { 
+	border:0; 
+	margin:0 24px 0 23px; 
+}
+#menubar #mbIdentification legend { 
+	display: none; 
+}
+#mbIdentification p, .totalImages { 
+	color:#666; 
+}
+
+#menubar #menuTagCloud { 
+	background:transparent url(images/menuBox_sides.gif) repeat-y scroll left bottom;
+	margin:0; 
+	padding: 0 12px; 
+}
+
+#qsearchInput:focus, input:focus, select:focus, textarea:focus, input.focus, form .focus { 
+	background-color:#444;
+	color:#999; 
+}
+#qsearchInput { 
+	color:#999;
+}
+
+
+/**
+ * Content
+ */
+.content { 
+	background:#222 url(images/fillet.gif) repeat-x scroll left top; 
+	min-height:466px; 
+	border: 1px solid #000; 
+	border-top: 0; 
+	margin:21px 7px 0 290px !important; 
+	padding-top:7px; 
+}
+
+#the_page { 
+	background:transparent url(images/top-left-bg.jpg) no-repeat scroll left top;
+	left:0; 
+	margin:0; 
+	padding:0; 
+	position:absolute; 
+	top:0; 
+	z-index:0; 
+	width: 100%; 
+	min-width: 100%; 
+}
+
+.content h2 { 
+	padding:0px 10px 15px 15px; 
+	border:0;
+}
+.content .navigationBar {
+	color:#666;
+}
+/* contentWithMenu */
+.contentWithMenu {
+    margin-left: 290px;
+}
+.contentWithMenu #comments {
+  padding: 0 0 5px 0;
+}
+.contentWithMenu #imageToolBar {
+  padding-left: 0;
+}
+.contentWithMenu #imageHeaderBar .browsePath {
+    margin-left: 0;
+}
+
+/* Category thumbnails on main page */
+.thumbnailCategories li {
+	background:#222 url(images/cat_bottom-right.gif) no-repeat scroll right bottom; 
+	width:49%; 
+	margin: 0; 
+	padding:0; 
+}
+.thumbnailCategory { 
+	background:transparent url(images/cat_bottom-left.gif) no-repeat scroll left bottom; 
+	padding: 0 0 2px; 
+	margin:0; 
+}
+.thumbnailCategory .illustration { 
+	background:transparent url(images/cat_top-left.gif) no-repeat scroll left top; 
+	padding: 0 5px 0 10px; 
+	margin: 0 !important;
+  text-align: center;
+}
+.thumbnailCategory .illustration a { 
+	display: block; 
+  margin: 0 auto;
+  padding: 20px 4px 0;
+  border:0;
+}
+.thumbnailCategory .description { 
+	background:transparent url(images/cat_top-right.gif) no-repeat scroll right top;
+	margin: 0; 
+	padding:15px 10px 3px 0; 
+	overflow: hidden !important; 
+  height:158px;
+}
+.thumbnailCategory .description .text { 
+	display:block; 
+	margin:10px 2px 0 0;
+	overflow: auto; 
+	overflow-x:hidden; 
+	padding:0 0 5px; 
+}
+.thumbnailCategory .description p.dates { 
+	margin: 0 15px 0 15px; 
+	text-align: right; 
+}
+.thumbnailCategory .description H3 { 
+	display: block; 
+}
+.thumbnailCategories li:hover { 
+	background-color:#111; 
+}
+
+/* header */
+#theHeader { 
+	min-height:110px;
+	height:110px; 
+}
+
+.header_msgs { 
+	background:transparent url(images/header_msgs-bg.gif) repeat scroll left top;
+	border:0; 
+	color:#333; 
+	font-size:24px; 
+	left:0; 
+	margin:0; 
+	padding:10px 0 6px 0; 
+	text-align:center; 
+	top:0; 
+	width:100%; 
+	z-index:99; 
+}
+.header_notes {
+	background:transparent url(images/header_msgs-bg.gif) repeat scroll left top;
+	border:0 none;
+	color:#333;
+	font-size:16px;
+	margin:0;
+	padding:0;
+	position:absolute;
+	top:0;
+	width:100%;
+	z-index:99;
+}
+.infos { 
+	color:#f70; 
+	border:0; 
+	background:transparent url(icon/infos.png) no-repeat center right;
+	margin-left:40px;
+	text-align:left; 
+}
+.errors { 
+	color:#f33; 
+	border:0; 
+	background:transparent url(icon/errors.png) no-repeat center right;
+	margin-left:40px;
+	text-align:left; 
+	font-weight:bold; 
+}
+.infos li, .errors li { 
+	list-style-type:none; 
+}
+
+/* User comments */
+#comments {
+	margin: 0 10px 5px 10px;
+}
+.content .commentElement {
+	border: 1px solid #666; 
+}
+.content .commentElement.odd { 
+	background-color: #222; 
+}
+.content .commentElement.even { 
+	background-color: #111; 
+}
+.content .commentElement .illustration { 
+	margin: 2px;
+  text-align: center;
+}
+.content .commentElement .description { 
+	padding:15px 10px 3px 0; 
+	overflow-x: hidden !important; 
+}
+
+#comments .commentsList hr {display:none;}
+#comments .filter input[type="submit"] { margin-top:1.8em; }
+
+/* Thumbnails */
+.thumbnails .wrap2 {
+	border: 1px solid #666;	/* thumbnails border color and style */
+	border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */ 
+}
+.thumbnails .wrap2:hover { 
+	color:#666;
+	background-color:#111; 
+	border:1px solid #ff3363;	/* thumbnails border color when mouse cursor is over it */ 
+}
+.calItem {
+	border:1px solid #666; 
+	margin:0 5px; 
+	padding:2px 5px 0 8px;
+}
+SPAN.calItem, td.calDayCellEmpty, td.calDayCellFull {
+	border:1px solid #666;
+}
+
+
+/**
+ * Picture
+ */
+#imageToolBar { 
+	padding:0 7%; 
+}
+#imageHeaderBar .imageNumber { 
+	margin-right:7%; 
+}
+#imageHeaderBar .browsePath { 
+	margin-left:7%; 
+}
+#imageHeaderBar, #imageToolBar A:hover { 
+	background-color: transparent; 
+}
+#imageHeaderBar H2 { 
+	border: 0; 
+}
+
+#theImage A, .illustration A, A.navThumb, A.navThumb { 
+	border-bottom-width: 0; 
+}
+.rateButtonStarFull, .rateButtonStarEmpty {   	
+	background-image: url('icon/rating-stars.gif'); 
+}
+
+#thePicturePage .commentElement {
+	padding: 15px 2px 6px 12px; 
+	border: 1px solid #666; 
+}
+#thePicturePage .commentsList { 
+	padding-left: 12px; 
+	padding-right: 12px; 
+  overflow: visible;
+  width: auto;
+}
+#thePicturePage .odd { 
+	background-color: #222; 
+}
+
+.pictureContent {
+	margin:0 7px 7px 290px;
+}
+
+#addComment fieldset {
+  color: #f70;
+	border-color: #f70;
+}
+#addComment fieldset  label {
+  color: #666;
+}
+
+
+/**
+ * Default Layout
+ */
+*, *:focus, *:active, input:active, a:active, input:focus, a:focus { 
+	outline: none; 
+}
+BODY { 
+	background:#111 url(images/bottom-left-bg.jpg) no-repeat fixed left bottom;
+	margin:0; 
+	min-height: 100%; 
+	height: 100%; 
+	padding:0; 
+}
+BODY, H1, H3, DT, INPUT.rateButtonSelected, H2, #menubar DT { 
+	color:#666; 
+}
+
+/* forms */
+FIELDSET, INPUT, SELECT, TEXTAREA { 
+	border: 1px solid #666; 
+}
+input[type="text"], input[type="password"], input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] {
+	background-color:#444; 
+	color:#999; 
+} /* stupid Line but needed  due to inpact on other themes and deadline of Piwigo 2.0 */
+input[type="file"] {
+	background-color:#222; 
+	border: 1px solid #666;
+}
+INPUT, select, textarea { 
+	color:#999; 
+	background-color:#444; 
+}
+input[type="radio"], input[type="checkbox"], input[type="button"].rateButtonStarEmpty, input[type="button"].rateButtonStarFull { 
+	background-color: transparent; 
+}
+input[type="button"], input[type="submit"], input[type="reset"] {
+	color:#ff3363; 
+	background-color:#222; 
+	border-color:#ff3363; 
+}
+input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
+	color:#999; 
+	border-color:#666; 
+}
+
+/* links */
+A, .rateButton { 
+	color:#f70; 
+	border-width: 0; 
+}
+A:hover, A:active { 
+	color:#f33; 
+	border-bottom: 1px solid #ff3363; 
+	cursor: pointer; 
+}
+a.external { 
+	color:#ff3363; 
+	border:0; 
+	text-decoration: none; 
+}
+a.external:hover { 
+	color:#ff7700; 
+	border:0; 
+}
+a.Piwigo {
+  font-family: verdana, arial, helvetica, sans-serif !important;
+  font-size: 11px; font-weight: normal; letter-spacing: 0;
+  color : #F33; text-decoration: none; border: 0; }
+a.Piwigo:hover {
+  border-bottom: 1px solid #ff3363;
+}
+
+.titrePage img.button[alt="x"] { margin: 0 3px 3px; }
+tr.tagLine, fieldset.tagLetter, legend.tagLetterLegend {
+	border-color: #666;
+}
+#debug { 
+	margin: 15px 15px 5px 248px; 
+	font-size:12px; 
+	clear: both; 
+}
+
+/* sprites */
+.pwg-icon {
+	background-image: url(../default/s26/outline_ff3363.png);
+}
+A:hover .pwg-icon {
+	background-image: url(../default/s26/outline_ff7700.png);
+}
+
+.message {
+  color:white;
+  background-color:#666;
+}
+
+.switchBox {
+    background-color: #222222;
+    border: 1px solid #FF3363;
+    border-radius: 0 15px 0 15px;
+}
+
+.switchBoxTitle {
+  border-color:#666;
+}

zoesch.de/galerie/themes/Sylvia/themeconf.inc.php

@@ -0,0 +1,38 @@
+<?php
+/*
+Theme Name: Sylvia
+Version: 2.9.2
+Description: Dark background, flora and pink decorations.
+Theme URI: http://piwigo.org/ext/extension_view.php?eid=368
+Author: Piwigo team
+Author URI: http://piwigo.org
+*/
+$themeconf = array(
+  'name'         => 'Sylvia',
+  'parent'        => 'default',
+  'icon_dir'      => 'themes/Sylvia/icon',
+  'mime_icon_dir' => 'themes/Sylvia/icon/mimetypes/',
+);
+/************************************ mainpage_categories.tpl ************************************/
+add_event_handler('loc_end_index_category_thumbnails', 'Sylvia_album');
+function Sylvia_album($tpl_thumbnails_var)
+{
+    global $template;
+    $template->set_prefilter('index_category_thumbnails', 'Sylvia_album_prefilter');
+    return $tpl_thumbnails_var;
+}
+function Sylvia_album_prefilter($content, &$smarty)
+{
+  $search = '#\{html_style\}#';
+  $replacement = '{html_style}
+.thumbnailCategory .description .text{ldelim}
+	height: {$derivative_params->max_height()-30}px;
+}';
+  $content = preg_replace($search, $replacement, $content);
+  $search = '#\.thumbnailCategory[\t ]*.description\{ldelim\}[\s]*height:[\t ]*\{\$derivative_params->max_height\(\)\+5#';
+  $replacement = '.thumbnailCategory .description{ldelim}
+	height: {$derivative_params->max_height()+15';
+  $content = preg_replace($search, $replacement, $content);
+  return $content;
+}
+?>

zoesch.de/galerie/themes/bootstrap_darkroom/LICENSE.txt

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright {yyyy} {name of copyright owner}
+
+   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.

zoesch.de/galerie/themes/bootstrap_darkroom/README.md

@@ -0,0 +1,73 @@
+Piwigo Bootstrap Darkroom
+-------------------
+A mobile-ready Piwigo theme based on [Bootstrap Default](https://github.com/Philio/bootstrapdefault) by Phil Bayfield.
+
+### Features
+
+* Various color styles and sub-themes
+  * [Bootswatch](https://bootswatch.com) support
+  * [Material Design](http://fezvrasta.github.io/bootstrap-material-design/) included
+  * A custom dark color scheme based on Lightroom® colors (the default)
+* Full screen slideshow view using [PhotoSwipe](http://photoswipe.com)
+  * Supports auto play
+  * Supports HTML5 video
+  * Album thumbnails can be linked to PhotoSwipe directly (like smartpocket)
+* Configurable carousel album navigation on the picture page using [slick slider](http://kenwheeler.github.io/slick/)
+* Video support on both the picture page and inside the slideshow, using native HTML 5 video widget
+* 100% mobile ready
+  * fully responsive Navbars, Carousel, PhotoSwipe slideshow, video content
+  * async/ondemand loading of carousel & PhotoSwipe content, adaptive image size selection, swipe & tap events
+* Various configuration options
+ 
+
+### Usage
+
+1. Installation. Use one of:
+ * Git clone and move to piwigo/themes/bootstrap_darkroom
+ * Download from http://piwigo.org/ext/extension_view.php?eid=831
+ * Or just use the Extension Manager
+2. Install the Bootstrap Default theme, too
+3. Enable Bootstrap Darkroom
+4. To use it as the standard theme for mobile devices, you need to disable the Smartpocket theme (if enabled). In combination with the recommended plugins and by setting "Thumbnail link target" to "PhotoSwipe" or "PhotoSwipe (mobile devices only)" it will behave like smartpocket (click on thumbnail opens the slideshow, masonry style thumbnail page with ajax loading).
+
+### Demo
+A demo is available at https://pwgdemo.kuther.net
+
+### Documentation
+* [Github Wiki](https://github.com/tkuther/piwigo-bootstrap-darkroom/wiki)
+* [Forum thread](http://piwigo.org/forum/viewtopic.php?id=26624)
+* [Issue tracker](https://github.com/tkuther/piwigo-bootstrap-darkroom/issues)
+
+### Recommended Plugins for best mobile user experience
+* [GThumb+](http://piwigo.org/ext/extension_view.php?eid=591) or [gdThumb](http://piwigo.org/ext/extension_view.php?eid=771): this will give you masonry-style thumbnail pages that make most use of valuable space.
+* [RV Thumbnail Scroller](http://piwigo.org/ext/extension_view.php?eid=493): this one will load items on the thumbnails page as they are requested using ajax, ideal for swiping through albums while keeping the initial page load size small. Avoids pagination.
+
+### Known issues
+
+* The secondary navbar on the picture page might span several lines, depending on the length of the category/picture name. As a workaround, the number of nested levels is truncated to max 2 levels by default.
+* On iOS the PhotoSwipe fullscreen mode isn't supported. On iPhone it does work in landscape orientation only, on iPad it doesn't work at all. That's an iOS bug. Works just fine on Android
+* Plugins that add buttons to the Navbar might not (yet) be supported, see [Plugin Support Matrix](https://github.com/tkuther/piwigo-bootstrap-darkroom/wiki/Plugin-Support-Matrix)
+* The Sidebar, if enabled in settings, doesn't play well with Bootswatch Themes. You need to CSS-style the sidebar yourself.
+* Portrait mode videos (e.g. from mobile phones) need to be recoded in actual portrait orientation, rotation tags won't work.
+
+### Preview
+
+![Preview](https://raw.githubusercontent.com/tkuther/piwigo-bootstrap-darkroom/master/screenshot.png)
+
+### License
+
+```
+Copyright 2016 Thomas Kuther
+
+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.
+```

zoesch.de/galerie/themes/bootstrap_darkroom/admin/admin.inc.php

@@ -0,0 +1,64 @@
+<?php
+// Check whether we are indeed included by Piwigo.
+if (!defined('PHPWG_ROOT_PATH')) die('Hacking attempt!');
+
+// Includes
+include_once(PHPWG_ROOT_PATH . 'admin/include/tabsheet.class.php');
+require_once(PHPWG_THEMES_PATH . 'bootstrap_darkroom/include/config.php');
+
+load_language('theme.lang', PHPWG_THEMES_PATH.'bootstrap_darkroom/');
+
+// Constants
+define('THEME_ID', basename(dirname(dirname(__FILE__))));
+define('ADMIN_PATH',   get_root_url() . 'admin.php?page=theme&theme=' . THEME_ID);
+define('TAB_SETTINGS', 'settings');
+define('TAB_SETTINGS_EXTRA', 'settings_extra');
+define('TAB_ABOUT', 'about');
+
+// Get current tab
+$page['tab'] = isset($_GET['tab']) ? $_GET['tab'] : $page['tab'] = TAB_SETTINGS;
+if (!in_array($page['tab'], array(TAB_SETTINGS, TAB_SETTINGS_EXTRA, TAB_ABOUT))) {
+    $page['tab'] = TAB_SETTINGS;
+}
+
+$themeconfig = new \BootstrapDefault\Config();
+$themeconfig_extra = new \BootstrapDarkroom\ExtraConfig();
+
+// Save settings
+if ($page['tab'] == TAB_SETTINGS) {
+    if (isset($_POST['boostrapdefault_settings'])) {
+        $themeconfig->fromPost($_POST);
+        $themeconfig->save();
+    }
+}
+if ($page['tab'] == TAB_SETTINGS_EXTRA) {
+    if (isset($_POST['boostrap_darkroom_settings'])) {
+        $themeconfig_extra->fromPost($_POST);
+        $themeconfig_extra->save();
+    }
+}
+
+
+// TabSheet
+$tabsheet = new tabsheet();
+$tabsheet->set_id('bsdark');
+$tabsheet->add(TAB_SETTINGS, 'Bootstrap Default ' . l10n('Settings'), ADMIN_PATH . '&tab=' . TAB_SETTINGS);
+$tabsheet->add(TAB_SETTINGS_EXTRA, 'Bootstrap Darkroom Extra ' . l10n('Settings'), ADMIN_PATH . '&tab=' . TAB_SETTINGS_EXTRA);
+$tabsheet->add(TAB_ABOUT, l10n('About'), ADMIN_PATH . '&tab=' . TAB_ABOUT);
+$tabsheet->select($page['tab']);
+$tabsheet->assign();
+
+// Fetch the template.
+global $template;
+
+// Add our template to the global template
+$template->set_filenames(
+    array(
+        'theme_admin_content' => dirname(__FILE__) . '/template/' . $page['tab'] . '.tpl'
+    )
+);
+
+// Assign the template contents to ADMIN_CONTENT
+$template->assign('theme_config', $themeconfig);
+$template->assign('theme_config_extra', $themeconfig_extra);
+$template->assign_var_from_handle('ADMIN_CONTENT', 'theme_admin_content');

zoesch.de/galerie/themes/bootstrap_darkroom/admin/css/admin.css

@@ -0,0 +1,38 @@
+#configContent fieldset.mainConf label.radio {
+  display: inline-block;
+  width: 120px;
+}
+
+fieldset>h4 { text-align: left !important;}
+span.info { padding-left: 20px; }
+
+@media (min-width: 768px) {
+  .dl-horizontal dt {
+     float: left;
+     width: 160px;
+     overflow: hidden;
+     clear: left;
+     text-align: right;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+  }
+  .dl-horizontal dd {
+     margin-left: 180px;
+  }
+}
+.dl-horizontal dd:before,
+.dl-horizontal dd:after { 
+  display: table;
+  content: " ";
+}
+.dl-horizontal dd:after { clear: both; }
+
+#boostrap_theme_descr { padding-top: 15px; }
+
+#bootswatch_theme,
+#bootswatch_theme_label,
+#theme_preview,
+#material_color,
+#material_color_label {
+  display: none;
+}

zoesch.de/galerie/themes/bootstrap_darkroom/admin/index.php

@@ -0,0 +1,6 @@
+<?php
+$url = '../';
+header( 'Request-URI: '.$url );
+header( 'Content-Location: '.$url );
+header( 'Location: '.$url );
+exit();

zoesch.de/galerie/themes/bootstrap_darkroom/admin/template/about.tpl

@@ -0,0 +1,28 @@
+{combine_css path="themes/bootstrapdefault/admin/css/admin.css"}
+<div class="titrePage">
+    <h2>{'Bootstrap Darkroom'|@translate} {$TABSHEET_TITLE}</h2>
+</div>
+<div id="configContent" style="margin: 0 auto; max-width: 420px">
+    <h3>{'Bootstrap Darkroom'|@translate}</h3>
+    <h4>{'Version'|@translate}: 1.5.19</h4>
+    <h5>{'By'|@translate}: <a href="https://github.com/tkuther/piwigo-bootstrap-darkroom">Thomas Kuther</a></h5>
+    <h5>{'Based on Bootstrap Default by'|@translate}: <a href="https://philio.me">Phil Bayfield</a></h5>
+
+    <p>{'A mobile-ready theme based on Boostrap Default'|@translate}</p>
+
+    <p>{'Download'|@translate}: <a href="http://piwigo.org/ext/extension_view.php?eid=831" target="_blank">http://piwigo.org/ext/extension_view.php?eid=796</a>
+    </p>
+
+    <p>{'Source'|@translate}: <a href="https://github.com/tkuther/piwigo-bootstrap-darkroom" target="_blank">https://github.com/tkuther/piwigo-bootstrap-darkroom</a>
+    </p>
+
+    <p>{'Documentation'|@translate}: <a href="https://github.com/tkuther/piwigo-bootstrap-darkroom/wiki" target="_blank">https://github.com/tkuther/piwigo-bootstrap-darkroom/wiki</a>
+    </p>
+
+    <p>{'If you find any issues, please report them to the'|@translate} <a href="https://github.com/tkuther/piwigo-bootstrap-darkroom/issues">{'Issue tracker'|@translate}</a>
+    </p>
+
+    <p><a href="https://github.com/tkuther/piwigo-bootstrap-darkroom/issues"
+          target="_blank">{'Bug reports and feature requests'|@translate}</a>
+    </p>
+</div>

zoesch.de/galerie/themes/bootstrap_darkroom/admin/template/settings.tpl

@@ -0,0 +1,134 @@
+{combine_css path="themes/bootstrapdefault/admin/css/admin.css"}
+{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
+<div class="titrePage">
+    <h2>{'Bootstrap Default'|@translate} {$TABSHEET_TITLE}</h2>
+</div>
+<form method="post" class="properties">
+    <input type="hidden" name="boostrapdefault_settings" value="true" />
+    <div id="configContent">
+        <fieldset class="mainConf">
+            <legend>{'Bootstrap theme'|@translate}</legend>
+            <p><em>{'This setting is overridden by Bootstrap Darkroom'|@translate}</em><p>
+            <ul>
+                <li>
+                    <select name="bootstrap_theme" disabled="disabled">
+                        <option value="none"{if $theme_config->bootstrap_theme == 'none'} selected="selected"{/if}>None</option>
+                        <option value="default"{if $theme_config->bootstrap_theme == 'default'} selected="selected"{/if}>Default</option>
+                    </select>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset class="mainConf">
+            <legend>{'Picture page display'|@translate}</legend>
+            <p><em>{'This setting is overridden by Bootstrap Darkroom'|@translate}</em><p>
+            <ul>
+                <li>
+                    <label class="radio">
+                        <input type="radio" name="picture_page" value="normal"{if $theme_config->picture_page == 'normal'} checked="checked"{/if} disabled="disabled"/>
+                        {'Normal'|@translate}
+                    </label>
+                    <label class="radio">
+                        <input type="radio" name="picture_page" value="more-space"{if $theme_config->picture_page == 'more-space'} checked="checked"{/if} disabled="disabled"/>
+                        {'More space*'|@translate}
+                    </label>
+                </li>
+            </ul>
+            <br />
+            <span>* {'Hides the top menu and jumbotron containing the page title and banner'|@translate}</span>
+        </fieldset>
+        <fieldset class="mainConf">
+            <legend>{'Social integration'|@translate}</legend>
+            <ul>
+                <li>
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="social_enabled"{if $theme_config->social_enabled} checked="checked"{/if}>
+                        {'Enabled'|@translate}
+                    </label>
+                </li>
+                <li id="social_twitter">
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="social_twitter"{if $theme_config->social_twitter}  checked="checked"{/if}>
+                        {'Twitter'|@translate}
+                    </label>
+                </li>
+                <li id="social_facebook">
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="social_facebook"{if $theme_config->social_facebook}  checked="checked"{/if}>
+                        {'Facebook'|@translate}
+                    </label>
+                </li>
+                <li id="social_google_plus">
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="social_google_plus"{if $theme_config->social_google_plus}  checked="checked"{/if}>
+                        {'Google+'|@translate}
+                    </label>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset class="mainConf">
+            <legend>{'Comments'|@translate}</legend>
+            <ul>
+                <li>
+                    <label class="radio">
+                        <input type="radio" name="comments_type" value="piwigo"{if $theme_config->comments_type == 'piwigo'} checked="checked"{/if} />
+                        {'Piwigo'|@translate}
+                    </label>
+                    <label class="radio">
+                        <input id="comments_radio_disqus" type="radio" name="comments_type" value="disqus"{if $theme_config->comments_type == 'disqus'} checked="checked"{/if} />
+                        {'Disqus'|@translate}
+                    </label>
+                </li>
+                <li id="comments_type_disqus">
+                    <label for="comments_disqus_shortname">{'Disqus shortname'|@translate}</label><br />
+                    <input id="comments_disqus_shortname" name="comments_disqus_shortname" type="text" value="{$theme_config->comments_disqus_shortname}" size="50" />
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset class="mainConf">
+            <legend>{'Tag cloud'|@translate}</legend>
+            <ul>
+                <li>
+                    <label class="radio">
+                        <input type="radio" name="tag_cloud_type" value="basic"{if $theme_config->tag_cloud_type == 'basic'} checked="checked"{/if} />
+                        {'Basic'|@translate}
+                    </label>
+                    <label class="radio">
+                        <input type="radio" name="tag_cloud_type" value="html5"{if $theme_config->tag_cloud_type == 'html5'} checked="checked"{/if} />
+                        {'HTML 5 canvas'|@translate}
+                    </label>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset class="mainConf">
+            <legend>{'Custom CSS'|@translate}</legend>
+            <textarea name="custom_css" cols="80" rows="10">{if $theme_config->custom_css}{$theme_config->custom_css}{/if}</textarea>
+        </fieldset>
+    </div>
+    <p class="formButtons">
+        <input type="submit" name="submit" value="Save settings">
+    </p>
+</form>
+{footer_script require='jquery'}{strip}
+    (function(){
+        var targets = {
+            'input[name="social_enabled"]': ['#social_twitter', '#social_facebook', '#social_google_plus'],
+            '#comments_radio_disqus': ['#comments_type_disqus'],
+        };
+
+        for (selector in targets) {
+            for (target of targets[selector]) {
+                jQuery(target).toggle(jQuery(selector).is(':checked'));
+
+                (function(target){
+                    jQuery(selector).on('change', function() {
+                        jQuery(target).toggle($(this).is(':checked'));
+                    });
+                })(target);
+            }
+        };
+    }());
+{/strip}{/footer_script}

zoesch.de/galerie/themes/bootstrap_darkroom/admin/template/settings_extra.tpl

@@ -0,0 +1,323 @@
+{combine_css path="themes/bootstrap_darkroom/admin/css/admin.css"}
+{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
+<div class="titrePage">
+    <h2>Bootstrap Darkroom {$TABSHEET_TITLE}</h2>
+</div>
+<form method="post" class="properties">
+    <input type="hidden" name="boostrap_darkroom_settings" value="true" />
+    <div id="configContent">
+        <fieldset class="mainConf">
+            <legend>{'Bootstrap theme'|@translate}</legend>
+            <ul>
+                <li>
+                    <label labelfor="bootstrap_theme">{'Color theme'|@translate}</label>
+                    <select name="bootstrap_theme">
+                        <option value="darkroom"{if $theme_config_extra->bootstrap_theme == 'darkroom'} selected="selected"{/if}>Darkroom</option>
+                        <option value="bootswatch"{if $theme_config_extra->bootstrap_theme == 'bootswatch'} selected="selected"{/if}>Bootswatch</option>
+                        <option value="material"{if $theme_config_extra->bootstrap_theme == 'material'} selected="selected"{/if}>Material</option>
+                        <option value="default"{if $theme_config_extra->bootstrap_theme == 'default'} selected="selected"{/if}>Default</option>
+                        <option value="none"{if $theme_config_extra->bootstrap_theme == 'none'} selected="selected"{/if}>{'None'|@translate}</option>
+                    </select>
+                </li>
+            <ul>
+            <label id="bootswatch_theme_label" labelfor="bootswatch_theme">{'Bootswatch theme'|@translate}</label>
+            <select id="bootswatch_theme" name="bootswatch_theme"></select>
+            <label id="material_color_label" labelfor="material_color">{'Material color'|@translate}</label>
+            <select id="material_color" name="material_color"></select>
+            <div id="theme_preview"></div>
+            <dl id="boostrap_theme_descr" class="dl-horizontal">
+                <dt>Darkroom</dt><dd>{'Bootstrap Darkroom\'s custom dark color theme'|@translate}</dd>
+                <dt>Bootswatch</dt><dd>{'A color theme from'|@translate} <a href="https://bootswatch.com">https://bootswatch.com</a></dd>
+                <dt>Material</dt><dd>Material design {'from'|@translate} <a href="http://fezvrasta.github.io/bootstrap-material-design">http://fezvrasta.github.io/bootstrap-material-design</a></dd>
+                <dt>Default</dt><dd>{'Bootstrap\'s default theme'|@translate}</dd>
+                <dt>{'None'|@translate}</dt><dd>{'No color theme'|@translate}</dd> 
+            </dl>
+        </fieldset>
+        <fieldset class="mainConf">
+            <legend>Slick Carousel {'Settings'|@translate}</legend>
+            <ul>
+                <li>
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="slick_enabled"{if $theme_config_extra->slick_enabled} checked="checked"{/if}>
+                        {'Enabled'|@translate}
+                    </label>
+                    <span class="info">{'Enable the slick carousel below the main image on the picture page'|@translate}.</span>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <label labelfor="slick_lazyload">{'lazyLoad method'|@translate}</label>
+                    <select name="slick_lazyload">
+                        <option value="ondemand"{if $theme_config_extra->slick_lazyload == 'ondemand'} selected="selected"{/if}>ondemand</option>
+                        <option value="progressive"{if $theme_config_extra->slick_lazyload == 'progressive'} selected="selected"{/if}>progressive</option>
+                    </select>
+                    <span class="info"><em>ondemand</em> {'will load the image as soon as you slide to it'|@translate}. <em>progressive</em> {'loads all images one after another when the page loads (use carefully!)'|@translate}.</span>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="slick_infinite"{if $theme_config_extra->slick_infinite} checked="checked"{/if}>
+                        {'Infinite looping'|@translate}
+                    </label>
+                    <span class="info">{'Endlessly scroll through album images'|@translate}</span>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="slick_centered"{if $theme_config_extra->slick_centered} checked="checked"{/if}>
+                        {'Center mode'|@translate}
+                    </label>
+                    <span class="info">{'Display the currently selected image in the middle. Works best with infinite looping enabled.'|@translate}</span>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset>
+            <legend>PhotoSwipe {'Settings'|@translate}</legend>
+            <ul>
+                <li>
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="photoswipe"{if $theme_config_extra->photoswipe} checked="checked"{/if}>
+                        {'Enabled'|@translate}
+                    </label>
+                    <span class="info">{'Enable PhotoSwipe fullscreen slideshow. Disable if you prefer to use Plugins like Fotorama or Piwigo\'s default slideshow.'|@translate}</span>
+                </li>
+                <li>
+                    <label labelfor="photoswipe_interval">{'Autoplay interval'|@translate}</label>
+                    <input type="number" name="photoswipe_interval" value="{$theme_config_extra->photoswipe_interval}" min="1000" max="50000"> {'milliseconds'|@translate}
+                </li>
+                <li>
+                    <label class="font-checkbox">
+                       <span class="icon-check"></span>
+                       <input type="checkbox" name="photoswipe_metadata"{if $theme_config_extra->photoswipe_metadata} checked="checked"{/if}>
+                       {'Show basic EXIF metadata'|@translate}
+                    </label>
+                    <span class="info">{'For more information on metadata visit'|@translate} <a href="https://github.com/tkuther/piwigo-bootstrap-darkroom/wiki/EXIF-Metadata-in-PhotoSwipe">Wiki:EXIF-Metadata-in-PhotoSwipe</a></span>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset>
+            <legend>Jumbotron {'Settings'|@translate}</legend>
+            <ul>
+                <li>
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="show_jumbotron"{if $theme_config_extra->show_jumbotron} checked="checked"{/if}>
+                        {'Enabled'|@translate}
+                    </label>
+                    <span class="info">{'Show a jumbotron banner on the categroy pages.'|@translate}</span>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset>
+            <legend>{'Site logo'|@translate}</legend>
+            <ul>
+                <li>
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="logo_image_enabled"{if $theme_config_extra->logo_image_enabled} checked="checked"{/if}>
+                        {'Enabled'|@translate}
+                    </label>
+                    <span class="info">{'Display a site logo image instead of plain text'|@translate}</span>
+                </li>
+                <li>
+                    <label>
+                        {'Path'|@translate}
+                        <input type="text" name="logo_image_path"size="50" {if $theme_config_extra->logo_image_path != ""}value="{$theme_config_extra->logo_image_path}"{else}placeholder="relative/path/to/image"{/if}>
+                    </label>
+                    <span class="info">{'The path to the image, relative to your Piwigo installation folder'|@translate}</span>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset>
+            <legend>{'Quick search'|@translate}</legend>
+            <ul>
+                <li>
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="quicksearch_navbar"{if $theme_config_extra->quicksearch_navbar} checked="checked"{/if}>
+                        {'Quick search'|@translate} {'directly in the navigation bar'|@translate}
+                    </label>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset>
+            <legend>{'Picture page display'|@translate}</legend>
+            <ul>
+                <li>
+                    <label labelfor="picture_info">{'Picture info display position'|@translate}</label>
+                    <select name="picture_info">
+                        <option value="tabs"{if $theme_config_extra->picture_info == 'tabs'} selected="selected"{/if}>{'Tabs below the image'|@translate}</option>
+                        <option value="sidebar"{if $theme_config_extra->picture_info == 'sidebar'} selected="selected"{/if}>{'Sidebar (like Boostrap Default)'|@translate}</option>
+                        <option value="disabled"{if $theme_config_extra->picture_info == 'disabled'} selected="selected"{/if}>{'Disabled'|@translate}</option>
+                    </select>
+                    <span class="info">{'Note: on mobile devices the Tabs are forced, because the Sidebar button would overlay the main picture.'|@translate}</span>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset>
+            <legend>{'Category page display'|@translate}</legend>
+            <ul>
+                <li>
+                    <label labelfor="category_wells">{'Display categories as Bootstrap media wells'|@translate}</label>
+                    <select name="category_wells">
+                        <option value="never"{if $theme_config_extra->category_wells == 'never'} selected="selected"{/if}>{'Never'|@translate}</option>
+                        <option value="always"{if $theme_config_extra->category_wells == 'always'} selected="selected"{/if}>{'Always'|@translate}</option>
+                        <option value="mobile_only"{if $theme_config_extra->category_wells == 'mobile_only'} selected="selected"{/if}>{'On mobile devices only'|@translate}</option>
+                    </select>
+                    <span class="info">{'This will display categories as media wells with squared thumbnails, similar to the smartpocket mobile theme.'|@translate}</span>
+                </li>
+                <li>
+                    <label class="font-checkbox">
+                       <span class="icon-check"></span>
+                       <input type="checkbox" name="cat_descriptions"{if $theme_config_extra->cat_descriptions} checked=checked{/if}>
+                       {'Display category description in grid view'|@translate}
+                    </label>
+                </li>
+            </ul>
+        </fieldset>
+        <fieldset>
+            <legend>{'Thumbnail page display'|@translate}</legend>
+            <ul>
+                <li>
+                    <label class="font-checkbox">
+                        <span class="icon-check"></span>
+                        <input type="checkbox" name="thumbnail_caption"{if $theme_config_extra->thumbnail_caption} checked="checked"{/if}>
+                        {'Show image caption'|@translate}
+                    </label>
+                </li>
+                <li>
+                    <label labelfor="thumbnail_linkto">{'Link thumbnail to'|@translate}</label>
+                    <select name="thumbnail_linkto">
+                        <option value="picture"{if $theme_config_extra->thumbnail_linkto == 'picture'} selected="selected"{/if}>{'Picture details page'|@translate}</option>
+                        <option value="photoswipe"{if $theme_config_extra->thumbnail_linkto == 'photoswipe'} selected="selected"{/if}>{'PhotoSwipe Slideshow'|@translate}</option>
+                        <option value="photoswipe_mobile_only"{if $theme_config_extra->thumbnail_linkto == 'photoswipe_mobile_only'} selected="selected"{/if}>{'Photoswipe Slideshow (Mobile devices only)'|@translate}</option>
+                    </select>
+                </li>
+            </ul>
+        </fieldset>
+    </div>
+    <p class="formButtons">
+        <input type="submit" name="submit" value="{'Save Settings'|@translate}">
+    </p>
+</form>
+{footer_script require="jquery"}
+var select_bootswatch = $("#bootswatch_theme");
+var label_bootswatch = $("#bootswatch_theme_label");
+var select_material = $("#material_color");
+var label_material = $("#material_color_label");
+var preview = $("#theme_preview");
+var cur_theme = '{$theme_config_extra->bootswatch_theme}';
+function getBootswatchThemes() {
+    $.getJSON("https://bootswatch.com/api/3.json", function (data) {
+      var themes = data.themes;
+      select_bootswatch.show();
+      label_bootswatch.show();
+
+      themes.forEach(function(value, index){
+        $name = value.name;
+        $lname = $name.toLowerCase();
+        select_bootswatch.append($("<option />")
+              .val($lname)
+              .text($name));
+
+        if ($lname === cur_theme) {
+           $('option[value=' + $lname + ']').attr('selected', 'selected');
+        }
+      });
+      preview.html('<img src="themes/bootstrap_darkroom/components/bootswatch/' + select_bootswatch.val() + '/thumbnail.png" width="50%" style="padding: 10px 0;"/>');
+      preview.show();
+
+    }, "json").fail(function(){
+        $(".alert").toggleClass("alert-info alert-danger");
+        $(".alert h4").text("Failed to load available Bootswatch Themes!");
+    });
+
+}
+
+function getMaterialColors() {
+  var colors = ['red', 'pink', 'purple', 'deep-purple', 'indigo', 'light-blue', 'cyan', 'teal', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey'];
+  var lcolor = colors.length;
+  var cur_color = '{$theme_config_extra->material_color}';
+  select_material.show();
+  label_material.show();
+  
+  for (var i = 0; i < lcolor; i++) {
+    select_material.append($("<option />")
+          .val(colors[i])
+          .text(colors[i]));
+
+    if (colors[i] === cur_color) {
+      $('option[value=' + colors[i] + ']').attr('selected', 'selected');
+    }
+  }
+
+  preview.html('<img src="themes/bootstrap_darkroom/admin/img/material-' + select_material.val() + '.png" style="padding: 10px 0;"/>');
+  preview.show();
+}
+
+$(document).ready(function() {
+  if ($('select[name=bootstrap_theme]').val() === 'bootswatch') {
+    getBootswatchThemes();
+  } else if ($('select[name=bootstrap_theme]').val() === 'material') {
+    getMaterialColors();
+  } else {
+    preview.html('<img src="themes/bootstrap_darkroom/admin/img/' + $('select[name=bootstrap_theme]').val() + '.png" style="padding: 10px 0;"/>');
+    preview.show();
+  }
+ 
+  link_target = $('select[name=thumbnail_linkto]').val();
+  if (!$('input[name=photoswipe]').is(':checked') && link_target !== 'photoswipe') {
+    $('select[name=thumbnail_linkto]').val('picture');
+    $('select[name=thumbnail_linkto] option[value=photoswipe]').attr('disabled', 'disabled');
+    $('select[name=thumbnail_linkto] option[value=photoswipe_mobile_only]').attr('disabled', 'disabled');
+  }
+
+});
+
+$('select[name=bootstrap_theme]').change(function() {
+  if ($('select[name=bootstrap_theme]').val() === 'bootswatch') {
+    getBootswatchThemes();
+    select_material.empty();
+    select_material.hide();
+    label_material.hide();
+  } else {
+    select_bootswatch.empty();
+    select_bootswatch.hide();
+    label_bootswatch.hide();
+    preview.hide();
+    if ($('select[name=bootstrap_theme]').val() === 'material') {
+      getMaterialColors();
+    } else {
+      select_material.empty();
+      select_material.hide();
+      label_material.hide();
+      preview.html('<img src="themes/bootstrap_darkroom/admin/img/' + $('select[name=bootstrap_theme]').val() + '.png" style="padding: 10px 0;"/>');
+      preview.show();
+    }
+  }
+});
+$(select_bootswatch).change(function() {
+    preview.html('<img src="themes/bootstrap_darkroom/components/bootswatch/' + select_bootswatch.val() + '/thumbnail.png" width="50%" style="padding: 10px 0;"/>');
+});
+$(select_material).change(function() {
+    preview.html('<img src="themes/bootstrap_darkroom/admin/img/material-' + select_material.val() + '.png" style="padding: 10px 0;"/>');
+});
+
+$('input[name=photoswipe]').change(function() {
+  curr = $('select[name=thumbnail_linkto]').val();
+  if (!$(this).is(':checked') && curr !== 'picture') {
+    $('select[name=thumbnail_linkto]').val('picture');
+    $('select[name=thumbnail_linkto] option[value=photoswipe]').attr('disabled', 'disabled');
+    $('select[name=thumbnail_linkto] option[value=photoswipe_mobile_only]').attr('disabled', 'disabled');
+  } else {
+    $('select[name=thumbnail_linkto] option[value=photoswipe]').removeAttr('disabled');
+    $('select[name=thumbnail_linkto] option[value=photoswipe_mobile_only]').removeAttr('disabled');
+  }
+});
+{/footer_script}

zoesch.de/galerie/themes/bootstrap_darkroom/bower.json

@@ -0,0 +1,32 @@
+{
+  "name": "bootstrap_darkroom",
+  "homepage": "https://github.com/tkuther/piwigo-bootstrap-darkroom",
+  "authors": [
+    "Thomas Kuther <github@kuther.net>"
+  ],
+  "description": "Bootstrap Darkroom theme for Piwigo photo gallery",
+  "main": "",
+  "license": "Apache-2.0",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "components/",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "bootstrap-material-design": "0.5.10",
+    "bootswatch": "gh-pages",
+    "font-awesome": "fontawesome#^4.6.3",
+    "jasny-bootstrap": "^3.1.3",
+    "jquery-touch-events": "^1.0.8",
+    "material-icons": "^0.1.0",
+    "photoswipe": "https://github.com/dimsemenov/PhotoSwipe.git#^4.1",
+    "pTSans": "https://google-fonts.azurewebsites.net/googleFonts/PT-Sans?family=PT+Sans:400,700",
+    "roboto": "https://google-fonts.azurewebsites.net/googleFonts/Roboto?family=Roboto:300,400,500,700",
+    "slick-carousel": "https://github.com/tkuther/slick.git#piwigo-patches",
+    "jquery": "^2.2"
+  }
+}

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+gem 'sass'
+# gem 'jekyll'
+# gem 'jekyll-less'
+gem 'therubyracer'

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/Gruntfile.js

@@ -0,0 +1,572 @@
+module.exports = function (grunt) {
+  "use strict";
+
+  require("load-grunt-tasks")(grunt);
+  var configBridge = grunt.file.readJSON('./grunt/configBridge.json', {encoding: 'utf8'});
+
+  grunt.initConfig({
+
+    pkg: grunt.file.readJSON('package.json'),
+    jqueryCheck: configBridge.config.jqueryCheck.join('\n'),
+    jqueryVersionCheck: configBridge.config.jqueryVersionCheck.join('\n'),
+
+
+    // Task configuration.
+    clean: {
+      dist: 'dist'
+    },
+
+    htmlmin: {
+      dist: {
+        options: {
+          collapseWhitespace: true,
+          conservativeCollapse: true,
+          minifyCSS: true,
+          minifyJS: true,
+          removeAttributeQuotes: true,
+          removeComments: true
+        },
+        expand: true,
+        cwd: '_gh_pages',
+        dest: '_gh_pages',
+        src: [
+          '**/*.html',
+          '!examples/**/*.html'
+        ]
+      }
+    },
+
+    htmllint: {
+      //options: {
+      //  stoponerror: false,
+      //  relaxerror: []
+      //},
+      //files: ['index.html', 'bootstrap-elements.html']
+      all: {
+        options: {
+          ignore: '“&” did not start a character reference. (“&” probably should have been escaped as “&”.)'
+        },
+        src: ["*.html"]
+      }
+    },
+
+
+    // Make sure we are structurally correct for bootstrap
+    bootlint: {
+      options: {
+        stoponerror: false,
+        relaxerror: []
+      },
+      files: ['index.html', 'bootstrap-elements.html']
+    },
+
+    // Convert from less to sass
+    lessToSass: {
+      convert: {
+        files: [{
+          expand: true,
+          cwd: "less",
+          src: ["**/*.less", "!_mixins.less", "!_import-bs*"],
+          ext: ".scss",
+          dest: "sass"
+        }],
+        options: {
+          replacements: [
+
+            // convert bootstrap imports
+            { // https://regex101.com/r/bM6cP0/2
+              pattern: /bower_components\/(bootstrap\/less\/)/gi,
+              replacement: "bower_components\/bootstrap-sass\/assets\/stylesheets\/bootstrap\/",
+              order: 2
+            },
+
+            // convert conditional when not
+            { // https://regex101.com/r/cX6uF4/1
+              pattern: /& when not \(isstring\(\$parent\)\)/gi,
+              replacement: "@if not $parent",
+              order: 2
+            },
+
+            // convert conditional when
+            { // https://regex101.com/r/gH0jP0/2
+              pattern: /& when \(isstring\(\$parent\)\)/gi,
+              replacement: "@else",
+              order: 2
+            },
+
+            // convert conditional when
+            { // https://regex101.com/r/dL1lI8/2
+              pattern: /& when /gi,
+              replacement: "@if ",
+              order: 2
+            },
+
+            // convert all shadow mixins
+            { // https://regex101.com/r/sJ2lH4/1
+              pattern: /.shadow-z-(\d+)((?:-hover)?) {/gi,
+              replacement: "@mixin shadow-z-$1$2 {",
+              order: 2
+            },
+            // bad conversions of .shadow-z-*
+            { // https://regex101.com/r/pV0yB0/3
+              pattern: /\.shadow-z-(\d+)((?:-hover)?)(?:\(\))?;/gi,
+              replacement: "@include shadow-z-$1$2;",
+              order: 2
+            },
+
+            // bad conversions to @include instead of @extend
+            {
+              pattern: /@include (foo1|foo2)\(\);/gi,
+              replacement: "@extend .$1;",
+              order: 2
+            },
+
+            // hack - (no conditional replacements)
+            { // https://regex101.com/r/pV0yB0/2
+              pattern: /@extend @extend/gi,
+              replacement: "@extend",
+              order: 10
+            },
+
+            // button variations mixin replacement(s)
+            { // https://regex101.com/r/qD9qB8/4
+              pattern: /.generic-variations\(unquote\(".btn", ~("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg,
+              replacement: "@include button-variations(unquote(\".btn\"), $1, $3);\n",
+              order: 20
+            },
+
+            //// background-color generic-variations
+            //{ // Multi-line replacement - https://regex101.com/r/cW6pH8/2
+            //  pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-color[\s\S]+?(?!\r|\n)(\(\d+\/\d+\))[\s\S]+?(?!\r|\n)}\);$\n/mg,
+            //  replacement: "@include bg-color-variations(unquote($1), $2, $3);\n",
+            //  order: 21
+            //},
+
+            //// bg-box-shadow generic-variations
+            //{ // Multi-line replacement - https://regex101.com/r/jW8kR1/1
+            //  pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)box-shadow[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg,
+            //  replacement: "@include bg-box-shadow-variations(unquote($1), $2);\n",
+            //  order: 22
+            //},
+
+            //// bg-img generic-variations
+            //{ // Multi-line replacement - https://regex101.com/r/aP2hH2/1
+            //  pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-image[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg,
+            //  replacement: "@include bg-img-variations(unquote($1), $2);\n",
+            //  order: 23
+            //},
+
+            // material-placeholder
+            { // Multi-line replacement - https://regex101.com/r/eS2vQ3/2
+              pattern: /.material-placeholder\({$\n([\s\S]+?)}\);$\n/mg,
+              replacement: "@include material-placeholder {\n$1\n}\n",
+              order: 24
+            },
+
+            // navbar generic-variations
+            { // Multi-line replacement - https://regex101.com/r/lX1hH1/4
+              pattern: /.generic-variations\(unquote\((".navbar"), ~("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$/mg,
+              replacement: "@include navbar-variations(unquote($1), unquote($2), $4);\n",
+              order: 25
+            },
+
+            // fix calc references
+            { // https://regex101.com/r/aZ8iI5/1
+              pattern: /calc\(unquote\("([^"]+)"\)\)/gi,
+              replacement: "calc($1)",
+              order: 100
+            },
+
+            // fix unquote("", ~"")
+            { //  https://regex101.com/r/vX4nO9/6
+              pattern: /\(unquote\(("([^"]+)?"), ~("([^"]+)?")\),/gi,
+              replacement: "(unquote($1), unquote($3),",
+              order: 101
+            },
+
+            // alert generic-variations (convert this one last - very broad search)
+            { // Multi-line replacement - https://regex101.com/r/jB1uL1/3
+              pattern: /.generic-variations\(unquote\(".alert"\), unquote\(("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg,
+              replacement: "@include alert-variations(unquote(\".alert\"), unquote($1), $3);\n",
+              order: 250 // very broad search, do this last
+            },
+
+            // auto generated notice
+            { // Multi-line replacement - https://regex101.com/r/aR2kT5/1
+              pattern: /([\s\S]+)/mg,
+              replacement: "\/\/ This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.\n\n$1",
+              order: 1000 // very broad search, do this last
+            }
+          ]
+        }
+      }
+    },
+
+    // Test compile sass
+    sass: {
+      compile: {
+        options:{
+          loadPath: "bower_components/bootstrap-sass/assets/stylesheets",
+        },
+        files: [{
+          expand: true,
+          cwd: "sass",
+          src: ["bootstrap-material-design.scss", "ripples.scss"],
+          dest: "dist/sassc", // added to gitignore, only used for local testing
+          ext: ".css"
+        }]
+      }
+    },
+
+    // Compile less to .css
+    // Compile less to .min.css
+    // Create source maps of both
+    less: {
+      material: {
+        options: {
+          paths: ["less"],
+          sourceMap: true,
+          sourceMapRootpath: "/",
+          sourceMapFilename: "dist/css/bootstrap-material-design.css.map",
+          sourceMapURL: "bootstrap-material-design.css.map"
+        },
+        files: {
+          "dist/css/bootstrap-material-design.css": "less/bootstrap-material-design.less",
+        }
+      },
+      ripples: {
+        options: {
+          paths: ["less"],
+          sourceMap: true,
+          sourceMapRootpath: "/",
+          sourceMapFilename: "dist/css/ripples.css.map",
+          sourceMapURL: "ripples.css.map",
+          outputSourceFiles: true
+        },
+        files: {
+          "dist/css/ripples.css": "less/ripples.less",
+        }
+      }
+    },
+
+    // Autoprefix .css and edit its source map
+    // Autoprefix .min.css an edit its source map
+    autoprefixer: {
+      options: {
+        map: true,
+        browsers: configBridge.config.autoprefixerBrowsers
+      },
+      material: {
+        files: {
+          "dist/css/bootstrap-material-design.css": "dist/css/bootstrap-material-design.css"
+        }
+      },
+      ripples: {
+        files: {
+          "dist/css/ripples.css": "dist/css/ripples.css"
+        }
+      }
+    },
+
+    csslint: {
+      options: {
+        csslintrc: 'less/.csslintrc'
+      },
+      dist: [
+        'dist/css/bootstrap-material-design.css',
+        'dist/css/ripples.css',
+      ],
+      distmin: [
+        'dist/css/bootstrap-material-design.min.css',
+        'dist/css/ripples.min.css',
+      ]
+    },
+
+    // Minify CSS and adapt maps
+    cssmin: {
+      options: {
+        // TODO: disable `zeroUnits` optimization once clean-css 3.2 is released
+        //    and then simplify the fix for https://github.com/twbs/bootstrap/issues/14837 accordingly
+        compatibility: 'ie8',
+        keepSpecialComments: '*',
+        sourceMap: true,
+        advanced: false
+      },
+      material: {
+        src: "dist/css/bootstrap-material-design.css",
+        dest: "dist/css/bootstrap-material-design.min.css"
+      },
+      ripples: {
+        src: "dist/css/ripples.css",
+        dest: "dist/css/ripples.min.css"
+      }
+    },
+
+    // Copy .js to dist/js/ folder
+    copy: {
+      material: {
+        src: "scripts/material.js",
+        dest: "dist/js/material.js"
+      },
+      ripples: {
+        src: "scripts/ripples.js",
+        dest: "dist/js/ripples.js"
+      },
+      fonts: {
+        expand: true,
+        cwd: "fonts/",
+        src: "**",
+        dest: "dist/fonts/",
+        flatten: true,
+        filter: "isFile"
+      }
+    },
+
+    // Compile .js to .min.js
+    uglify: {
+      options: {
+        sourceMap: true
+      },
+      material: {
+        files: {
+          "dist/js/material.min.js": "dist/js/material.js"
+        }
+      },
+      ripples: {
+        files: {
+          "dist/js/ripples.min.js": "dist/js/ripples.js"
+        }
+      }
+    },
+
+    connect: {
+      options: {
+        port: 8040,
+        hostname: "localhost",
+        livereload: 35729
+
+      },
+      livereload: {
+        options: {
+          open: true,
+          base: "."
+        }
+      },
+      test: {
+        options: {
+          port: 8041,
+          open: "http://localhost:8041/_SpecRunner.html",
+          base: "."
+        }
+      }
+    },
+    jasmine: {
+      scripts: "scripts/**/*.js",
+      options: {
+        build: true,
+        specs: "test/*Spec.js",
+        helpers: "test/*Helper.js",
+        vendor: [
+          "https://code.jquery.com/jquery-1.10.2.min.js",
+          "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
+        ]
+      }
+    },
+    jshint: {
+      options: {
+        jshintrc: "scripts/.jshintrc",
+        reporter: require("jshint-stylish")
+      },
+      grunt: {
+        options: {
+          jshintrc: 'grunt/.jshintrc'
+        },
+        src: ['Gruntfile.js', 'package.js']
+      },
+      core: {
+        src: ["scripts/**/*.js"]
+      },
+      test: {
+        src: ["test/**/*.js"]
+      }
+    },
+
+    jscs: {
+      options: {
+        config: 'scripts/.jscsrc'
+      },
+      grunt: {
+        src: '<%= jshint.grunt.src %>'
+      },
+      core: {
+        src: '<%= jshint.core.src %>'
+      },
+      test: {
+        src: '<%= jshint.test.src %>'
+      },
+      assets: {
+        options: {
+          requireCamelCaseOrUpperCaseIdentifiers: null
+        },
+        src: '<%= jshint.assets.src %>'
+      }
+    },
+
+    watch: {
+      html: {
+        files: ["index.html", "bootstrap-elements.html", "testcase.html"],
+        tasks: ["htmllint", "bootlint"]
+      },
+      src: {
+        files: '<%= jshint.core.src %>',
+        tasks: ['jshint:core', 'dist-js'] // add tests when working again
+      },
+      test: {
+        files: ["test/**/*.js"],
+        tasks: ["jshint:test", "jasmine"]
+      },
+      less: {
+        files: ["less/**/*.less"],
+        tasks: ["dist-less"]
+      },
+      livereload: {
+        options: {
+          livereload: "<%= connect.options.livereload %>"
+        },
+        files: [
+          "index.html",
+          "bootstrap-elements.html",
+          "dist/js/**/*.js",
+          "dist/css/**/*.css",
+          "demo/**/*.{png,jpg,jpeg,gif,webp,svg}"
+        ]
+      }
+    },
+
+    compress: {
+      main: {
+        options: {
+          archive: 'bootstrap-material-design-<%= pkg.version %>-dist.zip',
+          mode: 'zip',
+          level: 9,
+          pretty: true
+        },
+        files: [
+          {
+            expand: true,
+            cwd: 'dist/',
+            src: ['**'],
+            dest: 'bootstrap-material-design-<%= pkg.version %>-dist'
+          }
+        ]
+      }
+    },
+
+    exec: {
+      "meteor-init": {
+        command: [
+          // Make sure Meteor is installed, per https://meteor.com/install.
+          // The curl'ed script is safe; takes 2 minutes to read source & check.
+          "type meteor >/dev/null 2>&1 || { curl https://install.meteor.com/ | sh; }",
+          // Meteor expects package.js to be in the root directory of
+          // the checkout, so copy it there temporarily
+          "cp meteor/package.js ."
+        ].join(";")
+      },
+      "meteor-cleanup": {
+        // remove build files and package.js
+        command: "rm -rf .build.* versions.json package.js"
+      },
+      "meteor-test": {
+        command: "node_modules/.bin/spacejam --mongo-url mongodb:// test-packages ./"
+      },
+      "meteor-publish": {
+        command: [
+          "ALL_EXIT_CODE=0; for PACKAGE_FILE in meteor/package*.js",
+          "do cp $PACKAGE_FILE ./package.js && meteor publish $@",
+          "ALL_EXIT_CODE=$(echo $ALL_EXIT_CODE + $? | bc); done",
+          "exit $ALL_EXIT_CODE"
+        ].join(";")
+      }
+    }
+
+  });
+
+
+  require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
+  //require('time-grunt')(grunt);
+
+  grunt.registerTask('test-js', ['jshint:core', 'jshint:test', 'jshint:grunt', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
+  grunt.registerTask("test", [
+    "dist",
+    "jasmine:scripts:build",
+    "connect:test:keepalive"
+  ]);
+
+  // Docs HTML validation task
+  grunt.registerTask('validate-html', ['htmllint']);
+
+  grunt.loadNpmTasks("grunt-less-to-sass");
+
+  // CSS distribution tasks
+  grunt.registerTask("dist-sass", [
+    "lessToSass:convert",
+    "sass:compile"
+  ]);
+
+  grunt.registerTask('less-compile', [
+    "less:material",
+    "less:ripples"
+  ]);
+
+  grunt.registerTask("dist-less", [
+    "less-compile",
+
+    "autoprefixer:material",
+    "autoprefixer:ripples",
+    "csslint:dist",
+    "cssmin:material",
+    "cssmin:ripples",
+    "csslint:distmin"
+  ]);
+
+  grunt.registerTask("dist-js", [
+    "jshint",
+    "copy:material",
+    "uglify:material",
+    "copy:ripples",
+    "uglify:ripples"
+  ]);
+
+  grunt.registerTask("dist-fonts", [
+    "copy:fonts"
+  ]);
+
+  // Full distribution
+  grunt.registerTask("dist", [
+    "clean:dist",
+
+    "htmllint",
+    "bootlint",
+
+    "dist-less",
+    "dist-sass",
+    "dist-js",
+    "dist-fonts",
+    "dist-sass"
+  ]);
+
+  // Default task.
+  grunt.registerTask('default', ['dist']); // test as well when it works?
+
+
+  grunt.registerTask("serve", [
+    "htmllint",
+    "bootlint",
+    "dist-less",
+    "dist-js",
+    "dist-fonts",
+    "connect:livereload",
+    "watch"
+  ]);
+};

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/ISSUE_TEMPLATE.md

@@ -0,0 +1,17 @@
+**All** bug reports must contain a test case using one of **our** Codepen templates;  Bug reports without one will be summarily closed:
+- `v3` Codepen template - http://codepen.io/rosskevin/pen/VvRgrN 
+- `v4` Codepen template - http://codepen.io/rosskevin/pen/eJMMVB
+
+----
+
+#### Test Case 
+(Codepen URL here) 
+
+#### Summary
+A summary of the issue and the browser/OS environment in which it occurs. If suitable, include the steps required to reproduce the bug.
+
+#### Expected result
+Description of expectation, mockup, etc.
+
+#### Additional Information
+Any other information you want to share that is relevant to the issue being reported. This might include the lines of code that you have identified as causing the bug, and potential solutions (and your opinions on their merits).

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/LICENSE.md

@@ -0,0 +1,30 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-2016, Federico Zivolo and contributors - https://github.com/FezVrasta/bootstrap-material-design
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+## Acknowledgements:
+
+- Some original Bootstrap code and documentation http://getbootstrap.com
+`Copyright (c) 2011-2015 Twitter, Inc`
+
+- Some original MDL code http://www.getmdl.io/
+`Copyright 2015 Google Inc. All Rights Reserved.`

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/README.md

@@ -0,0 +1,353 @@
+[![banner](demo/imgs/banner.jpg)](#)
+
+[![build status](https://travis-ci.org/FezVrasta/bootstrap-material-design.svg?branch=master)](https://travis-ci.org/FezVrasta/bootstrap-material-design)
+[![gratipay](https://img.shields.io/gratipay/FezVrasta.svg)](https://gratipay.com/FezVrasta)
+[![Bower version](https://badge.fury.io/bo/bootstrap-material-design.svg)](https://github.com/FezVrasta/bootstrap-material-design)
+
+
+
+## About
+Material Design for Bootstrap is a Bootstrap V3 compatible theme; it is an easy way to use the new [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html) in your Bootstrap 3 based application.
+Just include the theme, after the Bootstrap CSS and include the JavaScript at the end of your document (just before the `</body>` tag), and everything will be converted to Material Design (Paper) style.
+
+**NOTE**: This V3 compatible theme is still in development, it could be used on production websites but I can't guarantee compatibility with previous versions.
+
+Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-design/).
+
+## V4 Development
+The next major Bootstrap V4 compatible release of bootstrap-material-design is [in development](https://github.com/FezVrasta/bootstrap-material-design/tree/v4-dev).  Check out the [documentation](http://rosskevin.github.io/bootstrap-material-design/migration/) (temporary site url) for migration, getting started, development, and examples.  It has some requested implementations and more to come over V3.  There are a lot of great changes in V4, but be warned, both Bootstrap V4 and our own implementation is changing daily.  If you want to get involved, please do so by submitting pull requests.  Before undertaking any major PR effort, please check the [milestone](https://github.com/FezVrasta/bootstrap-material-design/milestones/V4) for an existing issue.  If there isn't one, please file a new issue and `cc: @rosskevin` so we can discuss and assign the work so effort is not duplicated.  Thank you!
+
+Please prefix any issue or pull request title with `V4`.
+
+Major differences:
+- Customized bootstrap build with variables instead of being an addon theme
+- ES6 Javascript classes
+- SCSS
+- New scalable documentation framework that mirrors Bootstrap's own
+- Documentation includes Bootstrap reference pages to display default rendering
+- New build/documentation process (also mimics Bootstrap's project setup)
+
+## How to install
+
+You may install this theme using NPM or Bower:
+
+- NPM : `npm install bootstrap-material-design`
+- Bower : `bower install bootstrap-material-design`
+
+If you prefer, you can include this framework in your project using our official CDN:
+
+- [Bootstrap Material Design on CDNJS.com](https://cdnjs.com/libraries/bootstrap-material-design)
+- [Bootstrap Material Design on JSDelivr.com](http://www.jsdelivr.com/#!bootstrap.material-design)
+
+
+## Getting started
+
+Add the necessary links to your `<head>` element for fonts and stylsheets:
+```html
+  <!-- Material Design fonts -->
+  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
+  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+
+  <!-- Bootstrap Material Design -->
+  <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
+  <link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">
+```
+
+### Bower
+
+Many use bower including compiling source for this project.  Here are a couple of things to know:
+
+  1. When using SASS, `@import` directives cannot be interpolated.  Given the variety of configurations, the typical `bower_components` directory is occasionally in a different location.  Given the options, a `loadPath` was [added to the SASS compiler](https://github.com/FezVrasta/bootstrap-material-design/pull/762/files)
+     so that bootstrap files could be loaded without specifying the path to the `bower_components` directory.  You may similarly need to add a load path to your compiler.  It is still debatable if this is for the greater good, but seems like the only
+     way to accommodate multiple configurations.
+  2. This project will install both `bootstrap` and `bootstrap-sass` in `bower_components`.  Each is used for the LESS and SASS version compilation respectively.   If you are only using one, feel free to [ignore the other bower dependency](http://stackoverflow.com/a/27791606/2363935).
+
+## Support and Contributions
+
+All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/VvRgrN) test case where possible. Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
+
+If you like this project you may support it by donating via Gittip, starring this repository or reporting issues.
+
+[![gittip](demo/imgs/gittip-button.jpg)](https://www.gratipay.com/FezVrasta/)
+[![issues](demo/imgs/issues-button.jpg)](https://github.com/FezVrasta/bootstrap-material-design/issues)
+
+
+## Development
+
+We are using Grunt to automate the workflow and build process. Ensure you have nodejs installed and grunt-cli installed globally.
+After cloning the repo, run `npm install && bower install` to ensure you have all dev dependencies.
+
+### Grunt
+
+- `grunt build` - run the tests and compile the less/sass. See [Gruntfile.js](Gruntfile.js) for details on targets.
+- `grunt test` - browser-based Jasmine unit tests.
+- `grunt serve` - build and fire up an http server with live-reload and a watch for development purposes.
+
+### LESS & SASS
+
+The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS.
+
+The upcoming 4.x compatible version is being actively developed using SASS on the `v4-dev` branch.
+
+
+## Documentation
+
+Material Design ([spec](http://www.google.com/design/spec/material-design/introduction.html)) for Bootstrap provides 
+styles for bootstrap based markup to comply with Material Design concepts.
+
+
+### Customization
+
+#### Colors
+
+There are 17 color variations (in addition to the classic 4 variations) described by the Material Design color palette:
+
+![palette](material-design-color-palette.jpg)
+
+##### Compile your customized distributable
+
+If you are using the static css files, you may want to use your own color variation.  To do so:
+
+1. `npm install && bower install` (alternatively you may download the source, but using npm and bower is recommended)
+2. Edit the `less/_variables.less` file and alter the color variables.  You are most likely interested in altering `@brand-primary`.  For a list of material design color palette variables, refer to `less/_colors.less`
+
+    ```less
+    @brand-primary: @teal;
+    @brand-success: @green;
+    @brand-danger: @red;
+    @brand-warning: @deep-orange;
+    @brand-info: @light-blue;
+    ```
+3. Compile and test your distributable css by running `grunt serve`, this will launch your browser to the test site.  Peruse and verify your color choices
+4. From your application, you may now reference the compiled css files in `dist/css`
+    
+##### Customize via less variables
+
+If you are referencing source from your own application's less file, you may simply customize the colors by redefining the color variables _after_ including bootstrap-material-design.  See above for a description of variables.  
+    
+### Forms
+
+All inputs should be surrounded by a standard `.form-group`, and as such `material.js` will enforce this.  The `.form-group` is
+used to signal different input styles and variations.  See the examples for variations.
+
+#### Sizing
+
+In general, it is preferred that sizing be altered with either `.form-group-sm` or `.form-group-lg`.  Due to the interconnected
+nature of inputs, labels, margins and padding, `material.js` will convert any use of `.input-sm` or `.input-lg` to 
+`.form-group-sm` or `.form-group-lg` in order to reduce the necessary markup/variations and get a standard sizing with
+fewer side effects.
+
+#### Buttons
+
+Buttons are flat by default, without shadows.  Add `.btn-raised` to a button to add a permanent shadow to it.  See the [button examples](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html#buttons) 
+
+#### Inputs
+
+##### Labels
+
+The following classes should be placed on the `.form-group` to indicate the label style:
+
+- `.label-floating` - renders label as a placeholder, that animates above the field upon focus
+- `.label-static` - renders label above the field. `input placeholder` attribute can also be used in conjunction
+- `.label-placeholder` - renders a label as a placeholder only 
+- no label, but use of `input placeholder` attribute - same rendering as `.label-placeholder`
+
+##### Hints
+
+Upon focus, a hint can be displayed.  Use any `p | span` with `.help-block`.
+
+
+##### Examples
+
+```html
+  <div class="form-group label-static">
+    <label for="i2" class="control-label">label-static</label>
+    <input type="email" class="form-control" id="i2" placeholder="placeholder attribute">
+    <p class="help-block">This is a hint as a <code>p.help-block.hint</code></p>
+  </div>
+
+  <div class="form-group label-floating">
+    <label for="i5" class="control-label">label-floating</label>
+    <input type="email" class="form-control" id="i5">
+    <span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
+  </div>
+
+  <div class="form-group label-placeholder">
+    <label for="i5p" class="control-label">label-placeholder</label>
+    <input type="email" class="form-control" id="i5p">
+    <span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
+  </div>
+```
+
+
+#### Radio, Checkbox, Toggle
+
+Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup.
+
+Radio example:
+
+```html
+<div class="form-group">
+  <label class="col-lg-2 control-label">Radios</label>
+
+  <div class="col-lg-10">
+    <div class="radio radio-primary">
+      <label>
+        <input type="radio" name="optionsRadios" checked="">
+        Option one
+      </label>
+    </div>
+    <div class="radio radio-primary">
+      <label>
+        <input type="radio" name="optionsRadios">
+        Option two
+      </label>
+    </div>
+  </div>
+</div>
+```      
+        
+        
+
+### Icons
+
+Bootstrap Material Design supports the full range of original Material Design icons!
+[See the full set of material design icons at the material icons library.](https://www.google.com/design/icons/)
+
+It’s easy to incorporate icons into your web page. [Here’s an example](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html#icon): 
+```
+<i class="material-icons">face</i> face
+```
+
+Please be sure that the fonts are properly setup, see [Getting Started](#getting-started).
+
+### Cards 
+
+A card will expand to fill all of the available width (e.g. column's width). Card's height will be automatically resized to match width.
+
+Here is an example on how to use it:
+
+```html
+<div class="card">
+
+    <div class="card-height-indicator"></div>
+
+    <div class="card-content">
+
+        <div class="card-image">
+            <img src="./image.jpg" alt="Loading image...">
+            <h3 class="card-image-headline">Lorem Ipsum Dolor</h3>
+        </div>
+
+        <div class="card-body">
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+        </div>
+
+        <footer class="card-footer">
+            <button class="btn btn-flat">Share</button>
+            <button class="btn btn-flat btn-warning">Learn More</button>
+        </footer>
+
+    </div>
+
+</div>
+```    
+    
+Cards will adapt to column's width. The card below will have width equal to col-lg-6:
+
+```html
+<div class="row">
+    <div class="col-lg-3"></div>
+
+    <div class="col-lg-6">
+        <div class="card">
+            ...
+        </div>
+    </div>
+
+    <div class="col-lg-3"></div>
+</div>
+```
+
+## material.js
+
+`material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
+
+### Functions
+
+* `$.material.init()` - shortcut to run all the following commands:
+* `$.material.ripples()` will apply ripples.js to the default elements.
+* `$.material.input()` will enable the MD style to the text inputs, and other kind of inputs (number, email, file etc).
+* `$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the [Inputs section](#inputs).
+* `$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs section.
+
+### Apply only to specific elements
+
+Every function expects an optional value that will be used as a selector for the function; for example,
+`$.material.ripples("#selector, #foobar")` will apply Ripples.js only to `#selector` and `#foobar`.
+The functions that allows an optional selector are `$.material.ripples`, `$.material.input`, `$.material.checkbox` and `$.material.radio`.
+
+You can even override the default values using the `$.material.options` function. The default values are:
+
+```javascript
+$.material.options = {
+    "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
+    "inputElements": "input.form-control, textarea.form-control, select.form-control",
+    "checkboxElements": ".checkbox > label > input[type=checkbox]",
+    "radioElements": ".radio > label > input[type=radio]"
+}
+```    
+
+### Arrive.js support
+
+If you need to dynamically add elements to your DOM then you may need to include `Arrive.js` before `Material.js`. This will automatically apply `material.js` to every new element added via JavaScript.
+
+## Plugins
+
+Material Design for Bootstrap comes with styling support for various external scripts:
+
+### SnackbarJS
+
+Create snackbars and toasts with the [SnackbarJS plugin](https://github.com/FezVrasta/snackbarjs). The default toast style is the squared one (snackbar style). If you like to use the rounded style (toast style), please add the `toast` class to the `style` option of SnackbarJS.
+
+### RipplesJS
+
+This is part of the Material Design for Bootstrap project and is a plain JavaScript script which creates the ripple effect when clicking on the specified elements.
+At the moment RipplesJS does not have its own repository but it will probably have one in the future.
+
+You may want to set a custom color to the ripples of a specific element, to do so write:
+
+```html
+<button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
+```
+
+### noUiSlider
+
+Make cross-browser sliders and get them styled with Material Design thanks to the support provided by this theme.
+Read more about [noUiSlider here](http://refreshless.com/nouislider/).
+
+### Dropdown.js
+
+Finally a dropdown plugin that transforms select inputs in nice dropdowns and does not drive you crazy.
+Read more about [Dropdown.js here](https://github.com/FezVrasta/dropdown.js).
+
+### Selectize.js
+
+Transform select and multi-select inputs into advanced text inputs. Material Design for BS provides a full replacement of the plugin's CSS, so don't include it.
+Read more about [selectize.js](http://brianreavis.github.io/selectize.js/).
+
+### Bootstrap Material Datepicker
+
+A Material Design datepicker created to be used with Material Design for Bootstrap.  
+Read more about [Bootstrap Material Datepicker](https://github.com/T00rk/bootstrap-material-datepicker)
+
+## Compatibility
+
+Currently, Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but they may work.
+
+
+## License
+[MIT License](LICENSE.md) 

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/_config.yml

@@ -0,0 +1,50 @@
+baseurl: "/bootstrap-material-design"
+#url: "http://fezvrasta.github.io"
+url: "http://rosskevin.github.io"
+
+include:
+  - .nojekyll
+
+gems: ['jekyll-less']
+
+sass:
+    sass_dir: sass
+
+# Dependencies
+markdown:         kramdown
+highlighter:      rouge
+
+# Permalinks
+permalink:        pretty
+
+# Server
+source:           docs
+destination:      _gh_pages
+host:             0.0.0.0
+port:             9001
+url:              http://fezvrasta.github.io/bootstrap-material-design
+encoding:         UTF-8
+
+# Custom vars
+current_version:  0.4.1
+repo:             https://github.com/fezvrasta/bootstrap-material-design
+#sass_repo:        https://github.com/fezvrasta/bootstrap-material-design-sass
+
+download:
+  source:         https://github.com/fezvrasta/bootstrap-material-design/archive/v0.4.1.zip
+  dist:           https://github.com/fezvrasta/bootstrap-material-design/releases/download/v0.4.1/bootstrap-0.4.1-dist.zip
+#  sass:           https://github.com/fezvrasta/bootstrap-material-design-sass/archive/v0.4.1.tar.gz
+
+#blog:             http://blog.getbootstrap.com
+#expo:             http://expo.getbootstrap.com
+#
+#cdn:
+#  # See https://www.srihash.org for info on how to generate the hashes
+#  css:            https://maxcdn.bootstrapcdn.com/bootstrap/0.4.1/css/bootstrap.min.css
+#  css_hash:       "sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
+#  css_theme:      https://maxcdn.bootstrapcdn.com/bootstrap/0.4.1/css/bootstrap-theme.min.css
+#  css_theme_hash: "sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX"
+#  js:             https://maxcdn.bootstrapcdn.com/bootstrap/0.4.1/js/bootstrap.min.js
+#  js_hash:        "sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ=="
+
+

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/bower.json

@@ -0,0 +1,45 @@
+{
+  "name": "bootstrap-material-design",
+  "homepage": "http://fezvrasta.github.io/bootstrap-material-design",
+  "authors": [
+    "Federico Zivolo <info@mywebexpression.com>"
+  ],
+  "description": "Material Design theme for Bootstrap 3",
+  "main": [
+    "dist/css/bootstrap-material-design.css",
+    "dist/js/material.js",
+    "dist/css/ripples.css",
+    "dist/js/ripples.js"
+  ],
+  "ignore": [
+    "test",
+    "screenshots",
+    "demo",
+    ".editorconfig",
+    ".gitignore",
+    ".jshintrc",
+    ".travis.yml",
+    "CONTRIBUTING.md",
+    "Gruntfile.json",
+    "index.html",
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "keywords": [
+    "material",
+    "design",
+    "bootstrap",
+    "theme",
+    "google",
+    "android"
+  ],
+  "license": "https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md",
+  "dependencies": {
+    "jquery": "^2.2",
+    "bootstrap": "~3.3.6",
+    "bootstrap-sass": "~3.3.6"
+  }
+}

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/dist/css/ripples.css

@@ -0,0 +1,47 @@
+.withripple {
+  position: relative;
+}
+.ripple-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.ripple {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  margin-left: -10px;
+  margin-top: -10px;
+  border-radius: 100%;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.05);
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+       -o-transform: scale(1);
+          transform: scale(1);
+  -webkit-transform-origin: 50%;
+      -ms-transform-origin: 50%;
+       -o-transform-origin: 50%;
+          transform-origin: 50%;
+  opacity: 0;
+  pointer-events: none;
+}
+.ripple.ripple-on {
+  -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+       -o-transition: opacity 0.15s ease-in 0s, -o-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+          transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+  opacity: 0.1;
+}
+.ripple.ripple-out {
+  -webkit-transition: opacity 0.1s linear 0s !important;
+       -o-transition: opacity 0.1s linear 0s !important;
+          transition: opacity 0.1s linear 0s !important;
+  opacity: 0;
+}
+/*# sourceMappingURL=ripples.css.map */

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/dist/css/ripples.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,mBAAA;CCCH;ADCD;EACI,mBAAA;EACA,OAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;EACA,uBAAA;EACA,qBAAA;CCCH;ADCD;EACI,mBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,oBAAA;EACA,uBAAA;EACA,sCAAA;EACA,4BAAA;MAAA,wBAAA;OAAA,uBAAA;UAAA,oBAAA;EACA,8BAAA;MAAA,0BAAA;OAAA,yBAAA;UAAA,sBAAA;EACA,WAAA;EACA,qBAAA;CCCH;ADCD;EACI,uGAAA;OAAA,6FAAA;UAAA,uFAAA;EACA,aAAA;CCCH;ADCD;EACI,sDAAA;OAAA,iDAAA;UAAA,8CAAA;EACA,WAAA;CCCH","file":"ripples.css","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-container {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: #000; // fallback color\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.1;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n",".withripple {\n  position: relative;\n}\n.ripple-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: inherit;\n  pointer-events: none;\n}\n.ripple {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  margin-left: -10px;\n  margin-top: -10px;\n  border-radius: 100%;\n  background-color: #000;\n  background-color: rgba(0, 0, 0, 0.05);\n  transform: scale(1);\n  transform-origin: 50%;\n  opacity: 0;\n  pointer-events: none;\n}\n.ripple.ripple-on {\n  transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n  opacity: 0.1;\n}\n.ripple.ripple-out {\n  transition: opacity 0.1s linear 0s !important;\n  opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]}

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/dist/css/ripples.min.css

@@ -0,0 +1,2 @@
+.withripple{position:relative}.ripple-container{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:#000;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;-o-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(.4,0,.2,1) .1s;-o-transition:opacity .15s ease-in 0s,-o-transform .5s cubic-bezier(.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(.4,0,.2,1) .1s;opacity:.1}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;-o-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}
+/*# sourceMappingURL=ripples.min.css.map */

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/dist/css/ripples.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["less/ripples.less"],"names":[],"mappings":"AAAA,YACI,SAAA,SAEJ,kBACI,SAAA,SACA,IAAA,EACA,KAAA,EACA,QAAA,EACA,MAAA,KACA,OAAA,KACA,SAAA,OACA,cAAA,QACA,eAAA,KAEJ,QACI,SAAA,SACA,MAAA,KACA,OAAA,KACA,YAAA,MACA,WAAA,MACA,cAAA,KACA,iBAAA,KACA,iBAAA,gBACA,kBAAA,SAAA,cAAA,SAAA,aAAA,SAAA,UAAA,SACA,yBAAA,IAAA,qBAAA,IAAA,oBAAA,IAAA,iBAAA,IACA,QAAA,EACA,eAAA,KAEJ,kBACI,mBAAA,QAAA,KAAA,QAAA,GAAA,kBAAA,IAAA,wBAAA,IAAA,cAAA,QAAA,KAAA,QAAA,GAAA,aAAA,IAAA,wBAAA,IAAA,WAAA,QAAA,KAAA,QAAA,GAAA,UAAA,IAAA,wBAAA,IACA,QAAA,GAEJ,mBACI,mBAAA,QAAA,IAAA,OAAA,aAAA,cAAA,QAAA,IAAA,OAAA,aAAA,WAAA,QAAA,IAAA,OAAA,aACA,QAAA"}

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/dist/js/material.js

@@ -0,0 +1,352 @@
+/* globals jQuery */
+
+(function ($) {
+  // Selector to select only not already processed elements
+  $.expr[":"].notmdproc = function (obj) {
+    if ($(obj).data("mdproc")) {
+      return false;
+    } else {
+      return true;
+    }
+  };
+
+  function _isChar(evt) {
+    if (typeof evt.which == "undefined") {
+      return true;
+    } else if (typeof evt.which == "number" && evt.which > 0) {
+      return (
+        !evt.ctrlKey
+        && !evt.metaKey
+        && !evt.altKey
+        && evt.which != 8  // backspace
+        && evt.which != 9  // tab
+        && evt.which != 13 // enter
+        && evt.which != 16 // shift
+        && evt.which != 17 // ctrl
+        && evt.which != 20 // caps lock
+        && evt.which != 27 // escape
+      );
+    }
+    return false;
+  }
+
+  function _addFormGroupFocus(element) {
+    var $element = $(element);
+    if (!$element.prop('disabled')) {  // this is showing as undefined on chrome but works fine on firefox??
+      $element.closest(".form-group").addClass("is-focused");
+    }
+  }
+
+  function _toggleDisabledState($element, state) {
+    var $target;
+    if ($element.hasClass('checkbox-inline') || $element.hasClass('radio-inline')) {
+      $target = $element;
+    } else {
+      $target = $element.closest('.checkbox').length ? $element.closest('.checkbox') : $element.closest('.radio');
+    }
+    return $target.toggleClass('disabled', state);
+  }
+
+  function _toggleTypeFocus($input) {
+    var disabledToggleType = false;
+    if ($input.is($.material.options.checkboxElements) || $input.is($.material.options.radioElements)) {
+      disabledToggleType = true;
+    }
+    $input.closest('label').hover(function () {
+        var $i = $(this).find('input');
+        var isDisabled = $i.prop('disabled'); // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
+        if (disabledToggleType) {
+          _toggleDisabledState($(this), isDisabled);
+        }
+        if (!isDisabled) {
+          _addFormGroupFocus($i);     // need to find the input so we can check disablement
+        }
+      },
+      function () {
+        _removeFormGroupFocus($(this).find('input'));
+      });
+  }
+
+  function _removeFormGroupFocus(element) {
+    $(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
+  }
+
+  $.material = {
+    "options": {
+      // These options set what will be started by $.material.init()
+      "validate": true,
+      "input": true,
+      "ripples": true,
+      "checkbox": true,
+      "togglebutton": true,
+      "radio": true,
+      "arrive": true,
+      "autofill": false,
+
+      "withRipples": [
+        ".btn:not(.btn-link)",
+        ".card-image",
+        ".navbar a:not(.withoutripple)",
+        ".dropdown-menu a",
+        ".nav-tabs a:not(.withoutripple)",
+        ".withripple",
+        ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"
+      ].join(","),
+      "inputElements": "input.form-control, textarea.form-control, select.form-control",
+      "checkboxElements": ".checkbox > label > input[type=checkbox], label.checkbox-inline > input[type=checkbox]",
+      "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
+      "radioElements": ".radio > label > input[type=radio], label.radio-inline > input[type=radio]"
+    },
+    "checkbox": function (selector) {
+      // Add fake-checkbox to material checkboxes
+      var $input = $((selector) ? selector : this.options.checkboxElements)
+        .filter(":notmdproc")
+        .data("mdproc", true)
+        .after("<span class='checkbox-material'><span class='check'></span></span>");
+
+      _toggleTypeFocus($input);
+    },
+    "togglebutton": function (selector) {
+      // Add fake-checkbox to material checkboxes
+      var $input = $((selector) ? selector : this.options.togglebuttonElements)
+        .filter(":notmdproc")
+        .data("mdproc", true)
+        .after("<span class='toggle'></span>");
+
+      _toggleTypeFocus($input);
+    },
+    "radio": function (selector) {
+      // Add fake-radio to material radios
+      var $input = $((selector) ? selector : this.options.radioElements)
+        .filter(":notmdproc")
+        .data("mdproc", true)
+        .after("<span class='circle'></span><span class='check'></span>");
+
+      _toggleTypeFocus($input);
+    },
+    "input": function (selector) {
+      $((selector) ? selector : this.options.inputElements)
+        .filter(":notmdproc")
+        .data("mdproc", true)
+        .each(function () {
+          var $input = $(this);
+
+          // Requires form-group standard markup (will add it if necessary)
+          var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
+          if ($formGroup.length === 0 && $input.attr('type') !== "hidden" && !$input.attr('hidden')) {
+            $input.wrap("<div class='form-group'></div>");
+            $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
+          }
+
+          // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
+          if ($input.attr("data-hint")) {
+            $input.after("<p class='help-block'>" + $input.attr("data-hint") + "</p>");
+            $input.removeAttr("data-hint");
+          }
+
+          // Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
+          var legacySizes = {
+            "input-lg": "form-group-lg",
+            "input-sm": "form-group-sm"
+          };
+          $.each(legacySizes, function (legacySize, standardSize) {
+            if ($input.hasClass(legacySize)) {
+              $input.removeClass(legacySize);
+              $formGroup.addClass(standardSize);
+            }
+          });
+
+          // Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
+          if ($input.hasClass("floating-label")) {
+            var placeholder = $input.attr("placeholder");
+            $input.attr("placeholder", null).removeClass("floating-label");
+            var id = $input.attr("id");
+            var forAttribute = "";
+            if (id) {
+              forAttribute = "for='" + id + "'";
+            }
+            $formGroup.addClass("label-floating");
+            $input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
+          }
+
+          // Set as empty if is empty (damn I must improve this...)
+          if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
+            $formGroup.addClass("is-empty");
+          }
+
+          // Support for file input
+          if ($formGroup.find("input[type=file]").length > 0) {
+            $formGroup.addClass("is-fileinput");
+          }
+        });
+    },
+    "attachInputEventHandlers": function () {
+      var validate = this.options.validate;
+
+      $(document)
+        .on("keydown paste", ".form-control", function (e) {
+          if (_isChar(e)) {
+            $(this).closest(".form-group").removeClass("is-empty");
+          }
+        })
+        .on("keyup change", ".form-control", function () {
+          var $input = $(this);
+          var $formGroup = $input.closest(".form-group");
+          var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
+
+          if ($input.val() === "") {
+            $formGroup.addClass("is-empty");
+          }
+          else {
+            $formGroup.removeClass("is-empty");
+          }
+
+          // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
+          //  Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
+          //  the form-group on change.
+          //
+          // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
+          //        BUT, I've left it here for backwards compatibility.
+          if (validate) {
+            if (isValid) {
+              $formGroup.removeClass("has-error");
+            }
+            else {
+              $formGroup.addClass("has-error");
+            }
+          }
+        })
+        .on("focus", ".form-control, .form-group.is-fileinput", function () {
+          _addFormGroupFocus(this);
+        })
+        .on("blur", ".form-control, .form-group.is-fileinput", function () {
+          _removeFormGroupFocus(this);
+        })
+        // make sure empty is added back when there is a programmatic value change.
+        //  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
+        .on("change", ".form-group input", function () {
+          var $input = $(this);
+          if ($input.attr("type") == "file") {
+            return;
+          }
+
+          var $formGroup = $input.closest(".form-group");
+          var value = $input.val();
+          if (value) {
+            $formGroup.removeClass("is-empty");
+          } else {
+            $formGroup.addClass("is-empty");
+          }
+        })
+        // set the fileinput readonly field with the name of the file
+        .on("change", ".form-group.is-fileinput input[type='file']", function () {
+          var $input = $(this);
+          var $formGroup = $input.closest(".form-group");
+          var value = "";
+          $.each(this.files, function (i, file) {
+            value += file.name + ", ";
+          });
+          value = value.substring(0, value.length - 2);
+          if (value) {
+            $formGroup.removeClass("is-empty");
+          } else {
+            $formGroup.addClass("is-empty");
+          }
+          $formGroup.find("input.form-control[readonly]").val(value);
+        });
+    },
+    "ripples": function (selector) {
+      $((selector) ? selector : this.options.withRipples).ripples();
+    },
+    "autofill": function () {
+      // This part of code will detect autofill when the page is loading (username and password inputs for example)
+      var loading = setInterval(function () {
+        $("input[type!=checkbox]").each(function () {
+          var $this = $(this);
+          if ($this.val() && $this.val() !== $this.attr("value")) {
+            $this.trigger("change");
+          }
+        });
+      }, 100);
+
+      // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
+      setTimeout(function () {
+        clearInterval(loading);
+      }, 10000);
+    },
+    "attachAutofillEventHandlers": function () {
+      // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
+      var focused;
+      $(document)
+        .on("focus", "input", function () {
+          var $inputs = $(this).parents("form").find("input").not("[type=file]");
+          focused = setInterval(function () {
+            $inputs.each(function () {
+              var $this = $(this);
+              if ($this.val() !== $this.attr("value")) {
+                $this.trigger("change");
+              }
+            });
+          }, 100);
+        })
+        .on("blur", ".form-group input", function () {
+          clearInterval(focused);
+        });
+    },
+    "init": function (options) {
+      this.options = $.extend({}, this.options, options);
+      var $document = $(document);
+
+      if ($.fn.ripples && this.options.ripples) {
+        this.ripples();
+      }
+      if (this.options.input) {
+        this.input();
+        this.attachInputEventHandlers();
+      }
+      if (this.options.checkbox) {
+        this.checkbox();
+      }
+      if (this.options.togglebutton) {
+        this.togglebutton();
+      }
+      if (this.options.radio) {
+        this.radio();
+      }
+      if (this.options.autofill) {
+        this.autofill();
+        this.attachAutofillEventHandlers();
+      }
+
+      if (document.arrive && this.options.arrive) {
+        if ($.fn.ripples && this.options.ripples) {
+          $document.arrive(this.options.withRipples, function () {
+            $.material.ripples($(this));
+          });
+        }
+        if (this.options.input) {
+          $document.arrive(this.options.inputElements, function () {
+            $.material.input($(this));
+          });
+        }
+        if (this.options.checkbox) {
+          $document.arrive(this.options.checkboxElements, function () {
+            $.material.checkbox($(this));
+          });
+        }
+        if (this.options.radio) {
+          $document.arrive(this.options.radioElements, function () {
+            $.material.radio($(this));
+          });
+        }
+        if (this.options.togglebutton) {
+          $document.arrive(this.options.togglebuttonElements, function () {
+            $.material.togglebutton($(this));
+          });
+        }
+
+      }
+    }
+  };
+
+})(jQuery);

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/dist/js/ripples.js

@@ -0,0 +1,324 @@
+/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
+/* globals jQuery, navigator */
+
+(function($, window, document, undefined) {
+
+  "use strict";
+
+  /**
+   * Define the name of the plugin
+   */
+  var ripples = "ripples";
+
+
+  /**
+   * Get an instance of the plugin
+   */
+  var self = null;
+
+
+  /**
+   * Define the defaults of the plugin
+   */
+  var defaults = {};
+
+
+  /**
+   * Create the main plugin function
+   */
+  function Ripples(element, options) {
+    self = this;
+
+    this.element = $(element);
+
+    this.options = $.extend({}, defaults, options);
+
+    this._defaults = defaults;
+    this._name = ripples;
+
+    this.init();
+  }
+
+
+  /**
+   * Initialize the plugin
+   */
+  Ripples.prototype.init = function() {
+    var $element  = this.element;
+
+    $element.on("mousedown touchstart", function(event) {
+      /**
+       * Verify if the user is just touching on a device and return if so
+       */
+      if(self.isTouch() && event.type === "mousedown") {
+        return;
+      }
+
+
+      /**
+       * Verify if the current element already has a ripple wrapper element and
+       * creates if it doesn't
+       */
+      if(!($element.find(".ripple-container").length)) {
+        $element.append("<div class=\"ripple-container\"></div>");
+      }
+
+
+      /**
+       * Find the ripple wrapper
+       */
+      var $wrapper = $element.children(".ripple-container");
+
+
+      /**
+       * Get relY and relX positions
+       */
+      var relY = self.getRelY($wrapper, event);
+      var relX = self.getRelX($wrapper, event);
+
+
+      /**
+       * If relY and/or relX are false, return the event
+       */
+      if(!relY && !relX) {
+        return;
+      }
+
+
+      /**
+       * Get the ripple color
+       */
+      var rippleColor = self.getRipplesColor($element);
+
+
+      /**
+       * Create the ripple element
+       */
+      var $ripple = $("<div></div>");
+
+      $ripple
+      .addClass("ripple")
+      .css({
+        "left": relX,
+        "top": relY,
+        "background-color": rippleColor
+      });
+
+
+      /**
+       * Append the ripple to the wrapper
+       */
+      $wrapper.append($ripple);
+
+
+      /**
+       * Make sure the ripple has the styles applied (ugly hack but it works)
+       */
+      (function() { return window.getComputedStyle($ripple[0]).opacity; })();
+
+
+      /**
+       * Turn on the ripple animation
+       */
+      self.rippleOn($element, $ripple);
+
+
+      /**
+       * Call the rippleEnd function when the transition "on" ends
+       */
+      setTimeout(function() {
+        self.rippleEnd($ripple);
+      }, 500);
+
+
+      /**
+       * Detect when the user leaves the element
+       */
+      $element.on("mouseup mouseleave touchend", function() {
+        $ripple.data("mousedown", "off");
+
+        if($ripple.data("animating") === "off") {
+          self.rippleOut($ripple);
+        }
+      });
+
+    });
+  };
+
+
+  /**
+   * Get the new size based on the element height/width and the ripple width
+   */
+  Ripples.prototype.getNewSize = function($element, $ripple) {
+
+    return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
+  };
+
+
+  /**
+   * Get the relX
+   */
+  Ripples.prototype.getRelX = function($wrapper,  event) {
+    var wrapperOffset = $wrapper.offset();
+
+    if(!self.isTouch()) {
+      /**
+       * Get the mouse position relative to the ripple wrapper
+       */
+      return event.pageX - wrapperOffset.left;
+    } else {
+      /**
+       * Make sure the user is using only one finger and then get the touch
+       * position relative to the ripple wrapper
+       */
+      event = event.originalEvent;
+
+      if(event.touches.length === 1) {
+        return event.touches[0].pageX - wrapperOffset.left;
+      }
+
+      return false;
+    }
+  };
+
+
+  /**
+   * Get the relY
+   */
+  Ripples.prototype.getRelY = function($wrapper, event) {
+    var wrapperOffset = $wrapper.offset();
+
+    if(!self.isTouch()) {
+      /**
+       * Get the mouse position relative to the ripple wrapper
+       */
+      return event.pageY - wrapperOffset.top;
+    } else {
+      /**
+       * Make sure the user is using only one finger and then get the touch
+       * position relative to the ripple wrapper
+       */
+      event = event.originalEvent;
+
+      if(event.touches.length === 1) {
+        return event.touches[0].pageY - wrapperOffset.top;
+      }
+
+      return false;
+    }
+  };
+
+
+  /**
+   * Get the ripple color
+   */
+  Ripples.prototype.getRipplesColor = function($element) {
+
+    var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
+
+    return color;
+  };
+
+
+  /**
+   * Verify if the client browser has transistion support
+   */
+  Ripples.prototype.hasTransitionSupport = function() {
+    var thisBody  = document.body || document.documentElement;
+    var thisStyle = thisBody.style;
+
+    var support = (
+      thisStyle.transition !== undefined ||
+      thisStyle.WebkitTransition !== undefined ||
+      thisStyle.MozTransition !== undefined ||
+      thisStyle.MsTransition !== undefined ||
+      thisStyle.OTransition !== undefined
+    );
+
+    return support;
+  };
+
+
+  /**
+   * Verify if the client is using a mobile device
+   */
+  Ripples.prototype.isTouch = function() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  };
+
+
+  /**
+   * End the animation of the ripple
+   */
+  Ripples.prototype.rippleEnd = function($ripple) {
+    $ripple.data("animating", "off");
+
+    if($ripple.data("mousedown") === "off") {
+      self.rippleOut($ripple);
+    }
+  };
+
+
+  /**
+   * Turn off the ripple effect
+   */
+  Ripples.prototype.rippleOut = function($ripple) {
+    $ripple.off();
+
+    if(self.hasTransitionSupport()) {
+      $ripple.addClass("ripple-out");
+    } else {
+      $ripple.animate({"opacity": 0}, 100, function() {
+        $ripple.trigger("transitionend");
+      });
+    }
+
+    $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
+      $ripple.remove();
+    });
+  };
+
+
+  /**
+   * Turn on the ripple effect
+   */
+  Ripples.prototype.rippleOn = function($element, $ripple) {
+    var size = self.getNewSize($element, $ripple);
+
+    if(self.hasTransitionSupport()) {
+      $ripple
+      .css({
+        "-ms-transform": "scale(" + size + ")",
+        "-moz-transform": "scale(" + size + ")",
+        "-webkit-transform": "scale(" + size + ")",
+        "transform": "scale(" + size + ")"
+      })
+      .addClass("ripple-on")
+      .data("animating", "on")
+      .data("mousedown", "on");
+    } else {
+      $ripple.animate({
+        "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+        "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+        "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+        "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+        "opacity": 0.2
+      }, 500, function() {
+        $ripple.trigger("transitionend");
+      });
+    }
+  };
+
+
+  /**
+   * Create the jquery plugin function
+   */
+  $.fn.ripples = function(options) {
+    return this.each(function() {
+      if(!$.data(this, "plugin_" + ripples)) {
+        $.data(this, "plugin_" + ripples, new Ripples(this, options));
+      }
+    });
+  };
+
+})(jQuery, window, document);

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/dist/js/ripples.min.js

@@ -0,0 +1,2 @@
+!function(a,b,c,d){"use strict";function e(b,c){g=this,this.element=a(b),this.options=a.extend({},h,c),this._defaults=h,this._name=f,this.init()}var f="ripples",g=null,h={};e.prototype.init=function(){var c=this.element;c.on("mousedown touchstart",function(d){if(!g.isTouch()||"mousedown"!==d.type){c.find(".ripple-container").length||c.append('<div class="ripple-container"></div>');var e=c.children(".ripple-container"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(c),j=a("<div></div>");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(c,j),setTimeout(function(){g.rippleEnd(j)},500),c.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"===j.data("animating")&&g.rippleOut(j)})}}})},e.prototype.getNewSize=function(a,b){return Math.max(a.outerWidth(),a.outerHeight())/b.outerWidth()*2.5},e.prototype.getRelX=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageX-c.left:!1):b.pageX-c.left},e.prototype.getRelY=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageY-c.top:!1):b.pageY-c.top},e.prototype.getRipplesColor=function(a){var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return c},e.prototype.hasTransitionSupport=function(){var a=c.body||c.documentElement,b=a.style,e=b.transition!==d||b.WebkitTransition!==d||b.MozTransition!==d||b.MsTransition!==d||b.OTransition!==d;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(a){a.data("animating","off"),"off"===a.data("mousedown")&&g.rippleOut(a)},e.prototype.rippleOut=function(a){a.off(),g.hasTransitionSupport()?a.addClass("ripple-out"):a.animate({opacity:0},100,function(){a.trigger("transitionend")}),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})},e.prototype.rippleOn=function(a,b){var c=g.getNewSize(a,b);g.hasTransitionSupport()?b.css({"-ms-transform":"scale("+c+")","-moz-transform":"scale("+c+")","-webkit-transform":"scale("+c+")",transform:"scale("+c+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):b.animate({width:2*Math.max(a.outerWidth(),a.outerHeight()),height:2*Math.max(a.outerWidth(),a.outerHeight()),"margin-left":-1*Math.max(a.outerWidth(),a.outerHeight()),"margin-top":-1*Math.max(a.outerWidth(),a.outerHeight()),opacity:.2},500,function(){b.trigger("transitionend")})},a.fn.ripples=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document);
+//# sourceMappingURL=ripples.min.js.map

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/dist/js/ripples.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"CAGA,SAAUA,EAAGC,EAAQC,EAAUC,GAE7B,YAuBA,SAASC,GAAQC,EAASC,GACxBC,EAAOC,KAEPA,KAAKH,QAAUL,EAAEK,GAEjBG,KAAKF,QAAUN,EAAES,UAAWC,EAAUJ,GAEtCE,KAAKG,UAAYD,EACjBF,KAAKI,MAAQC,EAEbL,KAAKM,OA5BP,GAAID,GAAU,UAMVN,EAAO,KAMPG,IAuBJN,GAAQW,UAAUD,KAAO,WACvB,GAAIE,GAAYR,KAAKH,OAErBW,GAASC,GAAG,uBAAwB,SAASC,GAI3C,IAAGX,EAAKY,WAA4B,cAAfD,EAAME,KAA3B,CASKJ,EAASK,KAAK,qBAA2B,QAC5CL,EAASM,OAAO,uCAOlB,IAAIC,GAAWP,EAASQ,SAAS,qBAM7BC,EAAOlB,EAAKmB,QAAQH,EAAUL,GAC9BS,EAAOpB,EAAKqB,QAAQL,EAAUL,EAMlC,IAAIO,GAASE,EAAb,CAQA,GAAIE,GAActB,EAAKuB,gBAAgBd,GAMnCe,EAAU/B,EAAE,cAEhB+B,GACCC,SAAS,UACTC,KACCC,KAAQP,EACRQ,IAAOV,EACPW,mBAAoBP,IAOtBN,EAASD,OAAOS,GAMhB,WAAc,MAAO9B,GAAOoC,iBAAiBN,EAAQ,IAAIO,WAMzD/B,EAAKgC,SAASvB,EAAUe,GAMxBS,WAAW,WACTjC,EAAKkC,UAAUV,IACd,KAMHf,EAASC,GAAG,8BAA+B,WACzCc,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,UAWvB3B,EAAQW,UAAU6B,WAAa,SAAS5B,EAAUe,GAEhD,MAAQc,MAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAAiBjB,EAAQgB,aAAgB,KAO5F3C,EAAQW,UAAUa,QAAU,SAASL,EAAWL,GAC9C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGE,MAAQL,EAAcf,MAGzC,GAZAhB,EAAMoC,MAAQL,EAAcf,MAoBvC9B,EAAQW,UAAUW,QAAU,SAASH,EAAUL,GAC7C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGG,MAAQN,EAAcd,KAGzC,GAZAjB,EAAMqC,MAAQN,EAAcd,KAoBvC/B,EAAQW,UAAUe,gBAAkB,SAASd,GAE3C,GAAIwC,GAAQxC,EAAS0B,KAAK,gBAAkB1B,EAAS0B,KAAK,gBAAkBzC,EAAOoC,iBAAiBrB,EAAS,IAAIwC,KAEjH,OAAOA,IAOTpD,EAAQW,UAAU0C,qBAAuB,WACvC,GAAIC,GAAYxD,EAASyD,MAAQzD,EAAS0D,gBACtCC,EAAYH,EAASI,MAErBC,EACFF,EAAUG,aAAe7D,GACzB0D,EAAUI,mBAAqB9D,GAC/B0D,EAAUK,gBAAkB/D,GAC5B0D,EAAUM,eAAiBhE,GAC3B0D,EAAUO,cAAgBjE,CAG5B,OAAO4D,IAOT3D,EAAQW,UAAUI,QAAU,WAC1B,MAAO,iEAAiEkD,KAAKC,UAAUC,YAOzFnE,EAAQW,UAAU0B,UAAY,SAASV,GACrCA,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,IAQnB3B,EAAQW,UAAU4B,UAAY,SAASZ,GACrCA,EAAQyC,MAELjE,EAAKkD,uBACN1B,EAAQC,SAAS,cAEjBD,EAAQ0C,SAASnC,QAAW,GAAI,IAAK,WACnCP,EAAQ2C,QAAQ,mBAIpB3C,EAAQd,GAAG,mEAAoE,WAC7Ec,EAAQ4C,YAQZvE,EAAQW,UAAUwB,SAAW,SAASvB,EAAUe,GAC9C,GAAI6C,GAAOrE,EAAKqC,WAAW5B,EAAUe,EAElCxB,GAAKkD,uBACN1B,EACCE,KACC4C,gBAAiB,SAAWD,EAAO,IACnCE,iBAAkB,SAAWF,EAAO,IACpCG,oBAAqB,SAAWH,EAAO,IACvCI,UAAa,SAAWJ,EAAO,MAEhC5C,SAAS,aACTU,KAAK,YAAa,MAClBA,KAAK,YAAa,MAEnBX,EAAQ0C,SACNQ,MAAmE,EAA1DpC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAClDkC,OAAoE,EAA1DrC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACnDmC,cAAyE,GAA1DtC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACxDoC,aAAwE,GAA1DvC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACvDV,QAAW,IACV,IAAK,WACNP,EAAQ2C,QAAQ,oBAStB1E,EAAEqF,GAAGxE,QAAU,SAASP,GACtB,MAAOE,MAAK8E,KAAK,WACXtF,EAAE0C,KAAKlC,KAAM,UAAYK,IAC3Bb,EAAE0C,KAAKlC,KAAM,UAAYK,EAAS,GAAIT,GAAQI,KAAMF,QAKzDiF,OAAQtF,OAAQC","file":"ripples.min.js"}

zoesch.de/galerie/themes/bootstrap_darkroom/components/bootstrap-material-design/grunt/configBridge.json

@@ -0,0 +1,28 @@
+{
+  "config": {
+    "autoprefixerBrowsers": [
+      "Android 2.3",
+      "Android >= 4",
+      "Chrome >= 20",
+      "Firefox >= 24",
+      "Explorer >= 8",
+      "iOS >= 6",
+      "Opera >= 12",
+      "Safari >= 6"
+    ],
+    "jqueryCheck": [
+      "if (typeof jQuery === 'undefined') {",
+      "  throw new Error('Bootstrap Material Design\\'s JavaScript requires jQuery')",
+      "}\n"
+    ],
+    "jqueryVersionCheck": [
+      "+function ($) {",
+      "  'use strict';",
+      "  var version = $.fn.jquery.split(' ')[0].split('.')",
+      "  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) {",
+      "    throw new Error('Bootstrap Material Design\\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3')",
+      "  }",
+      "}(jQuery);\n\n"
+    ]
+  }
+}