github.com/mweagle/Sparta@v1.15.0/docs_source/static/presentations/reveal.js-3.9.2/css/theme/template/theme.scss (about)

     1  // Base theme template for reveal.js
     2  
     3  /*********************************************
     4   * GLOBAL STYLES
     5   *********************************************/
     6  
     7  body {
     8  	@include bodyBackground();
     9  	background-color: $backgroundColor;
    10  }
    11  
    12  .reveal {
    13  	font-family: $mainFont;
    14  	font-size: $mainFontSize;
    15  	font-weight: normal;
    16  	color: $mainColor;
    17  }
    18  
    19  ::selection {
    20  	color: $selectionColor;
    21  	background: $selectionBackgroundColor;
    22  	text-shadow: none;
    23  }
    24  
    25  ::-moz-selection {
    26  	color: $selectionColor;
    27  	background: $selectionBackgroundColor;
    28  	text-shadow: none;
    29  }
    30  
    31  .reveal .slides section,
    32  .reveal .slides section>section {
    33  	line-height: 1.3;
    34  	font-weight: inherit;
    35  }
    36  
    37  /*********************************************
    38   * HEADERS
    39   *********************************************/
    40  
    41  .reveal h1,
    42  .reveal h2,
    43  .reveal h3,
    44  .reveal h4,
    45  .reveal h5,
    46  .reveal h6 {
    47  	margin: $headingMargin;
    48  	color: $headingColor;
    49  
    50  	font-family: $headingFont;
    51  	font-weight: $headingFontWeight;
    52  	line-height: $headingLineHeight;
    53  	letter-spacing: $headingLetterSpacing;
    54  
    55  	text-transform: $headingTextTransform;
    56  	text-shadow: $headingTextShadow;
    57  
    58  	word-wrap: break-word;
    59  }
    60  
    61  .reveal h1 {font-size: $heading1Size; }
    62  .reveal h2 {font-size: $heading2Size; }
    63  .reveal h3 {font-size: $heading3Size; }
    64  .reveal h4 {font-size: $heading4Size; }
    65  
    66  .reveal h1 {
    67  	text-shadow: $heading1TextShadow;
    68  }
    69  
    70  
    71  /*********************************************
    72   * OTHER
    73   *********************************************/
    74  
    75  .reveal p {
    76  	margin: $blockMargin 0;
    77  	line-height: 1.3;
    78  }
    79  
    80  /* Ensure certain elements are never larger than the slide itself */
    81  .reveal img,
    82  .reveal video,
    83  .reveal iframe {
    84  	max-width: 95%;
    85  	max-height: 95%;
    86  }
    87  .reveal strong,
    88  .reveal b {
    89  	font-weight: bold;
    90  }
    91  
    92  .reveal em {
    93  	font-style: italic;
    94  }
    95  
    96  .reveal ol,
    97  .reveal dl,
    98  .reveal ul {
    99  	display: inline-block;
   100  
   101  	text-align: left;
   102  	margin: 0 0 0 1em;
   103  }
   104  
   105  .reveal ol {
   106  	list-style-type: decimal;
   107  }
   108  
   109  .reveal ul {
   110  	list-style-type: disc;
   111  }
   112  
   113  .reveal ul ul {
   114  	list-style-type: square;
   115  }
   116  
   117  .reveal ul ul ul {
   118  	list-style-type: circle;
   119  }
   120  
   121  .reveal ul ul,
   122  .reveal ul ol,
   123  .reveal ol ol,
   124  .reveal ol ul {
   125  	display: block;
   126  	margin-left: 40px;
   127  }
   128  
   129  .reveal dt {
   130  	font-weight: bold;
   131  }
   132  
   133  .reveal dd {
   134  	margin-left: 40px;
   135  }
   136  
   137  .reveal blockquote {
   138  	display: block;
   139  	position: relative;
   140  	width: 70%;
   141  	margin: $blockMargin auto;
   142  	padding: 5px;
   143  
   144  	font-style: italic;
   145  	background: rgba(255, 255, 255, 0.05);
   146  	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
   147  }
   148  	.reveal blockquote p:first-child,
   149  	.reveal blockquote p:last-child {
   150  		display: inline-block;
   151  	}
   152  
   153  .reveal q {
   154  	font-style: italic;
   155  }
   156  
   157  .reveal pre {
   158  	display: block;
   159  	position: relative;
   160  	width: 90%;
   161  	margin: $blockMargin auto;
   162  
   163  	text-align: left;
   164  	font-size: 0.55em;
   165  	font-family: $codeFont;
   166  	line-height: 1.2em;
   167  
   168  	word-wrap: break-word;
   169  
   170  	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
   171  }
   172  
   173  .reveal code {
   174  	font-family: $codeFont;
   175  	text-transform: none;
   176  }
   177  
   178  .reveal pre code {
   179  	display: block;
   180  	padding: 5px;
   181  	overflow: auto;
   182  	max-height: 400px;
   183  	word-wrap: normal;
   184  }
   185  
   186  .reveal table {
   187  	margin: auto;
   188  	border-collapse: collapse;
   189  	border-spacing: 0;
   190  }
   191  
   192  .reveal table th {
   193  	font-weight: bold;
   194  }
   195  
   196  .reveal table th,
   197  .reveal table td {
   198  	text-align: left;
   199  	padding: 0.2em 0.5em 0.2em 0.5em;
   200  	border-bottom: 1px solid;
   201  }
   202  
   203  .reveal table th[align="center"],
   204  .reveal table td[align="center"] {
   205  	text-align: center;
   206  }
   207  
   208  .reveal table th[align="right"],
   209  .reveal table td[align="right"] {
   210  	text-align: right;
   211  }
   212  
   213  .reveal table tbody tr:last-child th,
   214  .reveal table tbody tr:last-child td {
   215  	border-bottom: none;
   216  }
   217  
   218  .reveal sup {
   219  	vertical-align: super;
   220  	font-size: smaller;
   221  }
   222  .reveal sub {
   223  	vertical-align: sub;
   224  	font-size: smaller;
   225  }
   226  
   227  .reveal small {
   228  	display: inline-block;
   229  	font-size: 0.6em;
   230  	line-height: 1.2em;
   231  	vertical-align: top;
   232  }
   233  
   234  .reveal small * {
   235  	vertical-align: top;
   236  }
   237  
   238  
   239  /*********************************************
   240   * LINKS
   241   *********************************************/
   242  
   243  .reveal a {
   244  	color: $linkColor;
   245  	text-decoration: none;
   246  
   247  	-webkit-transition: color .15s ease;
   248  	   -moz-transition: color .15s ease;
   249  	        transition: color .15s ease;
   250  }
   251  	.reveal a:hover {
   252  		color: $linkColorHover;
   253  
   254  		text-shadow: none;
   255  		border: none;
   256  	}
   257  
   258  .reveal .roll span:after {
   259  	color: #fff;
   260  	background: darken( $linkColor, 15% );
   261  }
   262  
   263  
   264  /*********************************************
   265   * IMAGES
   266   *********************************************/
   267  
   268  .reveal section img {
   269  	margin: 15px 0px;
   270  	background: rgba(255,255,255,0.12);
   271  	border: 4px solid $mainColor;
   272  
   273  	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
   274  }
   275  
   276  	.reveal section img.plain {
   277  		border: 0;
   278  		box-shadow: none;
   279  	}
   280  
   281  	.reveal a img {
   282  		-webkit-transition: all .15s linear;
   283  		   -moz-transition: all .15s linear;
   284  		        transition: all .15s linear;
   285  	}
   286  
   287  	.reveal a:hover img {
   288  		background: rgba(255,255,255,0.2);
   289  		border-color: $linkColor;
   290  
   291  		box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
   292  	}
   293  
   294  
   295  /*********************************************
   296   * NAVIGATION CONTROLS
   297   *********************************************/
   298  
   299  .reveal .controls {
   300  	color: $linkColor;
   301  }
   302  
   303  
   304  /*********************************************
   305   * PROGRESS BAR
   306   *********************************************/
   307  
   308  .reveal .progress {
   309  	background: rgba(0,0,0,0.2);
   310  	color: $linkColor;
   311  }
   312  	.reveal .progress span {
   313  		-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   314  		   -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   315  			transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   316  	}
   317  
   318  /*********************************************
   319   * PRINT BACKGROUND
   320   *********************************************/
   321   @media print {
   322      .backgrounds {
   323          background-color: $backgroundColor;
   324      }
   325  }