123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- .header {
- display: flex;
- justify-content: space-between;
- height: 6.5rem;
- background-color: var(--header);
- box-shadow: var(--shadow);
- .header-data {
- margin: 0 5rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 100%;
- input {
- width: 6rem;
- border: none;
- background: none;
- font-size: 1.75rem;
- font-weight: 600;
- text-align: center;
- }
- input[type="number"]::-webkit-inner-spin-button,
- input[type="number"]::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
- input[type="number"] {
- -moz-appearance: textfield;
- appearance: textfield;
- }
- }
- .name {
- text-align: center;
- font-size: 3em;
- font-weight: bold;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- }
- .horizontal-ruler {
- width: 8rem;
- height: 1px;
- border-top: 1px solid var(--border-color);
- }
- }
- .character-body {
- height: calc(100vh - 6.5rem);
- .navigation-bar {
- padding-top: 1.5rem;
- gap: 2rem;
- box-shadow: var(--shadow);
- height: 100%;
- align-items: center;
- .nav-link {
- width: 90%;
- border-radius: 10px;
- transition: all 0.25s ease-in-out;
- font-size: 1.25rem;
- font-weight: 600;
- color: var(--text);
- &.active,
- &:hover {
- background-color: var(--tab-active);
- box-shadow: var(--shadow);
- }
- }
- .disabled-button {
- border: none;
- font-size: 1.25rem;
- font-weight: 600;
- color: black;
- cursor: not-allowed;
- }
- }
- .outlet {
- margin: 2.5rem 2.5rem 0 2.5rem;
- width: 100%;
- }
- .d-flex {
- height: 100%;
- }
- ::ng-deep .tab-pane {
- height: 100%;
- width: 100%;
- }
- }
|