ability-panel.component.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .ability-panel-container {
  2. border: var(--golder);
  3. background-image: url("/assets/images/texture.png");
  4. box-shadow: var(--shadow);
  5. border-radius: 10px;
  6. display: flex;
  7. flex-direction: column;
  8. height: 100%;
  9. }
  10. .tab-row {
  11. display: flex;
  12. flex: 0 0 3rem;
  13. box-shadow: var(--shadow-bottom);
  14. border-radius: 10px;
  15. > * {
  16. flex: 1 1 0;
  17. }
  18. > :first-child {
  19. border-radius: 8px 0 0 0;
  20. border-right: 1px solid var(--border-color);
  21. }
  22. > :nth-child(2) {
  23. border-left: 1px solid var(--border-color);
  24. border-right: 1px solid var(--border-color);
  25. }
  26. > :nth-child(3) {
  27. border-left: 1px solid var(--border-color);
  28. border-right: 1px solid var(--border-color);
  29. }
  30. > :last-child {
  31. border-radius: 0 8px 0 0;
  32. border-left: 1px solid var(--border-color);
  33. }
  34. }
  35. .tab-button {
  36. height: 3rem;
  37. font-size: 1.375rem;
  38. font-weight: 600;
  39. color: black;
  40. border-bottom: solid 1px var(--border-color);
  41. border-right: 0;
  42. border-left: 0;
  43. border-top: 0;
  44. transition: all 0.25s ease-in-out;
  45. background-color: var(--tab);
  46. // box-shadow: var(--shadow-bottom);
  47. &.active {
  48. background-color: var(--tab-active);
  49. border-bottom: 3px solid var(--border-color);
  50. }
  51. }
  52. .footer {
  53. height: 5rem;
  54. width: 100%;
  55. display: flex;
  56. justify-content: center;
  57. align-items: center;
  58. border-radius: 0 0 10px 10px;
  59. box-shadow: var(--shadow-top);
  60. button {
  61. height: 3rem;
  62. width: 80%;
  63. border-radius: 10px;
  64. background: var(--accept);
  65. transition: background-color 0.2s ease-in-out;
  66. box-shadow: var(--shadow);
  67. &:hover {
  68. background-color: var(--accept-hover);
  69. }
  70. }
  71. }
  72. ability-table,
  73. trait-table,
  74. spellslots-table,
  75. proficiencies-table {
  76. flex: 0 0 calc(100% - 3rem);
  77. }