Add effects and tabs
This commit is contained in:
@@ -0,0 +1,270 @@
|
||||
// Active Effects styling - compact and modern design
|
||||
|
||||
// Effects container
|
||||
.effects-container {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
// Effect categories sections
|
||||
.effect-category {
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Effect list styling
|
||||
.stat-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.alternate-list {
|
||||
.list-item {
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 32px;
|
||||
|
||||
&.items-title-bg {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.25),
|
||||
rgba(0, 0, 0, 0.15)
|
||||
);
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.4);
|
||||
padding: 0.5rem 0.6rem;
|
||||
font-weight: bold;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-family: var(--font-secondary);
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.short-label {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.list-item-shadow {
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Effect image - compact size
|
||||
.sheet-competence-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.item-name-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover .sheet-competence-img {
|
||||
border-color: rgba(13, 110, 253, 0.6);
|
||||
box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// Effect labels - compact spacing
|
||||
.item-name-label-header-long {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.items-title-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name-label-long {
|
||||
flex: 2;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.item-field-label-short {
|
||||
flex: 0 0 90px;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.item-field-label-medium {
|
||||
flex: 0 0 100px;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Filler for spacing
|
||||
.item-filler {
|
||||
flex: 1;
|
||||
min-width: 10px;
|
||||
}
|
||||
|
||||
// Effect controls - compact and modern
|
||||
.item-controls {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.item-controls-fixed {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&.effect-controls {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.effect-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0.8),
|
||||
rgba(240, 240, 240, 0.8)
|
||||
);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
i {
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 1),
|
||||
rgba(230, 230, 230, 1)
|
||||
);
|
||||
border-color: rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&.item-edit:hover {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(13, 110, 253, 0.2),
|
||||
rgba(13, 110, 253, 0.3)
|
||||
);
|
||||
color: rgba(13, 110, 253, 1);
|
||||
border-color: rgba(13, 110, 253, 0.5);
|
||||
}
|
||||
|
||||
// New effect button styling
|
||||
&[data-action="create-effect"] {
|
||||
width: auto;
|
||||
padding: 0.3rem 0.5rem;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(40, 167, 69, 0.25),
|
||||
rgba(40, 167, 69, 0.35)
|
||||
);
|
||||
border-color: rgba(40, 167, 69, 0.4);
|
||||
color: rgba(25, 100, 42, 1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(40, 167, 69, 0.35),
|
||||
rgba(40, 167, 69, 0.45)
|
||||
);
|
||||
border-color: rgba(40, 167, 69, 0.6);
|
||||
color: rgba(25, 100, 42, 1);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Delete button specific styling
|
||||
&[data-action="effect-delete"]:hover {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(220, 53, 69, 0.2),
|
||||
rgba(220, 53, 69, 0.3)
|
||||
);
|
||||
color: rgba(220, 53, 69, 1);
|
||||
border-color: rgba(220, 53, 69, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Flexrow utility
|
||||
.flexrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
Reference in New Issue
Block a user