Return-Path: X-Original-To: archive-asf-public-internal@cust-asf2.ponee.io Delivered-To: archive-asf-public-internal@cust-asf2.ponee.io Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183]) by cust-asf2.ponee.io (Postfix) with ESMTP id 3A7FD200C35 for ; Sun, 12 Mar 2017 16:24:01 +0100 (CET) Received: by cust-asf.ponee.io (Postfix) id 39035160B63; Sun, 12 Mar 2017 15:24:01 +0000 (UTC) Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by cust-asf.ponee.io (Postfix) with SMTP id D83EF160B87 for ; Sun, 12 Mar 2017 16:23:59 +0100 (CET) Received: (qmail 48005 invoked by uid 500); 12 Mar 2017 15:23:59 -0000 Mailing-List: contact commits-help@jspwiki.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@jspwiki.apache.org Delivered-To: mailing list commits@jspwiki.apache.org Received: (qmail 47961 invoked by uid 99); 12 Mar 2017 15:23:59 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Sun, 12 Mar 2017 15:23:59 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id DA91CDFF66; Sun, 12 Mar 2017 15:23:58 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: brushed@apache.org To: commits@jspwiki.apache.org Date: Sun, 12 Mar 2017 15:24:00 -0000 Message-Id: In-Reply-To: References: X-Mailer: ASF-Git Admin Mailer Subject: [3/3] jspwiki git commit: Haddock Template: image styles, background styles, %%columns archived-at: Sun, 12 Mar 2017 15:24:01 -0000 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 Authored: Sun Mar 12 16:23:49 2017 +0100 Committer: brushed 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 { *

* 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{!!!}": "H1", - "\n{!!}": "H2", - "\n{!}": "H3", + "\n{!!!}": "H1", + "\n{!!}": "H2", + "\n{!}": "H3", "\n* {list item}": "", "\n# {list-item}": "", "divider-sol": "" @@ -525,20 +525,20 @@ Wiki.Snips = { "{{{monospaced}}} ": "</>", "{{{{code}}}}": "code", "divider1": "", - "[{link}]": "", + "[{link}]": "", //"[description|{link}|options]": "", - "[{Image src='{image.jpg}'}]": "", - "[{{plugin}}]": "", - "%%style {body} /%":"%%", + "[{Image src='{image.jpg}'}]": "", + "[{{plugin}}]": "", + "%%style {body} /%":"%%", "divider2": "", - "%%(font-family:{font};) body /%":"Aa", - "&{entity};" : "&", + "%%(font-family:{font};) body /%":"Aa", + "&{entity};" : "&", //"%%sub {subscript}/% ": "an", //"%%sup {superscript}/% ": "am", //"%%strike {strikethrough}/% ":"S", //"divider3": "", - "[{ALLOW {permission} principal }]":"", - "\\\\\n":"" + "[{ALLOW {permission} principal }]":"", + "\\\\\n":"" }); 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=] + ... + div other content + ... + +Case2: +div[this is the parent container] + table.imageplugin + tr + td.bg + img[src=] + ... + div other content + ... + +Case3: +div[this is the parent container] + div.bg + img[src=] + ... + div other content + ... + + +After +div[this is the parent container] + span.background[background-image=] + div.background-overlay[z-index=2] + ... + div other content + ... + + +%%bg [] /% +%bg [{IMAGE src='' }]/% +[{IMAGE src='' class='bg' }] + +%%bg-image.bg-fixed [] /% +[{IMAGE src='' 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: (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 + +*/ +.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

, 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; }