API tools faq
paste
Advertisement
JonnyPaes

StPageFlip.css

JonnyPaes
Jun 6th, 2023
648
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.42 KB | Source Code | 0 0
raw download clone embed print report
  1. *,
  2. ::after,
  3. ::before {
  4.     box-sizing: border-box;
  5. }
  6. h2 {
  7.     margin-top: 0;
  8.     margin-bottom: 0.5rem;
  9. }
  10. button {
  11.     border-radius: 0;
  12. }
  13. button:focus {
  14.     outline: 1px dotted;
  15.     outline: 5px auto -webkit-focus-ring-color;
  16. }
  17. button {
  18.     margin: 0;
  19.     font-family: inherit;
  20.     font-size: inherit;
  21.     line-height: inherit;
  22. }
  23. button {
  24.     overflow: visible;
  25. }
  26. button {
  27.     text-transform: none;
  28. }
  29. [type="button"],
  30. button {
  31.     -webkit-appearance: button;
  32. }
  33. [type="button"]::-moz-focus-inner,
  34. button::-moz-focus-inner {
  35.     padding: 0;
  36.     border-style: none;
  37. }
  38. h2 {
  39.     margin-bottom: 0.5rem;
  40.     font-weight: 500;
  41.     line-height: 1.2;
  42. }
  43. h2 {
  44.     font-size: 2rem;
  45. }
  46. .container {
  47.     width: 100%;
  48.     padding-right: 15px;
  49.     padding-left: 15px;
  50.     margin-right: auto;
  51.     margin-left: auto;
  52. }
  53. @media (min-width: 576px) {
  54.     .container {
  55.         max-width: 540px;
  56.     }
  57. }
  58. @media (min-width: 768px) {
  59.     .container {
  60.         max-width: 720px;
  61.     }
  62. }
  63. @media (min-width: 992px) {
  64.     .container {
  65.         max-width: 960px;
  66.     }
  67. }
  68. @media (min-width: 1200px) {
  69.     .container {
  70.         max-width: 1140px;
  71.     }
  72. }
  73. @media (min-width: 576px) {
  74.     .container {
  75.         max-width: 540px;
  76.     }
  77. }
  78. @media (min-width: 768px) {
  79.     .container {
  80.         max-width: 720px;
  81.     }
  82. }
  83. @media (min-width: 992px) {
  84.     .container {
  85.         max-width: 960px;
  86.     }
  87. }
  88. @media (min-width: 1200px) {
  89.     .container {
  90.         max-width: 1140px;
  91.     }
  92. }
  93. .btn {
  94.     display: inline-block;
  95.     font-weight: 400;
  96.     color: #212529;
  97.     text-align: center;
  98.     vertical-align: middle;
  99.     -webkit-user-select: none;
  100.     -moz-user-select: none;
  101.     -ms-user-select: none;
  102.     user-select: none;
  103.     background-color: transparent;
  104.     border: 1px solid transparent;
  105.     padding: 0.375rem 0.75rem;
  106.     font-size: 1rem;
  107.     line-height: 1.5;
  108.     border-radius: 0.25rem;
  109.     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  110.         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  111. }
  112. @media (prefers-reduced-motion: reduce) {
  113.     .btn {
  114.         transition: none;
  115.     }
  116. }
  117. .btn:hover {
  118.     color: #212529;
  119.     text-decoration: none;
  120. }
  121. .btn:focus {
  122.     outline: 0;
  123.     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  124. }
  125. .btn:disabled {
  126.     opacity: 0.65;
  127. }
  128. .btn-primary {
  129.     color: #fff;
  130.     background-color: #007bff;
  131.     border-color: #007bff;
  132. }
  133. .btn-primary:hover {
  134.     color: #fff;
  135.     background-color: #0069d9;
  136.     border-color: #0062cc;
  137. }
  138. .btn-primary:focus {
  139.     color: #fff;
  140.     background-color: #0069d9;
  141.     border-color: #0062cc;
  142.     box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
  143. }
  144. .btn-primary:disabled {
  145.     color: #fff;
  146.     background-color: #007bff;
  147.     border-color: #007bff;
  148. }
  149. .btn-secondary {
  150.     color: #fff;
  151.     background-color: #6c757d;
  152.     border-color: #6c757d;
  153. }
  154. .btn-secondary:hover {
  155.     color: #fff;
  156.     background-color: #5a6268;
  157.     border-color: #545b62;
  158. }
  159. .btn-secondary:focus {
  160.     color: #fff;
  161.     background-color: #5a6268;
  162.     border-color: #545b62;
  163.     box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
  164. }
  165. .btn-secondary:disabled {
  166.     color: #fff;
  167.     background-color: #6c757d;
  168.     border-color: #6c757d;
  169. }
  170. .btn-info {
  171.     color: #fff;
  172.     background-color: #17a2b8;
  173.     border-color: #17a2b8;
  174. }
  175. .btn-info:hover {
  176.     color: #fff;
  177.     background-color: #138496;
  178.     border-color: #117a8b;
  179. }
  180. .btn-info:focus {
  181.     color: #fff;
  182.     background-color: #138496;
  183.     border-color: #117a8b;
  184.     box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
  185. }
  186. .btn-info:disabled {
  187.     color: #fff;
  188.     background-color: #17a2b8;
  189.     border-color: #17a2b8;
  190. }
  191. .btn-sm {
  192.     padding: 0.25rem 0.5rem;
  193.     font-size: 0.875rem;
  194.     line-height: 1.5;
  195.     border-radius: 0.2rem;
  196. }
  197. .btn-group {
  198.     position: relative;
  199.     display: -ms-inline-flexbox;
  200.     display: inline-flex;
  201.     vertical-align: middle;
  202. }
  203. .btn-group > .btn {
  204.     position: relative;
  205.     -ms-flex: 1 1 auto;
  206.     flex: 1 1 auto;
  207. }
  208. .btn-group > .btn:hover {
  209.     z-index: 1;
  210. }
  211. .btn-group > .btn:active,
  212. .btn-group > .btn:focus {
  213.     z-index: 1;
  214. }
  215. .btn-group > .btn:not(:first-child) {
  216.     margin-left: -1px;
  217. }
  218. .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  219.     border-top-right-radius: 0;
  220.     border-bottom-right-radius: 0;
  221. }
  222. .btn-group > .btn:not(:first-child) {
  223.     border-top-left-radius: 0;
  224.     border-bottom-left-radius: 0;
  225. }
  226. .bg-light {
  227.     background-color: #f8f9fa !important;
  228. }
  229. .overflow-hidden {
  230.     overflow: hidden !important;
  231. }
  232. .mb-2 {
  233.     margin-bottom: 0.5rem !important;
  234. }
  235. .mt-3 {
  236.     margin-top: 1rem !important;
  237. }
  238. .mb-3 {
  239.     margin-bottom: 1rem !important;
  240. }
  241. .pt-3 {
  242.     padding-top: 1rem !important;
  243. }
  244. .pb-3 {
  245.     padding-bottom: 1rem !important;
  246. }
  247. .text-center {
  248.     text-align: center !important;
  249. }
  250. @media print {
  251.     *,
  252.     ::after,
  253.     ::before {
  254.         text-shadow: none !important;
  255.         box-shadow: none !important;
  256.     }
  257.     h2 {
  258.         orphans: 3;
  259.         widows: 3;
  260.     }
  261.     h2 {
  262.         page-break-after: avoid;
  263.     }
  264.     .container {
  265.         min-width: 992px !important;
  266.     }
  267. }
  268. /*! CSS Used from: https://nodlik.github.io/StPageFlip/static/style.css */
  269. .demo-block {
  270.     border-top: solid 1px #dcdcdc;
  271.     border-bottom: solid 1px #dcdcdc;
  272. }
  273. .flip-book {
  274.     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  275.     margin: 0 auto;
  276.     display: none;
  277. }
  278. .page {
  279.     padding: 20px;
  280.     background-color: #fdfaf7;
  281.     color: #785e3a;
  282.     border: solid 1px #c2b5a3;
  283.     overflow: hidden;
  284. }
  285. .page .page-content {
  286.     width: 100%;
  287.     height: 100%;
  288.     display: flex;
  289.     flex-direction: column;
  290.     justify-content: space-between;
  291.     align-items: stretch;
  292. }
  293. .page .page-content .page-header {
  294.     height: 30px;
  295.     font-size: 100%;
  296.     text-transform: uppercase;
  297.     text-align: center;
  298. }
  299. .page .page-content .page-image {
  300.     height: 100%;
  301.     background-size: contain;
  302.     background-position: center center;
  303.     background-repeat: no-repeat;
  304. }
  305. .page .page-content .page-text {
  306.     height: 100%;
  307.     flex-grow: 1;
  308.     font-size: 80%;
  309.     text-align: justify;
  310.     margin-top: 10px;
  311.     padding-top: 10px;
  312.     box-sizing: border-box;
  313.     border-top: solid 1px #f4e8d7;
  314. }
  315. .page .page-content .page-footer {
  316.     height: 30px;
  317.     border-top: solid 1px #f4e8d7;
  318.     font-size: 80%;
  319.     color: #998466;
  320. }
  321. .page.--left {
  322.     border-right: 0;
  323.     box-shadow: inset -7px 0 30px -7px rgba(0, 0, 0, 0.4);
  324. }
  325. .page.--right {
  326.     border-left: 0;
  327.     box-shadow: inset 7px 0 30px -7px rgba(0, 0, 0, 0.4);
  328. }
  329. .page.--right .page-footer {
  330.     text-align: right;
  331. }
  332. /*! CSS Used from: Embedded */
  333. .stf__wrapper {
  334.     position: relative;
  335.     display: block;
  336.     box-sizing: border-box;
  337.     transform: translateZ(0);
  338. }
  339. .stf__wrapper canvas {
  340.     position: absolute;
  341.     width: 100%;
  342.     height: 100%;
  343.     left: 0;
  344.     top: 0;
  345. }
  346. .stf__block {
  347.     position: absolute;
  348.     width: 100%;
  349.     height: 100%;
  350.     box-sizing: border-box;
  351. }
  352. .stf__item {
  353.     display: none;
  354.     position: absolute;
  355. }
  356.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!