journal-stats.component.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. @import "../../../responsive";
  2. .dashboard-container {
  3. display: flex;
  4. gap: 1rem;
  5. margin: auto;
  6. padding: 1.5rem 1.5rem 0 1.5rem;
  7. width: 1280px;
  8. height: 840px;
  9. @include width-small {
  10. width: 1494px;
  11. }
  12. @include width-medium {
  13. width: 1707px;
  14. }
  15. // Width large is probably too large
  16. // @include width-large {
  17. // width: 1920px;
  18. // }
  19. @include height-small {
  20. height: 910px;
  21. }
  22. @include height-medium {
  23. height: 977px;
  24. }
  25. @include height-large {
  26. height: 1056px;
  27. }
  28. }
  29. .attribute-skill-container {
  30. display: flex;
  31. gap: 1rem;
  32. .save-skills-container {
  33. display: flex;
  34. flex-direction: column;
  35. gap: 1rem;
  36. }
  37. }
  38. .info-tabels-container {
  39. display: flex;
  40. flex-direction: column;
  41. gap: 1rem;
  42. }
  43. .tables {
  44. display: flex;
  45. gap: 1rem;
  46. }
  47. .life-weapon-container {
  48. display: flex;
  49. flex-direction: column;
  50. gap: 1rem;
  51. width: 388px;
  52. @include width-small {
  53. width: 500px;
  54. }
  55. @include width-medium {
  56. width: 600px;
  57. }
  58. }
  59. ability-panel {
  60. width: 391px;
  61. height: 702px;
  62. @include width-small {
  63. width: 495px;
  64. }
  65. @include width-medium {
  66. width: 609px;
  67. }
  68. @include height-small {
  69. height: 772px;
  70. }
  71. @include height-medium {
  72. height: 839px;
  73. }
  74. @include height-large {
  75. height: 917px;
  76. }
  77. }
  78. weapons-container {
  79. width: 100%;
  80. height: 515px;
  81. @include height-small {
  82. height: 585px;
  83. }
  84. @include height-medium {
  85. height: 652px;
  86. }
  87. @include height-large {
  88. height: 730px;
  89. }
  90. }