| :not(#fakeid) .rgthree-button-reset {
|
| position: relative;
|
| appearance: none;
|
| cursor: pointer;
|
| border: 0;
|
| background: transparent;
|
| color: inherit;
|
| padding: 0;
|
| margin: 0;
|
| }
|
|
|
| $borderRadius: 0.33rem;
|
|
|
| :not(#fakeid) .rgthree-button {
|
| --padding-top: 7px;
|
| --padding-bottom: 9px;
|
| --padding-x: 16px;
|
| position: relative;
|
| cursor: pointer;
|
| border: 0;
|
| border-radius: $borderRadius;
|
| background: rgba(0, 0, 0, 0.5);
|
| color: white;
|
| font-family: system-ui, sans-serif;
|
| font-size: calc(16rem / 16);
|
| line-height: 1;
|
| white-space: nowrap;
|
| text-decoration: none;
|
| margin: 0.25rem;
|
| box-shadow: 0px 0px 2px rgb(0, 0, 0);
|
| background: #212121;
|
| transition: all 0.1s ease-in-out;
|
| padding: var(--padding-top) var(--padding-x) var(--padding-bottom);
|
| display: inline-flex;
|
| flex-direction: row;
|
| align-items: center;
|
| justify-content: center;
|
|
|
| &::before,
|
| &::after {
|
| content: "";
|
| display: block;
|
| position: absolute;
|
| border-radius: $borderRadius;
|
| left: 0;
|
| top: 0;
|
| width: 100%;
|
| height: 100%;
|
| box-shadow:
|
| inset 1px 1px 0px rgba(255, 255, 255, 0.12),
|
| inset -1px -1px 0px rgba(0, 0, 0, 0.75);
|
| background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15));
|
| mix-blend-mode: screen;
|
| }
|
|
|
| &::after {
|
| mix-blend-mode: multiply;
|
| }
|
|
|
| &:hover {
|
| background: #303030;
|
| }
|
| &:active {
|
| box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
|
| background: #121212;
|
| padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px)
|
| calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px);
|
| }
|
|
|
| &:active::before,
|
| &:active::after {
|
| box-shadow:
|
| 1px 1px 0px rgba(255, 255, 255, 0.15),
|
| inset 1px 1px 0px rgba(0, 0, 0, 0.5),
|
| inset 1px 3px 5px rgba(0, 0, 0, 0.33);
|
| }
|
|
|
| &.-blue {
|
| background: #346599 !important;
|
| }
|
| &.-blue:hover {
|
| background: #3b77b8 !important;
|
| }
|
| &.-blue:active {
|
| background: #1d5086 !important;
|
| }
|
|
|
| &.-green {
|
| background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b;
|
| }
|
| &.-green:hover {
|
| background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f;
|
| }
|
| &.-green:active {
|
| background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09;
|
| }
|
|
|
| &[disabled] {
|
| box-shadow: none;
|
| background: #666 !important;
|
| color: #aaa;
|
| pointer-events: none;
|
| }
|
| &[disabled]::before,
|
| &[disabled]::after {
|
| display: none;
|
| }
|
| }
|
|
|
| :not(#fakeid) .rgthree-comfybar-top-button-group {
|
| font-size: 0;
|
| flex: 1 1 auto;
|
| display: flex;
|
| align-items: stretch;
|
|
|
| .rgthree-comfybar-top-button {
|
| margin: 0;
|
| flex: 1 1;
|
| height: 36px;
|
| padding: 0 12px;
|
| border-radius: 0;
|
| background: var(--p-button-secondary-background);
|
| color: var(--p-button-secondary-color);
|
|
|
| &.-primary {
|
| background: var(--p-button-primary-background);
|
| color: var(--p-button-primary-color);
|
| }
|
|
|
| &::before,
|
| &::after {
|
| border-radius: 0;
|
| }
|
|
|
|
|
| svg {
|
| fill: currentColor;
|
| width: 28px;
|
| height: 28px;
|
| }
|
| }
|
|
|
| .rgthree-comfybar-top-button:first-of-type,
|
| .rgthree-comfybar-top-button:first-of-type::before,
|
| .rgthree-comfybar-top-button:first-of-type::after {
|
| border-top-left-radius: 0.33rem;
|
| border-bottom-left-radius: 0.33rem;
|
|
|
| }
|
| .rgthree-comfybar-top-button:last-of-type,
|
| .rgthree-comfybar-top-button:last-of-type::before,
|
| .rgthree-comfybar-top-button:last-of-type::after {
|
| border-top-right-radius: 0.33rem;
|
| border-bottom-right-radius: 0.33rem;
|
| }
|
| } |
