ui.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. /**
  2. * User Interface
  3. */
  4. @media screen {
  5. // C A N V A S
  6. body {
  7. background-color: #F0F0F0;
  8. }
  9. #pages {
  10. width: $paper-width;
  11. height: $paper-height;
  12. margin-left: auto;
  13. margin-right: auto;
  14. }
  15. .spread #pages {
  16. width: $paper-width * 2;
  17. height: $paper-height * 2;
  18. }
  19. .paper {
  20. /* centrer la page à l'écran */
  21. background-color: white;
  22. margin-top: 1em;
  23. margin-bottom: 1em;
  24. }
  25. .normal .paper {
  26. //outline: 1px solid lightgray;
  27. }
  28. .normal .page {
  29. outline: 1px dashed lightsalmon;
  30. }
  31. .preview .paper {
  32. background: none;
  33. }
  34. .preview .page {
  35. outline: 1px solid lightgray;
  36. background-color: white;
  37. }
  38. .preview .crops { visibility: hidden; }
  39. // M E N U
  40. .button {
  41. z-index: 1000;
  42. background-color: black;
  43. font-family: sans-serif;
  44. text-transform: uppercase;
  45. font-size: 9pt !important;
  46. letter-spacing: 1pt;
  47. color: white;
  48. margin: 0;
  49. padding: 5pt 7pt;
  50. cursor: pointer;
  51. border: 0;
  52. }
  53. .button:hover {
  54. background-color: white;
  55. color: black;
  56. outline: 1pt solid black;
  57. }
  58. .button-active {
  59. background-color: white;
  60. color: black;
  61. outline: 1pt solid black;
  62. }
  63. .lo-res {
  64. outline: 10px solid red;
  65. }
  66. #interface {
  67. font-family: sans-serif;
  68. text-transform: uppercase;
  69. font-size: 10pt !important;
  70. line-height: 14pt;
  71. letter-spacing: 1pt;
  72. position: fixed;
  73. bottom: 10pt;
  74. right: 10pt;
  75. }
  76. #interface a {
  77. text-decoration: none;
  78. position: static;
  79. }
  80. div.dropdown {
  81. display: inline-block;
  82. position: relative;
  83. ul {
  84. padding: 0.5em 0;
  85. display: none;
  86. background-color: black;
  87. position: absolute;
  88. right: 0;
  89. bottom: 2em;
  90. height: 200pt;
  91. width: 80pt;
  92. overflow: auto;
  93. a {
  94. padding: 0 1em;
  95. color: white;
  96. display: block;
  97. &:hover {
  98. background-color: white;
  99. color: black;
  100. }
  101. }
  102. }
  103. button {
  104. width: 80pt;
  105. }
  106. }
  107. #toc {
  108. display: inline-block;
  109. }
  110. #toc-pages {
  111. padding: 0.5em 0;
  112. display: none;
  113. background-color: black;
  114. position: absolute;
  115. right: 0;
  116. bottom: 2em;
  117. height: 200pt;
  118. width: 80pt;
  119. overflow: auto;
  120. }
  121. #toc-pages a {
  122. padding: 0 1em;
  123. color: white;
  124. }
  125. #toc-pages a:hover {
  126. background-color: white;
  127. color: black;
  128. }
  129. #toc-pages button {
  130. width: 80pt;
  131. }
  132. }
  133. @media print {
  134. #interface {
  135. display: none;
  136. }
  137. }