123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- .ability-panel-container {
- border: var(--golder);
- background-image: url("/assets/images/texture.png");
- box-shadow: var(--shadow);
- border-radius: 10px;
- display: flex;
- flex-direction: column;
- height: 100%;
- }
- .tab-row {
- display: flex;
- flex: 0 0 3rem;
- box-shadow: var(--shadow-bottom);
- border-radius: 10px;
- > * {
- flex: 1 1 0;
- }
- > :first-child {
- border-radius: 8px 0 0 0;
- border-right: 1px solid var(--border-color);
- }
- > :nth-child(2) {
- border-left: 1px solid var(--border-color);
- border-right: 1px solid var(--border-color);
- }
- > :nth-child(3) {
- border-left: 1px solid var(--border-color);
- border-right: 1px solid var(--border-color);
- }
- > :last-child {
- border-radius: 0 8px 0 0;
- border-left: 1px solid var(--border-color);
- }
- }
- .tab-button {
- height: 3rem;
- font-size: 1.375rem;
- font-weight: 600;
- color: black;
- border-bottom: solid 1px var(--border-color);
- border-right: 0;
- border-left: 0;
- border-top: 0;
- transition: all 0.25s ease-in-out;
- background-color: var(--tab);
- // box-shadow: var(--shadow-bottom);
- &.active {
- background-color: var(--tab-active);
- border-bottom: 3px solid var(--border-color);
- }
- }
- .footer {
- height: 5rem;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 0 0 10px 10px;
- box-shadow: var(--shadow-top);
- button {
- height: 3rem;
- width: 80%;
- border-radius: 10px;
- background: var(--accept);
- transition: background-color 0.2s ease-in-out;
- box-shadow: var(--shadow);
- &:hover {
- background-color: var(--accept-hover);
- }
- }
- }
- ability-table,
- trait-table,
- spellslots-table,
- proficiencies-table {
- flex: 0 0 calc(100% - 3rem);
- }
|