lib/resources/revealjs/css/theme/conference-redhat.css in hyla-1.0.6 vs lib/resources/revealjs/css/theme/conference-redhat.css in hyla-1.0.7.pre.1
- old
+ new
@@ -1,39 +1,111 @@
-/********************************************
- * FONTS
+/*********************************************
+ *
+ * RedHat Conference Theme customized from GPE & RevealJS
+ *
*********************************************/
+
+/*********************************************
+ * LIBERATION FONTS
+ *********************************************/
@font-face {
font-family: 'liberation';
- src: url(../../lib/font/liberation_sans-regular.ttf) format('truetype');
+ src: url("../../lib/font/liberation_sans-regular.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
-/**
- * RedHat GPE Conference theme
- */
+@font-face {
+ font-family: 'liberation';
+ src: url("../../lib/font/liberation_sans-bold.ttf") format('truetype');
+ font-weight: bold;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'liberation';
+ src: url("../../lib/font/liberation_sans-bolditalic.ttf") format('truetype');
+ font-weight: bold;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: 'liberation';
+ src: url("../../lib/font/liberation_sans-italic.ttf") format('truetype');
+ font-weight: normal;
+ font-style: italic;
+}
+
/*********************************************
- * GLOBAL STYLES
+ * ScrollBar
+ * Feb 24, ART: Changed the height of the scrollbar from 450 600
+ * Feb 24, ART: Changed the padding from 10 20 20 20 to 5 10 10 10
+ * Feb 24, ART: Changed the margin from 20px 0 0 to 5px 0 0
*********************************************/
+.scrollbar {
+ border: 1px solid #eee;
+ height: 600px;
+ overflow: scroll;
+ margin: 5px 0 0;
+ padding: 5px 10px 10px 10px;
+}
+
+/*********************************************
+ * Corporate Logo Header Image
+ * Feb 26, CHM: Changed the height from 80px to 0px
+ *********************************************/
+.header {
+ position: absolute;
+ margin: 0 auto;
+ left: 0;
+ right: 0;
+ top: 0;
+ height: 0px;
+ font-family: 'liberation';
+ font-size: 20px;
+ text-align: center;
+}
+
+/*********************************************
+ * Copyright Footer
+ * Feb 24, ART: Changed to footer height from 80 to 40
+ *********************************************/
+.footer {
+ position: absolute;
+ margin: 0 auto;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 40px;
+ font-family: 'liberation';
+ font-size: 20px;
+ text-align: center;
+}
+
+/*********************************************
+ * GLOBAL STYLES
+ * Feb 24, ART: added a border to the body, attempting to see how the margin is being used.
+ * Feb 24, ART: added a border to the reveal section, attempting to see how the margin is being used.
+ * Feb 26, CHM : Reduce font-size from 32px to 30px
+ *********************************************/
body {
background: white;
background-color: white;
}
.reveal {
font-family: 'liberation';
- font-size: 32px;
+ font-size: 28px;
font-weight: normal;
letter-spacing: -0.02em;
/* Color used within paragraphs - text */
color: #4E4E4E;
}
-/*.reveal .slides {
+.reveal .slides {
margin-top: 80px;
-}*/
+}
.reveal section {
text-align: left;
}
@@ -61,14 +133,10 @@
text-transform: none;
text-shadow: none;
text-align: left;
}
-/*.reveal h1 {
- text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-}*/
-
.reveal h2 {
font-size: 2em;
}
/*********************************************
@@ -167,27 +235,25 @@
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: darkblue; }
-/***********************************************
- * Modified for RedHat Style
- ***********************************************/
-
/*********************************************
* ScrollBar
+ * Feb 26, CHM : Increase height from 450 to 480px
*********************************************/
.scrollbar {
border: 1px solid #eee;
- height: 450px;
+ height: 480px;
overflow: scroll;
margin: 20px 0 0;
padding: 10px 20px 20px 20px;
}
/*********************************************
* Corporate Logo Header Image
+ * Feb 26, CHM : Changed text-align right to center
*********************************************/
.header {
position: absolute;
margin: 0 auto;
left: 0;
@@ -197,62 +263,155 @@
font-family: 'liberation';
font-size: 20px;
text-align: right;
}
+/*********************************************
+ * Copyright Footer
+ *********************************************/
+.footer {
+ position: absolute;
+ margin: 0 auto;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 50px;
+ font-family: 'liberation';
+ font-size: 15px;
+ color: #aeb3b6;
+ text-align: center;
+}
+
+/******************************************
+ * Fill screen to 100% & align text on left
+ * Feb 26, CHM : Changed top: to 350px otherwise the text is mixed with header image
+ ******************************************/
.reveal .slides {
text-align: left;
+ top: 350px;
}
-table thead th, table tfoot th { font-weight: bold; }
-/*
-table.tableblock.grid-all { border-collapse: separate; border-spacing: 1px; -webkit-border-radius: 4px; border-radius: 4px; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; }
-*/
-table.tableblock.frame-topbot, table.tableblock.frame-none { border-left: 0; border-right: 0; }
-table.tableblock.frame-sides, table.tableblock.frame-none { border-top: 0; border-bottom: 0; }
-table.tableblock td .paragraph:last-child p > p:last-child, table.tableblock th > p:last-child, table.tableblock td > p:last-child { margin-bottom: 0; }
-th.tableblock.halign-left, td.tableblock.halign-left { text-align: left; }
-th.tableblock.halign-right, td.tableblock.halign-right { text-align: right; }
-th.tableblock.halign-center, td.tableblock.halign-center { text-align: center; }
-th.tableblock.valign-top, td.tableblock.valign-top { vertical-align: top; }
-th.tableblock.valign-bottom, td.tableblock.valign-bottom { vertical-align: bottom; }
-th.tableblock.valign-middle, td.tableblock.valign-middle { vertical-align: middle; }
+/*******************************************************
+ * Asciidoctor Table style rendering
+ * Feb 27, CHM: Added & Refactor to display the borders
+ * Mar 02, CHM: Add caption to display the Table title with a different style, color
+ * Mar 03, CHM: Improve style to be compliant with Redhat styles
+ ******************************************************/
+table.tableblock, table.tableblock td {
+ border-style: solid;
+ border-color: rgb(183, 188, 190);
+ border-width: 0.99px;
+ border-collapse: collapse;
+ border-spacing: 0px;
+ padding: 5px;
+}
-/*
- Used for <strong>text</strong> enclosed in <li> tag
- & color
-*/
+table.tableblock > caption {
+ line-height: 1.4;
+ color: #333333;
+ margin-top: 0.2em;
+ margin-bottom: 0.5em;
+ overflow: visible;
+ max-width: 0;
+ white-space: nowrap;
+ display: table-caption
+}
+
+table.tableblock tr:first-child td {
+ background-color: #a70000;
+ text-align: left;
+ padding: 10px;
+ color: white;
+ font-size: 24px;
+}
+
+table.tableblock tr:nth-child(even) {
+ background: white;
+}
+
+table.tableblock tr:nth-child(odd) {
+ background: rgb(238, 238, 238);
+}
+
+th.tableblock.halign-left, td.tableblock.halign-left {
+ text-align: left;
+}
+
+th.tableblock.halign-right, td.tableblock.halign-right {
+ text-align: right;
+}
+
+th.tableblock.halign-center, td.tableblock.halign-center {
+ text-align: center;
+}
+
+th.tableblock.valign-top, td.tableblock.valign-top {
+ vertical-align: top;
+}
+
+th.tableblock.valign-bottom, td.tableblock.valign-bottom {
+ vertical-align: bottom;
+}
+
+th.tableblock.valign-middle, td.tableblock.valign-middle {
+ vertical-align: middle;
+}
+
+/**************************************************************
+ * By default, it is not possible to display text in Bold or within <li>> tag
+ * Here is a trick to support that <strong>text</strong> enclosed in <li> tag & color
+ **************************************************************/
li strong {
/* color: #268bd2;*/
color: #C1100C;
font-weight: bold;
}
-/*
- Trick to avoid to define [square] or [circle] for each item of an unordered list
- and solve issue that we have here as we have nested lists
-*/
-ul li {list-style-type:square;}
-ul li li {list-style-type:disc;}
-ul li li li {list-style-type:circle;}
+/*********************************************************************************
+ * Trick to avoid to define [square] or [circle] for each item of an unordered list
+ * and solve issue that we have here as we have nested lists
+ * Feb 27, CHM : Added
+ * Mar 04 2015, CHM: Add red colors & square, disc & circle
+ *********************************************************************************/
+.reveal ul li p, ul li li p, ul li li p {
+ color: black;
+ list-style:none;
+}
-/*
- * .reveal i must be overrided to let to use Font Awesome
- */
+.reveal ul li {
+ list-style-type: square;
+ color: #a70000;
+}
+
+.reveal ul li li {
+ list-style-type: disc;
+ color: #a70000;
+}
+
+.reveal ul li li li {
+ list-style-type: circle;
+ color: #a70000;
+}
+
+/*******************************************************************
+ * .reveal i must be override in order to be able to use Asciidoctor and
+ * Font Awesome icons for NOTE, WARNING, REMARK, ....
+ *******************************************************************/
.reveal i.fa {
font-family: 'FontAwesome';
font-style: normal;
font-size: 100%;
}
/*********************************************
- * Callout
+ * Support asciidoctor callout
*********************************************/
.reveal i.conum {
display: inline-block;
color: white !important;
- background-color: #222222;
+ /* background-color: #222222;*/
+ background-color: #c50000;
-webkit-border-radius: 100px;
border-radius: 100px;
text-align: center;
width: 25px; height: 25px; font-size: 14px;
font-weight: bold;
@@ -263,16 +422,33 @@
.reveal i.conum * { color: white !important; }
.reveal i.conum + b { display: none; }
.reveal i.conum:after { content: attr(data-value); }
.reveal i.conum:not([data-value]):empty { display: none; }
-
+/****************************************************
+ * Increase size of a paragraph block
+ * Improve content readability
+ * Feb 26, CHM : Remove white color
+ ****************************************************/
.paragraph p {
display:block;
line-height: 1.3;
}
+/*****************************************************
+ * Cover page
+ * Feb 26, CHM : Display text of the speaker-page in white
+ *****************************************************/
+.paragraph {
+ color: #ffffff;
+ text-align: left;
+}
+
+/****************************************************
+ * Include a new line when the slide contains &nbps;
+ * Improve content readability
+ ****************************************************/
.newline:before {
content: '\A';
white-space:pre;
}
@@ -290,24 +466,156 @@
font-size: 15px;
color: #aeb3b6;
text-align: center;
}
-/*
- First Page - Background Red
- Title H2 Strong - white
- Paragraph class - white
- */
+/**************************************************************
+ * First Page - Background Red
+ * Title H2 Strong - white
+ * Paragraph class - white
+ **************************************************************/
.reveal h2 strong {
color: #ffffff;
}
-.paragraph {
- color: #ffffff;
+/**************************************************************
+ * Override Revealjs Pre class
+ * Mar 04 2015, CHM : Change width from 90% to 100% and margin to reduce size of the box hightlighted
+ *************************************************************/
+.reveal pre {
+ width: 100%;
}
+.listingblock .content {
+ margin-right: 50px;
+ padding-right: 50px;
+}
+/**************************************************************
+ * Style used to display the cover picture full screen
+ * Add this tag [.cover] before the picture of the cover page
+ **************************************************************/
.cover {
- position:absolute;
- top:150px;
- left:10px;
- right:10px;
+ position: absolute;
+ top: 150px;
+ text-align: center;
+}
+
+/**************************************************************
+ * Admonition Asciidoctor
+ *
+ * Mar 03, CHM: Added
+ **************************************************************/
+.admonitionblock td.content > .title, .exampleblock > .title, .imageblock > .title, .listingblock > .title, .literalblock > .title, .mathblock > .title, .openblock > .title, .paragraph > .title, .quoteblock > .title, .sidebarblock > .title, .tableblock > .title, .verseblock > .title, .videoblock > .title, .dlist > .title, .olist > .title, .ulist > .title, .qlist > .title, .hdlist > .title {
+ text-align: left;
+ font-weight: bold;
+}
+
+.admonitionblock > table {
+ border: 0;
+ background: none;
+ width: 100%;
+ padding: 5px 0px;
+}
+
+.admonitionblock > table td.icon {
+ text-align: center;
+ width: 80px;
+}
+
+.admonitionblock > table td.icon img {
+ max-width: none;
+}
+
+.admonitionblock > table td.icon .title {
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+.admonitionblock > table td.content {
+ padding-left: 1.125em;
+ padding-right: 1.25em;
+ border-left: 1px solid #dddddd;
+ color: #6f6f6f;
+ font-size: 20px;
+ font-style: normal;
+}
+
+.admonitionblock > table td.content > :last-child > :last-child {
+ margin-bottom: 0;
+}
+
+.admonitionblock td.icon [class^="icon-"]:before {
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+ cursor: default;
+}
+
+.admonitionblock td.icon .icon-note:before {
+ content: "\f05a";
+ color: #005498;
+ color: #003f72;
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ text-decoration: inherit;
+ font-size: 46px;
+ padding-right: 0.5em;
+ position: relative;
+ top: 10px;
+ left: 0;
+}
+
+.admonitionblock td.icon .icon-tip:before {
+ content: "\f0eb";
+ font-family: FontAwesome;
+ text-shadow: 1px 1px 2px rgba(155, 155, 0, 0.8);
+ color: #111;
+ font-style: normal;
+ font-weight: normal;
+ text-decoration: inherit;
+ font-size: 46px;
+ padding-right: 0.5em;
+ position: relative;
+ top: 10px;
+ left: 0;
+}
+
+.admonitionblock td.icon .icon-warning:before {
+ content: "\f071";
+ color: #bf6900;
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ text-decoration: inherit;
+ font-size: 46px;
+ padding-right: 0.5em;
+ position: relative;
+ top: 10px;
+ left: 0;
+}
+
+.admonitionblock td.icon .icon-caution:before {
+ content: "\f06d";
+ color: #bf3400;
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ text-decoration: inherit;
+ font-size: 46px;
+ padding-right: 0.5em;
+ position: relative;
+ top: 10px;
+ left: 0;
+}
+
+.admonitionblock td.icon .icon-important:before {
+ content: "\f06a";
+ font-family: FontAwesome;
+ color: #bf0000;
+ font-style: normal;
+ font-weight: normal;
+ text-decoration: inherit;
+ font-size: 46px;
+ padding-right: 0.5em;
+ position: relative;
+ top: 10px;
+ left: 0;
}
\ No newline at end of file