1
0

defaultStyle.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. #interface{
  2. display: grid;
  3. grid-template-columns: 80vw 20vw;
  4. grid-template-rows: 20px 70vh calc(100vh - 20px - 70vh);
  5. grid-template-areas:
  6. "top top"
  7. "main side"
  8. "act debugTools";
  9. position: absolute;
  10. width: 100vw;
  11. height: 100vh;
  12. }
  13. #interface > *{
  14. overflow: auto;
  15. }
  16. #interface #actions {
  17. grid-area: act;
  18. background: white;
  19. }
  20. #interface #actions > a {
  21. color: black;
  22. display: block;
  23. font-weight: bold;
  24. text-align: center;
  25. border: 1px solid;
  26. padding: 0.25em;
  27. text-decoration: none;
  28. background: white;
  29. }
  30. #interface #actions>a:hover {
  31. background: #aaa;
  32. }
  33. #interface #debugTools {
  34. grid-area: debugTools;
  35. color: white;
  36. background: #111;
  37. }
  38. #interface #passages {
  39. grid-area: main;
  40. }
  41. #interface #sidebar{
  42. grid-area: side;
  43. }
  44. #interface #topbar {
  45. grid-area: top;
  46. }
  47. #interface #topbar button {
  48. border: 0px;
  49. padding: 0;
  50. }
  51. @media (orientation: portrait) {
  52. #interface {
  53. grid-template-columns: auto;
  54. grid-template-rows: initial;
  55. grid-template-areas:
  56. "top"
  57. "main"
  58. "act"
  59. "side"
  60. "debugTools";
  61. position: absolute;
  62. height: initial;
  63. }
  64. .passage img{
  65. max-width: 90vw;
  66. }
  67. }