.weapon-spell-container { border: solid 1px var(--border-color); // background-color: var(--field-background-color); box-shadow: var(--shadow-small); border-radius: 10px; height: 35.5rem; display: flex; flex-direction: column; } .tab-button { height: 2.25rem; font-size: 1.375rem; font-weight: 600; color: black; transition: all 0.25s ease-in-out; background-color: var(--primary-color-light); border-top: 0; border-left: 0; border-bottom: 1px solid var(--border-color); border-right: 0; &.active { height: 2.75rem; background-color: var(--primary-color); border-bottom: 3px solid var(--border-color); } } .tab-row { display: flex; flex: 0 0 3rem; > * { flex: 1 1 0; } > :first-child { border-radius: 10px 0 0 0; &.active { border-right: 1px solid var(--border-color); } } > :last-child { border-radius: 0 10px 0 0; border-right: 1px solid var(--border-color); &.active { border-left: 1px solid var(--border-color); } } } weapon-table { // 100% - tabbar height - add button height height: calc(100% - 8rem); } spell-table { // 100% - tabbar height - add button height height: calc(100% - 3rem); // height: 100%; } .button-margin { margin: 1rem 0rem; } .example-list { max-width: 100%; border: solid 1px #323232; min-height: 60px; display: block; background: transparent; border-radius: 4px; overflow: hidden; } .damage-list { display: flex; flex-direction: column; } .damage-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0.1rem; } .example-box { padding: 20px 10px; border-bottom: solid 1px #ccc; color: rgba(0, 0, 0, 0.87); display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; cursor: move; background: white; font-size: 14px; input { border: none; background: transparent; text-align: center; } } //////////////// list item elemens //////////////// ////////////////////////////////////////////////// .vertical-line { width: 1px; height: 3rem; border-left: solid 1px rgb(121, 121, 121); } .weapon-type { width: 2rem; text-align: center; } .weapon-proficient { width: 2rem; text-align: center; } .weapon-name { width: 6rem; text-align: center; } .weapon-attack-bonus { width: 2rem; text-align: center; } .weapon-damage { width: 3rem; text-align: center; } .weapon-range { width: 4rem; text-align: center; } .weapon-edit { width: 3rem; text-align: center; } // Drag and Drop .cdk-drag-preview { box-sizing: border-box; border-radius: 4px; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .cdk-drag-placeholder { opacity: 0; } .cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .example-box:last-child { border: none; } .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); }