You are here

Home » API reference » Responsive Theme Preview 8

responsive-preview.theme.css in Responsive Theme Preview 8

Same filename and directory in other branches
  1. 7 css/responsive-preview.theme.css

Styling for responsive preview.

File

css/responsive-preview.theme.css
View source 
  1. /**

  2.  * @file

  3.  * Styling for responsive preview.

  4.  */

  5. 

  6. /**

  7.  * Toolbar tab.

  8.  */

  9. .toolbar-tab-responsive-preview .responsive-preview-options {

  10.   background-color: white;

  11.   padding-top: 0.5em;

  12.   padding-bottom: 0.5em;

  13. }

  14. 

  15. /* Device preview options. */

  16. .toolbar-tab-responsive-preview .responsive-preview-options {

  17.   box-shadow: 0 0.8em 2.5em -0.8em rgba(0, 0, 0, 0.75);

  18. }

  19. 

  20. /* [dir] is needed to override Bartik's .item-list li padding */

  21. [dir] .toolbar-tab-responsive-preview .responsive-preview-options li {

  22.   margin: 0;

  23.   padding: 0;

  24. }

  25. 

  26. .toolbar-tab-responsive-preview .responsive-preview-trigger {

  27.   cursor: pointer;

  28.   line-height: 1;

  29.   height: 3em;

  30. }

  31. 

  32. .toolbar-tab-responsive-preview .responsive-preview-trigger:hover {

  33.   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);

  34.   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);

  35.   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);

  36. }

  37. 

  38. .toolbar-tab-responsive-preview .responsive-preview-trigger.active,

  39. .toolbar-tab-responsive-preview .responsive-preview-trigger.active:hover {

  40.   background-image: -webkit-linear-gradient(top, rgb(78, 159, 234) 0%, rgb(69, 132, 221) 100%);

  41.   background-image: -moz-linear-gradient(rgb(78, 159, 234) 0%, rgb(69, 132, 221) 100%);

  42.   background-image: linear-gradient(rgb(78, 159, 234) 0%, rgb(69, 132, 221) 100%);

  43. }

  44. 

  45. .toolbar-tab-responsive-preview .responsive-preview-trigger,

  46. .toolbar-tab-responsive-preview .responsive-preview-options .responsive-preview-device {

  47.   padding-bottom: 1em;

  48.   padding-top: 1em;

  49. }

  50. 

  51. .toolbar-tab-responsive-preview .responsive-preview-options .responsive-preview-device {

  52.   background: none;

  53.   border: none;

  54.   cursor: pointer;

  55.   font-family: inherit;

  56.   font-size: 1em;

  57.   padding: 0.5em 1.3333em;

  58. }

  59. 

  60. .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device {

  61.   color: #0074bd;

  62.   text-align: left;

  63. }

  64. 

  65. .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device:hover,

  66. .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.active {

  67.   color: black;

  68. }

  69. 

  70. .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device[disabled] {

  71.   color: #ccc;

  72.   cursor: default;

  73. }

  74. 

  75. /* Configuration link. */

  76. .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-configure {

  77.   color: #777;

  78.   margin-top: 0.5em;

  79.   padding: 0.5em 0.6667em;

  80. }

  81. 

  82. .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-configure:hover {

  83.   color: #000;

  84. }

  85. 

  86. /* Toolbar tab triangle toggle. */

  87. .toolbar-tab-responsive-preview .responsive-preview-trigger:after {

  88.   border-bottom-color: transparent;

  89.   border-left-color: transparent;

  90.   border-right-color: transparent;

  91.   border-style: solid;

  92.   border-width: 0.4545em 0.4em 0;

  93.   color: #a0a0a0;

  94.   content: ' ';

  95.   display: block;

  96.   height: 0;

  97.   line-height: 0;

  98.   overflow: hidden;

  99.   position: absolute;

  100.   right: 1.6667em; /* LTR */

  101.   top: 50%;

  102.   margin-top: -0.1666em;

  103.   width: 0;

  104.   z-index: 1;

  105. }

  106. 

  107. [dir="rtl"] .toolbar-tab-responsive-preview .responsive-preview-trigger:after {

  108.   left: 1em;

  109.   right: auto;

  110. }

  111. 

  112. .toolbar-tab-responsive-preview.open:before {

  113.   background-color: white;

  114.   bottom: 0;

  115.   content: ' ';

  116.   display: block;

  117.   position: absolute;

  118.   right: 0; /* LTR */

  119.   top: 0;

  120.   width: 2em;

  121.   z-index: 1;

  122. }

  123. 

  124. [dir="rtl"] .toolbar-tab-responsive-preview.open:before {

  125.   left: 0;

  126.   right: auto;

  127. }

  128. 

  129. .toolbar-tab-responsive-preview.open .responsive-preview-trigger:after {

  130.   border-bottom: 0.4545em solid;

  131.   border-top-color: transparent;

  132.   color: black;

  133.   right: 0.7em; /* LTR */

  134.   top: 1.25em;

  135. }

  136. 

  137. [dir="rtl"] .toolbar-tab-responsive-preview.open .responsive-preview-trigger:after {

  138.   left: 0.7em;

  139.   right: auto;

  140. }

  141. 

  142. .toolbar-tab-responsive-preview:hover .responsive-preview-trigger:after,

  143. .toolbar-tab-responsive-preview .responsive-preview-trigger.active:after,

  144. .toolbar-tab-responsive-preview:hover .responsive-preview-trigger.active:after {

  145.   color: white;

  146. }

  147. 

  148. .toolbar-tab-responsive-preview.open:hover .responsive-preview-trigger:after {

  149.   color: black;

  150. }

  151. 

  152. /**

  153.  * Preview container.

  154.  */

  155. .responsive-preview {

  156.   opacity: 1;

  157.   -moz-transition: opacity 450ms;

  158.   -webkit-transition: opacity 450ms;

  159.   transition: opacity 450ms;

  160. }

  161. 

  162. .responsive-preview .responsive-preview-frame-container {

  163.   opacity: 0;

  164.   -moz-transition: all 250ms;

  165.   -webkit-transition: all 250ms;

  166.   transition: all 250ms;

  167. }

  168. 

  169. .responsive-preview.active .responsive-preview-frame-container {

  170.   opacity: 1;

  171. }

  172. 

  173. .responsive-preview-modal-background {

  174.   background-color: black;

  175.   background-color: rgba(0, 0, 0, 0.92);

  176.   background-image: -webkit-linear-gradient(left, rgb(20, 20, 20), rgb(50, 50, 50) 25%, rgb(100, 100, 100) 40%, rgb(100, 100, 100) 60%, rgb(50, 50, 50) 75%, rgb(20, 20, 20));

  177.   background-image: -moz-linear-gradient(left, rgb(20, 20, 20), rgb(50, 50, 50) 25%, rgb(100, 100, 100) 40%, rgb(100, 100, 100) 60%, rgb(50, 50, 50) 75%, rgb(20, 20, 20));

  178.   background-image: linear-gradient(left, rgb(20, 20, 20), rgb(50, 50, 50) 25%, rgb(100, 100, 100) 40%, rgb(100, 100, 100) 60%, rgb(50, 50, 50) 75%, rgb(20, 20, 20));

  179. }

  180. 

  181. /**

  182.  * Responsive preview control placement.

  183.  */

  184. .responsive-preview-control {

  185.   cursor: pointer;

  186.   height: 40px;

  187.   position: absolute;

  188.   top: 0;

  189.   width: 40px;

  190. }

  191. 

  192. .responsive-preview-control.responsive-preview-close {

  193.   right: 0; /* LTR */

  194. }

  195. 

  196. [dir="rtl"] .responsive-preview-control.responsive-preview-close {

  197.   left: 0;

  198.   right: auto;

  199. }

  200. 

  201. .responsive-preview-control.responsive-preview-orientation {

  202.   left: 0; /* LTR */

  203. }

  204. 

  205. [dir="rtl"] .responsive-preview-control.responsive-preview-orientation {

  206.   left: auto;

  207.   right: 0;

  208. }

  209. 

  210. .responsive-preview-device-label {

  211.   color: #909090;

  212.   cursor: pointer;

  213.   font-family: sans-serif;

  214.   font-size: 0.9286em;

  215.   font-weight: normal;

  216.   left: 30px;

  217.   line-height: 2.25;

  218.   margin: 0;

  219.   overflow: hidden;

  220.   position: absolute;

  221.   right: 30px;

  222.   text-align: center;

  223.   text-overflow: ellipsis;

  224.   top: 0;

  225.   white-space: nowrap;

  226. }

  227. 

  228. .responsive-preview-device-label-text:after {

  229.   border-bottom-color: transparent;

  230.   border-right-color: transparent;

  231.   border-top-color: transparent;

  232.   border-style: solid;

  233.   border-width: 0.8ex 0 0.8ex 0.9ex;

  234.   color: #909090;

  235.   content: '';

  236.   display: inline-block;

  237.   line-height: 0;

  238.   margin-left: 0.75ex;

  239.   margin-right: 0.75ex;

  240.   width: 0;

  241. }

  242. 

  243. [dir="rtl"] .responsive-preview-device-label-text:after {

  244.   border-left-color: transparent;

  245.   border-right-color: inherit;

  246.   border-width: 0.8ex 0.9ex 0.8ex 0;

  247. }

  248. 

  249. .responsive-preview-device-label-text:hover:after {

  250.   color: inherit;

  251. }

  252. 

  253. .responsive-preview-expanded .responsive-preview-device-label-text:after {

  254.   border-left-color: transparent;

  255.   border-right-color: inherit;

  256.   border-width: 0.8ex 0.9ex 0.8ex 0;

  257. }

  258. 

  259. [dir="rtl"] .responsive-preview-expanded .responsive-preview-device-label-text:after {

  260.   border-left-color: inherit;

  261.   border-right-color: transparent;

  262.   border-width: 0.8ex 0 0.8ex 0.9ex;

  263. }

  264. 

  265. /**

  266.  * Responsive preview frame.

  267.  */

  268. .responsive-preview-frame-container {

  269.   background-color: #212121;

  270.   border-radius: 20px;

  271.   box-shadow: 0 0 0px 1px #777, 1px 1px 60px 0px #000;

  272.   -webkit-transition: left 150ms ease-out;

  273.   -moz-transition: left 150ms ease-out;

  274.   transition: left 150ms ease-out;

  275. }

  276. 

  277. .responsive-preview-frame-container iframe {

  278.   box-shadow: 0 0 0 1px #808080;

  279.   -webkit-transition: all 150ms ease-out;

  280.   -moz-transition: all 150ms ease-out;

  281.   -o-transition: all 150ms ease-out;

  282.   transition: all 150ms ease-out;

  283. }

  284. 

  285. /**

  286.  * Control block styling.

  287.  */

  288. .block-responsive-preview-block .content .responsive-preview-device {

  289.   background: none;

  290.   border: none;

  291.   color: inherit;

  292.   cursor: pointer;

  293.   font: inherit;

  294.   line-height: 1;

  295.   margin: 0;

  296.   padding: 0.25em 0;

  297. }

  298. 

  299. .block-responsive-preview-block .content .responsive-preview-device[disabled] {

  300.   color: #ccc;

  301.   cursor: default;

  302. }