jspwiki-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From brus...@apache.org
Subject [3/3] jspwiki git commit: Haddock Template: image styles, background styles, %%columns
Date Sun, 12 Mar 2017 15:24:00 GMT
Haddock Template: image styles, background styles, %%columns

2.10.3-git-35


Project: http://git-wip-us.apache.org/repos/asf/jspwiki/repo
Commit: http://git-wip-us.apache.org/repos/asf/jspwiki/commit/aca4ab64
Tree: http://git-wip-us.apache.org/repos/asf/jspwiki/tree/aca4ab64
Diff: http://git-wip-us.apache.org/repos/asf/jspwiki/diff/aca4ab64

Branch: refs/heads/master
Commit: aca4ab64d09d14bcdc8cc46dd9794f4ddc1e8141
Parents: eba8702
Author: brushed <dirk.frederickx@gmail.com>
Authored: Sun Mar 12 16:23:49 2017 +0100
Committer: brushed <dirk.frederickx@gmail.com>
Committed: Sun Mar 12 16:23:49 2017 +0100

----------------------------------------------------------------------
 ChangeLog                                       |  15 ++
 .../src/main/java/org/apache/wiki/Release.java  |   2 +-
 .../src/main/scripts/behaviors/Columns.js       |  28 +--
 .../src/main/scripts/wiki-edit/Wiki.Snips.js    |  22 +--
 .../src/main/scripts/wiki/Wiki.Behaviors.js     | 173 ++++++++++++++++-
 .../main/styles/haddock/default/Columns.less    |  46 ++++-
 .../styles/haddock/default/ImagePlugin.less     |  82 +++++++-
 .../src/main/styles/haddock/default/Tabs.less   |   4 +
 .../src/main/styles/haddock/default/build.less  |   2 +-
 .../src/main/styles/haddock/default/tables.less |   4 +-
 .../src/main/styles/haddock/default/type.less   | 192 ++++++++++++++++---
 11 files changed, 493 insertions(+), 77 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/ChangeLog
----------------------------------------------------------------------
diff --git a/ChangeLog b/ChangeLog
index 233e4db..2c77e1b 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,18 @@
+2017-03-12  Dirk Frederickx (brushed AT apache DOT org)
+
+       * 2.10.3-git-35  Haddock Template updates
+
+
+       * ImagePlugin:  minor update to apply the css class and styles
+         parameters to the image container, not to the whole table;
+         escape HTML entities in captions.
+
+       * several CSS stylesheet additions
+         - image styles : effects, captions, frames, animation
+         - background styles : color, background images
+
+       * %%columns: bugfix, few more column styles
+
 2017-03-05  Harry Metske (metskem@apache.org)
        * 2.10.3-git-34
 

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/java/org/apache/wiki/Release.java
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/java/org/apache/wiki/Release.java b/jspwiki-war/src/main/java/org/apache/wiki/Release.java
index fb3edc3..90cd991 100644
--- a/jspwiki-war/src/main/java/org/apache/wiki/Release.java
+++ b/jspwiki-war/src/main/java/org/apache/wiki/Release.java
@@ -72,7 +72,7 @@ public final class Release {
      *  <p>
      *  If the build identifier is empty, it is not added.
      */
-    public static final String     BUILD         = "34";
+    public static final String     BUILD         = "35";
 
     /**
      *  This is the generic version string you should use when printing out the version.
 It is of

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/scripts/behaviors/Columns.js
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/scripts/behaviors/Columns.js b/jspwiki-war/src/main/scripts/behaviors/Columns.js
index 5bada6c..c51231b 100644
--- a/jspwiki-war/src/main/scripts/behaviors/Columns.js
+++ b/jspwiki-war/src/main/scripts/behaviors/Columns.js
@@ -23,16 +23,13 @@ Script: Columns
     Format the page content side by side, in columns, like in a newspaper.
     HR elements (in wiki {{----}} markup) separate the columns.
     Column widths are equal and automatically calculated.
-    Optionally, you can specify the width in pixel(px) for the columns.
 
     FFS: use HTML5/CSS3 columns options if available
 
-Arguments:
-    width - (optional) column width in pixel(px)
 
 Example:
 (start code)
-    %%columms-300
+    %%columms
         column-text1 ...
         ----
         column-text1 ...
@@ -41,32 +38,27 @@ Example:
 
 DOM Structure
 (start code)
-    div-columns
+    div.columns
         div.col[styles={width:xx%}]
         div.col[styles={width:xx%}]
 (end)
 */
 function Columns(element, options){
 
-    var args = options.prefix.sliceArgs(element),
-        divider = "hr",
+    var divider = "hr",
         columnCount = element.getChildren(divider).length,
         width;
 
-    if( columnCount /*>0*/ ){
+    columnCount++;
 
-        columnCount++;
-        width = args[0] ? args[0] + "px" : 100 / columnCount + "%";
+    width = 100 / columnCount + "%";
 
-        element
-            .addClass("columns")
-            .grab(divider.slick(), "top") //add one extra group-start-element at the top
+    element
+        .grab(divider.slick(), "top") //add one extra group-start-element at the top
 
-            .groupChildren(divider, "div.col", function(column){
+        .groupChildren(divider, "div.col", function(column){
+            column.setStyle("width", width);
 
-                column.setStyle("width", width);
-
-            });
-    }
+        });
 
 }

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js b/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js
index de3aac0..0c7e97f 100644
--- a/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js
+++ b/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js
@@ -510,9 +510,9 @@ Wiki.Snips = {
 
             if( textarea.isCaretAtStartOfLine() ){
                 Object.append(body, {
-                    "\n{!!!}": "<span title='header'>H1</span>",
-                    "\n{!!}": "<span title='title'>H2</span>",
-                    "\n{!}": "<span title='sub-title'>H3</span>",
+                    "\n{!!!}": "<span title='header'>H<span class='sub'>1</span></span>",
+                    "\n{!!}": "<span title='title'>H<span class='sub'>2</span></span>",
+                    "\n{!}": "<span title='sub-title'>H<span class='sub'>3</span></span>",
                     "\n* {list item}": "<span class='icon-list-ul'/>",
                     "\n# {list-item}": "<span class='icon-list-ol'/>",
                     "divider-sol": ""
@@ -525,20 +525,20 @@ Wiki.Snips = {
                 "{{{monospaced}}} ": "<tt>&lt;/&gt;</tt>",
                 "{{{{code}}}}": "<span class='small' style='font-family:monospace;'>code</span>",
                 "divider1": "",
-                "[{link}]": "<span class='icon-link'/>",
+                "[{link}]": "<span class='icon-link' title='Insert a link'/>",
                 //"[description|{link}|options]": "<span class='icon-link'/>",
-                "[{Image src='{image.jpg}'}]": "<span class='icon-picture'/>",
-                "[{{plugin}}]": "<span class='icon-puzzle-piece'></span>",
-                "%%style {body} /%":"<span style='font-family:monospace;'>%%</span>",
+                "[{Image src='{image.jpg}'}]": "<span class='icon-picture' title='Insert
an image'/>",
+                "[{{plugin}}]": "<span class='icon-puzzle-piece' title='Insert a Plugin'></span>",
+                "%%style {body} /%":"<span style='font-family:monospace;' title='Add a
Style'>%%</span>",
                 "divider2": "",
-                "%%(font-family:{font};) body /%":"<span style='font-family:serif;'>A</span><span
style='font-family:sans-serif'>a</span>",
-                "&{entity};" : "<span style='font-family:cursive;'>&amp;</span>",
+                "%%(font-family:{font};) body /%":"<span title='Change the Font'><span
style='font-family:serif;'>A</span><span style='font-family:sans-serif'>a</span></span>",
+                "&{entity};" : "<span style='font-family:cursive;' title='Insert a
Special Character'>&amp;</span>",
                 //"%%sub {subscript}/% ": "a<span class='sub'>n</span>",
                 //"%%sup {superscript}/% ": "a<span class='sup'>m</span>",
                 //"%%strike {strikethrough}/% ":"<span class='strike'>S</span>",
                 //"divider3": "",
-                "[{ALLOW {permission} principal }]":"<span class='icon-unlock-alt'></span>",
-                "\\\\\n":"<b>&para;</b>"
+                "[{ALLOW {permission} principal }]":"<span class='icon-unlock-alt' title='Add
a page ACL'></span>",
+                "\\\\\n":"<b title='Insert a New Line'>&para;</b>"
             });
 
             if( textarea.isCaretAtStartOfLine()

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js b/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
index da6e075..35b1b37 100644
--- a/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
+++ b/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
@@ -61,7 +61,7 @@ Depend on :
     behaviors/TableX.Zebra.js
 */
 
-!function( wiki ){
+!(function( wiki ){
 
 var TheSlimbox, T = TableX;
 
@@ -449,7 +449,7 @@ Wiki Markup:
 /*
 Behavior:Columns
 
->    %%columns(-width) .. /%
+>    %%columns .. /%
 */
     .add( "div[class^=columns]", Columns, { prefix: "columns" } )
 
@@ -544,7 +544,7 @@ Behavior: Table behaviors
 
         var args = "table".sliceArgs(element),
             arg,
-            tables = element.getElements("table"),
+            tables = element.getElements("table:not(.imageplugin)"),
             hints = Object.map({
                 sort: "sort.click",
                 atoz: "sort.ascending",
@@ -594,6 +594,8 @@ Behavior: Scrollable pre area with maximum size (based on BOOTSTRAP)
             .addClass("pre-scrollable")
             .setStyle("maxHeight", maxHeight + "px");
 
+        //FFS : support scollable > table
+
     })
 
 /*
@@ -618,11 +620,12 @@ Behavior: List (based on BOOTSTRAP)
 >   %%list-unstyled-hover-group-nostyle
 
 */
-    .add("[class|=list]", function(element){
+    .add("[class*=list-]", function(element){
 
         var args = "list".sliceArgs(element),
             lists = element.getElements("ul|ol");
 
+        if( !args ) return;
         args.each( function( arg ){
 
             if( arg.test("unstyled|hover|group|nostyle") ){
@@ -745,6 +748,166 @@ CSS:
 
 
 /*
+wiki-slides
+
+*/
+    .once(".page-content.wiki-slides", function(elements){
+
+        var divider = "hr";
+
+        elements
+            .grab(divider.slick(), "top") //add one extra group-start-element at the top
+            .groupChildren("hr", "div.slide");
+
+    })
+
+
+/*
+Behviour:  Background
+    Move image to the background of a page.
+    Also support additional image styles on background images.
+
+Case1 ??:
+div[this is the parent container]
+    img.bg[src=<imageurl>]
+    ...
+    div other content
+    ...
+
+Case2:
+div[this is the parent container]
+    table.imageplugin
+        tr
+            td.bg
+                img[src=<imageurl>]
+    ...
+    div other content
+    ...
+
+Case3:
+div[this is the parent container]
+    div.bg
+        img[src=<imageurl>]
+    ...
+    div other content
+    ...
+
+
+After
+div[this is the parent container]
+    span.background[background-image=<image-url>]
+    div.background-overlay[z-index=2]
+        ...
+        div other content
+        ...
+
+
+%%bg [<image link>] /%
+%bg [{IMAGE src='<image link>' }]/%
+[{IMAGE src='<image link>' class='bg' }]
+
+%%bg-image.bg-fixed [<image link>] /%
+[{IMAGE src='<image link>' class='bg-image bg-fixed' }]
+
+*/
+    .add(".bg > table.imageplugin img, .bg > img", function( image ){
+
+        var bgBox = image.getParent(".bg"),
+            clazz = bgBox.className; //contains possibly other styles to be applied to the
background image
+
+        if( bgBox && bgBox.match("td") ){
+            bgBox = bgBox.getParent("table");
+        }
+
+        if( bgBox ){
+
+            bgBox
+                .addClass("bg")   //need .bg as trigger for groupChildren() !
+                .getParent()      //move up to the containing element
+                .addClass("has-background")
+                .groupChildren(".bg", "div.bg-overlay.clearfix", function(wrapper, bg){
+
+                    //use a extra container span to allow additional effects
+                    //on the background image without impact on the overlay content ...
+                    var element = "span".slick();
+                    element.className = clazz;
+                    element.style.backgroundImage = "url(" + image.src + ")";
+                    element.inject(bg, "before");
+
+            });
+            //bgBox.destroy();   //not realy needed as per default the .bg  element is hidden
+            //bgBox.parentNode.removeChild(bgBox);
+        }
+
+    })
+/*
+
+
+DOM Structure
+
+Case1
+from::
+    div.caption(-arrow)(-overlay).other-class
+        img.inline[src='...']
+        caption-text
+
+to::
+    figure.caption(-arrow)(-overlay).other-class
+        figcaption.other-class
+            caption-text
+        img.inline[src='...']
+
+
+Case2
+from::
+    div.caption(-arrow)(-overlay).other-class
+        table.imageplugin
+            tr
+                td
+                    img[src='...']
+        caption-text
+
+to::
+    div.caption(-arrow)(-overlay)
+        table.imageplugin
+            caption.other-class
+                caption-text
+            tr
+                td
+                    img[src='...']
+
+*/
+    .add("[class^=caption] > .imageplugin", function( imageplugin ){
+
+        var caption = imageplugin.getParent(),
+            oldcaption = imageplugin.getFirst("caption");
+
+        if( !oldcaption ){
+
+            imageplugin.wraps(caption,"top");
+
+            "caption".slick({
+                html: caption.innerHTML,
+                "class": caption.className
+            }).replaces(caption);
+
+        }
+
+    })
+    .add("[class^=caption] > img.inline", function( img ){
+
+        var caption = img.getParent();
+
+        "figure".slick().grab(img).wraps(caption,"top");
+
+        "figcaption".slick({
+            html: caption.innerHTML,
+            "class": caption.className
+        }).replaces(caption);
+
+    })
+
+/*
 Experimental
 svg pie,
 credit: lea verou
@@ -782,4 +945,4 @@ Behavior:Flip, Flop
     .add( "div[class|=flop]", Flip, { prefix: "flop" } );
 
 
-}( Wiki );
+})( Wiki );

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/styles/haddock/default/Columns.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/Columns.less b/jspwiki-war/src/main/styles/haddock/default/Columns.less
index 7cb1c01..b2c17ed 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Columns.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Columns.less
@@ -28,15 +28,57 @@ DOM structure:
 
 */
 .columns {
-    .clearfix;
+    margin: 0;
+    & + :not(.columns) { margin-top: (@line-height-computed / 2); }
+
+    display: flex;
+    //.clearfix;
     //  *width:100%; //ie6,ie7 hack
 
     .col {
         float:left;
-        padding:0 0.5em 0.5em 0;
+        padding: @padding-base-vertical  @padding-base-horizontal;
+
+    }
+    //.col has a calculated width;  make sure img obey the size of their container
+    .col img {
+        max-width:100%;
+    }
+
+    .col > .columns > .col,
+    .col > [class*="bg-"] {
+        margin: -@padding-base-vertical  -@padding-base-horizontal;
+        padding: @padding-base-vertical  @padding-base-horizontal;
+        min-height: 100%;
+        box-sizing: content-box;
+    }
+
+    .col > .default,
+    .col > .info, .col > .information,
+    .col > .success,
+    .col > .warning,
+    .col > .danger, .col > .error {
+        margin:  0  -@padding-base-horizontal ;
+        min-height: 100%;
     }
+
+    &.border .col:not(:last-child){ border-right:1px solid #ccc; }
+
+    &.hover:not([class*="bg-"]) { background-color:inherit; }
+    &.hover .col:hover { background-color: #f5f5f5; }
+
 }
 
+
+.columns.sm > div:nth-child(1),
+.columns.ms > div:nth-child(2) { width:30%  !important; }
+.columns.sm > div:nth-child(2),
+.columns.ms > div:nth-child(1) { width:70%  !important; }
+
+.columns.sms > div { width:25% !important; }
+.columns.sms > div:nth-child(2) { width:50%  !important; }
+
+
 //ie6 and lower hack
 //  * html .columns {  width:100%; }
 //ie7 hack

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less b/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less
index efc71ed..5e98e57 100644
--- a/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less
+++ b/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less
@@ -28,15 +28,81 @@ DOM Structure:
     </table>
     (end)
 */
+
 .imageplugin {
+    border:none;
+    position:relative;
+    break-inside:avoid; /* needed to avoid break in columns */
+    img { border: 0; }
+}
 
-    margin:.5em 0;
+figure {
+  display:table;
+  position: relative;
+  break-inside: avoid;
+}
+figcaption {
+    display: table-caption;
+  //copied from boostrap
+  padding-top: @table-cell-padding;
+  padding-bottom: @table-cell-padding;
+  color: @text-muted;
+  text-align: left;
+}
 
-    img { border: 0; }
-    caption { font-size:90%; }
+figcaption, caption {
+  font-size:90%;
+  line-height:1;
+  caption-side:bottom;
+
+  a {
+    color:inherit;
+    text-decoration:none;
+    //&:after { display:none; }
+    &:hover { color:inherit; }
+  }
+}
+
+figcaption.caption-arrow,
+caption.caption-arrow,
+.caption-arrow caption {
+  position:relative;
+  padding:@alert-padding;
+  background:@white;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03);
+}
+figcaption.caption-arrow:before,
+caption.caption-arrow:before,
+.caption-arrow caption:before {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 20%;
+  z-index:2;
+  transform-origin: 0 0;
+  transform: rotate(135deg);
+  border: .8rem solid @white;
+  border-color: transparent transparent inherit inherit;
+}
 
-    * {
-        padding:0;
-        margin:0;
-    }
-}
\ No newline at end of file
+figcaption.caption-overlay,
+caption.caption-overlay,
+.caption-overlay caption {
+  color: @white;
+  text-shadow: 0 1px 0 #111;
+  text-align:center;
+  position: absolute;
+  font-size: @font-size-h1;
+  line-height: @headings-line-height;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 1;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/styles/haddock/default/Tabs.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/Tabs.less b/jspwiki-war/src/main/styles/haddock/default/Tabs.less
index 86ce8d7..cdb6f06 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Tabs.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Tabs.less
@@ -46,3 +46,7 @@ DOM structure:  ( based on Bootstrap conventions, without [data-toggle=tab]
)
     .tab-pane { .panel-body; } //inherit padding of a panel body
 
 }
+
+[class^=tab-] *:first-child {
+    margin-top:0;
+}

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/styles/haddock/default/build.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/build.less b/jspwiki-war/src/main/styles/haddock/default/build.less
index 90e6b55..d7e2e8d 100755
--- a/jspwiki-war/src/main/styles/haddock/default/build.less
+++ b/jspwiki-war/src/main/styles/haddock/default/build.less
@@ -33,7 +33,7 @@ Stylesheet: JSPWiki
 */
 
 // Core variables and mixins
-@import "../bootstrap/variables.less";
+@import "../bootstrap/variables.less"; 
 @import "../bootstrap/mixins.less";
 
 // Reset

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/styles/haddock/default/tables.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/tables.less b/jspwiki-war/src/main/styles/haddock/default/tables.less
index 9ab28e7..337f176 100644
--- a/jspwiki-war/src/main/styles/haddock/default/tables.less
+++ b/jspwiki-war/src/main/styles/haddock/default/tables.less
@@ -37,9 +37,11 @@ table[border="1"] td { border:0; }
     tr:first-child {
         th, td {
             border-top: 0;
+            vertical-align: top; //fix bootstrap th setting
+
         }
         th {
-            border-bottom: 2px solid @table-border-color;
+            border-bottom: 1px solid @table-border-color;
         }
     }
 

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/aca4ab64/jspwiki-war/src/main/styles/haddock/default/type.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/type.less b/jspwiki-war/src/main/styles/haddock/default/type.less
index ca50c97..c3015bf 100644
--- a/jspwiki-war/src/main/styles/haddock/default/type.less
+++ b/jspwiki-war/src/main/styles/haddock/default/type.less
@@ -136,6 +136,164 @@ dl dd { margin-left: 2em; }   //reset flat style of bootstrap/type
   border-top: 1px solid @hr-border;
 }
 
+//Component: border (eg around columns grid)
+.border {
+    border: 1px solid @btn-default-border;
+}
+.rounded, .rounded > img {
+    border-radius: @border-radius-base;
+}
+.circle, .circle > img {
+    border-radius: 50%;
+}
+
+//Component: raised effect (shadow)  (eg around columns grid)
+.raised, .raised > img {
+    box-shadow: 0 8px 16px rgba(0,20,80,.04), 0 4px 16px rgba(0,0,0,.08);
+}
+
+.light  { filter: opacity(50%); }
+.dark   { filter: brightness(75%); }
+.blur   { filter: blur(3px); overflow:hidden;  }
+.invert { filter: invert(.8); }
+.sepia  { filter: sepia(1); }
+.blend  {mix-blend-mode: multiply;}
+.blend2 {mix-blend-mode: luminosity;}
+.grayscale    { filter: grayscale(1); }
+.saturate-2   { filter: saturate(2); }
+.saturate-8   { filter: saturate(8); }
+.hue-rotate-1 { filter: hue-rotate(90deg); }
+.hue-rotate-2 { filter: hue-rotate(180deg); }
+.hue-rotate-3 { filter: hue-rotate(270deg); }
+.brightness   {filter: brightness(3); }
+.contrast-2   { filter: contrast(2);}
+.contrast-10   { filter: contrast(10);}
+
+.fliph  {transform: scaleX(-1);}
+.flipv  {transform: scaleY(-1);}
+.fliphv {transform: scaleX(-1) scaleY(-1);}
+
+.kenburns {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    background-size:cover;
+}
+.kenburns img { width:100%; }  //occupy all available space of the container
+
+.kenburns img,
+.bg.kenburns { animation: kenburns 120s infinite linear; }
+
+
+@keyframes kenburns {
+    0% {
+        transform: scale(1) rotate(0deg) translate(0, 0);
+    }
+    50% {
+        transform: scale(1.4) rotate(1deg) translate(-15%, 0);
+    }
+    100% {
+        transform: scale(1) rotate(0deg) translate(0, 0);
+    }
+}
+
+
+//Component: re-usable sizing blocks eg  .columns.size-60
+.size-90 { width: 90% !important; }
+.size-80 { width: 80% !important; }
+.size-70 { width: 70% !important; }
+.size-60 { width: 60% !important; }
+.size-50 { width: 50% !important; }
+.size-40 { width: 40% !important; }
+.size-30 { width: 30% !important; }
+.size-20 { width: 20% !important; }
+
+//make sure images obey the size of their container
+.imageplugin td[class*=size-] { display:inline-block; }
+[class*=size-] > img { width:100% !important; }
+
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:@white; }
+span.text-black, div.text-black, .bg.light + .bg-overlay { color:@black; }
+
+.text-white.shadow {
+  text-shadow: 1px 1px 0 rgba(0,0,0,.25), 0 0 1em @white;
+}
+.text-black.shadow {
+  text-shadow: 1px 1px 0 rgba(255,255,255,.25), 0 0 1em @white;
+}
+
+//checkme - should be defined in bootstrap
+[class*=bg-]:not(.columns) {
+    padding: @padding-base-vertical  @padding-base-horizontal;
+    a {  color:inherit; }
+}
+.bg-success { background-color: @state-success-bg; }
+.bg-info    { background-color: @state-info-bg; }
+.bg-warning { background-color: @state-warning-bg; }
+.bg-danger  { background-color: @state-danger-bg; }
+
+.bg-aqua  { background-color: @aqua; color:hsla(197, 100%, 20%, 1.0);}
+.bg-blue  { background-color: @blue; color:hsla(208, 100%, 85%, 1.0);}
+.bg-navy  { background-color: @navy; color:hsla(210, 100%, 75%, 1.0);}
+.bg-teal  { background-color: @teal; }
+.bg-green  { background-color: @green; color:hsla(127, 63%, 15%, 1.0);}
+.bg-olive  { background-color: @olive; color:hsla(153, 43%, 15%, 1.0);}
+.bg-lime   { background-color: @lime; color:hsla(146, 100%, 20%, 1.0);}
+.bg-yellow { background-color: @yellow; color:hsla(52, 100%, 20%, 1.0);}
+.bg-orange { background-color: @orange; color:hsla(28, 100%, 20%, 1.0);}
+.bg-red    { background-color: @red; color:hsla(3, 100%, 25%, 1.0);}
+.bg-fuchsia { background-color: @fuchsia; color:hsla(314, 88%, 21%, 1.0);}
+.bg-purple  { background-color: @purple; color:hsla(292, 88%, 82%, 1.0);}
+.bg-maroon  { background-color: @maroon; color:hsla(331, 74%, 70%, 1.0);}
+.bg-white   { background-color: @white; color: @black; }
+.bg-silver  { background-color: @silver; }
+.bg-gray, .bg-grey  { background-color: @gray; color:@white; }
+.bg-black   { background-color: @black; color:@white; }
+
+/* Background images in jspwiki
+markup
+    %%bg [some image link] /%
+becomes
+    span.background(.fixed|.cover|.contain)(.top|.bottom|.left|.right)
+    div.background-overlay
+        <wrapping all siblings>
+*/
+.bg > img, .bg > img.inline, .bg > .imageplugin img { display:none; }
+
+.has-background {
+    position:relative;
+    overflow:hidden;
+
+    > .bg {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        //background-size: auto auto;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-origin: border-box;
+        //background-image:  this is set by Wiki.Behaviour.js
+
+        &.cover { background-size:cover; }   //default
+        &.contain { background-size:contain; }
+        &.fixed  { background-attachment: fixed; }
+        &.clip-text { background-clip: text; -webkit-background-clip: text; }
+        &.top, &.bottom.flipv { background-position-y: top; }
+        &.bottom, &.top.flipv { background-position-y: bottom; }
+        &.left, &.right.fliph { background-position-x: left; }
+        &.right, &.left.fliph { background-position-x: right; }
+
+    }
+
+    //wrapper block, to content overlayed over the background
+    > .bg-overlay {
+        position:relative;
+        z-index:2;
+    }
+}
+
 
 /*
 PRE and xflow:
@@ -180,9 +338,6 @@ tt {
   border-radius: @border-radius-base;
 }
 
-
-//  => reuse styling of pre
-
 //list-unstyled : bootstrap
 //list-hover
 .list-hover {
@@ -231,7 +386,6 @@ a:hover { cursor:pointer; }
 }
 
 
-//TODO: Overrule standard small red arrow; replace by ...  FIXME
 img.outlink { display:none; }
 a.external:after {
     //.sup;
@@ -323,8 +477,9 @@ Images
 img {
     &.inline { .img-responsive; /*max-width:100%;*/ }
 }
-/* broken images */
 
+
+/* broken images */
 .img-error {
     &::before {
         .icon--all;
@@ -398,9 +553,10 @@ div.dropcaps {
     }
 }
 
-
 //%%quote .. /%
 //.quote is replaced by <blockquote>, to reuse bootstraps styling -- see Wiki.Behaviour.js
+blockquote:last-child { margin-bottom:0; }
+
 //when showing the quote style in a dialog dropdown, use .quote-item -- see Wiki.Snips.js
 .dialog .quote-item {
     border-left: 5px solid @blockquote-border-color;
@@ -424,30 +580,6 @@ div.dropcaps {
 
 }
 
-//checkme - should be defined in bootstrap
-.bg-success { background-color: @state-success-bg; }
-.bg-info    { background-color: @state-info-bg; }
-.bg-warning { background-color: @state-warning-bg; }
-.bg-danger  { background-color: @state-danger-bg; }
-
-.bg-aqua  { background-color: @aqua; }
-.bg-blue  { background-color: @blue; color:@white;}
-.bg-navy  { background-color: @navy; color:@white; }
-.bg-teal  { background-color: @teal; }
-.bg-green  { background-color: @green; color:@white;}
-.bg-olive  { background-color: @olive; color:@white;}
-.bg-lime   { background-color: @lime; }
-.bg-yellow { background-color: @yellow; }
-.bg-orange { background-color: @orange; color:@white; }
-.bg-red    { background-color: @red; color:@white; }
-.bg-fuchsia { background-color: @fuchsia; color:@white; }
-.bg-purple  { background-color: @purple; color:@white;}
-.bg-maroon  { background-color: @maroon;  color:@white; }
-.bg-white   { background-color: @white; color: @black; }
-.bg-silver  { background-color: @silver; }
-.bg-gray, .bg-grey  { background-color: @gray; color:@white; }
-.bg-black   { background-color: @black; color:@white; }
-
 
 .ltr { direction:ltr; }
 .rtl { direction:rtl; }


Mime
View raw message