You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
5.1 KiB
263 lines
5.1 KiB
/* Hotbar (Macro bar) */
|
|
|
|
/* Glass - Remove prior styling */
|
|
|
|
#hotbar #macro-list,
|
|
#hotbar .bar-controls,
|
|
#hotbar #macro-list,
|
|
#hotbar .macro.inactive,
|
|
#hotbar .macro {
|
|
border: none;
|
|
border-radius: 0px;
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
background: none;
|
|
background-image: none;
|
|
}
|
|
|
|
/* Glass - Add new styling */
|
|
|
|
#hotbar #hotbar-directory-controls,
|
|
#hotbar #hotbar-page-controls,
|
|
#hotbar #macro-list,
|
|
#hotbar .macro.inactive,
|
|
#hotbar .macro:not(.active) {
|
|
border: none;
|
|
border-radius: var(--dorako-radius);
|
|
background-color: var(--dorako-bg-current);
|
|
/* backdrop-filter: var(--dorako-vibrancy); */
|
|
/*will-change: backdrop-filter;*/
|
|
transform: translate3d(0px, 0px, 0px);
|
|
box-shadow: var(--glassy);
|
|
}
|
|
|
|
#hotbar .bar-controls span.page-number {
|
|
text-shadow: var(--dorako-text-shadow);
|
|
}
|
|
|
|
#hotbar .macro .macro-key,
|
|
#custom-hotbar .macro .custom-macro-key {
|
|
background: none;
|
|
/* -webkit-text-stroke-width: 1px;
|
|
-webkit-text-stroke-color: black; */
|
|
text-shadow: 0px 0px 15px black, 0px 0px 14px black, 0px 0px 13px black, 0px 0px 12px black, 0px 0px 11px black, 0px 0px 10px black, -1px -1px 3px black, -1px 0px 3px black, -1px 1px 3px black, 0px -1px 3px black, 0px 0px 3px black, 0px 1px 3px black, 1px -1px 3px black, 1px 0px 3px black, 1px 1px 3px black;
|
|
/* text-shadow: var(--dorako-text-shadow); */
|
|
font-size: large;
|
|
}
|
|
|
|
#hotbar .bar-controls a.page-control {
|
|
font-size: var(--font-size-14);
|
|
}
|
|
|
|
#context-menu.expand-up {
|
|
bottom: calc(100% + 2px);
|
|
}
|
|
|
|
#context-menu.expand-up .expand-down {
|
|
bottom: calc(100% + 2px);
|
|
}
|
|
|
|
#hotbar .macro.active:hover {
|
|
border: unset;
|
|
}
|
|
|
|
#hotbar .macro:hover {
|
|
box-shadow: var(--glassy);
|
|
}
|
|
|
|
#hotbar .macro .macro-icon {
|
|
height: unset;
|
|
width: unset;
|
|
}
|
|
|
|
|
|
#hotbar .macro.inactive {
|
|
transition: background 0.15s ease-out;
|
|
background: var(--dorako-bg-current);
|
|
}
|
|
|
|
#hotbar .macro.inactive:hover {
|
|
transition: background 0.15s ease-out;
|
|
border: none;
|
|
box-shadow: var(--glassy);
|
|
background: var(--paizo-red);
|
|
}
|
|
|
|
#hotbar .macro.active {
|
|
transition: background 0.15s ease-out;
|
|
background-color: var(--paizo-blue-dark);
|
|
}
|
|
|
|
#hotbar .macro.active:hover {
|
|
transition: background 0.15s ease-out;
|
|
transition: box-shadow 0.15s ease-out;
|
|
background-color: var(--paizo-blue-bright);
|
|
}
|
|
|
|
|
|
|
|
#hotbar {
|
|
width: auto;
|
|
gap: 10px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
margin-bottom: var(--edge-margin);
|
|
flex-grow: 0;
|
|
}
|
|
|
|
#hotbar-page-controls .bar-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#hotbar .bar-controls span.page-number {
|
|
font-size: unset;
|
|
line-height: unset;
|
|
}
|
|
|
|
#hotbar .fas {
|
|
text-shadow: var(--dorako-text-shadow);
|
|
}
|
|
|
|
#hotbar .bar-controls {
|
|
flex: 0 0 22px;
|
|
height: auto;
|
|
margin: 0px;
|
|
}
|
|
|
|
#hotbar #action-bar {
|
|
flex: 1;
|
|
height: 100%;
|
|
pointer-events: all;
|
|
gap: 10px
|
|
}
|
|
|
|
#hotbar #macro-list {
|
|
background-color: var(--dorako-bg-current);
|
|
padding: 5px;
|
|
gap: 5px;
|
|
margin: 0px;
|
|
/* backdrop-filter: var(--dorako-vibrancy); */
|
|
flex: 1;
|
|
}
|
|
|
|
#hotbar .macrolist {
|
|
gap: 10px;
|
|
}
|
|
|
|
/* .sheet header.sheet-header img {
|
|
flex: 0 0 50px;
|
|
height: 50px;
|
|
margin-right: 0px;
|
|
box-shadow: var(--glassy);
|
|
background-color: var(--paizo-blue-dark);
|
|
} */
|
|
|
|
#hotbar .macro.active::before {
|
|
transition: box-shadow 0.5s ease-in-out;
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: var(--glassy);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#hotbar .macro.active:hover::before {
|
|
transition: box-shadow 0.5s ease-in-out;
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: 0px 0px 10px rgba(220, 200, 100, 0.5) inset, var(--glassy);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Thin hotbar */
|
|
|
|
#hotbar #macro-list {
|
|
box-shadow: none;
|
|
background: none;
|
|
padding: 0px;
|
|
gap: 2px;
|
|
margin: 0px;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Monk's hotbar */
|
|
.hotbar-page {
|
|
position: absolute;
|
|
bottom: 52px;
|
|
width: 592px;
|
|
/* left: -32px; */
|
|
transition: unset;
|
|
gap: 2px;
|
|
z-index: -1;
|
|
max-height: 270px;
|
|
overflow: visible;
|
|
}
|
|
|
|
#hotbar .macro-list {
|
|
margin: 0px;
|
|
}
|
|
|
|
.hotbar-page-row {
|
|
gap: 9px
|
|
}
|
|
|
|
.hotbar-page .action-bar {
|
|
display: contents;
|
|
}
|
|
|
|
.hotbar-page .macro-list {
|
|
flex: 0 0 518px;
|
|
height: 100%;
|
|
list-style: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border: none;
|
|
border-radius: 3px;
|
|
gap: 2px;
|
|
}
|
|
|
|
.hotbar-page.opening {
|
|
overflow: visible;
|
|
}
|
|
|
|
#hotbar .hotbar-page .bar-controls span.page-number,
|
|
#hotbar .hotbar-page .bar-controls i {
|
|
box-shadow: var(--glassy);
|
|
background-color: var(--dorako-bg-current);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#hotbar {
|
|
height: unset;
|
|
}
|
|
|
|
/* Hotbar */
|
|
#ui-bottom {
|
|
/* margin-left: 9px; */
|
|
margin-left: var(--hotbar-margin-left);
|
|
}
|
|
|
|
/* Minimal UI */
|
|
#hotbar:hover {
|
|
bottom: 0px;
|
|
margin-bottom: var(--edge-margin);
|
|
}
|
|
|
|
#hotbar #macro-list:hover {
|
|
border-top: none;
|
|
box-shadow: none;
|
|
transition: unset;
|
|
}
|