mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
81 lines
1.6 KiB
SCSS
81 lines
1.6 KiB
SCSS
@use 'textLevel';
|
|
@use 'borderPlaceholders';
|
|
//- Our basic button styling
|
|
%base-button{
|
|
background-color: #DCDCDC33;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 4px black;
|
|
border-width: 0;
|
|
transition: {
|
|
property:box-shadow,backdrop-filter;
|
|
duration:200ms;
|
|
timing-function:ease-out;
|
|
};
|
|
backdrop-filter:blur(1px);
|
|
overflow:hidden;
|
|
&:is(:hover,:focus){
|
|
background-color: #85858580;
|
|
box-shadow: 0 4px 6px black;
|
|
backdrop-filter:blur(2px);
|
|
}
|
|
&:active{
|
|
background-color: #858585ff;
|
|
box-shadow: 0 1px 2px black;
|
|
backdrop-filter:blur(0px);
|
|
}
|
|
}
|
|
//- Styling for our dice buttons
|
|
%die-button{
|
|
@extend %base-button;
|
|
line-height: 14px;
|
|
/*height to vertically center a 2rem dicefontd10*/
|
|
font-size: 2rem;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
padding: 5px 3px 7px;
|
|
}
|
|
//- styling for buttons that have standard text in them
|
|
%text-button{
|
|
padding: 5px 7px;
|
|
@extend %base-button;
|
|
}
|
|
//- Styling for our roll buttons
|
|
%roller{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
align-self:start;
|
|
gap: var(--half-gap);
|
|
color:var(--fontColor);
|
|
&:before{
|
|
content:'L';
|
|
font-family:dicefontd6;
|
|
}
|
|
}
|
|
%button{
|
|
button{
|
|
cursor: pointer;
|
|
}
|
|
.roller{
|
|
display:flex;
|
|
gap:var(--half-gap);
|
|
align-items:center;
|
|
&:before{
|
|
font-family:dicefontd20;
|
|
content:'T'
|
|
}
|
|
}
|
|
.control-button{
|
|
@extend %inputHighlight;
|
|
align-self:center;
|
|
padding-inline:var(--tiny-gap);
|
|
transition: {
|
|
property: background-color, color;
|
|
duration: var(--revealTime);
|
|
timing-function: ease;
|
|
}
|
|
&:hover{
|
|
background-color:var(--borderColor);
|
|
color:var(--backColor);
|
|
}
|
|
}
|
|
} |