themes/style/web-2.0.scss

   1 @mixin border-radius($r) {
   2         -webkit-border-radius:$r;
   3         -moz-border-radius:$r;
   4         border-radius:$r;
   5 }
   6
   7 @mixin rotate($deg) {
   8         -webkit-transform:rotate($deg);
   9         -moz-transform:rotate($deg);
  10         -ms-transform:rotate($deg);
  11         -o-transform:rotate($deg);
  12         transform:rotate($deg);
  13 }
  14
  15 @mixin box-shadow($x, $y, $blur, $color) {
  16         -webkit-box-shadow:$x $y $blur $color;
  17         -moz-box-shadow:$x $y $blur $color;
  18         box-shadow:$x $y $blur $color;
  19 }
  20
  21
  22 .deck-container {
  23         font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  24         font-size:1.25em;
  25         background: rgb(244,250,254); /* Old browsers */
  26         background: -moz-linear-gradient(top, rgba(244,250,254,1) 0%, rgba(204,240,240,1) 100%); /* FF3.6+ */
  27         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,250,254,1)), color-stop(100%,rgba(204,240,240,1))); /* Chrome,Safari4+ */
  28         background: -webkit-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Chrome10+,Safari5.1+ */
  29         background: -o-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Opera11.10+ */
  30         background: -ms-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* IE10+ */
  31         background: linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* W3C */
  32         background-attachment: fixed;
  33
  34         > .slide {
  35                 text-shadow:1px 1px 1px rgba(255,255,255,.5);
  36         }
  37
  38         .slide {
  39                 h1, h2, h3, h4, h5, h6 {
  40                         font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  41                 }
  42
  43                 h1 {
  44                         color:#08455f;
  45                 }
  46
  47                 h2 {
  48                         color:#0b7495;
  49                         border-bottom:0;
  50
  51                         .cssreflections & {
  52                                 line-height:1;
  53                                 -webkit-box-reflect:below -0.5555em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), color-stop(0.7, rgba(255,255,255,.1)), to(transparent));
  54                                 -moz-box-reflect:below -0.5555em -moz-linear-gradient(top, transparent 0%, transparent 30%, rgba(255,255,255,.3) 100%);
  55                         }
  56                 }
  57
  58                 h3 {
  59                         color:#000;
  60                 }
  61
  62                 pre {
  63                         border-color:#cde;
  64                         background:#fff;
  65                         position:relative;
  66                         z-index:auto;
  67
  68                         .borderradius & {
  69                                 @include border-radius(5px);
  70                         }
  71
  72                         /* http://nicolasgallagher.com/css-drop-shadows-without-images/ */
  73                         .csstransforms.boxshadow & {
  74                                 > :first-child:before {
  75                                         content:"";
  76                                         position:absolute;
  77                                         z-index:-1;
  78                                         background:#fff;
  79                                         top:0;
  80                                         bottom:0;
  81                                         left:0;
  82                                         right:0;
  83                                 }
  84
  85                                 &:before, &:after {
  86                                         content:"";
  87                                         position:absolute;
  88                                         z-index:-2;
  89                                         bottom:15px;
  90                                         width:50%;
  91                                         height:20%;
  92                                         max-width:300px;
  93                                         @include box-shadow(0, 15px, 10px, rgba(0, 0, 0, 0.7));
  94                                 }
  95
  96                                 &:before {
  97                                         left:10px;
  98                                         @include rotate(-3deg);
  99                                 }
 100
 101                                 &:after {
 102                                         right:10px;
 103                                         @include rotate(3deg);
 104                                 }
 105                         }
 106                 }
 107
 108                 code {
 109                         color:#789;
 110                 }
 111
 112                 blockquote {
 113                         font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
 114                         font-size:2em;
 115                         padding:1em 2em .5em 2em;
 116                         color:#000;
 117                         background:#fff;
 118                         position:relative;
 119                         border:1px solid #cde;
 120                         z-index:auto;
 121
 122                         .borderradius & {
 123                                 @include border-radius(5px);
 124                         }
 125
 126                         .boxshadow & {
 127                                 > :first-child:before {
 128                                         content:"";
 129                                         position:absolute;
 130                                         z-index:-1;
 131                                         background:#fff;
 132                                         top:0;
 133                                         bottom:0;
 134                                         left:0;
 135                                         right:0;
 136                                 }
 137
 138                                 &:after {
 139                                         content:"";
 140                                         position:absolute;
 141                                         z-index:-2;
 142                                         top: 10px;
 143                                         bottom: 10px;
 144                                         left: 0;
 145                                         right: 50%;
 146                                         -moz-border-radius: 10px / 100px;
 147                                         border-radius: 10px / 100px;
 148                                         @include box-shadow(0, 0, 15px, rgba(0,0,0,0.6));
 149                                 }
 150                         }
 151
 152                         p {
 153                                 margin:0;
 154                         }
 155
 156                         cite {
 157                                 font-size:.5em;
 158                                 font-style:normal;
 159                                 font-weight:bold;
 160                                 color:#888;
 161                         }
 162
 163                         &:before {
 164                                 content:"“";
 165                                 position:absolute;
 166                                 top:0;
 167                                 left:0;
 168                                 font-size:5em;
 169                                 line-height:1;
 170                                 color:#ccf0f0;
 171                                 z-index:1;
 172                         }
 173                 }
 174
 175                 ::-moz-selection{ background:#08455f; color:#fff; }
 176                 ::selection { background:#08455f; color:#fff; }
 177
 178                 a {
 179                         &, &:hover, &:focus, &:active, &:visited {
 180                                 color:#599;
 181                                 text-decoration:none;
 182                         }
 183
 184                         &:hover, &:focus {
 185                                 text-decoration:underline;
 186                         }
 187                 }
 188         }
 189
 190         .deck-prev-link, .deck-next-link {
 191                 background:#fff;
 192                 opacity:0.5;
 193
 194                 &, &:hover, &:focus, &:active, &:visited {
 195                         color:#599;
 196                 }
 197
 198                 &:hover, &:focus {
 199                         opacity:1;
 200                         text-decoration:none;
 201                 }
 202         }
 203
 204         .deck-status {
 205                 font-size:0.6666em;
 206         }
 207
 208         &.deck-menu {
 209                 .slide {
 210                         background:transparent;
 211                         @include border-radius(5px);
 212
 213                         .rgba & {
 214                                 background:rgba(0,0,0,.1);
 215                         }
 216
 217                         &.deck-current, .rgba &.deck-current, .no-touch &:hover {
 218                                 background:#fff;
 219                         }
 220                 }
 221         }
 222
 223         .goto-form {
 224                 background:#fff;
 225                 border:1px solid #cde;
 226                 @include border-radius(5px);
 227
 228                 .boxshadow & {
 229                         -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 230                         -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 231                         box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 232                 }
 233         }
 234 }
 235
 236