123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- .journal-content {
- flex-direction: column;
- gap: 1rem;
- }
- .top-button {
- width: 18.5rem;
- }
- .class-picker {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- padding-top: 0.25rem;
- margin-bottom: 1.5rem;
- gap: 1rem;
- width: 100%;
- height: 8rem;
- border: var(--gold-2);
- div.class:first-child {
- margin-right: 2rem;
- }
- background-image: url("/assets/images/texture-0.jpg");
- border-radius: 10px;
- box-shadow: var(--shadow);
- }
- // Classes
- @mixin class-icon {
- width: 70px;
- height: 70px;
- background-size: cover;
- background-position: center center;
- border-radius: 50%;
- opacity: 0.5;
- transition: opacity 0.2s ease-in-out;
- &:hover {
- opacity: 0.75;
- }
- }
- .class {
- width: 100px;
- height: 100px;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- label {
- width: 10rem;
- text-align: center;
- font-weight: 500;
- color: var(--text);
- }
- }
- .icon-active {
- opacity: 1 !important;
- &::after {
- border: 3px solid var(--gold-dark);
- content: "";
- height: 80px;
- width: 80px;
- display: block;
- border-radius: 50%;
- position: relative;
- top: -5px;
- left: -5px;
- }
- }
- .nav-link {
- background-color: var(--tab);
- color: black;
- font-size: 1.123rem;
- font-weight: 500;
- width: 8rem;
- height: 4rem;
- border-radius: 10px 10px 0 0;
- border: var(--border);
- transition: all 0.2s ease-in-out;
- &:hover {
- background-color: var(--tab-hover);
- }
- }
- .nav-link.active {
- background-color: var(--tab-active);
- width: 9.25rem;
- font-size: 1.25rem;
- font-weight: 550;
- border: var(--border);
- }
- .card-container {
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
- width: 100%;
- min-height: 400px;
- padding: 1rem;
- padding-top: 2rem;
- background-image: url("/assets/images/texture-0.jpg");
- border-radius: 0 0 10px 10px;
- box-shadow: var(--shadow);
- border: var(--gold-2);
- border-top: none;
- }
- spellcard {
- display: inline-block;
- }
- .empty {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 320px;
- font-size: 1.5rem;
- font-weight: 600;
- }
- .all-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/all.png");
- }
- .artificer-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/artificer.jpg");
- }
- .cleric-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/cleric.jpg");
- }
- .bard-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/bard.jpg");
- }
- .druid-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/druid.jpg");
- }
- .paladin-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/paladin.jpg");
- }
- .ranger-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/ranger.jpg");
- }
- .sorcerer-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/sorcerer.jpg");
- }
- .warlock-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/warlock.jpg");
- }
- .wizard-icon {
- @include class-icon;
- background-image: url("/assets/images/classes/wizard.jpg");
- }
|