File size: 2,845 Bytes
03d9a71 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
import { Theme, css } from 'antd-style';
export default (token: Theme) => css`
button {
cursor: pointer;
min-width: fit-content !important;
&.gradio-button {
&.tool {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
min-width: 36px !important;
max-width: 36px !important;
height: 36px;
min-height: 36px !important;
max-height: 36px;
padding: 0;
font-size: 14px;
line-height: 1;
background: ${token.colorFillSecondary};
border: 1px solid ${token.colorBorderSecondary};
border-radius: ${token.borderRadius}px;
&:hover {
background: ${token.colorFill};
}
&.lg {
max-width: max(36px, 100%) !important;
}
}
&.secondary,
&.primary {
overflow: hidden;
flex: 1;
font-size: 14px;
line-height: 1;
text-overflow: ellipsis;
&:active {
box-shadow: ${token.boxShadowSecondary};
}
}
&.secondary {
font-weight: 500;
background: ${token.colorFillTertiary};
border: 1px solid ${token.colorBorderSecondary};
border-radius: ${token.borderRadius}px !important;
&:hover {
color: ${token.colorText};
background: ${token.colorFill};
border-color: ${token.colorBorder};
}
}
&:not(.tool, .svelte-1p4r00v) {
&.primary,
&.secondary {
&.lg {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
}
}
&[id$='_generate'] {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
&[id$='_interrupt'] {
min-width: 0;
border-right: none !important;
border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px !important;
}
&[id$='_skip'] {
min-width: 0;
border-radius: 0 ${token.borderRadius}px ${token.borderRadius}px 0 !important;
}
&[id$='_interrupt'],
&[id$='_skip'] {
color: #fff !important;
background: ${token.colorError} !important;
&:hover {
color: #fff !important;
background: ${token.colorErrorHover} !important;
}
&:active {
color: #fff !important;
background: ${token.colorErrorActive} !important;
}
}
&#interrogate,
&#deepbooru {
display: block !important;
}
}
}
div[id^='image_buttons_'] {
flex-wrap: wrap;
gap: 4px !important;
> button {
flex: 1;
min-width: min(30%, 56px);
font-size: 12px !important;
}
}
`;
|