lightbox.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
  1. #w3tc_lightbox_content .metabox-holder {
  2. padding-top: 0;
  3. }
  4. /* make mismatch in popup resizing invisible, border shows them well */
  5. #w3tc_lightbox_content .postbox {
  6. border: none;
  7. }
  8. #overlay {
  9. background: #666;
  10. font-size:12px;
  11. }
  12. .ui-widget-overlay {
  13. background-color: #666;
  14. position: absolute;
  15. opacity: 0.6;
  16. top:0;
  17. left:0;
  18. }
  19. .lightbox,.ui-dialog {
  20. position: absolute;
  21. background: #fdfdfd;
  22. padding: 20px;
  23. border: 1px solid #bbb;
  24. border-radius: 11px;
  25. -webkit-border-radius: 11px;
  26. -moz-border-radius: 11px;
  27. }
  28. .lightbox h3 {
  29. margin-top: 0;
  30. }
  31. .lightbox-close,.ui-dialog-titlebar-close {
  32. cursor: pointer;
  33. position: absolute;
  34. text-decoration: underline;
  35. right: 20px;
  36. z-index: 9999;
  37. }
  38. .lightbox-loader {
  39. background: url(../img/wpspin_light.gif) no-repeat center center;
  40. }
  41. .lightbox-content {
  42. position: relative;
  43. font-size:12px;
  44. }
  45. #recom_container {
  46. top: 90px;
  47. bottom: 120px;
  48. overflow: auto;
  49. position: absolute;
  50. width: 100%;
  51. }
  52. #recom_container_bottom {
  53. bottom: 0;
  54. width: 100%;
  55. position: absolute;
  56. }
  57. #recom_container_bottom p {
  58. margin-top: 0;
  59. }
  60. #recom_container_bottom fieldset {
  61. margin: 0;
  62. }
  63. th.minify-files-add, td.minify-files-add {
  64. width: 40px;
  65. text-align: center;
  66. }
  67. #w3tc-self-test {
  68. top: 170px;
  69. bottom: 40px;
  70. overflow: auto;
  71. position: absolute;
  72. width: 100%;
  73. }
  74. #w3tc-self-test ul {
  75. list-style: none;
  76. }
  77. #w3tc-self-test-bottom {
  78. bottom: 0;
  79. width: 100%;
  80. position: absolute;
  81. }
  82. .w3tc-self-test-hint {
  83. font-size: 0.8em;
  84. font-style: italic;
  85. color: #999;
  86. }
  87. /**
  88. ###################
  89. ## Overlays
  90. ###################
  91. */
  92. .w3tc-overlay {
  93. background-color: #fff;
  94. }
  95. .w3tc-overlay .content {
  96. padding: 10px 10px 10px 10px;
  97. }
  98. .w3tc-overlay p, .w3tc-overlay label, .w3tc-overlay option {
  99. font-family:Arial, Verdana,sans-serif;
  100. }
  101. .w3tc-overlay p {
  102. line-height: 1.72222;
  103. margin: 0 0 15px;
  104. }
  105. .w3tc-overlay label {
  106. line-height: 1.9986363100000002em;
  107. font-weight:bold;
  108. }
  109. .w3tc-overlay .btn {
  110. border: none;
  111. font-size: 15px;
  112. font-weight: normal;
  113. line-height: 1.4;
  114. border-radius: 4px;
  115. padding: 10px 15px;
  116. -webkit-font-smoothing: subpixel-antialiased;
  117. -webkit-transition: 0.25s linear;
  118. transition: 0.25s linear;
  119. color: #ffffff;
  120. }
  121. .w3tc-overlay .btn:hover,
  122. .w3tc-overlay .btn:focus {
  123. color: #ffffff;
  124. }
  125. .w3tc-overlay .btn:active,
  126. .w3tc-overlay .btn.active {
  127. outline: none;
  128. -webkit-box-shadow: none;
  129. box-shadow: none;
  130. }
  131. .w3tc-overlay .btn.disabled,
  132. .w3tc-overlay .btn[disabled],
  133. fieldset[disabled] .btn {
  134. background-color: #bdc3c7;
  135. color: rgba(255, 255, 255, 0.75);
  136. opacity: 0.7;
  137. filter: alpha(opacity=70);
  138. }
  139. .w3tc-overlay .btn > [class^="fui-"] {
  140. margin: 0 1px;
  141. position: relative;
  142. line-height: 1;
  143. top: 1px;
  144. }
  145. .w3tc-overlay .btn-xs.btn > [class^="fui-"] {
  146. font-size: 11px;
  147. top: 0;
  148. }
  149. .w3tc-overlay .btn-hg.btn > [class^="fui-"] {
  150. top: 2px;
  151. }
  152. .w3tc-overlay .btn-default {
  153. color: #ffffff;
  154. background-color: #bdc3c7;
  155. }
  156. .w3tc-overlay .btn-primary {
  157. color: #ffffff;
  158. background-color: #1abc9c;
  159. }
  160. #w3tc-support-us ul {margin:0;padding:0;}
  161. #w3tc-support-us li { display: inline-block; margin-right: 15px;}
  162. .w3tc-overlay .image {
  163. /*background-color: transparent; /* make the button transparent */
  164. background-repeat: no-repeat; /* make the background image appear only once */
  165. background-position: 10px 6px; /* equivalent to 'top left' */
  166. border: none; /* assuming we don't want any borders */
  167. cursor: pointer; /* make the cursor like hovering over an <a> element */
  168. padding-left: 16px; /* make text start to the right of the image */
  169. vertical-align: middle; /* align the text vertically centered */
  170. }
  171. .w3tc-overlay .w3tc-support-us h3 {
  172. font-size: 16pt;
  173. }
  174. .w3tc-overlay .font-palette-dark-skies {
  175. color:#666
  176. }
  177. .w3tc-overlay .btn {
  178. border-bottom:solid 2px #000;
  179. font-weight:bolder;
  180. }
  181. .w3tc-overlay .form-control.w3tc-size {
  182. height:32px;
  183. line-height:26px;
  184. margin:0;
  185. padding:0 5px 0 5px;
  186. }
  187. .w3tc-overlay input[type=button] {
  188. cursor: pointer;
  189. }
  190. .w3tc-overlay input[type=text].form-control {
  191. width:425px;
  192. }
  193. .w3tc-overlay select.w3tc-size {
  194. height:32px;
  195. width:250px;
  196. margin:0;
  197. padding:0px 5px 0px 5px;
  198. font-weight: normal;
  199. border: 2px solid #bdc3c7;
  200. color: #34495e;
  201. font-size: 15px;
  202. border-radius: 6px;
  203. -webkit-box-shadow: none;
  204. box-shadow: none;
  205. -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
  206. transition: border .25s linear, color .25s linear, background-color .25s linear;
  207. }
  208. .w3tc-overlay .btn.w3tc-size {
  209. margin:0;
  210. padding:5px 10px 5px 10px;
  211. }
  212. .w3tc-overlay .btn.palette-light-grey {
  213. background-color: #cccccc;
  214. border-bottom-color: #aeaeae;
  215. }
  216. .w3tc-overlay .btn-default.palette-twitter:active,
  217. .w3tc-overlay .btn-default.palette-twitter.active,
  218. .w3tc-overlay .btn.palette-twitter {
  219. background-color: #00acee;
  220. color: #fff;
  221. border-bottom-color: #0092cb;
  222. padding:5px 10px 5px 37px;
  223. background-image: url(../img/overlay/twitter-bird-dark-bgs.png);
  224. }
  225. .w3tc-overlay .btn-default.palette-wordpress:active,
  226. .w3tc-overlay .btn-default.palette-wordpress.active,
  227. .w3tc-overlay .btn.palette-wordpress{
  228. background-color: #1585b6;
  229. color: #fff;
  230. border-bottom-color: #12719b;
  231. padding:5px 10px 5px 37px;
  232. background-image: url(../img/overlay/wordpress-logo-simplified-rgb.png);
  233. }
  234. .w3tc-overlay .btn.save:active,
  235. .w3tc-overlay .btn.save.active,
  236. .w3tc-overlay .btn.save {
  237. background-position: 10px 5px; /* equivalent to 'top left' */
  238. padding:5px 10px 5px 37px;
  239. background-image: url(../img/overlay/save-close.png);
  240. }
  241. .w3tc-overlay .btn.secure:active,
  242. .w3tc-overlay .btn.secure.active,
  243. .w3tc-overlay .btn.secure {
  244. background-position: 10px 5px; /* equivalent to 'top left' */
  245. padding:5px 10px 5px 37px;
  246. background-image: url(../img/overlay/save-close.png);
  247. text-decoration: none;
  248. }
  249. .w3tc-overlay btn.palette-turquoise {
  250. border-bottom-color: #1abc9c;
  251. }
  252. .w3tc-overlay input[type=checkbox].css-checkbox {
  253. position: absolute;
  254. overflow: hidden;
  255. clip: rect(0 0 0 0);
  256. height:1px;
  257. width:1px;
  258. margin:-1px;
  259. padding:0;
  260. border:0;
  261. }
  262. .w3tc-overlay input[type=checkbox].css-checkbox + label.css-label {
  263. padding-left:20px;
  264. height:17px;
  265. display:inline-block;
  266. line-height:18px;
  267. background-repeat:no-repeat;
  268. background-position: 0 0;
  269. font-size:15px;
  270. vertical-align:middle;
  271. cursor:pointer;
  272. }
  273. .w3tc-overlay input[type=checkbox].css-checkbox:checked + label.css-label {
  274. background-position: 0 -17px;
  275. }
  276. .w3tc-overlay .css-label{ background-image:url(../img/overlay/gray-check.png); }
  277. .w3tc-overlay {
  278. position: absolute;
  279. background: #fdfdfd;
  280. border: 1px solid #bbb;
  281. border-radius: 6px;
  282. -webkit-border-radius: 6px;
  283. -moz-border-radius: 6px;
  284. }
  285. .w3tc-overlay header {
  286. background-color: #f3f3f3;
  287. color: #cacaca;
  288. height:20px;
  289. border-bottom: dashed 1px #c0c0c0;
  290. border-top-left-radius: 6px;
  291. border-top-right-radius: 6px;
  292. -webkit-border-top-left-radius: 6px;
  293. -webkit-border-top-right-radius: 6px;
  294. -moz-border-top-left-radius: 6px;
  295. -moz-border-top-right-radius: 6px;
  296. }
  297. .w3tc-overlay #w3tc-support-us header {
  298. height:100px;
  299. background-repeat:no-repeat;
  300. background-position: 10px 7px;
  301. background-image: url(../img/overlay/ceo.png);
  302. }
  303. .w3tc-overlay #w3tc-support-us header h2, header h3 {
  304. margin:0;padding:0;
  305. }
  306. .w3tc-overlay #w3tc-support-us header div.left h2 {
  307. font-size:20px;
  308. color: #7b7b7b;
  309. margin-top:10px;
  310. margin-bottom:10px;
  311. }
  312. .w3tc-overlay #w3tc-support-us header div.left {
  313. margin-top:10px;
  314. padding-right:20px;
  315. margin-left:110px;
  316. border-right:solid 2px #FFF;
  317. height:80px;
  318. }
  319. .w3tc-overlay #w3tc-support-us div.right {
  320. margin-top: 5px;
  321. line-height: 100px;
  322. height: 100px;
  323. padding-right: 40px;
  324. }
  325. .w3tc-overlay .w3tc-support-us header h3 {
  326. font-size:14px;
  327. }
  328. .w3tc-overlay .palette-turquoise {
  329. background-color: #1abc9c;
  330. border-bottom-color: #16a085;
  331. }
  332. .w3tc_signup_email {
  333. margin-bottom: 5px;
  334. }
  335. .w3tc-overlay-logo {
  336. margin-top: -57px;
  337. height:57px;
  338. width:94px;
  339. background-repeat:no-repeat;
  340. background-position: 0 0;
  341. background-image: url(../img/overlay/overlay-logo.png);
  342. }
  343. .lightbox-close {
  344. background-repeat: no-repeat;
  345. background-position: 0 5px;
  346. background-image: url(../img/overlay/overlay-close.png);
  347. background-color: #f1f1f1;
  348. border-radius: 50%;
  349. padding: 0;
  350. background-position: 8px;
  351. margin: 0;
  352. top: -12px;
  353. right: -12px;
  354. width: 25px;
  355. height: 25px;
  356. }
  357. .w3tchelp_content {
  358. padding: 10px 20px 20px 20px;
  359. }
  360. .w3tchelp_content li {
  361. font-family: Arial, Verdana,sans-serif;
  362. font-size: 13px;
  363. }
  364. /* isolated styles */
  365. .w3tc_overlay_footer {
  366. padding: 0 10px 10px 10px;
  367. clear:both;
  368. }
  369. .w3tc_overlay_content {
  370. padding: 10px 10px 10px 10px;
  371. }
  372. .w3tc_overlay_upgrade_header {
  373. background-color: #f3f3f3;
  374. color: #cacaca;
  375. height: calc(100% - 80px);
  376. box-sizing: border-box;
  377. }
  378. .w3tc_overlay_upgrade_content_l {
  379. width: 290px;
  380. float:left;
  381. }
  382. .w3tc_overlay_upgrade_content_r {
  383. width: calc(100% - 310px);
  384. padding-left: 20px;
  385. float: left;
  386. }
  387. .w3tc_overlay_upgrade_description {
  388. clear: both;
  389. }
  390. .w3tc_overlay_upgrade_left_h {
  391. font-weight: bold;
  392. font-size: 1.4em;
  393. float: left;
  394. margin: 1em 0;
  395. color: #23282d;
  396. line-height: 29px;
  397. }
  398. .w3tc_overlay_upgrade_right_h {
  399. font-weight: bold;
  400. float: right;
  401. margin: 1em 0;
  402. color: #23282d;
  403. font-size: 2.0em;
  404. }
  405. .w3tc_overlay_upgrade_right_text {
  406. font-weight: normal;
  407. }
  408. .w3tc_change_label {
  409. color:black;
  410. font-weight:inherit;
  411. }
  412. @media only screen and (max-device-width: 480px) {
  413. .w3tc_overlay_upgrade_content_l {
  414. display: none;
  415. }
  416. .w3tc_overlay_upgrade_content_r {
  417. width: inherit;
  418. padding: none;
  419. float: none;
  420. }
  421. }
  422. /**
  423. * Colors.
  424. */
  425. /* "tp" is Turquoise Pearl, courtesty of https://hexcolor.co/hex/30bec4. */
  426. input.w3tc-palette-tp,
  427. a.w3tc-palette-tp {
  428. background-color: #30bec4;
  429. color: #fff;
  430. }
  431. /* A button with an icon gauge to the right. */
  432. #w3tc_upgrade_header .w3tc-gauge-tp {
  433. background-image: url(../img/overlay/gauge-bg-tp.png);
  434. background-position: calc(100% - 15px) center;
  435. background-repeat: no-repeat;
  436. text-decoration: none;
  437. padding: 7px 60px 7px 12px;
  438. }
  439. /**
  440. * Upgrade modal.
  441. */
  442. #w3tc-upgrade {
  443. box-sizing: border-box;
  444. }
  445. #w3tc_upgrade_header {
  446. display: flex;
  447. background: #000;
  448. border-bottom: 5px solid #30bec4;
  449. border-radius: 6px 6px 0 0;
  450. color: #fff;
  451. height: 75px;
  452. position: relative;
  453. }
  454. #w3tc_upgrade_header > div {
  455. flex: 1;
  456. }
  457. #w3tc_upgrade_header > div:first-child div {
  458. position: absolute;
  459. top: 17px;
  460. left: 90px;
  461. font-size: 20px;
  462. line-height: 20px;
  463. }
  464. /* Go faster now button. It could be an anchor or an input. */
  465. #w3tc_upgrade_header > div:nth-child(2) > *:first-child {
  466. position: absolute;
  467. top: 20px;
  468. right: 90px;
  469. }
  470. /* Ensure a consistent background with the iframe and the modal elements. */
  471. .w3tc-overlay-upgrade,
  472. .w3tc_overlay_upgrade_header {
  473. background-color: #f1f1f1;
  474. }
  475. .w3tc_upgrade_content p {
  476. position: relative;
  477. z-index: 1;
  478. }
  479. .w3tc_upgrade_footer {
  480. background: #fdfdfd;
  481. padding: 15px;
  482. border-top: 1px dashed #C0C0C0;
  483. border-radius: 0 0 6px 6px;
  484. text-align: right;
  485. }
  486. .w3tc_upgrade_footer .btn {
  487. border: none;
  488. color: #ffffff;
  489. background: #2271B1;
  490. }
  491. .w3tc_upgrade_footer .btn:focus {
  492. box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
  493. }
  494. .w3tc_upgrade_footer .btn:hover,
  495. .w3tc_upgrade_footer .btn:focus {
  496. background: #135e96;
  497. border-color: #135e96;
  498. color: #fff;
  499. }