You are here

Home » API reference » Responsive Theme Preview 7

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

Same filename and directory in other branches
  1. 8 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.  * navbar tab.

  8.  */

  9. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-options {

  10.   background-color: white;

  11.   margin: 0;

  12.   padding: 0.5em 0;

  13. }

  14. /* Device preview options. */

  15. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-options {

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

  17. }

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

  19. [dir] #navbar-administration .navbar-tab-responsive-preview .item-list li {

  20.   margin: 0;

  21.   padding: 0;

  22. }

  23. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-trigger {

  24.   cursor: pointer;

  25.   line-height: 1;

  26.   height: 3em;

  27.   margin: 0;

  28. }

  29. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-trigger:hover {

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

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

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

  33. }

  34. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-trigger.active,

  35. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-trigger.active:hover {

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

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

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

  39. }

  40. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-trigger,

  41. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-options .responsive-preview-device {

  42.   padding-bottom: 1em;

  43.   padding-top: 1em;

  44. }

  45. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-options .responsive-preview-device {

  46.   background: none;

  47.   border: none;

  48.   cursor: pointer;

  49.   display: block;

  50.   font-family: inherit;

  51.   font-size: 1em;

  52.   padding: 0.5em 1.3333em

  53. }

  54. #navbar-administration .navbar-tab-responsive-preview.navbar-tab .responsive-preview-options .responsive-preview-device {

  55.   color: #0074BD;

  56.   text-align: left;

  57.   width: 100%;

  58. }

  59. #navbar-administration .navbar-tab-responsive-preview.navbar-tab .responsive-preview-options .responsive-preview-device:hover,

  60. #navbar-administration .navbar-tab-responsive-preview.navbar-tab .responsive-preview-options .responsive-preview-device.active {

  61.   color: black;

  62. }

  63. #navbar-administration .navbar-tab-responsive-preview.navbar-tab .responsive-preview-options .responsive-preview-device[disabled] {

  64.   color: #ccc;

  65.   cursor: default;

  66. }

  67. /* Configuration link. */

  68. #navbar-administration .navbar-tab-responsive-preview.navbar-tab .responsive-preview-configure {

  69.   color: #777;

  70.   display: block;

  71.   font-weight: normal;

  72.   margin-top: 0.5em;

  73.   padding: 0.5em 0.6667em;

  74. }

  75. #navbar-administration .navbar-tab-responsive-preview.navbar-tab .responsive-preview-configure:hover {

  76.   color: #000;

  77. }

  78. 

  79. /* navbar tab triangle toggle. */

  80. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-trigger:after {

  81.   border-bottom-color: transparent;

  82.   border-left-color: transparent;

  83.   border-right-color: transparent;

  84.   border-style: solid;

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

  86.   color: #a0a0a0;

  87.   content: ' ';

  88.   display: block;

  89.   height: 0;

  90.   line-height: 0;

  91.   overflow: hidden;

  92.   position: absolute;

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

  94.   top: 50%;

  95.   margin-top: -0.1666em;

  96.   width: 0;

  97.   z-index: 1

  98. }

  99. [dir="rtl"] #navbar-administration .navbar-tab-responsive-preview .responsive-preview-trigger:after {

  100.   left: 1em;

  101.   right: auto;

  102. }

  103. #navbar-administration .navbar-tab-responsive-preview.open:before {

  104.   background-color: white;

  105.   bottom: 0;

  106.   content: ' ';

  107.   display: block;

  108.   position: absolute;

  109.   right: 0; /* LTR */

  110.   top: 0;

  111.   width: 2em;

  112.   z-index: 1;

  113. }

  114. [dir="rtl"] #navbar-administration .navbar-tab-responsive-preview.open:before {

  115.   left: 0;

  116.   right: auto;

  117. }

  118. #navbar-administration .navbar-tab-responsive-preview.open .responsive-preview-trigger:after {

  119.   border-bottom: 0.4545em solid;

  120.   border-top-color: transparent;

  121.   color: black;

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

  123.   top: 1.25em;

  124. }

  125. [dir="rtl"] #navbar-administration .navbar-tab-responsive-preview.open .responsive-preview-trigger:after {

  126.   left: 0.7em;

  127.   right: auto;

  128. }

  129. #navbar-administration .navbar-tab-responsive-preview:hover .responsive-preview-trigger:after,

  130. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-trigger.active:after,

  131. #navbar-administration .navbar-tab-responsive-preview:hover .responsive-preview-trigger.active:after {

  132.   color: white;

  133. }

  134. #navbar-administration .navbar-tab-responsive-preview.open:hover .responsive-preview-trigger:after {

  135.   color: black;

  136. }

  137. 

  138. /**

  139.  * Preview container.

  140.  */

  141. .responsive-preview {

  142.   opacity: 1;

  143.   -moz-transition: opacity 450ms;

  144.   -webkit-transition: opacity 450ms;

  145.   transition: opacity 450ms;

  146. }

  147. .responsive-preview .responsive-preview-frame-container {

  148.   opacity: 0;

  149.   -moz-transition: all 250ms;

  150.   -webkit-transition: all 250ms;

  151.   transition: all 250ms;

  152. }

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

  154.   opacity: 1;

  155. }

  156. .responsive-preview-modal-background {

  157.   background-color: black;

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

  159.   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));

  160.   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));

  161.   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));

  162. }

  163. 

  164. /**

  165.  * Responsive preview control placement.

  166.  */

  167. .responsive-preview-control {

  168.   cursor: pointer;

  169.   height: 40px;

  170.   position: absolute;

  171.   top: 0;

  172.   width: 40px;

  173. }

  174. .responsive-preview-control.responsive-preview-close {

  175.   right: 0; /* LTR */

  176. }

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

  178.   left: 0;

  179.   right: auto;

  180. }

  181. .responsive-preview-control.responsive-preview-orientation {

  182.   left: 0; /* LTR */

  183. }

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

  185.   left: auto;

  186.   right: 0;

  187. }

  188. .responsive-preview-device-label {

  189.   color: #909090;

  190.   cursor: pointer;

  191.   font-family: sans-serif;

  192.   font-size: 0.9286em;

  193.   font-weight: normal;

  194.   left: 30px;

  195.   line-height: 2.25;

  196.   margin: 0;

  197.   overflow: hidden;

  198.   position: absolute;

  199.   right: 30px;

  200.   text-align: center;

  201.   text-overflow: ellipsis;

  202.   top: 0;

  203.   white-space: nowrap;

  204. }

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

  206.   border-bottom-color: transparent;

  207.   border-right-color: transparent;

  208.   border-top-color: transparent;

  209.   border-style: solid;

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

  211.   color: #909090;

  212.   content: '';

  213.   display: inline-block;

  214.   line-height: 0;

  215.   margin-left: 0.75ex;

  216.   margin-right: 0.75ex;

  217.   width: 0;

  218. }

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

  220.   border-left-color: transparent;

  221.   border-right-color: inherit;

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

  223. }

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

  225.   color: inherit;

  226. }

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

  228.   border-left-color: transparent;

  229.   border-right-color: inherit;

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

  231. }

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

  233.   border-left-color: inherit;

  234.   border-right-color: transparent;

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

  236. }

  237. 

  238. /**

  239.  * Responsive preview frame.

  240.  */

  241. .responsive-preview-frame-container {

  242.   background-color: #212121;

  243.   border-radius: 20px;

  244.   box-shadow:

  245.     0 0 0px 1px #777,

  246.     1px 1px 60px 0px #000;

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

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

  249.   transition: left 150ms ease-out;

  250. }

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

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

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

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

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

  256.   transition: all 150ms ease-out;

  257. }

  258. 

  259. /**

  260.  * Control block styling.

  261.  */

  262. #block-responsive-preview-controls .content .responsive-preview-device {

  263.   background: none;

  264.   border: none;

  265.   color: inherit;

  266.   cursor: pointer;

  267.   font: inherit;

  268.   line-height: 1;

  269.   margin: 0;

  270.   padding: 0.25em 0;

  271. }

  272. #block-responsive-preview-controls .content .responsive-preview-device[disabled] {

  273.   color: #ccc;

  274.   cursor: default;

  275. }