You are here

Home » API reference » Coffee 8

coffee.css in Coffee 8

Same filename and directory in other branches
  1. 7.2 css/coffee.css
  2. 7 css/coffee.css

Stylesheet for the Coffee module.

File

css/coffee.css
View source 
  1. /**

  2.  * @file

  3.  * Stylesheet for the Coffee module.

  4.  */

  5. [id^="coffee"] {

  6.   -webkit-box-sizing: border-box;

  7.   -moz-box-sizing: border-box;

  8.   box-sizing: border-box;

  9. }

  10. 

  11. #coffee-bg {

  12.   position: fixed;

  13.   left: 0;

  14.   top: 0;

  15.   width: 100%;

  16.   height: 100%;

  17.   z-index: 999;

  18. }

  19. 

  20. .coffee-form-wrapper {

  21.   pointer-events: none;

  22.   left: 0;

  23.   width: 100%;

  24.   position: fixed;

  25.   top: 20%;

  26.   z-index: 9999;

  27. }

  28. #coffee-form {

  29.   pointer-events: auto;

  30.   position: relative;

  31.   margin: 0 auto;

  32.   max-width: 500px;

  33.   width: 100%;

  34.   padding: 10px;

  35.   font: 16px/1.5 sans-serif;

  36.   background: black;

  37.   background: rgba(0, 0, 0, 0.4);

  38.   border-radius: 15px;

  39.   opacity: 1;

  40.   -webkit-transition: opacity 0.35s;

  41.   -moz-transition: opacity 0.35s;

  42.   -o-transition: opacity 0.35s;

  43.   transition: opacity 0.35s false;

  44. }

  45. 

  46. #coffee-form,

  47. #coffee-form input,

  48. #coffee-form a {

  49.   -webkit-box-sizing: border-box;

  50.   -moz-box-sizing: border-box;

  51.   box-sizing: border-box;

  52. }

  53. 

  54. .coffee-form-wrapper.hide-form {

  55.   position: absolute;

  56.   top: -100%;

  57.   opacity: 0;

  58. }

  59. 

  60. #coffee-form-inner {

  61.   background: #fff;

  62.   color: #444;

  63.   padding: 10px 10px 1px;

  64.   border-radius: 5px;

  65.   -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

  66.   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

  67. }

  68. 

  69. #coffee-q {

  70.   background: #d1d1d1;

  71.   color: #000;

  72.   border: 0;

  73.   font: 36px sans-serif;

  74.   line-height: 52px;

  75.   padding: 5px 10px;

  76.   width: 100%;

  77.   height: 52px;

  78.   outline: none;

  79.   display: block;

  80.   margin: 0 0 10px;

  81.   border-radius: 0;

  82. }

  83. 

  84. #coffee-q:focus {

  85.   -webkit-box-shadow: none;

  86.   box-shadow: none;

  87. }

  88. 

  89. #coffee-results ul {

  90.   position: static;

  91.   float: none;

  92.   list-style: none;

  93.   margin: 0;

  94.   padding: 10px 0 0;

  95.   border: 0;

  96. }

  97. 

  98. #coffee-results li {

  99.   margin: 0;

  100.   padding: 0;

  101.   float: none;

  102.   clear: none;

  103.   width: auto;

  104. }

  105. 

  106. #coffee-results a {

  107.   display: block;

  108.   border: 0;

  109.   outline: none;

  110.   color: #444;

  111.   padding: 6px 10px 4px;

  112.   line-height: normal;

  113.   font-size: 16px;

  114.   text-decoration: none;

  115.   height: auto;

  116.   -webkit-transition: none;

  117.   -moz-transition: none;

  118.   -o-transition: none;

  119.   transition: none;

  120.   border-radius: 0;

  121. }

  122. 

  123. #coffee-results .ui-widget-content .ui-state-active,

  124. #coffee-results a.ui-state-hover,

  125. #coffee-results a:focus,

  126. #coffee-results a:hover,

  127. #coffee-results .ui-state-active {

  128.   background: #d1d1d1;

  129.   color: #000;

  130.   margin: 0;

  131.   cursor: pointer;

  132. }

  133. 

  134. #coffee-results .description {

  135.   display: block;

  136.   font-size: 11px;

  137.   color: #888;

  138. }

  139. 

  140. #coffee-results a.ui-state-hover .description {

  141.   color: #666;

  142. }

  143. 

  144. #coffee-results .ui-widget {

  145.   font-family: sans-serif;

  146. }

  147. 

  148. .toolbar .toolbar-bar .toolbar-icon-coffee:before,

  149. .toolbar .toolbar-bar .toolbar-icon-coffee.active:before {

  150.   background-image: url("../images/icons/bebebe/coffee.svg");

  151. }

  152. 

  153. #coffee-q {

  154.   background-image: url("../images/icons/bebebe/coffee.svg");

  155.   background-position: right 10px center;

  156.   background-repeat: no-repeat;

  157.   background-size: 40px 40px;

  158. }

  159. 

  160. [dir="rtl"] #coffee-q {

  161.   background-position: left 20px center;

  162. }