The Storyboard extension adds a link to a CSS file.
Given the system property concordion.extensions
is set to org.concordion.ext.StoryboardExtension
The HTML output links to the stylesheet file 'storyboard.css':
.screenshot {
position:absolute;
visibility:hidden;
left: 0;
top: 0;
height: auto;
border:solid 1px black;
z-index:3000;
border: none;
box-shadow: 0 1px 4px rgba(0 ,0, 0, 0.4);
}
.storyboard {
padding: 20px;
border: 1px solid #ADADAD;
margin-bottom: 30px;
margin-top: 30px;
background-color: #fdfdfd;
background-color: #f1f1f1;
}
.storyboard > * {
margin-top: 0;
}
.storyboard ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.storycard {
background-color: #fff;
box-shadow: 0 1px 4px rgba(0 ,0, 0, 0.4);
display: inline-block;
height: 186px;
margin-top: 8px;
margin-bottom: 8px;
margin-right: 12px;
overflow: hidden;
padding: 10px 10px 12px;
position: relative;
text-align: center;
width: 210px;
}
.storycard .scimgcontainer {
background-color: #FFFFFF;
border: 1px solid #ccc;
display: block;
height: 136px;
overflow: hidden;
position: relative;
width: 208px;
margin: 0;
margin-bottom: 8px;
}
.storycard .scimgcontainer img {
padding: 0;
margin: 0;
border: none;
}
.storycard .scimgcontainer .sizelandscape {
width: 100%;
height: auto;
}
.storycard .scimgcontainer .sizeportrait {
width: 70%;
height: auto;
}
.storycard .scimgcontainer .sizeheight {
width: auto;
height: 100%;
}
.storycard p {
margin: 0;
text-align: left;
white-space: nowrap;
overflow: hidden;
}
.storycard .scsummary {
font-weight: 500;
}
.storycard .scdescription {
font-size: 13px;
color: #555;
text-overflow: ellipsis;
}
.scsuccess {
color: #1AA51A;
}
.scfailure{
color: #e00;
}
.scwarning{
color: orange;
}
/* Remove button added by FireFox plugin AllowLocalLinks */
.storycard .alien-lfl-href-buttonLink {
display: none;
}
/* SectionContainer */
.toggle-box-container {
margin-top: -1px;
border: 1px solid #ADADAD;
background-color: #fff;
padding-left: 16px;
padding-right: 16px;
}
.toggle-box-content {
margin-bottom: 4px;
}
.toggle-box-content ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.toggle-box {
display: none;
}
.toggle-box:hover{
background-color: #f1f1f1;
}
.toggle-box + label {
cursor: pointer;
display: block;
padding-bottom: 8px;
padding-top: 8px;
line-height: 22px;
font-weight: 500;
padding-left: 16px;
padding-right: 16px;
margin-left: -16px;
margin-right: -16px;
}
.toggle-box + label + div {
display: none;
}
.toggle-box:checked + label + div {
display: block;
}
.toggle-box + label:before {
background-color: #319DD8;
border-radius: 20px;
width: 20px;
height: 20px;
line-height: 18px;
color: white;
content: "+";
display: block;
float: left;
margin-right: 10px;
text-align: center;
}
.toggle-box:checked + label:before {
content: "\2212";
}
/* Expanding Example */
.toggle-separator {
height: 1px;
background: #c3d9ff;
padding: 0;
border: 0;
margin: 5px -16px 0 -16px;
}
.toggle-example-container ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.toggle-example-container {
margin-top: 0;
padding: 0;
margin-bottom: 0;
}
.toggle-example-container + .toggle-example:checked{
border-bottom: 1px solid #ADADAD;
}
.toggle-example-content {
margin-bottom: 4px;
}
.toggle-example {
display: none;
}
.toggle-example:hover{
background-color: #f1f1f1;
}
.toggle-example + label {
cursor: pointer;
display: block;
padding-bottom: 4px;
padding-top: 5px;
line-height: 22px;
font-weight: 500;
padding-left: 16px;
padding-right: 16px;
margin-left: -16px;
margin-right: -16px;
}
.toggle-example + label + div {
display: none;
}
.toggle-example:checked + label + div {
display: block;
}
.toggle-example + label:before {
content: "";
position: relative;
top: 20px;
margin-right: 10px;
padding-top: 10px;
/* CSS Triangle: The four borders of a square element meet at 45� angles so by only colouring one of the borders you end up with a triangle */
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #000;
}
.toggle-example:checked + label:before {
position: relative;
top: -12px;
/* CSS Triangle: The four borders of a square element meet at 45� angles so by only colouring one of the borders you end up with a triangle */
height: 0;
width: 0;
border: 6px solid transparent;
border-bottom-color: #000;
}