2023-07-20 19:32:15 +02:00
@ charset "UTF-8" ;
2024-06-13 23:55:28 +02:00
@ import url ( css / animations . css ) ;
@ import url ( css / popup . css ) ;
2023-05-28 15:59:13 +02:00
@ import url ( css / promptmanager . css ) ;
2023-10-31 21:16:33 +01:00
@ import url ( css / loader . css ) ;
2023-10-21 15:12:09 +02:00
@ import url ( css / character-group-overlay . css ) ;
2023-11-18 18:23:58 +01:00
@ import url ( css / file-form . css ) ;
2024-01-23 06:00:31 +01:00
@ import url ( css / logprobs . css ) ;
2024-04-09 23:01:03 +02:00
@ import url ( css / accounts . css ) ;
2024-06-13 23:55:28 +02:00
@ import url ( css / tags . css ) ;
2023-05-28 15:59:13 +02:00
2023-07-20 19:32:15 +02:00
: root {
--doc-height : 100 % ;
--transparent : rgba ( 0 , 0 , 0 , 0 ) ;
--black30a : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
--black50a : rgba ( 0 , 0 , 0 , 0 . 5 ) ;
--black60a : rgba ( 0 , 0 , 0 , 0 . 6 ) ;
--black70a : rgba ( 0 , 0 , 0 , 0 . 7 ) ;
--black90a : rgba ( 0 , 0 , 0 , 0 . 9 ) ;
--black100 : rgba ( 0 , 0 , 0 , 1 ) ;
2023-05-28 15:59:27 +02:00
--white20a : rgba ( 255 , 255 , 255 , 0 . 2 ) ;
2023-07-20 19:32:15 +02:00
--white30a : rgba ( 255 , 255 , 255 , 0 . 3 ) ;
--white50a : rgba ( 255 , 255 , 255 , 0 . 5 ) ;
--white60a : rgba ( 255 , 255 , 255 , 0 . 6 ) ;
--white70a : rgba ( 255 , 255 , 255 , 0 . 7 ) ;
--white100 : rgba ( 255 , 255 , 255 , 1 ) ;
--grey10 : rgb ( 25 , 25 , 25 ) ;
--grey30 : rgb ( 75 , 75 , 75 ) ;
--grey50 : rgb ( 125 , 125 , 125 ) ;
2023-11-05 18:46:19 +01:00
--grey5020a : rgba ( 125 , 125 , 125 , 0 . 2 ) ;
2023-11-08 06:08:51 +01:00
--grey5050a : rgba ( 125 , 125 , 125 , 0 . 5 ) ;
2023-07-20 19:32:15 +02:00
--grey70 : rgb ( 175 , 175 , 175 ) ;
--grey75 : rgb ( 190 , 190 , 190 ) ;
--grey30a : rgba ( 50 , 50 , 50 , 0 . 3 ) ;
--grey7070a : rgba ( 175 , 175 , 175 , 0 . 7 ) ;
--fullred : rgba ( 255 , 0 , 0 , 1 ) ;
--crimson70a : rgba ( 100 , 0 , 0 , 0 . 7 ) ;
2024-03-27 03:36:09 +01:00
--crimson-hover : rgba ( 150 , 50 , 50 , 0 . 5 ) ;
2023-07-20 19:32:15 +02:00
--okGreen70a : rgba ( 0 , 100 , 0 , 0 . 7 ) ;
--cobalt30a : rgba ( 100 , 100 , 255 , 0 . 3 ) ;
--greyCAIbg : rgb ( 36 , 36 , 37 ) ;
--ivory : rgb ( 220 , 220 , 210 ) ;
2023-08-20 18:09:19 +02:00
--golden : rgb ( 248 , 211 , 0 ) ;
--warning : rgba ( 255 , 0 , 0 , 0 . 9 ) ;
2023-08-20 18:26:49 +02:00
--active : rgb ( 88 , 182 , 0 ) ;
2023-08-20 18:09:19 +02:00
--preferred : rgb ( 244 , 67 , 54 ) ;
2023-07-20 19:32:15 +02:00
2024-06-18 00:14:15 +02:00
--interactable-outline-color : var ( --white100 ) ;
2024-06-18 01:01:39 +02:00
--interactable-outline-color-faint : var ( --white20a ) ;
2024-06-18 00:14:15 +02:00
2023-07-20 19:32:15 +02:00
/*Default Theme, will be changed by ToolCool Color Picker*/
--SmartThemeBodyColor : rgb ( 220 , 220 , 210 ) ;
--SmartThemeEmColor : rgb ( 145 , 145 , 145 ) ;
2024-03-01 06:33:37 +01:00
--SmartThemeUnderlineColor : rgb ( 188 , 231 , 207 ) ;
2023-07-20 19:32:15 +02:00
--SmartThemeQuoteColor : rgb ( 225 , 138 , 36 ) ;
/* --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9); */
--SmartThemeBlurTintColor : rgba ( 23 , 23 , 23 , 1 ) ;
2023-09-22 09:54:51 +02:00
--SmartThemeChatTintColor : rgba ( 23 , 23 , 23 , 1 ) ;
2023-07-20 19:32:15 +02:00
--SmartThemeUserMesBlurTintColor : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
--SmartThemeBotMesBlurTintColor : rgba ( 60 , 60 , 60 , 0 . 3 ) ;
--SmartThemeBlurStrength : calc ( var ( --blurStrength ) * 1px ) ;
--SmartThemeShadowColor : rgba ( 0 , 0 , 0 , 0 . 5 ) ;
2023-09-16 08:42:26 +02:00
--SmartThemeBorderColor : rgba ( 0 , 0 , 0 , 0 . 5 ) ;
2023-11-21 02:26:43 +01:00
--SmartThemeCheckboxBgColorR : 220 ;
--SmartThemeCheckboxBgColorG : 220 ;
--SmartThemeCheckboxBgColorB : 210 ;
2023-11-23 14:10:23 +01:00
--SmartThemeCheckboxTickColorValue : calc ( ( ( ( ( var ( --SmartThemeCheckboxBgColorR ) * 299 ) + ( var ( --SmartThemeCheckboxBgColorG ) * 587 ) + ( var ( --SmartThemeCheckboxBgColorB ) * 114 ) ) / 1000 ) - 128 ) * -1000 ) ;
--SmartThemeCheckboxTickColor : rgb ( var ( --SmartThemeCheckboxTickColorValue ) ,
var ( --SmartThemeCheckboxTickColorValue ) ,
var ( --SmartThemeCheckboxTickColorValue ) ) ;
2023-07-20 19:32:15 +02:00
--sheldWidth : 50vw ;
/* 800px; */
/*base variable calculated in rems*/
--fontScale : 1 ;
2023-08-21 11:29:14 +02:00
--mainFontSize : calc ( var ( --fontScale ) * 15px ) ;
2024-06-26 19:37:29 +02:00
--mainFontFamily : "Noto Sans" , sans-serif ;
2024-06-13 20:05:50 +02:00
--monoFontFamily : 'Noto Sans Mono' , 'Courier New' , Consolas , monospace ;
2023-07-20 19:32:15 +02:00
/* base variable for blur strength slider calculations */
--blurStrength : 10 ;
/* base variable for shadow width slider calculations */
--shadowWidth : 2 ;
color-scheme : only light ;
2023-08-24 17:32:42 +02:00
/* Send form variables */
2023-11-14 10:36:57 +01:00
--bottomFormBlockPadding : calc ( var ( --mainFontSize ) / 2 . 5 ) ;
--bottomFormIconSize : calc ( var ( --mainFontSize ) * 1 . 9 ) ;
2023-08-24 17:32:42 +02:00
--bottomFormBlockSize : calc ( var ( --bottomFormIconSize ) + var ( --bottomFormBlockPadding ) ) ;
2023-07-20 19:32:15 +02:00
2023-08-25 00:06:52 +02:00
/*Top Bar Scaling Variables*/
--topBarIconSize : calc ( var ( --mainFontSize ) * 2 ) ;
--topBarBlockSize : calc ( var ( --topBarIconSize ) + var ( --topBarBlockPadding ) ) ;
--topBarBlockPadding : calc ( var ( --mainFontSize ) / 3 ) ;
2023-07-20 19:32:15 +02:00
/*styles for the color picker*/
--tool-cool-color-picker-btn-bg : transparent ;
--tool-cool-color-picker-btn-border-color : transparent ;
2024-02-28 06:05:04 +01:00
--avatar-base-height : 50px ;
--avatar-base-width : 50px ;
--avatar-base-border-radius : 2px ;
--avatar-base-border-radius-round : 50 % ;
2024-03-06 04:59:39 +01:00
--inline-avatar-small-factor : 0 . 6 ;
2024-05-30 05:11:23 +02:00
--animation-duration : 125ms ;
--animation-duration-slow : calc ( var ( --animation-duration ) * 3 ) ;
2023-07-20 19:32:15 +02:00
}
* {
box-sizing : border-box ;
-webkit-font-smoothing : antialiased ;
-moz-osx-font-smoothing : grayscale ;
text-shadow : 0px 0px calc ( var ( --shadowWidth ) * 1px ) var ( --SmartThemeShadowColor ) ;
}
html {
/*fix for chrome flickering on blurred divs*/
-webkit-transform : translateZ ( 0 ) ;
-webkit-backface-visibility : hidden ;
-webkit-perspective : 1000 ;
}
body {
margin : 0 ;
padding : 0 ;
width : 100 % ;
/*fallback for JS load*/
height : 100vh ;
2024-07-08 17:06:06 +02:00
height : 100dvh ;
2023-07-20 19:32:15 +02:00
/*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
2024-05-14 21:13:00 +02:00
/*height: calc(var(--doc-height) - 1px);*/
2023-07-20 19:32:15 +02:00
background-color : var ( --greyCAIbg ) ;
background-repeat : no-repeat ;
background-attachment : fixed ;
background-size : cover ;
2024-05-12 21:15:05 +02:00
font-family : var ( --mainFontFamily ) ;
2023-07-20 19:32:15 +02:00
font-size : var ( --mainFontSize ) ;
color : var ( --SmartThemeBodyColor ) ;
2023-11-22 16:59:46 +01:00
overflow : hidden ;
2023-07-20 19:32:15 +02:00
}
:: -webkit-scrollbar {
width : 10px ;
2024-03-25 14:04:57 +01:00
height : 10px ;
2023-07-20 19:32:15 +02:00
scrollbar-gutter : stable ;
}
2023-07-21 09:05:05 +02:00
. scrollY {
2023-11-27 01:48:05 +01:00
overflow-y : auto ! important ;
2023-07-21 09:05:05 +02:00
}
2024-03-25 14:04:57 +01:00
:: -webkit-scrollbar-thumb : vertical {
2023-07-20 19:32:15 +02:00
background-color : var ( --grey7070a ) ;
box-shadow : inset 0 0 0 1px var ( --black50a ) ;
border-radius : 10px ;
background-clip : content-box ;
border : 2px solid transparent ;
min-height : 40px ;
}
2024-04-19 10:35:08 +02:00
2024-05-02 22:06:16 +02:00
body . movingUI :: -webkit-scrollbar-thumb : vertical {
border-top : 20px solid transparent ;
}
2024-03-25 14:04:57 +01:00
:: -webkit-scrollbar-thumb : horizontal {
background-color : var ( --grey7070a ) ;
box-shadow : inset 0 0 0 1px var ( --black50a ) ;
border-radius : 10px ;
background-clip : content-box ;
border : 2px solid transparent ;
min-width : 40px ;
}
2023-07-20 19:32:15 +02:00
table . responsiveTable {
width : 100 % ;
margin : 10px 0 ;
}
. responsiveTable tr {
display : flex ;
}
. responsiveTable ,
. responsiveTable th ,
. responsiveTable td {
flex : 1 ;
border : 1px solid ;
border-collapse : collapse ;
word-break : break-all ;
padding : 5px ;
}
. hidden ,
. hiddenByScroll {
visibility : hidden ! important ;
}
. animated {
2024-07-10 19:43:58 +02:00
-webkit-animation-duration : var ( --animation-duration , 3s ) ! important ;
animation-duration : var ( --animation-duration , 3s ) ! important ;
2023-07-20 19:32:15 +02:00
-webkit-animation-fill-mode : both ! important ;
animation-fill-mode : both ! important ;
box-shadow : inset 0 0 5px var ( --SmartThemeQuoteColor ) ;
}
. flash {
animation-name : flash ;
}
2024-06-03 06:19:41 +02:00
/* Keyboard/focus navigation styling */
2024-06-08 07:13:52 +02:00
/* Mimic the outline of keyboard navigation for most most focusable controls */
2024-06-04 04:05:40 +02:00
. interactable {
2024-06-03 06:19:41 +02:00
border-radius : 5px ;
}
2023-07-20 19:32:15 +02:00
2024-06-08 07:13:52 +02:00
/* Outline for "normal" buttons should only be when actual keyboard navigation is used */
. interactable : focus-visible {
2024-06-18 00:14:15 +02:00
outline : 1px solid var ( --interactable-outline-color ) ;
2023-07-20 19:32:15 +02:00
}
2024-06-08 07:13:52 +02:00
/* The specific input controls can always have a faint outline, even on mouse interaction, to give a better hint */
2024-06-18 00:14:15 +02:00
select : focus-visible ,
input : focus-visible ,
textarea : focus-visible {
outline : 1px solid var ( --interactable-outline-color-faint ) ;
2024-06-03 06:19:41 +02:00
}
2024-06-18 00:14:15 +02:00
input [ type = 'checkbox' ] : focus-visible {
outline : 1px solid var ( --interactable-outline-color ) ;
2024-06-03 06:19:41 +02:00
}
2024-06-02 05:54:41 +02:00
/* General dragover styling */
. dragover {
filter : brightness ( 1 . 1 ) saturate ( 1 . 0 ) ;
outline : 3px dashed var ( --SmartThemeBorderColor ) ;
animation : pulse 0 . 5s infinite alternate ;
}
. dragover . no_animation {
animation : none ;
2023-07-20 19:32:15 +02:00
}
. tokenItemizingSubclass {
font-size : calc ( var ( --mainFontSize ) * 0 . 8 ) ;
color : var ( --SmartThemeEmColor ) ;
2023-08-21 22:50:38 +02:00
}
2023-07-20 19:32:15 +02:00
. tokenGraph {
border-radius : 10px ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
max-height : 100 % ;
overflow : hidden ;
}
. fa-solid :: before ,
. fa-regular :: before {
vertical-align : middle ;
text-align : center ;
}
2024-06-03 06:19:41 +02:00
. fa-lock . right_menu_button ,
. fa-unlock . right_menu_button {
2024-06-08 07:13:52 +02:00
padding : 2px 4px ;
2024-06-03 06:19:41 +02:00
}
2023-05-28 15:59:27 +02:00
. text_muted {
font-size : calc ( var ( --mainFontSize ) - 0 . 2rem ) ;
color : var ( --white50a ) ;
}
2023-11-21 01:54:04 +01:00
. mes [ is_system = "true" ] [ ch_name = "SillyTavern System" ] . mes_text br {
2023-08-23 09:32:48 +02:00
display : none ;
}
2023-11-03 22:45:56 +01:00
. mes [ is_system = "true" ] . avatar {
opacity : 0 . 9 ;
filter : grayscale ( 25 % ) ;
}
2023-08-10 12:18:12 +02:00
. mes_text table {
border-spacing : 0 ;
border-collapse : collapse ;
2024-04-28 17:39:57 +02:00
margin-bottom : 10px ;
2023-08-10 12:18:12 +02:00
}
. mes_text td ,
. mes_text th {
border : 1px solid ;
border-collapse : collapse ;
padding : 0 . 25em ;
}
2023-07-20 19:32:15 +02:00
. mes_text p {
margin-top : 0 ;
margin-bottom : 10px ;
}
. mes_text li tt {
display : inline-block ;
}
. mes_text br ,
. mes_bias br {
content : ' ' ;
}
. mes_bias {
display : block ;
font-size : calc ( var ( --mainFontSize ) - 0 . 1rem ) ;
font-weight : 500 ;
2023-08-20 18:09:19 +02:00
color : var ( --SmartThemeQuoteColor ) ;
2023-07-20 19:32:15 +02:00
}
. mes_text i ,
. mes_text em {
color : var ( --SmartThemeEmColor ) ;
}
2024-03-01 20:35:33 +01:00
. mes_text u {
2024-03-01 06:33:37 +01:00
color : var ( --SmartThemeUnderlineColor ) ;
}
2023-08-07 21:52:22 +02:00
. mes_text q {
2023-07-20 19:32:15 +02:00
color : var ( --SmartThemeQuoteColor ) ;
2023-08-05 11:51:28 +02:00
}
2023-08-10 09:57:31 +02:00
2023-11-05 21:58:03 +01:00
. mes_text font [ color ] em ,
. mes_text font [ color ] i {
color : inherit ;
}
. mes_text font [ color ] q {
color : inherit ;
}
2023-08-10 09:57:31 +02:00
. mes_text rp {
display : block ;
}
2023-08-05 11:51:28 +02:00
. mes_text blockquote {
2023-08-05 11:36:39 +02:00
border-left : 3px solid var ( --SmartThemeQuoteColor ) ;
padding-left : 10px ;
background-color : var ( --black30a ) ;
2023-08-07 13:08:49 +02:00
margin : 0 ;
2023-07-20 19:32:15 +02:00
}
. mes_text strong em ,
. mes_text strong ,
. mes_text h2 ,
. mes_text h1 {
font-weight : bold ;
}
. mes_text pre code {
position : relative ;
display : block ;
overflow-x : auto ;
padding : 1em ;
}
2023-12-10 17:45:55 +01:00
. mes_text img : not ( . mes_img ) {
max-width : 100 % ;
max-height : var ( --doc-height ) ;
}
2023-07-20 19:32:15 +02:00
. mes . mes_timer ,
2023-08-31 16:10:01 +02:00
. mes . mesIDDisplay ,
. mes . tokenCounterDisplay {
2023-07-20 19:32:15 +02:00
cursor : default ;
opacity : 0 . 7 ;
font-size : calc ( var ( --mainFontSize ) * 0 . 9 ) ;
font-weight : 600 ;
text-align : center ;
}
. mes_translate ,
. sd_message_gen ,
2023-11-03 22:45:56 +01:00
. mes_ghost ,
2023-08-20 08:49:27 +02:00
. mes_narrate {
2023-07-20 19:32:15 +02:00
display : none ;
}
2023-11-03 22:45:56 +01:00
. mes [ is_system = "true" ] . mes_hide {
display : none ;
}
. mes [ is_system = "false" ] . mes_unhide {
display : none ;
}
. mes [ is_system = "true" ] . mes_ghost {
display : flex ;
}
2023-07-20 19:32:15 +02:00
small {
2024-06-14 14:50:54 +02:00
color : var ( --SmartThemeBodyColor ) ;
opacity : 0 . 7 ;
2023-07-20 19:32:15 +02:00
}
. mes . smallSysMes {
padding : 5px ! important ;
font-size : calc ( var ( --mainFontSize ) * 0 . 9 ) ;
text-align : center ;
}
2024-03-27 18:49:14 +01:00
. mes . smallSysMes . mes_text p : last-child {
margin : 0 ;
}
2024-03-27 18:40:34 +01:00
. mes . smallSysMes . swipe_right ,
. mes . smallSysMes . swipe_left {
display : none ! important ;
}
2023-07-20 19:32:15 +02:00
. mes . smallSysMes . mes_text {
padding : 0 ! important ;
text-align : center ;
}
. mes . smallSysMes . mes_block {
margin-right : unset ! important ;
}
. mes . smallSysMes . ch_name {
display : none ;
}
. mes . smallSysMes . mesAvatarWrapper {
display : none ;
height : unset ;
min-height : unset ;
}
code {
2024-06-13 20:05:50 +02:00
font-family : var ( --monoFontFamily ) ;
2023-07-20 19:32:15 +02:00
white-space : pre-wrap ;
/* word-wrap: break-word; */
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
border-radius : 5px ;
background-color : var ( --black70a ) ;
padding : 0 3px ;
2024-07-14 23:42:16 +02:00
/* max-width: calc(100dvw - 95px); */
2023-07-20 19:32:15 +02:00
line-height : var ( --mainFontSize ) ;
color : var ( --white70a ) ;
}
2024-06-03 01:17:19 +02:00
kbd {
display : inline-block ;
padding : 2px 4px ;
2024-06-26 19:39:39 +02:00
font-family : var ( --monoFontFamily ) ;
2024-06-03 01:17:19 +02:00
white-space : nowrap ;
/* background-color: #eeeeee; */
background-color : rgba ( 255 , 255 , 255 , 0 . 9 ) ;
color : # 333 ;
border : 1px solid # b4b4b4 ;
border-radius : 3px ;
box-shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0 . 2 ) , 0 2px 0 0 rgba ( 255 , 255 , 255 , 0 . 7 ) inset ;
font-size : 90 % ;
line-height : 1 ;
}
2024-07-28 23:20:33 +02:00
samp {
display : block ;
font-family : var ( --monoFontFamily ) ;
white-space : pre-wrap ;
text-align : start ;
justify-content : left ;
}
2023-07-20 19:32:15 +02:00
hr {
2023-10-12 14:13:57 +02:00
background-image : linear-gradient ( 90deg , var ( --transparent ) , var ( --SmartThemeBodyColor ) , var ( --transparent ) ) ;
2023-07-20 19:32:15 +02:00
margin : 5px 0 ;
height : 1px ;
min-height : 1px ;
border : 0 ;
2023-10-13 12:11:21 +02:00
opacity : 0 . 2 ;
2023-07-20 19:32:15 +02:00
}
# bg1 ,
# bg_custom {
background-repeat : no-repeat ;
background-attachment : fixed ;
background-size : cover ;
position : absolute ;
width : 100 % ;
height : 100 % ;
transition : background-image 0 . 5s ease-in-out ;
}
2024-03-09 23:55:34 +01:00
body . reduced-motion # bg1 ,
body . reduced-motion # bg_custom {
transition : none ;
}
2023-07-20 19:32:15 +02:00
# version_display {
padding : 5px ;
opacity : 0 . 8 ;
}
# bg1 {
2024-04-06 16:43:59 +02:00
background-image : url ( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=' ) ;
2023-11-27 02:22:35 +01:00
z-index : -3 ;
2023-07-20 19:32:15 +02:00
}
# bg_custom {
background-image : none ;
2023-11-27 02:22:35 +01:00
z-index : -2 ;
2023-07-20 19:32:15 +02:00
}
/*TOPPER margin*/
# top-bar {
width : var ( --sheldWidth ) ;
margin : 0 auto ;
left : 0 ;
right : 0 ;
display : inline-block ;
2023-08-25 00:06:52 +02:00
height : var ( --bottomFormBlockSize ) ;
2023-07-20 19:32:15 +02:00
position : absolute ;
2023-10-13 17:29:41 +02:00
/* border-bottom: 1px solid var(--SmartThemeBorderColor); */
2023-07-20 19:32:15 +02:00
box-shadow : 0 2px 20px 0 var ( --black70a ) ;
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
background-color : var ( --SmartThemeBlurTintColor ) ;
-webkit-backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
2024-03-19 00:40:02 +01:00
z-index : 3005 ;
2023-07-20 19:32:15 +02:00
}
# sheld {
2024-05-02 22:15:17 +02:00
display : flex ;
flex-direction : column ;
2023-08-31 15:58:28 +02:00
/* -1px to give sheld some wiggle room to bounce off tobar when moving*/
height : calc ( 100vh - var ( --topBarBlockSize ) - 1px ) ;
2024-07-14 23:42:16 +02:00
height : calc ( 100dvh - var ( --topBarBlockSize ) - 1px ) ;
max-height : calc ( 100dvh - var ( --topBarBlockSize ) - 1px ) ;
2023-07-20 19:32:15 +02:00
overflow-x : hidden ;
/* max-width: 50vw; */
position : absolute ;
left : calc ( ( 100vw - var ( --sheldWidth ) ) / 2 ) ;
2024-07-14 23:42:16 +02:00
left : calc ( ( 100dvw - var ( --sheldWidth ) ) / 2 ) ;
2023-08-25 00:06:52 +02:00
top : var ( --topBarBlockSize ) ;
2023-07-20 19:32:15 +02:00
margin : 0 auto ;
left : 0 ;
right : 0 ;
z-index : 30 ;
min-height : 100px ;
min-width : 100px ;
width : var ( --sheldWidth ) ;
}
. drag-grabber {
position : absolute ;
2023-10-13 17:29:41 +02:00
/ * width : 20px ! important ;
height : 20px ! important ; * /
margin : 0px 5px ;
2023-07-20 19:32:15 +02:00
color : var ( --SmartThemeBodyColor ) ;
z-index : 2000 ;
text-align : center ;
2023-10-13 17:29:41 +02:00
/* border-radius: 5px; */
2023-07-20 19:32:15 +02:00
vertical-align : middle ;
right : 0px ;
top : 0px ;
opacity : 0 . 5 ;
cursor : grab ;
2023-10-13 17:29:41 +02:00
/* border: 1px solid var(--SmartThemeBorderColor); */
2023-07-20 19:32:15 +02:00
cursor : -moz-grab ;
cursor : -webkit-grab ;
display : none ;
filter : drop-shadow ( 0px 0px 0px black ) ;
transition : all 250ms ;
2023-10-13 17:29:41 +02:00
font-size : calc ( var ( --mainFontSize ) * 1 . 3 ) ;
2023-07-20 19:32:15 +02:00
}
. drag-grabber : hover {
opacity : 1 ;
}
2024-04-14 20:17:18 +02:00
body . panelControlBar {
2023-07-20 19:32:15 +02:00
position : absolute ;
right : 5px ;
top : 5px ;
z-index : 2000 ;
2024-03-26 15:10:55 +01:00
min-width : 55px ;
2024-04-05 00:05:50 +02:00
justify-content : flex-end ;
2024-04-14 20:17:18 +02:00
gap : 0px ;
2023-07-20 19:32:15 +02:00
}
. panelControlBar . drag-grabber {
position : unset ;
}
# sheldheader : active {
cursor : grabbing ;
cursor : -moz-grabbing ;
cursor : -webkit-grabbing ;
}
. pull-tab {
height : 10px ;
width : 10px ;
background-color : var ( --SmartThemeEmColor ) ;
position : absolute ;
bottom : 0px ;
right : 0px ;
pointer-events : none ;
z-index : 2001 ;
}
# chat {
2023-08-25 00:06:52 +02:00
max-height : calc ( 100vh - calc ( var ( --topBarBlockSize ) + var ( --bottomFormBlockSize ) ) ) ;
2023-07-20 19:32:15 +02:00
overflow-x : hidden ;
padding-bottom : 0 ;
overflow-y : scroll ;
display : flex ;
bottom : 10px ;
2023-10-13 17:29:41 +02:00
/ * border-bottom : 1px solid var ( --SmartThemeBorderColor ) ;
2023-09-16 08:42:26 +02:00
border-left : 1px solid var ( --SmartThemeBorderColor ) ;
2023-10-13 17:29:41 +02:00
border-right : 1px solid var ( --SmartThemeBorderColor ) ; * /
2023-07-20 19:32:15 +02:00
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
2023-09-22 09:54:51 +02:00
background-color : var ( --SmartThemeChatTintColor ) ;
2023-07-20 19:32:15 +02:00
-webkit-backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
text-shadow : 0px 0px calc ( var ( --shadowWidth ) * 1px ) var ( --SmartThemeShadowColor ) ;
flex-direction : column ;
z-index : 30 ;
2024-05-02 22:15:17 +02:00
flex-grow : 1 ;
2023-07-20 19:32:15 +02:00
}
# form_sheld {
white-space : nowrap ;
width : 100 % ;
margin : 1px auto 0 auto ;
z-index : 30 ;
}
/* special case for desktop Safari to allow #sheld resizing */
@ media only screen and ( min-width : 1024px ) and ( -webkit-min-device-pixel-ratio : 2 ) and ( pointer : fine ) {
# form_sheld {
2023-11-27 01:56:45 +01:00
margin-bottom : 4px ;
2023-07-20 19:32:15 +02:00
}
}
# send_form {
display : flex ;
flex-wrap : wrap ;
align-items : center ;
width : 100 % ;
margin : 0 auto 0 auto ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
border-radius : 0 0 10px 10px ;
background-color : var ( --SmartThemeBlurTintColor ) ;
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
}
# send_form . no-connection {
2023-08-27 21:38:42 +02:00
background-color : var ( --crimson70a ) ! important ;
2023-07-20 19:32:15 +02:00
}
2023-11-14 07:53:26 +01:00
# nonQRFormItems {
2023-07-20 19:32:15 +02:00
padding : 0 ;
border : 0 ;
position : relative ;
background-position : center ;
display : flex ;
flex-direction : row ;
column-gap : 5px ;
2023-08-24 17:32:42 +02:00
font-size : var ( --bottomFormIconSize ) ;
2023-11-14 10:36:57 +01:00
order : 25 ;
2023-11-14 07:53:26 +01:00
width : 100 % ;
2023-07-20 19:32:15 +02:00
}
2023-11-14 07:53:26 +01:00
# leftSendForm ,
# rightSendForm {
display : flex ;
flex-wrap : wrap ;
}
# leftSendForm {
order : 1 ;
padding-left : 2px ;
}
# rightSendForm {
order : 3 ;
padding-right : 2px ;
}
2024-03-20 23:24:13 +01:00
# rightSendForm > div : not ( . mes_stop ) ,
# leftSendForm > div {
2023-08-24 17:32:42 +02:00
width : var ( --bottomFormBlockSize ) ;
height : var ( --bottomFormBlockSize ) ;
2023-07-20 19:32:15 +02:00
margin : 0 ;
border : none ;
cursor : pointer ;
opacity : 0 . 7 ;
2023-09-18 00:24:29 +02:00
display : flex ;
2023-07-20 19:32:15 +02:00
align-items : center ;
justify-content : center ;
2024-05-30 17:01:04 +02:00
transition : opacity 300ms ;
2023-07-20 19:32:15 +02:00
}
2024-03-21 00:11:26 +01:00
# rightSendForm > div : hover ,
# leftSendForm > div : hover {
2023-07-20 19:32:15 +02:00
opacity : 1 ;
filter : brightness ( 1 . 2 ) ;
}
# send_but {
2023-11-14 07:53:26 +01:00
order : 2 ;
2023-07-20 19:32:15 +02:00
}
2023-08-24 00:37:44 +02:00
# mes_continue {
2023-11-14 07:53:26 +01:00
order : 1 ;
2023-08-24 00:37:44 +02:00
}
2024-08-02 14:17:29 +02:00
# mes_impersonate {
order : 1 ;
}
2023-11-14 07:53:26 +01:00
# send_form . mes_stop {
2023-07-20 19:32:15 +02:00
display : none ;
2023-11-14 07:53:26 +01:00
order : 2 ;
padding-right : 2px ;
2023-12-11 17:23:00 +01:00
place-self : center ;
2023-12-21 19:20:28 +01:00
cursor : pointer ;
transition : 0 . 3s ;
opacity : 0 . 7 ;
2023-07-20 19:32:15 +02:00
}
2024-05-12 21:15:05 +02:00
# form_sheld . isExecutingCommandsFromChatInput {
2024-05-30 16:58:17 +02:00
# send_but ,
# mes_continue {
2024-05-12 21:15:05 +02:00
visibility : hidden ;
2024-05-30 16:58:17 +02:00
width : 0 ;
height : 0 ;
opacity : 0 ;
2024-05-12 21:15:05 +02:00
}
2024-05-20 05:18:30 +02:00
# rightSendForm > div : not ( . mes_send ) . stscript_btn {
& . stscript_pause ,
& . stscript_stop {
2024-05-12 21:15:05 +02:00
display : flex ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-19 12:27:27 +02:00
& . script_paused {
2024-05-20 05:18:30 +02:00
# rightSendForm > div : not ( . mes_send ) . stscript_btn {
2024-05-12 21:15:05 +02:00
& . stscript_pause {
display : none ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . stscript_continue {
display : flex ;
}
}
}
}
2024-05-19 21:25:41 +02:00
2024-05-19 21:33:16 +02:00
@ supports not selector ( & ) {
2024-05-19 21:25:41 +02:00
. stscript_btn {
display : none ;
}
}
2024-05-20 05:18:30 +02:00
# rightSendForm > div : not ( . mes_send ) {
2024-05-12 21:15:05 +02:00
& . stscript_btn {
padding-right : 2px ;
place-self : center ;
cursor : pointer ;
transition : 0 . 3s ;
opacity : 1 ;
display : none ;
2024-05-20 05:18:30 +02:00
& . stscript_pause > . fa-solid {
2024-05-12 21:15:05 +02:00
background-color : rgb ( 146 , 190 , 252 ) ;
}
2024-05-20 05:18:30 +02:00
& . stscript_continue > . fa-solid {
2024-05-12 21:15:05 +02:00
background-color : rgb ( 146 , 190 , 252 ) ;
}
2024-05-20 05:18:30 +02:00
& . stscript_stop > . fa-solid {
2024-05-12 21:15:05 +02:00
background-color : rgb ( 215 , 136 , 114 ) ;
}
2024-05-20 05:18:30 +02:00
> . fa-solid {
2024-05-12 21:15:05 +02:00
--toastInfoColor : # 2F96B4 ;
--progColor : rgba ( 0 , 128 , 0 , 0 . 839 ) ;
border-radius : 35 % ;
border : 0 solid var ( --progColor ) ;
aspect-ratio : 1 / 1 ;
display : flex ;
color : rgb ( 24 24 24 ) ;
font-size : 0 . 5em ;
height : var ( --bottomFormIconSize ) ;
justify-content : center ;
align-items : center ;
box-shadow :
0 0 0 var ( --progColor ) ,
2024-05-20 05:18:30 +02:00
0 0 0 var ( --progColor ) ;
2024-05-12 21:15:05 +02:00
}
}
}
2023-07-20 19:32:15 +02:00
# options_button {
2023-08-24 17:32:42 +02:00
width : var ( --bottomFormBlockSize ) ;
height : var ( --bottomFormBlockSize ) ;
font-size : var ( --bottomFormIconSize ) ;
2023-07-20 19:32:15 +02:00
margin : 0 ;
border : none ;
position : relative ;
opacity : 0 . 7 ;
cursor : pointer ;
z-index : 2001 ;
2023-08-23 09:19:54 +02:00
margin-left : 10px ;
padding : 0 ;
2023-07-20 19:32:15 +02:00
transition : 0 . 3s ;
display : flex ;
align-items : center ;
2023-11-14 07:53:26 +01:00
order : 2 ;
2023-07-20 19:32:15 +02:00
}
. font-family-reset {
2024-06-24 20:49:15 +02:00
font-family : var ( --mainFontFamily ) ;
2023-07-20 19:32:15 +02:00
font-size : var ( --mainFontSize ) ;
font-weight : 400 ;
}
# options ,
2024-04-17 23:14:41 +02:00
# extensionsMenu ,
2024-05-31 21:59:26 +02:00
. popup . popper-modal {
2023-07-20 19:32:15 +02:00
display : flex ;
z-index : 29999 ;
background-color : var ( --SmartThemeBlurTintColor ) ;
-webkit-backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
box-shadow : 0 0 10px rgba ( 0 , 0 , 0 , 0 . 5 ) ;
flex-flow : column ;
2023-11-23 14:10:23 +01:00
border-radius : 10px ;
2024-06-06 02:48:06 +02:00
padding : 2px ;
}
# extensionsMenu ,
. options-content {
padding : 2px ;
2023-07-20 19:32:15 +02:00
}
. options-content ,
. list-group {
overflow : hidden ;
display : block ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
border-radius : 10px ;
z-index : 2000 ;
font-size : calc ( var ( --mainFontSize ) * 1 . 1 ) ;
}
. options-content i ,
. extensionsMenuExtensionButton {
height : 20px ;
width : 20px ;
font-size : calc ( var ( --mainFontSize ) * 1 . 1 ) ;
display : flex ;
align-items : center ;
justify-content : center ;
2023-11-27 01:32:41 +01:00
pointer-events : none ;
2023-07-20 19:32:15 +02:00
}
. options-content hr {
margin : 0 ;
padding : 0 ;
2023-09-16 08:42:26 +02:00
border-top : 1px solid var ( --SmartThemeBorderColor ) ;
2023-08-14 23:10:48 +02:00
background : none ;
2023-07-20 19:32:15 +02:00
}
# extensionsMenuButton {
2023-11-14 07:53:26 +01:00
order : 4 ;
2023-07-20 19:32:15 +02:00
padding : 1px ;
}
. options-content a ,
2024-06-24 22:17:58 +02:00
# extensionsMenu > . extension_container > div ,
# extensionsMenu > div : not ( . extension_container ) ,
2023-07-20 19:32:15 +02:00
. list-group > div ,
. list-group . list-group-item ,
# sd_dropdown . list-group span {
color : var ( --SmartThemeBodyColor ) ;
padding : 5px 5px ;
padding-bottom : 5px ;
text-decoration : none ;
display : flex ;
column-gap : 10px ;
cursor : pointer ;
2023-07-30 20:35:21 +02:00
align-items : baseline ;
2023-07-20 19:32:15 +02:00
}
2024-06-24 22:17:58 +02:00
# extensionsMenu > . extension_container > div ,
# extensionsMenu > div : not ( . extension_container ) ,
2023-07-20 19:32:15 +02:00
. options-content a ,
. list-group-item {
opacity : 0 . 5 ;
}
2024-06-24 22:17:58 +02:00
# extensionsMenu > . extension_container > div : hover ,
# extensionsMenu > div : not ( . extension_container ) : hover ,
2023-07-20 19:32:15 +02:00
. options-content a : hover ,
. list-group-item : hover {
opacity : 1 ;
}
. options-content a div : first-child {
min-width : 20px ;
}
. options-content span {
vertical-align : middle ;
}
. auto_hide {
content-visibility : auto ;
}
. mes {
display : flex ;
align-items : flex-start ;
2024-04-19 10:35:08 +02:00
padding : 10px 10px 0 10px ;
2023-07-20 19:32:15 +02:00
margin-top : 0 ;
width : 100 % ;
color : var ( --SmartThemeBodyColor ) ;
position : relative ;
}
2024-05-20 05:18:30 +02:00
# chat . mes . selected {
2024-05-14 21:05:04 +02:00
/* background-color: rgb(from var(--SmartThemeQuoteColor) r g b / .5); */
background-color : rgb ( 102 , 0 , 0 ) ;
2024-05-11 16:17:42 +02:00
}
2023-07-20 19:32:15 +02:00
. mes q : before ,
. mes q : after {
content : '' ;
}
. last_mes {
margin-bottom : 0 ! important ;
/*only affects bubblechat to make it sit nicely at the bottom*/
}
2023-11-18 18:23:58 +01:00
. last_mes . mes_text {
padding-right : 30px ;
}
2023-07-20 19:32:15 +02:00
/* SWIPE RELATED STYLES*/
. swipe_right ,
. swipe_left {
height : 40px ;
width : 40px ;
opacity : 0 . 3 ;
align-items : center ;
justify-content : center ;
z-index : 9999 ;
grid-row-start : 2 ;
grid-column-start : 4 ;
flex-flow : column ;
font-size : 30px ;
cursor : pointer ;
align-self : center ;
position : absolute ;
bottom : 15px ;
}
. swipes-counter {
color : var ( --SmartThemeBodyColor ) ;
font-size : 12px ;
padding : 0 ;
2024-06-16 23:25:08 +02:00
font-family : var ( --mainFontFamily ) ;
2023-07-20 19:32:15 +02:00
font-weight : 400 ;
}
. swipe_left {
right : auto ;
left : 20px ;
}
. swipe_right {
right : 5px ;
}
. ui-settings {
display : flex ;
flex-direction : column ;
flex-grow : 1 ;
}
# avatars-style . range-block-range ,
# chat-display . range-block-range ,
# sheld-width . range-block-range {
display : flex ;
flex-direction : column ;
}
. range-block-range-and-counter {
flex : 1 ;
flex-wrap : nowrap ;
display : flex ;
}
. change_name {
display : flex ;
flex-direction : row ;
gap : 5px ;
}
. add_avatar {
2024-02-28 06:05:04 +01:00
border : var ( --avatar-base-border-radius ) solid var ( --SmartThemeBodyColor ) ;
margin : var ( --avatar-base-border-radius ) ;
2023-07-20 19:32:15 +02:00
cursor : pointer ;
transition : filter 0 . 2s ease-in-out ;
}
. add_avatar : hover {
filter : drop-shadow ( 0px 0px 5px var ( --SmartThemeQuoteColor ) ) ;
}
. avatar {
2024-02-28 06:05:04 +01:00
width : var ( --avatar-base-width ) ;
height : var ( --avatar-base-height ) ;
2024-03-06 04:59:39 +01:00
border-radius : var ( --avatar-base-border-radius-round ) ;
2023-07-20 19:32:15 +02:00
border-style : none ;
flex : 1 ;
2024-03-06 04:59:39 +01:00
transition : 250ms ;
2023-07-20 19:32:15 +02:00
}
. last_mes . mesAvatarWrapper {
2024-02-28 06:05:04 +01:00
padding-bottom : var ( --avatar-base-height ) ;
2023-07-20 19:32:15 +02:00
}
. mes . avatar {
cursor : pointer ;
}
2024-03-06 04:59:39 +01:00
. hotswap {
margin : 5px ;
2024-03-09 20:58:13 +01:00
justify-content : space-evenly ;
}
# HotSwapWrapper {
justify-content : space-evenly ;
2023-07-20 19:32:15 +02:00
}
2024-06-06 02:48:06 +02:00
. avatar . interactable {
2024-03-06 04:59:39 +01:00
opacity : 0 . 6 ;
2023-07-20 19:32:15 +02:00
}
2024-06-06 02:48:06 +02:00
. avatar . interactable : hover {
2023-07-20 19:32:15 +02:00
opacity : 1 ;
background-color : transparent ! important ;
cursor : pointer ;
}
2024-03-06 04:59:39 +01:00
. avatar . avatar_collage img {
2023-07-20 19:32:15 +02:00
width : 100 % ;
height : 100 % ;
object-fit : cover ;
object-position : center ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
}
. avatar img {
2024-02-28 06:05:04 +01:00
width : var ( --avatar-base-width ) ;
height : var ( --avatar-base-height ) ;
2023-07-20 19:32:15 +02:00
object-fit : cover ;
object-position : center center ;
2024-02-28 06:05:04 +01:00
border-radius : var ( --avatar-base-border-radius-round ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
/*--black30a*/
2023-07-20 19:32:15 +02:00
box-shadow : 0 0 5px var ( --black50a ) ;
}
2023-11-10 20:56:25 +01:00
. bogus_folder_select . avatar ,
2024-03-06 04:59:39 +01:00
. character_select . avatar ,
. avatars_inline . avatar {
2023-07-20 19:32:15 +02:00
flex : unset ;
}
2024-03-06 04:59:39 +01:00
. avatars_inline {
flex-wrap : wrap ;
overflow : hidden ;
max-height : calc ( var ( --avatar-base-height ) + 2 * var ( --avatar-base-border-radius ) ) ;
}
2023-11-10 20:56:25 +01:00
. bogus_folder_select . avatar {
justify-content : center ;
background-color : var ( --SmartThemeBlurTintColor ) ;
color : var ( --SmartThemeBodyColor ) ;
outline-style : solid ;
outline-width : 1px ;
outline-color : var ( --SmartThemeBorderColor ) ;
}
2024-03-06 04:59:39 +01:00
. avatars_inline_small . avatar ,
. avatars_inline_small . avatar img {
width : calc ( var ( --avatar-base-width ) * var ( --inline-avatar-small-factor ) ) ;
height : calc ( var ( --avatar-base-height ) * var ( --inline-avatar-small-factor ) ) ;
2024-02-28 06:05:04 +01:00
}
2024-03-06 04:59:39 +01:00
. avatars_inline_small {
height : calc ( var ( --avatar-base-height ) * var ( --inline-avatar-small-factor ) + 2 * var ( --avatar-base-border-radius ) ) ;
2024-03-06 00:28:14 +01:00
}
. bogus_folder_select : not ( . folder_closed ) . bogus_folder_avatars_block {
opacity : 1 ! important ;
2024-02-28 06:05:04 +01:00
}
2024-03-06 04:59:39 +01:00
. avatars_inline . avatar {
2024-04-09 19:03:35 +02:00
margin : calc ( var ( --avatar-base-border-radius ) ) ;
2024-02-28 06:05:04 +01:00
}
2024-03-09 20:58:13 +01:00
2024-03-06 23:13:22 +01:00
. avatars_inline . avatar : last-of-type {
margin-right : calc ( var ( --avatar-base-border-radius ) ) ;
}
2024-02-28 06:05:04 +01:00
2023-07-20 19:32:15 +02:00
. mes_block {
padding-top : 0 ;
padding-left : 10px ;
width : 100 % ;
2023-11-18 18:23:58 +01:00
overflow-x : hidden ;
2024-04-26 02:49:12 +02:00
overflow-y : clip ;
2023-07-20 19:32:15 +02:00
}
. mes_text {
font-weight : 500 ;
line-height : calc ( var ( --mainFontSize ) + . 5rem ) ;
padding-left : 0 ;
padding-top : 5px ;
padding-bottom : 5px ;
max-width : 100 % ;
overflow-wrap : anywhere ;
}
br {
display : block ;
margin : 2px 0 ;
}
textarea {
width : 100 % ;
resize : vertical ;
display : block ;
background-color : var ( --black30a ) ;
outline : none ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-11-09 10:31:44 +01:00
border-radius : 5px ;
2023-07-20 19:32:15 +02:00
color : var ( --SmartThemeBodyColor ) ;
font-size : var ( --mainFontSize ) ;
2024-06-16 23:25:08 +02:00
font-family : var ( --mainFontFamily ) ;
2023-07-20 19:32:15 +02:00
padding : 5px 10px ;
2023-08-29 17:45:49 +02:00
max-height : 90vh ;
2024-07-14 23:42:16 +02:00
max-height : 90dvh ;
2023-08-29 17:45:49 +02:00
}
textarea . autoSetHeight {
max-height : 50vh ;
2024-07-14 23:42:16 +02:00
max-height : 50dvh ;
2023-07-20 19:32:15 +02:00
}
input ,
select {
2024-06-16 23:25:08 +02:00
font-family : var ( --mainFontFamily ) ;
2023-07-20 19:32:15 +02:00
font-size : var ( --mainFontSize ) ;
color : var ( --SmartThemeBodyColor ) ;
}
# send_textarea {
2024-05-13 15:48:35 +02:00
min-height : calc ( var ( --bottomFormBlockSize ) + 2px ) ;
height : calc ( var ( --bottomFormBlockSize ) + 2px ) ;
2023-07-20 19:32:15 +02:00
max-height : 50vh ;
2024-07-14 23:42:16 +02:00
max-height : 50dvh ;
2023-07-20 19:32:15 +02:00
word-wrap : break-word ;
resize : vertical ;
display : block ;
background-color : rgba ( 255 , 0 , 0 , 0 ) ;
border : 0 ;
box-shadow : none ;
2023-11-14 11:48:55 +01:00
padding : 6px ;
2024-06-16 23:25:08 +02:00
font-family : var ( --mainFontFamily ) ;
2023-07-20 19:32:15 +02:00
margin : 0 ;
text-shadow : 0px 0px calc ( var ( --shadowWidth ) * 1px ) var ( --SmartThemeShadowColor ) ;
flex : 1 ;
2023-11-14 07:53:26 +01:00
order : 3 ;
2024-05-12 21:15:05 +02:00
--progColor : rgb ( 146 , 190 , 252 ) ;
--progFlashColor : rgb ( 215 , 136 , 114 ) ;
--progSuccessColor : rgb ( 81 , 163 , 81 ) ;
--progErrorColor : rgb ( 189 , 54 , 47 ) ;
--progAbortedColor : rgb ( 215 , 136 , 114 ) ;
--progWidth : 3px ;
--progWidthClip : calc ( var ( --progWidth ) + 2px ) ;
--prog : 0 % ;
--progDone : 0 ;
border-top : var ( --progWidth ) solid var ( --progColor ) ;
2024-05-20 05:18:30 +02:00
clip-path : polygon ( 0 % calc ( var ( --progDone ) * var ( --progWidthClip ) ) ,
var ( --prog ) calc ( var ( --progDone ) * var ( --progWidthClip ) ) ,
var ( --prog ) var ( --progWidthClip ) ,
100 % var ( --progWidthClip ) ,
100 % 100 % ,
0 % 100 % ) ;
2024-05-12 21:15:05 +02:00
transition : clip-path 200ms ;
}
2024-05-20 05:18:30 +02:00
2024-06-18 00:14:15 +02:00
# send_textarea : focus-visible {
/* Disable outline for the chat bar itself, we add it to the outer div */
outline : none ;
}
2024-05-20 05:18:30 +02:00
2024-06-18 00:14:15 +02:00
# send_form : has ( # send_textarea : focus-visible ) {
border-color : var ( --interactable-outline-color-faint ) ;
outline : 1px solid var ( --interactable-outline-color-faint ) ;
2024-05-12 21:15:05 +02:00
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
# form_sheld . isExecutingCommandsFromChatInput . script_paused # send_textarea {
animation-name : script_progress_pulse ;
animation-duration : 1500ms ;
animation-timing-function : ease-in-out ;
animation-delay : 0s ;
animation-iteration-count : infinite ;
}
# form_sheld . script_success # send_textarea {
border-top-color : var ( --progSuccessColor ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
# form_sheld . script_error # send_textarea {
border-top-color : var ( --progErrorColor ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
# form_sheld . script_aborted # send_textarea {
border-top-color : var ( --progAbortedColor ) ;
}
. autoComplete-wrap {
--targetOffset : 0 ;
--direction : column ;
--leftOffset : 1vw ;
--rightOffset : 1vw ;
display : flex ;
flex-direction : var ( --direction ) ;
position : absolute ;
left : var ( --leftOffset ) ;
right : var ( --rightOffset ) ;
z-index : 10000 ;
2024-06-13 20:05:50 +02:00
pointer-events : none ;
2024-05-12 21:15:05 +02:00
2024-06-14 23:48:41 +02:00
. autoComplete {
pointer-events : all ;
}
2024-05-12 21:15:05 +02:00
& . isFloating {
--direction : row ;
left : 0 ;
right : 0 ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : before {
content : "" ;
flex : 0 1 calc ( var ( --targetOffset ) * 1px ) ;
display : block ;
pointer-events : none ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. autoComplete {
flex : 0 0 auto ;
width : 50vw ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : after {
content : "" ;
flex : 1 1 0 ;
display : block ;
pointer-events : none ;
}
}
}
. autoComplete-detailsWrap {
--targetOffset : 0 ;
--rightOffset : 1vw ;
--bottomOffset : 0 ;
--leftOffset : 74vw ;
display : flex ;
flex-direction : column ;
position : absolute ;
top : 5vh ;
right : var ( --rightOffset ) ;
bottom : var ( --bottomOffset ) ;
left : var ( --leftOffset ) ;
z-index : 10000 ;
pointer-events : none ;
& : before {
content : "" ;
flex : 0 1 calc ( var ( --targetOffset ) * 1px - 5vh ) ;
display : block ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. autoComplete-details {
flex : 0 0 auto ;
max-height : 80vh ;
pointer-events : all ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : after {
content : "" ;
flex : 1 1 0 ;
display : block ;
}
& . isFloating {
flex-direction : row ;
left : 0 ;
right : 0 ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. autoComplete-details {
max-height : unset ;
width : 25vw ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . left {
& : before {
flex : 0 1 calc ( var ( --targetOffset ) * 1px - 25vw ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : after {
flex : 1 0 auto ;
max-width : 50vw ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . right {
& : before {
flex : 0 0 calc ( var ( --targetOffset ) * 1px + 50vw ) ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . full {
& : before {
content : "" ;
flex : 0 1 calc ( var ( --targetOffset ) * 1px ) ;
display : block ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. autoComplete-details {
flex : 0 0 auto ;
max-width : 50vw ;
width : unset ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : after {
content : "" ;
flex : 1 1 0 ;
display : block ;
}
}
}
}
body [ data-stscript-style = "dark" ] {
--ac-style-color-border : rgba ( 69 69 69 / 1 ) ;
--ac-style-color-background : rgba ( 32 32 32 / 1 ) ;
--ac-style-color-text : rgba ( 204 204 204 / 1 ) ;
--ac-style-color-matchedBackground : rgba ( 0 0 0 / 0 ) ;
--ac-style-color-matchedText : rgba ( 108 171 251 / 1 ) ;
--ac-style-color-selectedBackground : rgba ( 32 57 92 / 1 ) ;
--ac-style-color-selectedText : rgba ( 255 255 255 / 1 ) ;
2024-07-30 20:52:58 +02:00
--ac-style-color-notSelectableBackground : rgb ( 65 , 78 , 95 ) ;
--ac-style-color-notSelectableText : rgba ( 255 255 255 / 1 ) ;
2024-05-12 21:15:05 +02:00
--ac-style-color-hoveredBackground : rgba ( 43 45 46 / 1 ) ;
--ac-style-color-hoveredText : rgba ( 204 204 204 / 1 ) ;
--ac-style-color-argName : rgba ( 171 209 239 / 1 ) ;
--ac-style-color-type : rgba ( 131 199 177 / 1 ) ;
--ac-style-color-cmd : rgba ( 219 219 173 / 1 ) ;
--ac-style-color-symbol : rgba ( 115 156 211 / 1 ) ;
--ac-style-color-string : rgba ( 190 146 122 / 1 ) ;
--ac-style-color-number : rgba ( 188 205 170 / 1 ) ;
--ac-style-color-variable : rgba ( 131 193 252 / 1 ) ;
--ac-style-color-variableLanguage : rgba ( 98 160 251 / 1 ) ;
--ac-style-color-punctuation : rgba ( 242 214 48 / 1 ) ;
--ac-style-color-punctuationL1 : rgba ( 195 118 210 / 1 ) ;
--ac-style-color-punctuationL2 : rgba ( 98 160 251 / 1 ) ;
--ac-style-color-currentParenthesis : rgba ( 195 118 210 / 1 ) ;
--ac-style-color-comment : rgba ( 122 151 90 / 1 ) ;
2024-07-12 20:09:05 +02:00
--ac-style-color-keyword : rgba ( 182 137 190 / 1 ) ;
2024-05-12 21:15:05 +02:00
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
body [ data-stscript-style = "light" ] {
--ac-style-color-border : rgba ( 200 200 200 / 1 ) ;
--ac-style-color-background : rgba ( 248 248 248 / 1 ) ;
--ac-style-color-text : rgba ( 59 59 59 / 1 ) ;
--ac-style-color-matchedBackground : rgba ( 0 0 0 / 0 ) ;
--ac-style-color-matchedText : rgba ( 61 104 188 / 1 ) ;
--ac-style-color-selectedBackground : rgba ( 232 232 232 / 1 ) ;
--ac-style-color-selectedText : rgba ( 0 0 0 / 1 ) ;
2024-07-30 20:52:58 +02:00
--ac-style-color-notSelectableBackground : rgba ( 232 232 232 / 1 ) ;
--ac-style-color-notSelectableText : rgb ( 83 , 83 , 83 ) ;
2024-05-12 21:15:05 +02:00
--ac-style-color-hoveredBackground : rgba ( 242 242 242 / 1 ) ;
--ac-style-color-hoveredText : rgba ( 59 59 59 / 1 ) ;
--ac-style-color-argName : rgba ( 16 24 125 / 1 ) ;
--ac-style-color-type : rgba ( 80 127 152 / 1 ) ;
--ac-style-color-cmd : rgba ( 113 94 43 / 1 ) ;
--ac-style-color-symbol : rgba ( 36 37 249 / 1 ) ;
--ac-style-color-string : rgba ( 139 31 24 / 1 ) ;
--ac-style-color-number : rgba ( 76 132 91 / 1 ) ;
--ac-style-color-variable : rgba ( 16 24 125 / 1 ) ;
--ac-style-color-currentParenthesis : rgba ( 195 118 210 / 1 ) ;
--ac-style-color-comment : rgba ( 70 126 26 / 1 ) ;
2024-07-12 20:09:05 +02:00
--ac-style-color-keyword : rgba ( 182 137 190 / 1 ) ;
2024-05-12 21:15:05 +02:00
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
body [ data-stscript-style = "theme" ] {
--ac-style-color-border : var ( --SmartThemeBorderColor ) ;
--ac-style-color-background : var ( --SmartThemeBlurTintColor ) ;
--ac-style-color-text : var ( --SmartThemeEmColor ) ;
--ac-style-color-matchedBackground : rgba ( 0 0 0 / 0 ) ;
--ac-style-color-matchedText : var ( --SmartThemeQuoteColor ) ;
--ac-style-color-selectedBackground : color-mix ( in srgb , rgb ( 128 128 128 ) 75 % , var ( --SmartThemeChatTintColor ) ) ;
--ac-style-color-selectedText : var ( --SmartThemeBodyColor ) ;
2024-07-30 20:52:58 +02:00
--ac-style-color-notSelectableBackground : color-mix ( in srgb , rgb ( 128 128 128 ) 50 % , var ( --SmartThemeChatTintColor ) ) ;
--ac-style-color-notSelectableText : var ( --SmartThemeBodyColor ) ;
2024-05-12 21:15:05 +02:00
--ac-style-color-hoveredBackground : color-mix ( in srgb , rgb ( 128 128 128 ) 30 % , var ( --SmartThemeChatTintColor ) ) ;
--ac-style-color-hoveredText : var ( --SmartThemeEmColor ) ;
--ac-style-color-argName : rgba ( 171 209 239 / 1 ) ;
--ac-style-color-type : rgba ( 131 199 177 / 1 ) ;
--ac-style-color-cmd : rgba ( 219 219 173 / 1 ) ;
--ac-style-color-symbol : rgba ( 115 156 211 / 1 ) ;
--ac-style-color-string : rgba ( 190 146 122 / 1 ) ;
--ac-style-color-variable : rgba ( 131 193 252 / 1 ) ;
--ac-style-color-currentParenthesis : rgba ( 195 118 210 / 1 ) ;
--ac-style-color-comment : rgba ( 122 151 90 / 1 ) ;
2024-07-12 20:09:05 +02:00
--ac-style-color-keyword : rgba ( 182 137 190 / 1 ) ;
2024-05-12 21:15:05 +02:00
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
body {
--ac-font-scale : 0 . 8 ;
}
2024-05-20 05:18:30 +02:00
. autoComplete ,
. autoComplete-details {
2024-05-12 21:15:05 +02:00
--ac-color-border : var ( --ac-style-color-border , rgba ( 69 69 69 / 1 ) ) ;
--ac-color-background : var ( --ac-style-color-background , rgba ( 32 32 32 / 1 ) ) ;
--ac-color-text : var ( --ac-style-color-text , rgba ( 204 204 204 / 1 ) ) ;
--ac-color-matchedBackground : var ( --ac-style-color-matchedBackground , rgba ( 0 0 0 / 0 ) ) ;
--ac-color-matchedText : var ( --ac-style-color-matchedText , rgba ( 108 171 251 / 1 ) ) ;
--ac-color-selectedBackground : var ( --ac-style-color-selectedBackground , rgba ( 32 57 92 / 1 ) ) ;
--ac-color-selectedText : var ( --ac-style-color-selectedText , rgba ( 255 255 255 / 1 ) ) ;
2024-07-30 20:52:58 +02:00
--ac-color-notSelectableBackground : var ( --ac-style-color-notSelectableBackground , rgb ( 60 , 73 , 92 ) ) ;
--ac-color-notSelectableText : var ( --ac-style-color-notSelectableText , rgba ( 255 255 255 / 1 ) ) ;
2024-05-12 21:15:05 +02:00
--ac-color-hoveredBackground : var ( --ac-style-color-hoveredBackground , rgba ( 43 45 46 / 1 ) ) ;
--ac-color-hoveredText : var ( --ac-style-color-hoveredText , rgba ( 204 204 204 / 1 ) ) ;
--ac-color-argName : var ( --ac-style-color-argName , rgba ( 171 209 239 / 1 ) ) ;
--ac-color-type : var ( --ac-style-color-type , rgba ( 131 199 177 / 1 ) ) ;
--ac-color-cmd : var ( --ac-style-color-cmd , rgba ( 219 219 173 / 1 ) ) ;
--ac-color-symbol : var ( --ac-style-color-symbol , rgba ( 115 156 211 / 1 ) ) ;
--ac-color-string : var ( --ac-style-color-string , rgba ( 190 146 122 / 1 ) ) ;
--ac-color-number : var ( --ac-style-color-number , rgba ( 188 205 170 / 1 ) ) ;
--ac-color-variable : var ( --ac-style-color-variable , rgba ( 131 193 252 / 1 ) ) ;
--ac-color-variableLanguage : var ( --ac-style-color-variableLanguage , rgba ( 98 160 251 / 1 ) ) ;
--ac-color-punctuation : var ( --ac-style-color-punctuation , rgba ( 242 214 48 / 1 ) ) ;
--ac-color-punctuationL1 : var ( --ac-style-color-punctuationL1 , rgba ( 195 118 210 / 1 ) ) ;
--ac-color-punctuationL2 : var ( --ac-style-color-punctuationL2 , rgba ( 98 160 251 / 1 ) ) ;
--ac-color-currentParenthesis : var ( --ac-style-color-currentParenthesis , rgba ( 195 118 210 / 1 ) ) ;
--ac-color-comment : var ( --ac-style-color-comment , rgba ( 122 151 90 / 1 ) ) ;
2024-07-12 20:09:05 +02:00
--ac-color-keyword : var ( --ac-style-color-keyword , rgba ( 182 137 190 / 1 ) ) ;
2024-05-12 21:15:05 +02:00
font-size : calc ( var ( --ac-font-scale ) * 1em ) ;
--bottom : 50vh ;
background : var ( --ac-color-background ) ;
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
border : 1px solid var ( --ac-color-border ) ;
border-radius : 3px ;
color : var ( --ac-color-text ) ;
max-height : calc ( 95vh - var ( --bottom ) ) ;
list-style : none ;
margin : 0px ;
overflow : auto ;
padding : 0px ;
padding-bottom : 1px ;
line-height : 1 . 2 ;
text-align : left ;
z-index : 10000 ;
2024-05-20 05:18:30 +02:00
* {
text-shadow : none ;
}
2024-05-12 21:15:05 +02:00
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
body [ data-stscript-style ] . autoComplete [ data-option-type ] {
2024-05-20 05:18:30 +02:00
& [ data-option-type = "enum" ] . type {
color : var ( --ac-color-string ) ;
}
& [ data-option-type = "command" ] . type {
color : var ( --ac-color-cmd ) ;
}
& [ data-option-type = "namedArgument" ] . type {
color : var ( --ac-color-argName ) ;
}
& [ data-option-type = "variable" ] . type {
color : var ( --ac-color-punctuationL1 ) ;
}
& [ data-option-type = "qr" ] . type {
color : var ( --ac-color-variable ) ;
}
& [ data-option-type = "macro" ] . type {
color : var ( --ac-color-variableLanguage ) ;
}
2024-06-20 20:33:45 +02:00
& [ data-option-type = "number" ] . type {
color : var ( --ac-color-number ) ;
}
& [ data-option-type = "name" ] . type {
color : var ( --ac-color-type ) ;
}
2024-05-12 21:15:05 +02:00
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
body [ data-stscript-style ] . hljs . language-stscript {
2024-05-20 05:18:30 +02:00
* {
text-shadow : none ! important ;
}
2024-05-12 21:15:05 +02:00
text-shadow : none ! important ;
background-color : var ( --ac-style-color-background ) ;
color : var ( --ac-style-color-text ) ;
2024-05-20 05:18:30 +02:00
. hljs-title . function_ {
color : var ( --ac-style-color-cmd ) ;
}
. hljs-title . function_ . invoke__ {
color : var ( --ac-style-color-cmd ) ;
}
. hljs-string {
color : var ( --ac-style-color-string ) ;
}
. hljs-number {
color : var ( --ac-style-color-number ) ;
}
. hljs-variable {
color : var ( --ac-style-color-variable ) ;
}
. hljs-variable . language_ {
color : var ( --ac-style-color-variableLanguage ) ;
}
. hljs-property {
color : var ( --ac-style-color-argName ) ;
}
. hljs-punctuation {
color : var ( --ac-style-color-punctuation ) ;
}
. hljs-comment {
color : var ( --ac-style-color-comment ) ;
}
. hljs-abort {
color : var ( --ac-style-color-abort , # e38e23 ) ;
2024-07-23 22:51:53 +02:00
font-weight : bold ;
2024-05-20 05:18:30 +02:00
}
2024-05-12 21:15:05 +02:00
2024-07-12 20:09:05 +02:00
. hljs-keyword {
color : var ( --ac-style-color-keyword ) ;
2024-07-23 22:51:53 +02:00
font-weight : bold ;
2024-07-12 20:09:05 +02:00
}
2024-07-16 22:27:51 +02:00
. hljs-pipe {
color : var ( --ac-style-color-punctuation ) ;
}
2024-08-05 17:39:17 +02:00
2024-07-16 22:27:51 +02:00
. hljs-pipebreak {
color : var ( --ac-style-color-type ) ;
}
2024-05-12 21:15:05 +02:00
. hljs-closure {
2024-05-20 05:18:30 +02:00
> . hljs-punctuation {
color : var ( --ac-style-color-punctuation ) ;
}
2024-05-12 21:15:05 +02:00
. hljs-closure {
2024-05-20 05:18:30 +02:00
> . hljs-punctuation {
color : var ( --ac-style-color-punctuationL1 ) ;
}
2024-05-12 21:15:05 +02:00
. hljs-closure {
2024-05-20 05:18:30 +02:00
> . hljs-punctuation {
color : var ( --ac-style-color-punctuationL2 ) ;
}
2024-05-12 21:15:05 +02:00
. hljs-closure {
2024-05-20 05:18:30 +02:00
> . hljs-punctuation {
color : var ( --ac-style-color-punctuation ) ;
}
2024-05-12 21:15:05 +02:00
. hljs-closure {
2024-05-20 05:18:30 +02:00
> . hljs-punctuation {
color : var ( --ac-style-color-punctuationL1 ) ;
}
2024-05-12 21:15:05 +02:00
. hljs-closure {
2024-05-20 05:18:30 +02:00
> . hljs-punctuation {
color : var ( --ac-style-color-punctuationL2 ) ;
}
2024-05-12 21:15:05 +02:00
}
}
}
}
}
}
}
. autoComplete {
padding-bottom : 1px ;
display : grid ;
grid-template-columns : 0fr auto minmax ( 50 % , 1fr ) ;
align-items : center ;
max-height : calc ( 95vh - var ( --bottom ) ) ;
container-type : inline-size ;
2024-05-20 05:18:30 +02:00
> . item {
2024-05-12 21:15:05 +02:00
cursor : pointer ;
padding : 3px ;
text-shadow : none ;
display : flex ;
gap : 0 . 5em ;
display : contents ;
2024-05-20 05:18:30 +02:00
2024-06-21 23:46:14 +02:00
> . stopgap {
opacity : 0 . 75 ;
display : none ;
}
2024-05-12 21:15:05 +02:00
@ container ( max-width : 80em ) {
. specs {
grid-column : 2 / 4 ;
}
2024-05-20 05:18:30 +02:00
> . help {
2024-05-12 21:15:05 +02:00
grid-column : 2 / 4 ;
padding-left : 1em ;
opacity : 0 . 75 ;
height : auto ;
}
2024-06-21 23:46:14 +02:00
> . stopgap {
display : inline-block ;
}
2024-05-12 21:15:05 +02:00
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . blank {
display : block ;
grid-column : 1 / 4 ;
}
2024-05-20 05:18:30 +02:00
& : hover > * {
2024-05-12 21:15:05 +02:00
background-color : var ( --ac-color-hoveredBackground ) ;
color : var ( --ac-color-hoveredText ) ;
}
2024-05-20 05:18:30 +02:00
& . selected > * {
2024-05-12 21:15:05 +02:00
background-color : var ( --ac-color-selectedBackground ) ;
color : var ( --ac-color-selectedText ) ;
}
2024-08-05 17:39:17 +02:00
2024-07-30 20:52:58 +02:00
& . selected . not-selectable > * {
background-color : var ( --ac-color-notSelectableBackground ) ;
color : var ( --ac-color-notSelectableText ) ;
}
2024-05-20 05:18:30 +02:00
> * {
2024-05-12 21:15:05 +02:00
height : 100 % ;
}
2024-05-20 05:18:30 +02:00
> * + * {
2024-05-12 21:15:05 +02:00
padding-left : 0 . 5em ;
}
2024-05-20 05:18:30 +02:00
> . type {
2024-05-12 21:15:05 +02:00
flex : 0 0 auto ;
display : inline-flex ;
justify-content : center ;
width : 2 . 25em ;
font-size : 0 . 8em ;
text-align : center ;
/* opacity: 0.6; */
white-space : nowrap ;
2024-06-13 20:05:50 +02:00
font-family : var ( --monoFontFamily ) ;
2024-05-12 21:15:05 +02:00
line-height : calc ( 1 . 2em / 0 . 8 ) ;
/ * & : before { content : "[" ; }
& : after { content : "]" ; } * /
}
2024-05-20 05:18:30 +02:00
> . specs {
2024-05-12 21:15:05 +02:00
align-items : flex-start ;
2024-05-20 05:18:30 +02:00
> . name {
> . matched {
2024-05-12 21:15:05 +02:00
background-color : var ( --ac-color-matchedBackground ) ;
color : var ( --ac-color-matchedText ) ;
font-weight : bold ;
}
}
2024-05-20 05:18:30 +02:00
> . body {
2024-05-12 21:15:05 +02:00
flex-wrap : wrap ;
column-gap : 0 . 5em ;
2024-05-20 05:18:30 +02:00
> . arguments {
2024-05-12 21:15:05 +02:00
display : contents ;
height : 100 % ;
}
}
}
2024-05-20 05:18:30 +02:00
> . help {
2024-05-12 21:15:05 +02:00
height : 100 % ;
2024-05-20 05:18:30 +02:00
> . helpContent {
2024-05-12 21:15:05 +02:00
text-overflow : ellipsis ;
overflow : hidden ;
2024-05-20 05:18:30 +02:00
font-size : 0 . 9em ;
white-space : nowrap ;
2024-05-12 21:15:05 +02:00
line-height : 1 . 2 ;
max-height : 1 . 2em ;
display : block ;
2024-05-20 05:18:30 +02:00
> * {
2024-05-12 21:15:05 +02:00
display : contents ;
}
}
}
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. autoComplete-details {
display : flex ;
flex-direction : column ;
gap : 0 . 5em ;
2024-05-20 05:18:30 +02:00
> . specs {
2024-05-12 21:15:05 +02:00
cursor : default ;
flex-direction : column ;
padding : 0 . 25em 0 . 25em 0 . 5em 0 . 25em ;
border-bottom : 1px solid var ( --ac-color-border ) ;
2024-05-20 05:18:30 +02:00
2024-08-05 17:39:17 +02:00
> . head {
2024-06-24 22:44:51 +02:00
display : flex ;
gap : 0 . 5em ;
}
2024-08-05 17:39:17 +02:00
> . head > . name ,
> . name {
2024-06-24 22:44:51 +02:00
flex : 1 1 auto ;
2024-05-12 21:15:05 +02:00
font-weight : bold ;
color : var ( --ac-color-text ) ;
cursor : help ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : hover {
text-decoration : 1px dotted underline ;
}
}
2024-08-05 17:39:17 +02:00
> . head > . source {
2024-06-24 22:44:51 +02:00
padding : 0 0 . 5em ;
cursor : help ;
display : flex ;
align-items : center ;
gap : 0 . 5em ;
2024-08-05 17:39:17 +02:00
2024-06-24 22:44:51 +02:00
& . isThirdParty . isExtension {
color : # F89406 ;
}
2024-08-05 17:39:17 +02:00
2024-06-24 22:44:51 +02:00
& . isCore {
color : transparent ;
2024-08-05 17:39:17 +02:00
2024-06-24 22:44:51 +02:00
& . isExtension {
color : # 51A351 ;
}
2024-08-05 17:39:17 +02:00
2024-06-24 22:44:51 +02:00
& : after {
content : '' ;
order : -1 ;
height : 14px ;
aspect-ratio : 1 / 1 ;
background-image : url ( '/favicon.ico' ) ;
background-size : contain ;
background-repeat : no-repeat ;
}
}
& : hover {
text-decoration : 1px dotted underline ;
}
}
2024-05-20 05:18:30 +02:00
> . body {
2024-05-12 21:15:05 +02:00
flex-direction : column ;
gap : 0 . 5em ;
2024-05-20 05:18:30 +02:00
> . arguments {
2024-05-12 21:15:05 +02:00
margin : 0 ;
padding-left : 1 . 25em ;
2024-05-20 05:18:30 +02:00
> . argumentItem :: marker {
2024-05-12 21:15:05 +02:00
color : color-mix ( in srgb , var ( --ac-color-text ) , var ( --ac-style-color-background ) ) ;
}
. argumentSpec {
display : flex ;
gap : 0 . 5em ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. argument-default {
& : before {
content : " = " ;
color : var ( --ac-color-text ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
color : var ( --ac-color-string ) ;
}
}
. argument {
cursor : help ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : hover : not ( : has ( . argument-name : hover , . argument-types : hover , . argument-enums : hover ) ) {
text-decoration : 1px dotted underline ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. argument-name ,
. argument-types ,
. argument-enums ,
2024-05-20 05:18:30 +02:00
. argument-default {
2024-05-12 21:15:05 +02:00
cursor : help ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : hover {
text-decoration : 1px dotted underline ;
}
}
2024-05-20 05:18:30 +02:00
. argument . optional + . argument-description : before ,
. argumentSpec : has ( . argument . optional ) + . argument-description : before {
2024-05-12 21:15:05 +02:00
content : "(optional) " ;
color : var ( --ac-color-text ) ;
opacity : 0 . 5 ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. argument-description {
margin-left : 0 . 5em ;
font-family : var ( --mainFontFamily ) ;
font-size : 0 . 9em ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. returns {
cursor : help ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : hover {
text-decoration : 1px dotted underline ;
}
}
}
}
2024-05-20 05:18:30 +02:00
> . help {
2024-05-12 21:15:05 +02:00
padding : 0 0 . 5em 0 . 5em 0 . 5em ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
div {
margin-block-end : 1em ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
ul {
margin : 0 ;
padding-left : 1 . 5em ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
pre {
margin : 0 ;
2024-05-20 05:18:30 +02:00
> code {
2024-05-12 21:15:05 +02:00
display : block ;
2024-06-24 22:44:51 +02:00
padding : 1px ;
2024-07-11 01:52:13 +02:00
tab-size : 4 ;
2024-05-12 21:15:05 +02:00
}
}
}
2024-05-20 05:18:30 +02:00
> . aliases {
2024-05-12 21:15:05 +02:00
padding : 0 0 . 5em 0 . 5em 0 . 5em ;
2024-05-20 05:18:30 +02:00
& : before {
content : '(alias: ' ;
}
> . alias {
2024-06-13 20:05:50 +02:00
font-family : var ( --monoFontFamily ) ;
2024-05-20 05:18:30 +02:00
& + . alias : before {
content : ', ' ;
}
}
& : after {
content : ')' ;
2024-05-12 21:15:05 +02:00
}
}
}
2024-05-20 05:18:30 +02:00
. autoComplete > . item ,
. autoComplete-details {
> . specs {
2024-05-12 21:15:05 +02:00
display : flex ;
gap : 0 . 5em ;
2024-05-20 05:18:30 +02:00
> . name {
2024-06-13 20:05:50 +02:00
font-family : var ( --monoFontFamily ) ;
2024-05-12 21:15:05 +02:00
white-space : nowrap ;
/* color: var(--ac-color-text); */
}
2024-05-20 05:18:30 +02:00
> . body {
2024-05-12 21:15:05 +02:00
display : flex ;
2024-05-20 05:18:30 +02:00
> . arguments {
2024-06-13 20:05:50 +02:00
font-family : var ( --monoFontFamily ) ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. argument {
white-space : nowrap ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . namedArgument {
& : before {
content : "[" ;
color : var ( --ac-color-text ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : after {
content : "]" ;
color : var ( --ac-color-text ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . optional : after {
content : "]?" ;
color : var ( --ac-color-text ) ;
}
2024-05-20 05:18:30 +02:00
> . argument-name {
2024-05-12 21:15:05 +02:00
color : var ( --ac-color-argName ) ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . unnamedArgument {
& : before {
content : "(" ;
color : var ( --ac-color-text ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . multiple : before {
content : "...(" ;
color : var ( --ac-color-text ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : after {
content : ")" ;
color : var ( --ac-color-text ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& . optional : after {
content : ")?" ;
color : var ( --ac-color-text ) ;
}
}
2024-05-20 05:18:30 +02:00
> . argument-name + . argument-types : before {
2024-05-12 21:15:05 +02:00
content : "=" ;
color : var ( --ac-color-text ) ;
}
2024-05-20 05:18:30 +02:00
> . argument-types {
2024-05-12 21:15:05 +02:00
color : var ( --ac-color-type ) ;
word-break : break-all ;
white-space : break-spaces ;
2024-05-20 05:18:30 +02:00
> . argument-type + . argument-type : before {
2024-05-12 21:15:05 +02:00
content : "|" ;
color : var ( --ac-color-text ) ;
2024-05-20 05:18:30 +02:00
}
;
2024-05-12 21:15:05 +02:00
}
2024-05-20 05:18:30 +02:00
> . argument-types + . argument-enums ,
> . argument-name + . argument-enums {
2024-05-12 21:15:05 +02:00
& : before {
content : "=" ;
color : var ( --ac-color-text ) ;
}
}
2024-05-20 05:18:30 +02:00
> . argument-enums {
2024-05-12 21:15:05 +02:00
color : var ( --ac-color-string ) ;
word-break : break-all ;
white-space : break-spaces ;
2024-05-20 05:18:30 +02:00
> . argument-enum + . argument-enum : before {
2024-05-12 21:15:05 +02:00
content : "|" ;
color : var ( --ac-color-text ) ;
2024-05-20 05:18:30 +02:00
}
;
2024-05-12 21:15:05 +02:00
}
}
}
2024-05-20 05:18:30 +02:00
> . returns {
2024-06-13 20:05:50 +02:00
font-family : var ( --monoFontFamily ) ;
2024-05-12 21:15:05 +02:00
color : var ( --ac-color-text ) ;
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : before {
content : "=> " ;
color : var ( --ac-color-symbol ) ;
}
}
}
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
@ media screen and ( max-width : 1000px ) {
. autoComplete-wrap {
left : 1vw ;
right : 1vw ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. autoComplete-detailsWrap : not ( . full ) {
left : 50vw ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. slashCommandBrowser {
2024-05-20 05:18:30 +02:00
> . search {
2024-05-12 21:15:05 +02:00
display : flex ;
gap : 1em ;
align-items : baseline ;
white-space : nowrap ;
2024-05-20 05:18:30 +02:00
> . searchLabel {
2024-05-12 21:15:05 +02:00
flex : 1 1 auto ;
display : flex ;
gap : 0 . 5em ;
align-items : baseline ;
2024-05-20 05:18:30 +02:00
> . searchInput {
2024-05-12 21:15:05 +02:00
flex : 1 1 auto ;
}
}
2024-05-20 05:18:30 +02:00
> . searchOptions {
2024-05-12 21:15:05 +02:00
display : flex ;
gap : 1em ;
align-items : baseline ;
}
}
2024-05-20 05:18:30 +02:00
> . commandContainer {
2024-05-12 21:15:05 +02:00
display : flex ;
align-items : flex-start ;
container-type : inline-size ;
2024-05-20 05:18:30 +02:00
> . autoComplete {
2024-05-12 21:15:05 +02:00
flex : 1 1 auto ;
max-height : unset ;
2024-05-20 05:18:30 +02:00
> . isFiltered {
2024-05-12 21:15:05 +02:00
display : none ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. specs {
grid-column : 2 / 4 ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
. help {
grid-column : 2 / 4 ;
padding-left : 1em ;
opacity : 0 . 75 ;
}
}
2024-05-20 05:18:30 +02:00
> . autoComplete-detailsWrap {
2024-05-12 21:15:05 +02:00
flex : 0 0 auto ;
align-self : stretch ;
width : 30 % ;
position : static ;
& : before {
flex : 0 1 calc ( var ( --targetOffset ) * 1px ) ;
}
2024-05-20 05:18:30 +02:00
> . autoComplete-details {
2024-05-12 21:15:05 +02:00
max-height : 50vh ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
@ container ( max-width : 1000px ) {
2024-05-20 05:18:30 +02:00
> . autoComplete-detailsWrap {
2024-05-12 21:15:05 +02:00
width : 50 % ;
max-width : unset ;
position : absolute ;
left : unset ;
right : 0 ;
top : 0 ;
}
}
}
2023-07-20 19:32:15 +02:00
}
2024-06-03 06:19:41 +02:00
. editor_maximize {
padding : 2px ;
}
2024-03-03 14:25:20 +01:00
# character_popup . editor_maximize {
cursor : pointer ;
2024-06-03 06:19:41 +02:00
margin : 3px ;
2024-03-03 14:25:20 +01:00
opacity : 0 . 75 ;
filter : grayscale ( 1 ) ;
-webkit-transition : all 250ms ease-in-out ;
transition : all 250ms ease-in-out ;
}
# character_popup . editor_maximize : hover {
opacity : 1 ;
}
2023-07-20 19:32:15 +02:00
. text_pole :: placeholder {
2024-06-14 14:50:54 +02:00
color : var ( --SmartThemeEmColor ) ! important ;
opacity : 0 . 7 ;
}
textarea :: placeholder {
color : var ( --SmartThemeEmColor ) ! important ;
opacity : 0 . 7 ;
2023-07-20 19:32:15 +02:00
}
# send_textarea :: placeholder {
2024-06-14 14:50:54 +02:00
color : var ( --SmartThemeEmColor ) ! important ;
2023-07-20 19:32:15 +02:00
text-align : center ;
white-space : nowrap ;
}
2024-03-03 10:55:16 +01:00
# creator_notes_spoiler {
border : 0 ;
font-size : calc ( var ( --mainFontSize ) * . 8 ) ;
2024-03-10 00:06:55 +01:00
padding-top : 5px ;
2024-03-03 10:55:16 +01:00
}
2023-08-25 19:28:23 +02:00
@ media screen and ( max-width : 1000px ) {
# form_create textarea {
flex-grow : 1 ;
2024-07-14 23:42:16 +02:00
min-height : 20dvh ;
2023-08-25 19:28:23 +02:00
}
}
2023-07-20 19:32:15 +02:00
2023-08-25 19:28:23 +02:00
@ media screen and ( min-width : 1001px ) {
# description_textarea {
2024-04-10 19:27:06 +02:00
height : 29vh ;
2024-07-14 23:42:16 +02:00
height : 29dvh ;
2023-08-25 19:28:23 +02:00
}
2023-07-20 19:32:15 +02:00
2023-08-25 19:28:23 +02:00
# firstmessage_textarea {
resize : none ;
flex : 1 ;
}
2023-07-20 19:32:15 +02:00
}
# character_name_pole {
margin-bottom : 0 ;
}
2023-10-30 06:16:20 +01:00
# character_cross {
2023-07-20 19:32:15 +02:00
position : absolute ;
2023-10-13 17:29:41 +02:00
right : 5px ;
top : 5px ;
/ * width : 20px ;
height : 20px ; * /
2023-07-20 19:32:15 +02:00
cursor : pointer ;
opacity : 0 . 6 ;
font-size : 24px ;
}
. text_pole {
background-color : var ( --black30a ) ;
color : var ( --SmartThemeBodyColor ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-11-09 10:31:44 +01:00
border-radius : 5px ;
2024-06-16 23:25:08 +02:00
font-family : var ( --mainFontFamily ) ;
2023-07-20 19:32:15 +02:00
padding : 3px 5px ;
width : 100 % ;
margin : 5px 0 ;
height : fit-content ;
}
. chat_injections_list : empty {
width : 100 % ;
height : 100 % ;
}
. chat_injections_list : empty :: before {
display : flex ;
align-items : center ;
justify-content : center ;
content : "No injections" ;
font-weight : bolder ;
width : 100 % ;
height : 100 % ;
opacity : 0 . 8 ;
min-height : 3rem ;
}
. template_parameters_list code {
cursor : pointer ;
}
h3 {
margin : 10px 0 ;
}
# top-bar h3 {
margin : 0 ;
padding : 10px 0 ;
}
# top-bar h4 {
margin : 0 ;
padding : 5px 0 ;
}
input [ type = "file" ] {
display : none ;
}
# right-nav-panel-tabs {
display : flex ;
align-items : center ;
2024-04-10 19:27:06 +02:00
gap : 5px ;
2023-07-20 19:32:15 +02:00
overflow : hidden ;
2023-08-21 16:00:28 +02:00
width : 100 % ;
2023-07-20 19:32:15 +02:00
}
# rm_PinAndTabs {
display : flex ;
align-items : center ;
flex-wrap : wrap ;
gap : 10px ;
2024-04-10 19:27:06 +02:00
padding : 0px 10px 0px 5px ;
2023-07-20 19:32:15 +02:00
}
# chartokenwarning . menu_button {
font-size : unset ;
height : fit-content ;
aspect-ratio : unset ;
}
/* ##################################################################### */
/* Right Panel's Upper Tabs */
/* ##################################################################### */
. right_menu_button {
display : block ;
cursor : pointer ;
text-align : center ;
margin-top : 0 ;
2024-06-03 06:19:41 +02:00
padding : 1px ;
2023-07-20 19:32:15 +02:00
filter : grayscale ( 1 ) brightness ( 75 % ) ;
-webkit-transition : all 0 . 5s ease-in-out ;
transition : all 0 . 5s ease-in-out ;
}
. right_menu_button : hover {
2024-06-03 06:19:41 +02:00
filter : brightness ( 150 % ) ;
2023-07-20 19:32:15 +02:00
}
# rm_button_characters ,
# rm_button_panel_pin_div ,
# lm_button_panel_pin_div ,
# WI_button_panel_pin_div {
font-size : 24px ;
display : inline ;
2024-06-03 06:19:41 +02:00
padding : 1px ;
2023-07-20 19:32:15 +02:00
}
# rm_button_panel_pin_div ,
# lm_button_panel_pin_div ,
# WI_button_panel_pin_div {
opacity : 0 . 5 ;
transition : 0 . 3s ;
}
# rm_button_panel_pin_div : hover ,
2024-06-18 00:14:15 +02:00
# rm_button_panel_pin_div : has ( : focus-visible ) ,
2023-07-20 19:32:15 +02:00
# lm_button_panel_pin_div : hover ,
2024-06-18 00:14:15 +02:00
# lm_button_panel_pin_div : has ( : focus-visible ) ,
2024-06-03 06:19:41 +02:00
# WI_button_panel_pin_div : hover ,
2024-06-18 00:14:15 +02:00
# WI_button_panel_pin_div : has ( : focus-visible ) {
2023-07-20 19:32:15 +02:00
opacity : 1 ;
}
# lm_button_panel_pin_div {
text-align : start ;
}
# rm_button_panel_pin ,
# lm_button_panel_pin ,
# WI_panel_pin {
display : none ;
}
# rm_button_panel_pin : checked + label ,
# lm_button_panel_pin : checked + label ,
# WI_panel_pin : checked + label {
display : inline ;
}
# rm_button_panel_pin : checked + label . checked ,
# lm_button_panel_pin : checked + label . checked ,
# WI_panel_pin : checked + label . checked {
display : inline ;
}
# rm_button_panel_pin : checked + label . unchecked ,
# lm_button_panel_pin : checked + label . unchecked ,
# WI_panel_pin : checked + label . unchecked {
display : none ;
}
# rm_button_panel_pin : not ( : checked ) + label . checked ,
# lm_button_panel_pin : not ( : checked ) + label . checked ,
# WI_panel_pin : not ( : checked ) + label . checked {
display : none ;
}
# rm_button_panel_pin : not ( : checked ) + label . unchecked ,
# lm_button_panel_pin : not ( : checked ) + label . unchecked ,
# WI_panel_pin : not ( : checked ) + label . unchecked {
display : inline ;
}
# rm_button_selected_ch {
flex : 1 ;
overflow : hidden ;
opacity : 0 . 5 ;
2024-06-06 02:48:06 +02:00
padding : 1px ;
2023-07-20 19:32:15 +02:00
}
# rm_button_selected_ch : hover {
opacity : 1 ;
}
# rm_button_selected_ch h2 {
cursor : pointer ;
text-overflow : ellipsis ;
overflow : hidden ;
text-align : left ;
white-space : nowrap ;
margin : 0 ;
font-size : calc ( var ( --mainFontSize ) * 1 . 25 ) ;
}
. selected-right-tab {
filter : brightness ( 150 % ) ;
}
2023-08-18 22:13:15 +02:00
# rm_print_characters_pagination {
display : flex ;
flex-direction : row ;
gap : 5px ;
justify-content : center ;
2023-08-19 14:58:17 +02:00
align-items : center ;
2024-05-18 16:59:59 +02:00
flex-wrap : wrap ;
2024-06-03 06:19:41 +02:00
padding : 1px ;
2023-07-20 19:32:15 +02:00
}
2023-10-21 20:02:06 +02:00
. bulk_select_checkbox {
align-self : center ;
}
2024-03-07 02:15:41 +01:00
# rm_print_characters_block . text_block {
width : 100 % ;
opacity : 0 . 5 ;
margin : 0 auto 1px auto ;
padding : 5px ;
}
2023-11-10 20:56:25 +01:00
# rm_print_characters_block . empty_block {
display : flex ;
flex-direction : column ;
gap : 10px ;
flex-wrap : wrap ;
text-align : center ;
justify-content : center ;
align-items : center ;
}
2024-03-09 20:58:13 +01:00
2024-03-16 22:11:07 +01:00
. hidden_block {
cursor : default ;
}
2024-03-07 02:15:41 +01:00
# rm_print_characters_block . hidden_block p {
display : inline ;
}
2023-11-10 20:56:25 +01:00
2023-07-20 19:32:15 +02:00
# rm_print_characters_block {
overflow-y : auto ;
flex-grow : 1 ;
display : flex ;
2023-08-18 22:13:15 +02:00
height : 100 % ;
2024-06-06 02:48:06 +02:00
padding : 1px ;
2023-07-20 19:32:15 +02:00
}
2024-06-22 08:15:31 +02:00
# rm_print_characters_block . entity_block . useless {
opacity : 0 . 25 ;
}
2023-07-20 19:32:15 +02:00
# rm_ch_create_block {
display : none ;
overflow-y : auto ;
2024-06-03 06:19:41 +02:00
padding : 4px ;
2023-07-20 19:32:15 +02:00
height : 100 % ;
}
# rm_extensions_block {
display : none ;
overflow-y : auto ;
}
2023-08-19 19:18:39 +02:00
# floatingPrompt ,
# cfgConfig {
2023-07-20 19:32:15 +02:00
overflow-y : auto ;
2024-07-14 23:42:16 +02:00
max-width : 90dvw ;
max-height : 90dvh ;
2023-07-20 19:32:15 +02:00
min-width : 100px ;
min-height : 100px ;
border-radius : 10px ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
position : fixed ;
padding : 10px ;
padding-top : 25px ;
display : none ;
flex-direction : column ;
box-shadow : 0 0 10px var ( --black70a ) ;
2024-03-19 01:15:01 +01:00
z-index : 4000 ;
2023-07-20 19:32:15 +02:00
left : 0 ;
top : 0 ;
margin : 0 ;
right : unset ;
2024-07-14 23:42:16 +02:00
width : calc ( ( ( 100dvw - var ( --sheldWidth ) ) / 2 ) - 1px ) ;
2023-07-20 19:32:15 +02:00
}
2024-03-20 23:24:13 +01:00
# movingDivs > div {
2024-03-19 01:15:01 +01:00
z-index : 4000 ;
}
# left-nav-panel {
2024-03-19 00:54:47 +01:00
z-index : 3000 ;
}
2023-08-05 11:36:39 +02:00
. floating_prompt_radio_group ,
. radio_group {
2023-07-20 19:32:15 +02:00
display : flex ;
flex-direction : column ;
2023-09-09 20:26:04 +02:00
margin-top : 5px ;
2023-07-20 19:32:15 +02:00
}
# extension_floating_counter {
font-weight : 600 ;
2023-08-20 18:09:19 +02:00
color : var ( --SmartThemeQuoteColor ) ;
2023-07-20 19:32:15 +02:00
}
. extension_token_counter {
2024-03-28 00:28:41 +01:00
font-size : calc ( var ( --mainFontSize ) * 0 . 875 ) ;
2023-07-20 19:32:15 +02:00
width : 100 % ;
text-align : right ;
2023-08-21 14:32:27 +02:00
margin-bottom : 5px ;
2023-07-20 19:32:15 +02:00
}
. floating_prompt_settings textarea {
font-size : calc ( var ( --mainFontSize ) * 0 . 9 ) ;
line-height : 1 . 2 ;
}
2024-03-18 01:12:23 +01:00
. floating_panel_close ,
. floating_panel_maximize {
2023-07-20 19:32:15 +02:00
height : 15px ;
aspect-ratio : 1 / 1 ;
font-size : 20px ;
opacity : 0 . 5 ;
transition : all 250ms ;
}
2024-03-18 01:12:23 +01:00
. floating_panel_maximize : hover ,
2024-01-23 06:00:31 +01:00
. floating_panel_close : hover {
2023-07-20 19:32:15 +02:00
cursor : pointer ;
opacity : 1 ;
}
2023-08-31 02:08:48 +02:00
. dragClose {
height : 15px ;
aspect-ratio : 1 / 1 ;
2023-10-13 17:29:41 +02:00
font-size : calc ( var ( --mainFontSize ) * 1 . 3 ) ;
2023-08-31 02:08:48 +02:00
opacity : 0 . 5 ;
transition : all 250ms ;
2023-10-13 17:29:41 +02:00
filter : drop-shadow ( 0px 0px 2px black ) ;
text-shadow : none ;
2023-08-31 02:08:48 +02:00
}
. dragClose : hover {
cursor : pointer ;
opacity : 1 ;
}
2023-07-20 19:32:15 +02:00
# floatingPrompt . drag-grabber {
position : unset ;
}
/* ################################################################*/
/ * CUSTOMIZE THE DROPDOWN SELECT COLORS FOR RIGHT MENU
/*#################################################################*/
select {
padding : 3px 2px ;
background-color : var ( --black30a ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-11-09 10:31:44 +01:00
border-radius : 5px ;
2023-07-20 19:32:15 +02:00
margin-bottom : 5px ;
height : min-content ;
}
select option {
/* works to highlight selected/active option */
background-color : var ( --white50a ) ;
color : var ( --black70a ) ;
}
select option : not ( : checked ) {
/* works to color unselected items */
background-color : var ( --black70a ) ;
color : var ( --white70a ) ;
}
/*#######################################################################*/
# rm_api_block {
display : none ;
overflow-y : auto ;
}
. API-logo {
margin : 0 auto ;
width : min-content ;
opacity : 0 . 5 ;
}
. oobabooga_logo {
margin : 5px auto ;
text-align : center ;
}
. menu_button . disabled {
2023-10-16 22:03:42 +02:00
filter : brightness ( 75 % ) grayscale ( 1 ) ;
2023-11-12 21:12:16 +01:00
opacity : 0 . 5 ;
pointer-events : none ;
2023-07-20 19:32:15 +02:00
}
. fav_on {
2023-08-20 18:09:19 +02:00
color : var ( --golden ) ! important ;
2023-07-20 19:32:15 +02:00
}
2024-08-05 17:39:17 +02:00
. world_set ,
. toggleEnabled {
2023-08-20 18:09:19 +02:00
color : var ( --active ) ! important ;
2023-08-19 19:18:39 +02:00
}
2023-08-26 12:09:47 +02:00
# context_set_default . default {
color : var ( --preferred ) ! important ;
}
2023-08-19 19:18:39 +02:00
# instruct_set_default . default {
2023-08-20 18:09:19 +02:00
color : var ( --preferred ) ! important ;
2023-08-19 19:18:39 +02:00
}
2023-07-20 19:32:15 +02:00
. displayBlock {
display : block ! important ;
}
. displayNone {
display : none ! important ;
}
# api_url_text {
display : block ;
}
2023-12-10 00:52:14 +01:00
. menu_button . api_button : hover {
2023-08-20 18:09:19 +02:00
background-color : var ( --active ) ;
2023-07-20 19:32:15 +02:00
}
. api-load-icon {
font-size : 24px ;
display : none ;
}
# rm_characters_block {
display : flex ;
overflow-y : auto ;
flex-direction : column ;
2023-08-18 22:13:15 +02:00
height : 100 % ;
2023-07-20 19:32:15 +02:00
}
# rm_characters_block . right_menu_button {
padding-right : 15px ;
}
# rm_characters_topbar {
display : flex ;
flex-direction : column ;
}
# rm_characters_topbar_buttons {
margin-top : 0 ;
margin-bottom : 10px ;
display : flex ;
flex-direction : row ;
align-items : baseline ;
}
# rm_characters_topbar_expander {
flex-grow : 1 ;
}
# form_character_search_form {
display : flex ;
flex-direction : row ;
align-items : stretch ;
margin : 5px ;
column-gap : 5px ;
}
# form_character_search_form . menu_button ,
# GroupFavDelOkBack . menu_button ,
. avatar-container . menu_button {
margin : 0 ;
height : fit-content ;
padding : 5px ;
2023-11-09 10:31:44 +01:00
border-radius : 5px ;
2023-07-20 19:32:15 +02:00
aspect-ratio : 1 / 1 ;
}
# character_sort_order {
margin : 0 ;
flex : 1 ;
2023-11-09 10:31:44 +01:00
border-radius : 5px ;
2023-07-20 19:32:15 +02:00
height : auto ;
}
# character_search_bar {
margin : 0 ;
flex : 1 ;
/* padding-left: 0.75em; */
height : auto ;
}
2024-01-31 11:24:27 +01:00
# persona_search_bar {
min-width : 80px ;
}
2024-02-02 03:07:51 +01:00
# persona_sort_order {
max-width : 4em ;
}
2024-05-12 15:43:09 +02:00
# persona-management-block . paginationjs-nav {
width : max-content ;
}
2023-07-20 19:32:15 +02:00
input [ type = search ] :: -webkit-search-cancel-button {
-webkit-appearance : none ;
height : 1em ;
width : 1em ;
border-radius : 50em ;
2024-05-15 22:06:10 +02:00
background-color : var ( --SmartThemeBodyColor ) ;
mask : url ( '/img/times-circle.svg' ) no-repeat 50 % 50 % ;
2023-07-20 19:32:15 +02:00
background-size : contain ;
opacity : 0 ;
pointer-events : none ;
cursor : pointer ;
}
input [ type = search ] : focus :: -webkit-search-cancel-button {
2024-05-15 22:06:10 +02:00
opacity : . 5 ;
2023-07-20 19:32:15 +02:00
pointer-events : all ;
}
2023-11-10 20:56:25 +01:00
. bogus_folder_select ,
2023-07-20 19:32:15 +02:00
. character_select {
display : flex ;
flex-direction : row ;
align-items : center ;
padding : 5px ;
border-radius : 10px ;
cursor : pointer ;
2023-12-03 01:17:02 +01:00
margin-bottom : 1px ;
2023-07-20 19:32:15 +02:00
}
2024-03-09 20:58:13 +01:00
. character_select . inline_avatar ,
. missing-avatar . inline_avatar {
2024-03-06 04:59:39 +01:00
padding : unset ;
border-radius : var ( --avatar-base-border-radius-round ) ;
2024-04-09 19:03:35 +02:00
width : fit-content ;
2024-03-06 04:59:39 +01:00
}
2023-07-20 19:32:15 +02:00
/*applies to char list and mes_text char display name*/
. ch_name {
font-weight : bolder ;
}
2023-07-27 23:04:21 +02:00
. character_name_block {
display : flex ;
align-items : baseline ;
flex-direction : row ;
gap : 5px ;
2024-03-07 02:15:41 +01:00
margin-bottom : 6px ;
}
. character_name_block_sub_line {
position : absolute ;
right : 0px ;
top : calc ( var ( --mainFontSize ) + 2px ) ;
font-size : calc ( var ( --mainFontSize ) * 0 . 6 ) ;
color : var ( --grey7070a ) ;
2023-07-27 23:04:21 +02:00
}
2024-03-07 05:20:43 +01:00
. character_name_block . ch_add_placeholder {
display : none ;
}
2023-07-20 19:32:15 +02:00
. ch_avatar_url {
2023-07-27 23:04:21 +02:00
font-style : italic ;
}
2023-11-10 20:56:25 +01:00
. bogus_folder_select . avatar ,
2023-07-20 19:32:15 +02:00
. character_select . avatar {
align-self : center ;
}
. ch_description {
font-size : calc ( var ( --mainFontSize ) * 0 . 8 ) ;
white-space : nowrap ;
text-overflow : ellipsis ;
overflow : hidden ;
width : 100 % ;
margin-top : -5px ;
}
. mes_block . ch_name {
max-width : 100 % ;
}
/*applies to both groups and solos chars in the char list*/
2024-03-07 02:15:41 +01:00
# rm_print_characters_block . character_select_container ,
# rm_print_characters_block . group_select_container {
position : relative ;
}
2024-01-31 11:13:01 +01:00
# rm_print_characters_block . ch_name ,
. avatar-container . ch_name {
2024-03-07 02:15:41 +01:00
flex : 1 1 auto ;
2023-07-20 19:32:15 +02:00
white-space : nowrap ;
overflow : hidden ;
2024-03-07 02:15:41 +01:00
text-wrap : nowrap ;
2023-07-20 19:32:15 +02:00
text-overflow : ellipsis ;
display : block ;
}
2024-03-09 20:58:13 +01:00
# rm_print_characters_block . character_name_block > : last-child {
flex : 0 100000 auto ;
/* Force shrinking first */
2024-03-07 02:15:41 +01:00
overflow : hidden ;
text-wrap : nowrap ;
text-overflow : ellipsis ;
}
2023-11-10 20:56:25 +01:00
. bogus_folder_select : hover ,
2024-01-30 18:12:56 +01:00
. character_select : hover ,
. avatar-container : hover {
2023-07-20 19:32:15 +02:00
background-color : var ( --white30a ) ;
}
2023-11-02 19:05:41 +01:00
/* BG MENU */
2023-07-20 19:32:15 +02:00
# bg_menu {
cursor : pointer ;
position : fixed ;
z-index : 3001 ;
}
2023-10-21 16:43:25 +02:00
. bg_list {
2023-07-20 19:32:15 +02:00
display : flex ;
flex-wrap : wrap ;
width : calc ( var ( --sheldWidth ) - 10px ) ;
max-width : 100vw ;
2024-07-14 23:42:16 +02:00
max-width : 100dvw ;
2023-10-21 00:40:58 +02:00
justify-content : space-evenly ;
2023-07-20 19:32:15 +02:00
}
. bg_example {
2023-07-21 13:43:12 +02:00
width : 30 % ;
max-width : 200px ;
2023-07-20 19:32:15 +02:00
background-repeat : no-repeat ;
background-size : cover ;
background-position : center ;
border-radius : 10px ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
box-shadow : 0 0 7px var ( --black50a ) ;
margin : 5px ;
cursor : pointer ;
aspect-ratio : 16 / 9 ;
justify-content : flex-end ;
position : relative ;
}
2023-10-21 00:40:58 +02:00
. bg_example . locked {
outline : 2px solid var ( --golden ) ;
}
2024-06-18 00:14:15 +02:00
. bg_example : hover . locked . bg_example_lock ,
. bg_example : focus-within . locked . bg_example_lock {
2023-10-21 00:40:58 +02:00
display : none ;
}
2024-06-18 00:14:15 +02:00
. bg_example : hover : not ( . locked ) . bg_example_unlock ,
. bg_example : focus-within : not ( . locked ) . bg_example_unlock {
2023-10-21 00:40:58 +02:00
display : none ;
}
2024-06-18 00:14:15 +02:00
. bg_example : hover [ custom = "true" ] . bg_example_edit ,
. bg_example : focus-within [ custom = "true" ] . bg_example_edit {
2023-10-21 16:43:25 +02:00
display : none ;
}
2024-06-18 00:14:15 +02:00
. bg_example : hover [ custom = "false" ] . bg_example_copy ,
. bg_example : focus-within [ custom = "false" ] . bg_example_copy {
2023-10-21 16:43:25 +02:00
display : none ;
}
2023-07-20 19:32:15 +02:00
. BGSampleTitle {
display : flex ;
width : 100 % ;
height : min-content ;
text-align : center ;
justify-content : center ;
align-self : flex-end ;
bottom : 0 ;
position : relative ;
word-break : break-word ;
background-color : var ( --black50a ) ;
font-size : calc ( var ( --fontScale ) * 0 . 9em ) ;
2024-05-01 22:43:11 +02:00
max-height : 50 % ;
overflow-y : clip ;
2023-07-20 19:32:15 +02:00
}
2023-10-21 19:41:19 +02:00
. bg_example [ custom = "true" ] . BGSampleTitle {
display : none ;
}
2023-07-20 19:32:15 +02:00
. bg_button {
2024-06-08 07:13:52 +02:00
padding : 4px ;
2023-07-20 19:32:15 +02:00
position : absolute ;
top : 5px ;
cursor : pointer ;
2023-10-21 00:40:58 +02:00
opacity : 0 . 8 ;
2024-06-08 07:13:52 +02:00
border-radius : 3px ;
2023-07-20 19:32:15 +02:00
font-size : 20px ;
color : var ( --black70a ) ;
text-shadow : none ;
margin : 0 ;
filter : drop-shadow ( 0px 0px 3px white ) ;
transition : opacity 0 . 2s ease-in-out ;
2023-07-21 11:00:40 +02:00
display : none ;
}
2024-06-18 00:14:15 +02:00
. bg_example : hover . bg_button ,
. bg_example : focus-within . bg_button {
2023-07-21 11:00:40 +02:00
display : block ;
2023-07-20 19:32:15 +02:00
}
. bg_button : hover {
opacity : 1 ;
}
. bg_example_cross {
2024-06-08 07:13:52 +02:00
right : 6px ;
2023-07-20 19:32:15 +02:00
}
. bg_example_edit {
2024-06-08 07:13:52 +02:00
left : 6px ;
2023-07-20 19:32:15 +02:00
}
2023-10-21 16:43:25 +02:00
. bg_example_copy {
2024-06-08 07:13:52 +02:00
left : 6px ;
2023-10-21 16:43:25 +02:00
}
2023-10-21 00:40:58 +02:00
. bg_example_lock ,
. bg_example_unlock {
left : 50 % ;
transform : translateX ( -50 % ) ;
}
2023-07-20 19:32:15 +02:00
. add_bg_but {
cursor : pointer ;
opacity : 0 . 1 ;
height : 100 % ;
width : 100 % ;
}
. input-file {
display : flex ;
justify-content : center ;
align-items : center ;
height : 100 % ;
}
# form_create {
2023-08-08 20:13:42 +02:00
display : flex ;
flex-direction : column ;
2023-07-20 19:32:15 +02:00
height : 100 % ;
overflow-y : auto ;
2024-06-03 06:19:41 +02:00
padding : 1px ;
2023-07-20 19:32:15 +02:00
}
. avatar_div {
display : flex ;
width : 100 % ;
flex-wrap : wrap ;
margin-top : 0px ;
align-items : center ;
}
# avatar-and-name-block {
justify-content : space-between ;
display : flex ;
flex-wrap : wrap ;
}
. ch_fav_icon {
filter : drop-shadow ( 1px 1px 2px black ) ;
2023-08-20 18:09:19 +02:00
color : var ( --golden ) ;
2023-07-20 19:32:15 +02:00
font-size : 14px ;
order : -1 ;
margin-left : -75px ;
padding-right : 54px ;
margin-top : 3px ;
position : relative ;
}
2024-07-04 19:20:10 +02:00
. group_member . queue_position : not ( : empty ) :: before {
2024-07-04 15:52:56 +02:00
content : "#" ;
}
2024-07-04 19:20:10 +02:00
. group_member . queue_position {
2024-07-04 19:33:00 +02:00
margin-right : 0 . 75rem ;
font-size : calc ( var ( --mainFontSize ) * 0 . 9 ) ;
2024-07-04 15:52:56 +02:00
}
2024-07-03 23:00:10 +02:00
. group_member . is_queued {
2024-07-04 19:20:10 +02:00
outline : 2px solid var ( --golden ) ;
2024-07-03 23:00:10 +02:00
}
. group_member . is_active {
2024-07-04 19:20:10 +02:00
outline : 2px solid var ( --active ) ;
2024-07-03 23:00:10 +02:00
}
2023-07-20 19:32:15 +02:00
. character_select . is_fav . avatar ,
. group_select . is_fav . avatar ,
2024-02-28 06:05:04 +01:00
. group_member . is_fav . avatar ,
. avatar . is_fav {
2023-08-20 18:09:19 +02:00
outline : 2px solid var ( --golden ) ;
}
. character_select . is_fav . ch_name ,
2023-08-20 18:47:14 +02:00
. group_select . is_fav . ch_name ,
. group_member . is_fav . ch_name {
2023-08-20 18:09:19 +02:00
color : var ( --golden ) ;
2023-07-20 19:32:15 +02:00
}
# fav_chara_wrap {
display : flex ;
margin : 5px 0px ;
}
# fav_chara {
border : none ;
font-size : var ( --mainFontSize ) ;
display : flex ;
}
# name_div {
width : 100 % ;
}
# create_button {
display : none ;
}
. suggested_replies {
display : none ;
}
. last_mes . suggested_replies {
display : flex ;
flex-direction : column ;
gap : 5px ;
margin-bottom : 5px ;
}
. suggested_reply {
display : flex ;
padding : 5px ;
margin-right : 5px ;
border-radius : 5px ;
font-weight : 500 ;
color : var ( --SmartThemeQuoteColor ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
border-radius : 10px ;
cursor : pointer ;
transition : 0 . 2s ;
}
. avatar-container {
position : relative ;
display : flex ;
flex-direction : row ;
2024-01-30 18:12:56 +01:00
align-items : flex-start ;
gap : 5px ;
2024-06-06 02:48:06 +02:00
margin : 1px ;
2024-01-30 18:12:56 +01:00
padding : 5px ;
border-radius : 10px ;
cursor : pointer ;
margin-bottom : 1px ;
2024-01-31 11:13:01 +01:00
width : 100 % ;
2024-02-28 06:05:04 +01:00
outline : var ( --avatar-base-border-radius ) solid transparent ;
border : var ( --avatar-base-border-radius ) solid transparent ;
2023-07-20 19:32:15 +02:00
}
2024-01-31 21:14:45 +01:00
. avatar-container . character_select_container {
flex-grow : 1 ;
}
2023-07-20 19:32:15 +02:00
grammarly-extension {
z-index : 35 ;
}
2024-01-30 18:12:56 +01:00
. avatar-container . avatar-buttons {
display : flex ;
flex-direction : row ;
gap : 5px ;
opacity : 0 . 3 ;
transition : opacity 0 . 25s ease-in-out ;
2023-07-20 19:32:15 +02:00
}
2024-01-30 18:12:56 +01:00
. avatar-container . avatar-buttons : hover {
opacity : 1 ;
2023-07-20 19:32:15 +02:00
}
2024-07-25 22:44:34 +02:00
. avatar-container . avatar-buttons . menu_button {
padding : 3px ;
}
2023-07-20 19:32:15 +02:00
/* Ross should be able to handle this later */
/ * . big-avatars . avatar-buttons {
justify-content : center ;
width : fit-content ;
} * /
. avatar_div . avatar {
/ * margin-left : 4px ;
margin-right : 10px ;
height : 70px ;
width : 70px ; * /
display : flex ;
justify-content : center ;
align-items : center ;
align-self : center ! important ;
2024-04-09 19:03:35 +02:00
width : 100 % ;
height : 100 % ;
/* Avoids cutting off the box shadow on the avatar*/
margin : 10px ;
}
# avatar_controls {
height : 100 % ;
width : 100 % ;
flex-grow : 1 ;
justify-content : flex-end ;
flex-flow : column ;
2024-04-10 19:27:06 +02:00
padding : 5px 5px 10px 0 ;
2023-07-20 19:32:15 +02:00
}
2023-08-21 16:00:28 +02:00
# description_div ,
2023-07-20 19:32:15 +02:00
# first_message_div {
2023-08-21 16:00:28 +02:00
display : flex ;
align-items : center ;
2023-07-20 19:32:15 +02:00
}
# rm_characters_block . form_create_bottom_buttons_block {
justify-content : space-evenly ! important ;
flex-grow : 0 ;
}
. form_create_bottom_buttons_block {
display : flex ;
flex : 1 ;
gap : 5px ;
align-items : center ;
justify-content : end ;
flex-wrap : wrap ;
}
. form_create_bottom_buttons_block . menu_button {
display : flex ;
justify-content : center ;
align-items : center ;
}
# delete_button ,
. redWarningBG {
background-color : var ( --crimson70a ) ! important ;
}
# delete_button : hover ,
. redWarningBG : hover {
background-color : var ( --fullred ) ! important ;
}
# result_info {
2023-08-21 14:32:27 +02:00
font-size : calc ( var ( --mainFontSize ) * 0 . 9 ) ;
2023-07-20 19:32:15 +02:00
display : flex ;
2023-09-09 23:58:37 +02:00
align-items : center ;
2024-06-06 02:48:06 +02:00
gap : 6px ;
2024-06-03 06:19:41 +02:00
padding : 1px 3px ;
2023-07-20 19:32:15 +02:00
}
2023-09-09 23:58:37 +02:00
# result_info_text {
display : flex ;
flex-direction : column ;
2024-05-16 00:02:22 +02:00
line-height : 0 . 9 ;
2023-09-09 23:58:37 +02:00
text-align : right ;
}
2024-06-06 02:48:06 +02:00
# result_info . right_menu_button {
padding : 4px ;
2023-07-20 19:32:15 +02:00
}
/* Focus */
2023-11-04 19:33:15 +01:00
# bulk_tag_popup ,
2024-05-30 05:11:23 +02:00
# dialogue_popup {
2023-07-20 19:32:15 +02:00
width : 500px ;
max-width : 90vw ;
2024-07-14 23:42:16 +02:00
max-width : 90dvw ;
2023-07-20 19:32:15 +02:00
position : absolute ;
z-index : 9999 ;
margin-left : auto ;
margin-right : auto ;
left : 0 ;
right : 0 ;
top : 50 % ;
transform : translateY ( -50 % ) ;
text-align : center ;
2023-08-27 22:20:43 +02:00
box-shadow : 0px 0px 14px var ( --black70a ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
padding : 4px ;
2023-09-19 11:21:32 +02:00
background-color : var ( --SmartThemeBlurTintColor ) ;
2023-07-20 19:32:15 +02:00
border-radius : 10px ;
max-height : 90vh ;
2024-07-14 23:42:16 +02:00
max-height : 90dvh ;
2023-07-20 19:32:15 +02:00
display : flex ;
flex-direction : column ;
overflow-y : hidden ;
2024-03-30 05:41:54 +01:00
overflow-x : hidden ;
2023-07-20 19:32:15 +02:00
}
. rm_stat_block {
display : flex ;
justify-content : space-between ;
}
. large_dialogue_popup {
height : 90vh ! important ;
2024-07-14 23:42:16 +02:00
height : 90dvh ! important ;
2023-07-20 19:32:15 +02:00
max-width : 90vw ! important ;
2024-07-14 23:42:16 +02:00
max-width : 90dvw ! important ;
2023-07-20 19:32:15 +02:00
}
. wide_dialogue_popup {
2023-09-05 16:43:19 +02:00
aspect-ratio : 1 / 1 ;
width : unset ! important ;
2023-12-03 02:21:11 +01:00
min-width : var ( --sheldWidth ) ;
2023-07-20 19:32:15 +02:00
}
2024-06-03 01:17:19 +02:00
. wider_dialogue_popup {
min-width : 750px ;
2024-06-24 00:28:02 +02:00
max-width : 90 % ;
}
/* If doesn't fit 750px in 90% of the screen, we should re-scale the wider popup */
@ media ( max-width : calc ( 750px / 0 . 9 ) ) {
. wider_dialogue_popup {
min-width : 90 % ;
}
2024-06-03 01:17:19 +02:00
}
2024-06-23 12:26:52 +02:00
. transparent_dialogue_popup {
background-color : transparent ;
box-shadow : none ;
border : none ;
}
2024-06-23 13:11:00 +02:00
. transparent_dialogue_popup : focus-visible {
outline : none ;
}
2024-05-30 21:03:52 +02:00
# dialogue_popup . horizontal_scrolling_dialogue_popup {
2024-03-30 05:41:54 +01:00
overflow-x : unset ! important ;
}
2024-05-30 21:03:52 +02:00
# dialogue_popup . vertical_scrolling_dialogue_popup {
2024-03-30 05:41:54 +01:00
overflow-y : unset ! important ;
}
2023-11-04 19:33:15 +01:00
# bulk_tag_popup_holder ,
2024-05-30 05:11:23 +02:00
# dialogue_popup_holder {
2023-07-20 19:32:15 +02:00
display : flex ;
flex-direction : column ;
height : 100 % ;
overflow-y : hidden ;
padding : 0 10px ;
}
2024-05-30 21:03:52 +02:00
# dialogue_popup_text {
2023-07-20 19:32:15 +02:00
flex-grow : 1 ;
overflow-y : auto ;
height : 100 % ;
}
2024-05-31 03:30:41 +02:00
# dialogue_popup_controls {
2024-05-25 00:44:09 +02:00
margin-top : 10px ;
2023-07-20 19:32:15 +02:00
display : flex ;
align-self : center ;
gap : 20px ;
}
2023-11-04 19:33:15 +01:00
# bulk_tag_popup_reset ,
2024-03-27 03:36:09 +01:00
# bulk_tag_popup_remove_mutual ,
2024-05-31 03:30:41 +02:00
# dialogue_popup_ok {
2023-07-20 19:32:15 +02:00
background-color : var ( --crimson70a ) ;
cursor : pointer ;
}
2024-03-27 03:36:09 +01:00
# bulk_tag_popup_reset : hover ,
# bulk_tag_popup_remove_mutual : hover ,
2024-05-31 03:30:41 +02:00
# dialogue_popup_ok : hover {
2024-03-27 03:36:09 +01:00
background-color : var ( --crimson-hover ) ;
}
2024-03-27 08:22:03 +01:00
# bulk_tags_avatars_block {
max-height : 70vh ;
}
2024-05-31 03:30:41 +02:00
# dialogue_popup_input {
2024-05-25 00:44:09 +02:00
margin : 10px 0 0 0 ;
2023-07-20 19:32:15 +02:00
width : 100 % ;
}
2023-11-04 19:33:15 +01:00
# bulk_tag_popup_cancel ,
2024-05-31 03:30:41 +02:00
# dialogue_popup_cancel {
2023-07-20 19:32:15 +02:00
cursor : pointer ;
}
# dialogue_del_mes {
width : 100 % ;
margin-left : auto ;
margin-right : auto ;
margin-top : 4px ;
text-align : center ;
padding : 0 ;
height : min-content ;
}
# dialogue_del_mes_ok {
/*changes background of OK button in the deletion menu*/
display : inline-block ;
background-color : var ( --crimson70a ) ;
cursor : pointer ;
}
# dialogue_del_mes_cancel {
display : inline-block ;
cursor : pointer ;
}
. menu_button {
color : var ( --SmartThemeBodyColor ) ;
background-color : var ( --black50a ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-11-09 10:31:44 +01:00
border-radius : 5px ;
2023-07-20 19:32:15 +02:00
padding : 3px 5px ;
width : min-content ;
cursor : pointer ;
margin : 5px 0 ;
transition : 0 . 3s ;
display : flex ;
align-items : center ;
justify-content : center ;
text-align : center ;
}
2024-07-17 19:51:48 +02:00
. menu_button . fa-fw {
/* Font Awesome icons that are a menu button and should be fixed width need a slight fix. 1.25em is their default, but we need to account for button spacing. */
min-width : calc ( 1 . 25em + 12px ) ;
}
2023-07-20 19:32:15 +02:00
. avatar_div . menu_button ,
2023-10-30 06:16:20 +01:00
. form_create_bottom_buttons_block . menu_button {
2023-07-20 19:32:15 +02:00
padding : 5px ;
margin : 0 ;
filter : grayscale ( 0 . 5 ) ;
}
. menu_button : hover ,
. menu_button . active {
background-color : var ( --white30a ) ;
}
# dialogue_del_mes . menu_button {
margin-left : 25px ;
margin-right : 25px ;
}
2024-05-30 05:11:23 +02:00
# shadow_popup {
2023-07-20 19:32:15 +02:00
backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) * 2 ) ) ;
-webkit-backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) * 2 ) ) ;
background-color : var ( --black30a ) ;
display : none ;
opacity : 0 . 0 ;
position : absolute ;
width : 100 % ;
height : 100vh ;
2024-07-14 23:42:16 +02:00
height : 100dvh ;
2023-07-20 19:32:15 +02:00
z-index : 9999 ;
top : 0 ;
2024-04-24 00:51:54 +02:00
}
2023-07-20 19:32:15 +02:00
# bgtest {
display : none ;
width : 100vw ;
2024-07-14 23:42:16 +02:00
width : 100dvw ;
2023-07-20 19:32:15 +02:00
height : 100vh ;
2024-07-14 23:42:16 +02:00
height : 100dvh ;
2023-07-20 19:32:15 +02:00
position : absolute ;
z-index : -100 ;
background-color : red ;
}
2023-08-16 19:34:47 +02:00
. prompt_order {
2023-07-20 19:32:15 +02:00
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
gap : 5px ;
width : 100 % ;
padding : 5px ;
}
2023-08-16 19:34:47 +02:00
. prompt_order > div {
2023-07-20 19:32:15 +02:00
padding : 5px ;
padding-left : 30px ;
width : 100 % ;
border-radius : 5px ;
color : var ( --SmartThemeBodyColor ) ;
background-color : var ( --black30a ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
cursor : grab ;
transition : background-color 200ms ease-in-out ;
position : relative ;
user-select : none ;
2023-08-10 11:34:22 +02:00
display : flex ;
align-items : center ;
justify-content : space-between ;
2023-08-16 19:34:47 +02:00
column-gap : 10px ;
}
. prompt_order > div > span : first-child {
flex-grow : 1 ;
2023-07-20 19:32:15 +02:00
}
2023-11-08 15:24:28 +01:00
. prompt_order : not ( . ui-sortable-disabled ) > div : hover {
2023-09-16 08:42:26 +02:00
background-color : var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
}
2023-08-16 19:34:47 +02:00
. prompt_order > div :: after {
2023-07-20 19:32:15 +02:00
content : "☰" ;
left : 8px ;
position : absolute ;
}
2023-08-16 19:34:47 +02:00
. prompt_order . disabled {
opacity : 0 . 5 ;
filter : grayscale ( 0 . 5 ) ;
}
2023-11-08 15:24:28 +01:00
. ui-sortable-disabled ,
. prompt_order . ui-sortable-disabled > div {
cursor : not-allowed ;
}
2023-08-16 19:34:47 +02:00
. prompt_order . toggle_button {
padding-right : 0 ;
}
. prompt_order . toggle_button :: after {
content : '☑' ;
}
. prompt_order . disabled . toggle_button :: after {
content : '☐' ;
}
2023-11-08 01:52:03 +01:00
. online_status {
2023-08-27 21:38:42 +02:00
opacity : 0 . 8 ;
2023-07-20 19:32:15 +02:00
margin-top : 2px ;
margin-bottom : 15px ;
2023-08-27 21:38:42 +02:00
display : flex ;
align-items : center ;
gap : 5px ;
2023-07-20 19:32:15 +02:00
}
2023-11-08 01:52:03 +01:00
. online_status_indicator . success {
background-color : green ;
}
. online_status_indicator {
2023-11-09 10:31:44 +01:00
border-radius : 100 % ;
2023-07-20 19:32:15 +02:00
width : 14px ;
height : 14px ;
background-color : red ;
display : inline-block ;
}
2023-11-08 01:52:03 +01:00
. online_status_text {
2023-07-20 19:32:15 +02:00
margin-left : 4px ;
display : inline-block ;
}
# horde_model {
height : 150px ;
}
. horde_model_title {
display : flex ;
flex-direction : row ;
align-items : center ;
column-gap : 20px ;
}
. drag-handle {
cursor : grab ;
2024-08-05 03:29:29 +02:00
/* Make the drag handle not selectable in most browsers */
user-select : none ;
2023-07-20 19:32:15 +02:00
}
# form_rename_chat {
display : flex ;
align-items : center ;
2023-08-20 08:49:27 +02:00
flex : 1 ;
2023-07-20 19:32:15 +02:00
opacity : 0 . 8 ;
gap : 5px ;
}
2023-08-20 08:49:27 +02:00
/* Override toastr default styles */
2023-09-02 17:32:15 +02:00
body # toast-container {
top : var ( --topBarBlockSize ) ;
}
2023-08-20 08:49:27 +02:00
body # toast-container > div {
opacity : 0 . 95 ;
2023-07-20 19:32:15 +02:00
}
2023-08-20 08:49:27 +02:00
# dialogue_del_mes {
2023-07-20 19:32:15 +02:00
display : none ;
}
2023-08-20 08:49:27 +02:00
. for_checkbox {
display : block ;
2023-07-20 19:32:15 +02:00
}
2024-06-03 06:19:41 +02:00
input [ type = 'checkbox' ] {
2023-07-20 19:32:15 +02:00
-webkit-appearance : none ;
-moz-appearance : none ;
appearance : none ;
2023-11-05 18:46:19 +01:00
outline : 1px solid var ( --grey5020a ) ;
2023-07-20 19:32:15 +02:00
position : relative ;
width : var ( --mainFontSize ) ;
height : var ( --mainFontSize ) ;
overflow : hidden ;
border-radius : 3px ;
2023-11-05 07:47:29 +01:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-11-08 06:08:51 +01:00
background-color : var ( --SmartThemeBodyColor ) ;
2023-11-05 18:46:19 +01:00
box-shadow : inset 0 0 2px 0 var ( --SmartThemeShadowColor ) ;
2023-07-20 19:32:15 +02:00
cursor : pointer ;
2023-11-05 07:47:29 +01:00
transform : translateY ( -0 . 075em ) ;
2023-07-20 19:32:15 +02:00
flex-shrink : 0 ;
2023-11-05 07:47:29 +01:00
place-content : center ;
2023-11-09 21:50:25 +01:00
filter : brightness ( 1 . 2 ) ;
2023-11-05 07:47:29 +01:00
display : grid ;
}
2024-06-03 06:19:41 +02:00
input [ type = "checkbox" ] :: before {
2023-11-05 07:47:29 +01:00
content : "" ;
width : 0 . 65em ;
height : 0 . 65em ;
2023-07-20 19:32:15 +02:00
transform : scale ( 0 ) ;
2023-11-05 07:47:29 +01:00
transition : 120ms transform ease-in-out ;
2023-11-21 02:26:43 +01:00
box-shadow : inset 1em 1em var ( --SmartThemeCheckboxTickColor ) ;
2023-11-05 07:47:29 +01:00
transform-origin : bottom left ;
clip-path : polygon ( 14 % 44 % , 0 65 % , 50 % 100 % , 100 % 16 % , 80 % 0 % , 43 % 62 % ) ;
2023-07-20 19:32:15 +02:00
}
2024-06-03 06:19:41 +02:00
input [ type = "checkbox" ] : checked :: before {
2023-07-20 19:32:15 +02:00
transform : scale ( 1 ) ;
}
2024-06-03 06:19:41 +02:00
input [ type = "checkbox" ] : disabled {
2023-11-05 07:47:29 +01:00
color : grey ;
cursor : not-allowed ;
}
2024-06-03 06:19:41 +02:00
input [ type = 'checkbox' ] . del_checkbox {
2023-11-05 07:47:29 +01:00
display : none ;
opacity : 0 . 7 ;
margin-top : 12px ;
margin-right : 12px ;
}
2023-07-20 19:32:15 +02:00
# user_avatar_block {
display : flex ;
flex-wrap : wrap ;
2024-01-31 11:13:01 +01:00
justify-content : space-around ;
2024-06-06 02:48:06 +02:00
padding : 1px ;
2023-07-20 19:32:15 +02:00
}
2024-01-31 02:32:32 +01:00
. avatar-container . avatar {
2023-07-20 19:32:15 +02:00
cursor : pointer ;
2024-02-28 06:05:04 +01:00
border-radius : var ( --avatar-base-border-radius-round ) ;
2024-01-30 18:12:56 +01:00
align-self : center ;
2024-02-28 06:05:04 +01:00
outline : var ( --avatar-base-border-radius ) solid transparent ;
2024-01-31 21:14:45 +01:00
flex : unset ;
2023-07-20 19:32:15 +02:00
}
2024-01-30 18:12:56 +01:00
. avatar-container . selected {
2024-02-28 06:05:04 +01:00
border : var ( --avatar-base-border-radius ) solid rgba ( 255 , 255 , 255 , 0 . 7 ) ;
2023-07-20 19:32:15 +02:00
}
2024-01-31 02:32:32 +01:00
. avatar-container . default_persona . avatar {
2024-02-28 06:05:04 +01:00
outline : var ( --avatar-base-border-radius ) solid var ( --golden ) ;
2023-07-20 19:32:15 +02:00
}
2024-01-30 18:12:56 +01:00
. avatar-container . default_persona . set_default_persona {
2023-07-20 19:32:15 +02:00
color : var ( --golden ) ;
}
# user_avatar_block . avatar_upload {
cursor : pointer ;
width : 60px ;
height : 60px ;
background : var ( --grey30 ) ;
border-radius : 100 % ;
display : flex ;
justify-content : center ;
align-items : center ;
font-size : 3rem ;
}
# form_upload_avatar {
display : none ! important ;
}
. range-block {
height : min-content ;
display : flex ;
flex-wrap : wrap ;
align-items : center ;
margin-bottom : 5px ;
justify-content : space-between ;
}
. range-block-title {
margin : 0 ;
padding : 0 ;
width : 100 % ;
text-align : center ;
}
. range-block-counter {
margin-left : 5px ;
2023-09-22 15:16:24 +02:00
/*previously needed to avoid firefox scrollbar overlap, no longer necessary?*/
/* margin-right: 15px; */
2023-07-20 19:32:15 +02:00
font-size : calc ( var ( --mainFontSize ) * 0 . 95 ) ;
color : var ( --SmartThemeBodyColor ) ;
flex : 1 ;
gap : 5px ;
display : flex ;
}
. toggle-description {
width : max-content ;
margin-left : 5px ;
margin-right : 15px ;
2023-08-23 10:02:49 +02:00
font-size : calc ( var ( --mainFontSize ) * 0 . 85 ) ;
2023-07-20 19:32:15 +02:00
color : var ( --SmartThemeEmColor ) ;
text-align : center ;
}
2023-10-26 06:20:47 +02:00
. range-block-counter input {
2023-07-20 19:32:15 +02:00
display : block ;
cursor : text ;
background-color : var ( --black30a ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
border-radius : 5px ;
padding : 2px ;
flex : 1 ;
text-align : center ;
2023-10-26 06:20:47 +02:00
width : 70px ;
2023-07-20 19:32:15 +02:00
}
2023-11-01 18:53:50 +01:00
. neo-range-input {
display : block ;
cursor : text ;
background-color : var ( --black30a ) ;
border : 1px solid var ( --SmartThemeBorderColor ) ;
border-radius : 0 0 5px 5px ;
padding : 2px ;
padding-left : 1em ;
padding-top : 5px ;
text-align : center ;
width : 100 % ;
}
. neo-range-slider {
-webkit-appearance : none ! important ;
appearance : none ! important ;
margin : 0 ! important ;
margin-top : 7px ! important ;
padding : 0 ! important ;
width : 100 % ! important ;
height : 5px ! important ;
background : var ( --white50a ) ! important ;
border-radius : 7px 7px 0 0 ! important ;
background-size : 70 % 100 % ! important ;
background-repeat : no-repeat ! important ;
2023-11-05 18:46:19 +01:00
box-shadow : inset 0 0 2px var ( --black50a ) ! important ;
2023-11-01 18:53:50 +01:00
cursor : ew-resize ! important ;
2023-11-07 16:03:49 +01:00
z-index : 1 ;
2023-11-01 18:53:50 +01:00
}
2024-06-06 02:48:06 +02:00
. neo-range-slider : hover ,
2024-06-18 00:14:15 +02:00
input [ type = "range" ] : hover {
2024-06-06 02:48:06 +02:00
filter : brightness ( 1 . 25 ) ;
}
2024-06-18 00:14:15 +02:00
. neo-range-slider : focus-visible ,
input [ type = "range" ] : focus-visible {
outline : 1px solid var ( --interactable-outline-color ) ;
2024-06-06 02:48:06 +02:00
}
2023-07-20 19:32:15 +02:00
. range-block-range {
margin : 0 ;
flex : 5 ;
}
input [ type = "range" ] {
-webkit-appearance : none ;
appearance : none ;
margin : 0 ;
padding : 0 ;
width : 100 % ;
height : 5px ;
background : var ( --white50a ) ;
border-radius : 15px ;
background-size : 70 % 100 % ;
background-repeat : no-repeat ;
box-shadow : inset 0 0 2px black ;
2023-09-23 04:56:24 +02:00
cursor : ew-resize ;
2023-07-20 19:32:15 +02:00
}
input [ type = "range" ] :: -webkit-slider-thumb {
-webkit-appearance : none ;
position : relative ;
box-shadow : 0 0 5px 0 black ;
box-shadow : inset 0 0 5px var ( --black70a ) ;
-webkit-appearance : none ;
height : 15px ;
width : 15px ;
border-radius : 50 % ;
background : var ( --white100 ) ;
}
2024-05-12 21:15:05 +02:00
. doubleRangeContainer {
display : flex ;
--markerWidth : 15px ;
container-type : inline-size ;
container-name : doubleRangeContainer ;
2024-05-20 05:18:30 +02:00
> . doubleRangeInputContainer {
2024-05-12 21:15:05 +02:00
flex : 0 0 50 % ;
overflow : hidden ;
position : relative ;
2024-05-20 05:18:30 +02:00
> datalist {
2024-05-12 21:15:05 +02:00
display : flex ;
flex-direction : row ;
justify-content : space-between ;
font-size : x-small ;
2024-05-20 05:18:30 +02:00
> option {
2024-05-12 21:15:05 +02:00
flex : 0 0 0 ;
width : 0 ;
display : flex ;
justify-content : center ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
@ container doubleRangeContainer ( max-width : 200px ) {
2024-05-20 05:18:30 +02:00
> datalist {
2024-05-12 21:15:05 +02:00
height : 2 . 5em ;
}
2024-05-20 05:18:30 +02:00
& : nth-child ( 1 ) > datalist > option {
2024-05-12 21:15:05 +02:00
transform : rotate ( -45deg ) ;
transform-origin : bottom right ;
}
2024-05-20 05:18:30 +02:00
& : nth-child ( 2 ) > datalist > option {
2024-05-12 21:15:05 +02:00
transform : rotate ( 45deg ) ;
transform-origin : bottom left ;
}
}
2024-05-20 05:18:30 +02:00
> input :: -webkit-slider-thumb {
2024-05-12 21:15:05 +02:00
z-index : 2 ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : after {
/* shifted to center to hide corners of the inset shadow */
--shift : 2px ;
/* 100% of the input width (1em padding) */
--inputWidth : calc ( 100 % - 1em ) ;
/* input padding max(20px, 20%) */
--inputPadding : calc ( max ( 20px , var ( --inputWidth ) * 0 . 2 ) ) ;
/* 100% of the variable range width: 100% of input - input padding - marker width) */
--rangeWidth : calc ( var ( --inputWidth ) - var ( --inputPadding ) - var ( --markerWidth ) ) ;
/* always visible part of the input range (value = 0) */
--zeroOffset : calc ( var ( --inputPadding ) + var ( --markerWidth ) / 2 ) ;
content : '' ;
position : absolute ;
top : 11px ;
width : calc ( var ( --value ) / 2 * var ( --rangeWidth ) + var ( --zeroOffset ) + var ( --shift ) ) ;
height : 5px ;
background-color : var ( --SmartThemeQuoteColor ) ;
box-shadow : inset 0 0 2px black ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : nth-child ( 1 ) {
--value : 0 ;
padding-left : 1em ;
2024-05-20 05:18:30 +02:00
> input {
2024-05-12 21:15:05 +02:00
direction : rtl ;
position : relative ;
padding-right : max ( 20px , 20 % ) ;
}
2024-05-20 05:18:30 +02:00
> datalist {
2024-05-12 21:15:05 +02:00
direction : rtl ;
padding-right : calc ( var ( --markerWidth ) / 2 + max ( 20px , 20 % ) ) ;
padding-left : calc ( var ( --markerWidth ) / 2 - 2px ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : after {
right : -2px ;
}
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : nth-child ( 2 ) {
--value : 0 ;
padding-right : 1em ;
2024-05-20 05:18:30 +02:00
> input {
2024-05-12 21:15:05 +02:00
position : relative ;
padding-left : max ( 20px , 20 % ) ;
}
2024-05-20 05:18:30 +02:00
> datalist {
2024-05-12 21:15:05 +02:00
padding-left : calc ( var ( --markerWidth ) / 2 + max ( 20px , 20 % ) ) ;
padding-right : calc ( var ( --markerWidth ) / 2 - 2px ) ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
& : after {
left : -2px ;
}
}
}
}
2023-07-20 19:32:15 +02:00
/*Notes '?' links*/
. note-link-span {
color : var ( --SmartThemeQuoteColor ) ;
display : inline-block ;
opacity : 0 . 5 ;
margin : 0 5px ;
text-align : center ;
2023-11-02 05:32:57 +01:00
border-radius : 100 % ;
2023-07-20 19:32:15 +02:00
box-shadow : 0 0 3px black ;
transition : all 250ms ;
}
2023-11-02 05:32:57 +01:00
. topRightInset {
2023-11-01 18:53:50 +01:00
position : absolute ;
top : 6px ;
right : 23px ;
}
. note-link-span : hover ,
. note-link-span-lrg : hover {
2023-07-20 19:32:15 +02:00
opacity : 1 ;
}
. nice-link {
color : var ( --SmartThemeBodyColor ) ;
opacity : 0 . 5 ;
font-weight : 400 ;
text-decoration : none ;
border-bottom : 2px dashed red ;
transition : 0 . 3s ;
}
. whitespacenowrap {
white-space : nowrap ;
}
# chartokenwarning a {
color : var ( --SmartThemeBodyColor ) ;
}
2024-04-09 19:03:35 +02:00
# char-management-dropdown {
2024-04-10 19:31:38 +02:00
height : auto ;
2024-04-09 19:03:35 +02:00
margin-bottom : 0 ;
}
2023-07-20 19:32:15 +02:00
# tagInput {
2023-10-16 22:03:42 +02:00
height : 26px ;
2023-07-20 19:32:15 +02:00
margin-bottom : 0 ;
}
. nice-link : hover {
opacity : 1 ;
}
. mes_buttons ,
. extraMesButtons {
/* height: 20px; */
position : relative ;
display : flex ;
2024-06-06 02:48:06 +02:00
gap : 4px ;
2023-07-20 19:32:15 +02:00
flex-wrap : nowrap ;
justify-content : flex-end ;
transition : all 200ms ;
overflow-x : hidden ;
2024-06-06 02:48:06 +02:00
padding : 1px ;
2023-07-20 19:32:15 +02:00
}
. extraMesButtons {
display : none ;
}
2024-06-06 02:48:06 +02:00
. mes_button ,
. extraMesButtons > div {
2023-07-20 19:32:15 +02:00
cursor : pointer ;
transition : 0 . 3s ease-in-out ;
filter : drop-shadow ( 0px 0px 2px black ) ;
2023-12-03 01:17:02 +01:00
opacity : 0 . 3 ;
2024-06-06 02:48:06 +02:00
padding : 1px 3px ;
2023-07-20 19:32:15 +02:00
}
2024-06-06 02:48:06 +02:00
. mes_button : hover ,
. extraMesButtons > div : hover {
2023-07-20 19:32:15 +02:00
opacity : 1 ;
}
. mes_bookmark {
display : none ;
}
. mes : not ( [ bookmark_link = '' ] ) . mes_bookmark {
display : inline-block ;
}
. mes_edit_buttons {
display : none ;
flex-direction : row ;
column-gap : 5px ;
float : right ;
cursor : pointer ;
padding-bottom : 5px ;
filter : drop-shadow ( 0px 0px 2px black ) ;
transition : 0 . 3s ease-in-out ;
}
. mes_edit_buttons . menu_button {
opacity : 0 . 5 ;
padding : 0px ;
font-size : 1rem ;
height : 2rem ;
margin-top : 0 ;
margin-bottom : 0 ;
aspect-ratio : 1 / 1 ;
display : flex ;
justify-content : center ;
align-items : center ;
}
. mes_edit_cancel . menu_button {
background-color : var ( --crimson70a ) ;
}
. mes_edit_done . menu_button {
background-color : var ( --okGreen70a ) ;
}
. mes_edit_buttons . menu_button : hover {
opacity : 1 ;
}
. edit_textarea {
padding : 5px ;
margin : 0 ;
outline : none ;
background-color : var ( --black50a ) ;
line-height : calc ( var ( --mainFontSize ) + . 25rem ) ;
2024-07-12 20:39:32 +02:00
max-height : 75vh ;
max-height : 75dvh ;
2023-07-20 19:32:15 +02:00
}
# anchor_order {
margin-bottom : 15px ;
}
# anchor_checkbox ,
# power-user-option-checkboxes {
display : flex ;
flex-direction : column ;
flex-grow : 1 ;
}
# anchor_checkbox label ,
# power-user-option-checkboxes label ,
. checkbox_label ,
2023-09-15 20:34:41 +02:00
. auto_continue_settings_block {
2023-07-20 19:32:15 +02:00
display : flex ;
flex-direction : row ;
column-gap : 5px ;
2023-11-08 16:56:22 +01:00
align-items : baseline ;
2023-07-20 19:32:15 +02:00
}
2023-09-15 20:34:41 +02:00
. auto_continue_settings_block {
2023-07-20 19:32:15 +02:00
margin-top : 10px ;
}
2023-09-15 20:34:41 +02:00
. auto_continue_settings_block label {
2023-07-20 19:32:15 +02:00
flex : 1 ;
display : flex ;
flex-direction : column ;
}
# shadow_character_popup {
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
background-color : var ( --black70a ) ;
-webkit-backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
display : none ;
opacity : 1 . 0 ;
position : absolute ;
width : 100 % ;
height : 100vh ;
2024-07-14 23:42:16 +02:00
height : 100dvh ;
2023-07-20 19:32:15 +02:00
z-index : 2058 ;
}
# character_popup {
display : none ;
background-color : var ( --SmartThemeBlurTintColor ) ;
backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) * 2 ) ) ;
-webkit-backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) * 2 ) ) ;
min-width : 100px ;
max-width : var ( --sheldWidth ) ;
height : calc ( 100vh - 84px ) ;
2024-07-14 23:42:16 +02:00
height : calc ( 100dvh - 84px ) ;
2023-07-20 19:32:15 +02:00
min-height : calc ( 100vh - 84px ) ;
2024-07-14 23:42:16 +02:00
min-height : calc ( 100dvh - 84px ) ;
2023-07-20 19:32:15 +02:00
max-height : calc ( 100vh - 84px ) ;
2024-07-14 23:42:16 +02:00
max-height : calc ( 100dvh - 84px ) ;
2023-07-20 19:32:15 +02:00
position : absolute ;
2024-03-20 19:33:14 +01:00
z-index : 4001 ;
2023-07-20 19:32:15 +02:00
margin-left : auto ;
margin-right : auto ;
left : 0 ;
right : 0 ;
2023-08-25 00:06:52 +02:00
top : var ( --topBarBlockSize ) ;
2023-07-20 19:32:15 +02:00
box-shadow : 0 0 20px var ( --black70a ) ;
padding : 10px ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
border-radius : 0 0 10px 10px ;
overflow-y : auto ;
}
# character_popup h3 {
margin-top : 0 ;
margin-bottom : 0 ;
margin-left : 0 ;
display : inline ;
}
h4 {
margin : 5px 0 ;
}
h5 {
margin : 5px 0 ;
}
# character_popup h5 {
color : var ( --grey50 ) ;
}
# character_popup_text {
align-items : center ;
}
# personality_textarea {
width : 100 % ;
}
# mes_example_div {
height : 100 % ;
display : flex ;
flex-grow : 1 ;
}
# scenario_pole {
width : 100 % ;
margin-left : 0 ;
}
# mes_example_textarea {
width : 100 % ;
height : 100 % ;
margin-left : 0 ;
}
# character_popup_ok {
cursor : pointer ;
display : none ;
height : 40px ;
margin-top : 15px ;
margin-left : 36px ;
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
background-color : var ( --black70a ) ;
-webkit-backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
width : 110px ;
text-align : center ;
}
# shadow_select_chat_popup {
display : none ;
opacity : 1 . 0 ;
position : absolute ;
width : 100 % ;
height : 100vh ;
2024-07-14 23:42:16 +02:00
height : 100dvh ;
2024-03-20 19:33:14 +01:00
z-index : 4100 ;
2023-07-20 19:32:15 +02:00
top : 0 ;
background-color : var ( --black70a ) ;
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
-webkit-backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
}
# select_chat_popup {
display : grid ;
grid-template-rows : auto auto ;
max-width : var ( --sheldWidth ) ;
height : min-content ;
2023-08-25 00:06:52 +02:00
max-height : calc ( 100vh - var ( --topBarBlockSize ) ) ;
2024-07-14 23:42:16 +02:00
max-height : calc ( 100dvh - var ( --topBarBlockSize ) ) ;
2023-07-20 19:32:15 +02:00
min-height : 100px ;
position : absolute ;
z-index : 2066 ;
left : 0 ;
right : 0 ;
top : 0 ;
bottom : 0 ;
margin-top : auto ;
margin-bottom : auto ;
margin-left : auto ;
margin-right : auto ;
box-shadow : 0px 0px 20px black ;
padding : 10px ;
background-color : var ( --SmartThemeBlurTintColor ) ;
border-radius : 10px ;
overflow-y : auto ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
}
# export_div {
cursor : pointer ;
}
# load_select_chat_div {
position : absolute ;
bottom : 154px ;
left : 174px ;
}
# load_select_chat_div img {
width : 80px ;
height : 80px ;
}
# select_chat_div {
padding : 0 ;
height : min-content ;
}
# select_chat_div hr {
margin : 0 ;
}
2023-11-04 17:49:06 +01:00
. select_chat_block_wrapper {
cursor : pointer ;
}
2023-07-20 19:32:15 +02:00
. select_chat_block {
2023-10-30 06:16:20 +01:00
border-radius : 5px ;
margin-top : 5px ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-10-30 06:16:20 +01:00
padding : 5px 7px ;
2023-07-20 19:32:15 +02:00
}
. select_chat_block : hover {
background-color : var ( --white30a ) ;
}
. select_chat_block [ highlight ] {
background-color : var ( --cobalt30a ) ;
}
. select_chat_block . avatar {
grid-row : span 2 ;
}
. select_chat_block_filename_item {
opacity : 0 . 5 ;
width : fit-content ;
}
. select_chat_block_filename {
flex : 1
}
. renameChatButton ,
. exportRawChatButton ,
. exportChatButton {
cursor : pointer ;
}
. select_chat_block_mes {
font-size : calc ( var ( --mainFontSize ) - . 25rem ) ;
}
. PastChat_cross {
width : 15px ;
height : 15px ;
cursor : pointer ;
opacity : 0 . 4 ;
}
2023-08-03 16:59:57 +02:00
2023-07-20 19:32:15 +02:00
. PastChat_cross : hover {
color : red ;
filter : drop-shadow ( 0 0 2px red ) ;
2023-08-03 16:59:57 +02:00
-webkit-animation : infinite-spinning 1s ease-out 0s infinite normal ;
animation : infinite-spinning 1s ease-out 0s infinite normal ;
}
2023-07-20 19:32:15 +02:00
# export_character_div {
display : grid ;
grid-template-columns : 340px auto ;
}
body . ui-autocomplete {
max-height : 300px ;
overflow-y : auto ;
}
body . ui-front {
z-index : 10000 ;
}
2023-11-04 21:47:53 +01:00
body . ui-slider-handle {
background-color : var ( --SmartThemeBlurTintColor ) ;
border : 1px solid var ( --SmartThemeBorderColor ) ! important ;
border-radius : 5px ;
2023-11-05 18:46:19 +01:00
outline : 1px solid var ( --grey5020a ) ;
box-shadow : 0 0 3px var ( --black50a ) ;
2023-11-04 21:47:53 +01:00
text-shadow : 0px 0px calc ( var ( --shadowWidth ) * 1px ) var ( --SmartThemeShadowColor ) ;
width : 50px ! important ;
padding : 0 5px ;
text-align : center ;
margin-left : 0 ;
opacity : 1 ! important ;
transition : filter 200ms ;
2023-11-09 21:50:25 +01:00
filter : brightness ( 1 . 2 ) ;
2023-11-04 21:47:53 +01:00
}
. ui-slider-handle . ui-state-default {
color : var ( --SmartThemeBodyColor ) ;
background : var ( --SmartThemeBlurTintColor ) ;
}
. ui-slider-handle : focus {
outline : none ;
}
. ui-slider-handle . ui-state-hover {
color : var ( --SmartThemeBodyColor ) ;
background : var ( --SmartThemeBlurTintColor ) ;
2023-11-05 18:46:19 +01:00
filter : brightness ( 1 . 2 )
2023-11-04 21:47:53 +01:00
}
. ui-slider-handle . ui-state-active {
color : var ( --SmartThemeBodyColor ) ;
background : var ( --SmartThemeBlurTintColor ) ;
2023-11-05 18:46:19 +01:00
filter : brightness ( 1 . 5 ) ;
2023-11-04 21:47:53 +01:00
border-color : var ( --SmartThemeBorderColor ) ! important ;
}
2023-07-20 19:32:15 +02:00
body . ui-widget-content {
background-color : var ( --SmartThemeBlurTintColor ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ! important ;
2023-07-20 19:32:15 +02:00
border-radius : 10px ;
2023-11-05 18:46:19 +01:00
box-shadow : 0 0 3px var ( --black50a ) ;
2023-07-20 19:32:15 +02:00
text-shadow : 0px 0px calc ( var ( --shadowWidth ) * 1px ) var ( --SmartThemeShadowColor ) ;
backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) * 2 ) ) ;
color : var ( --SmartThemeBodyColor ) ;
}
2023-11-05 18:46:19 +01:00
. ui-slider {
margin : 5px 0 ;
2023-11-08 06:08:51 +01:00
outline : 1px solid var ( --grey5050a ) ;
2023-11-05 18:46:19 +01:00
border-radius : 5px ! important ;
}
2023-11-04 21:47:53 +01:00
body . ui-widget-content . ui-state-active : not ( . ui-slider-handle ) {
2023-07-20 19:32:15 +02:00
margin : unset ! important ;
}
body . ui-widget-content . ui-menu-item-wrapper {
background : unset ;
border : unset ;
}
body . ui-widget-content li {
padding : 5px ;
text-decoration : none ;
display : flex ;
align-items : center ;
cursor : pointer ;
opacity : 0 . 5 ;
2023-11-04 00:21:20 +01:00
transition : opacity 200ms ;
2023-07-20 19:32:15 +02:00
}
body . ui-widget-content li : hover {
/* background-color: var(--SmartThemeEmColor); */
opacity : 1 ;
}
2023-08-20 08:49:27 +02:00
. typing_indicator {
position : sticky ;
bottom : 10px ;
margin : 10px ;
opacity : 0 . 85 ;
text-shadow : 0px 0px calc ( var ( --shadowWidth ) * 1px ) var ( --SmartThemeShadowColor ) ;
2023-09-08 15:36:00 +02:00
order : 9999 ;
2023-07-20 19:32:15 +02:00
}
2023-08-20 08:49:27 +02:00
. typing_indicator : after {
display : inline-block ;
vertical-align : bottom ;
animation : ellipsis steps ( 4 , end ) 1500ms infinite ;
content : "" ;
width : 0px ;
2023-07-20 19:32:15 +02:00
}
2024-03-16 22:01:47 +01:00
# group_avatar_preview . missing-avatar {
display : inline ;
vertical-align : middle ;
}
body . big-avatars . group_select . missing-avatar {
display : flex ;
justify-content : center ;
align-items : center ;
}
body . big-avatars . missing-avatar {
width : calc ( var ( --avatar-base-width ) * var ( --big-avatar-width-factor ) ) ;
height : calc ( var ( --avatar-base-height ) * var ( --big-avatar-height-factor ) ) ;
}
2023-08-20 08:49:27 +02:00
. missing-avatar {
font-size : 36px ;
2024-03-16 22:01:47 +01:00
width : var ( --avatar-base-width ) ;
height : var ( --avatar-base-height ) ;
text-align : center ;
2023-07-20 19:32:15 +02:00
}
2024-04-27 06:13:54 +02:00
. userSettingsInnerExpandable {
border : 1px solid ;
border-color : var ( --SmartThemeBorderColor ) ;
border-radius : 5px ;
padding : 2px 5px ! important ;
margin : 5px 0 ;
}
2024-03-29 05:53:26 +01:00
. warning {
2023-08-20 18:09:19 +02:00
color : var ( --warning ) ;
2023-07-20 19:32:15 +02:00
font-weight : bolder ;
}
. slider_hint {
display : flex ;
flex-direction : row ;
align-items : baseline ;
justify-content : space-between ;
width : 100 % ;
position : relative ;
}
# talkativeness_expander {
flex : 1 ;
}
# talkativeness_div input [ type = "range" ] {
width : 100 % ;
}
. slider_hint span {
font-size : calc ( var ( --mainFontSize ) - . 25rem ) ;
}
. slider_hint span : nth-child ( 2 ) {
position : absolute ;
left : 50 % ;
transform : translateX ( -50 % ) ;
}
p {
margin-bottom : 16px ;
margin-top : 0 ;
}
h1 {
font-size : calc ( var ( --mainFontSize ) + 1rem ) ;
line-height : 32px ;
margin-bottom : 22px ;
}
h2 {
margin-top : 5px ;
margin-bottom : 22px ;
}
. right_menu_button h2 {
margin-top : 0 ;
margin-bottom : 0 ;
}
. right_menu_button img {
display : block ;
cursor : pointer ;
height : 26px ;
}
a {
color : orange ;
text-decoration : none ;
}
2024-06-26 04:49:07 +02:00
# export_format_popup {
2023-07-20 19:32:15 +02:00
display : none ;
z-index : 9999 ;
}
# rawPromptPopup {
inset : 0px auto auto 0px ;
margin : 0px ;
2024-06-26 04:49:07 +02:00
transform : translate ( 500px , 0px ) ;
2023-07-20 19:32:15 +02:00
display : block ;
overflow-wrap : break-word ;
white-space : normal ;
max-width : calc ( ( ( 100vw - 500px ) / 2 ) - 10px ) ;
2024-07-14 23:42:16 +02:00
max-width : calc ( ( ( 100dvw - 500px ) / 2 ) - 10px ) ;
2023-07-20 19:32:15 +02:00
position : absolute ;
z-index : 9999 ;
max-height : 90vh ;
2024-07-14 23:42:16 +02:00
max-height : 90dvh ;
2023-07-20 19:32:15 +02:00
/*unsure why, but this prevents scrollbars*/
height : 49vh ;
2024-07-14 23:42:16 +02:00
height : 49dvh ;
2023-07-20 19:32:15 +02:00
padding : 5px ;
overflow-y : auto ;
display : none ;
}
2024-06-26 04:49:07 +02:00
# rawPromptWrapper {
white-space : pre-wrap ;
2023-07-20 19:32:15 +02:00
word-wrap : break-word ;
width : 100 % ;
text-align : start ;
overflow-y : auto ;
max-height : 100 % ;
}
. list-group {
display : flex ;
flex-direction : column ;
padding-left : 0 ;
margin-top : 0 ;
overflow : hidden ;
background-color : var ( --SmartThemeBlurTintColor ) ;
backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) * 2 ) ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
border-radius : 10px ;
box-shadow : 0 0 5px black ;
text-shadow : 0px 0px calc ( var ( --shadowWidth ) * 1px ) var ( --SmartThemeShadowColor ) ;
}
/* ############################################################# */
/* Right nav panel and nav-toggle */
/* ############################################################# */
# right-nav-panel {
width : calc ( ( 100vw - var ( --sheldWidth ) - 2px ) / 2 ) ;
2024-07-14 23:42:16 +02:00
width : calc ( ( 100dvw - var ( --sheldWidth ) - 2px ) / 2 ) ;
2023-08-25 00:06:52 +02:00
max-height : calc ( 100vh - var ( --topBarBlockSize ) ) ;
2024-07-14 23:42:16 +02:00
max-height : calc ( 100dvh - var ( --topBarBlockSize ) ) ;
2023-08-25 00:06:52 +02:00
height : calc ( 100vh - var ( --topBarBlockSize ) ) ;
2024-07-14 23:42:16 +02:00
height : calc ( 100dvh - var ( --topBarBlockSize ) ) ;
2023-07-20 19:32:15 +02:00
position : fixed ;
top : 0 ;
margin : 0 ;
right : 0 ;
left : calc ( 100 % - var ( --sheldWidth ) / 2 + var ( --sheldWidth ) + 1px ) ;
padding : 5px ;
margin-bottom : 5px ;
backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) ) ) ;
background-color : var ( --SmartThemeBlurTintColor ) ;
-webkit-backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) ) ) ;
z-index : 3000 ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
box-shadow : none ;
border-radius : 10px ;
overflow : hidden ;
flex-flow : column ;
min-width : 100px ;
}
# nav-toggle {
position : fixed ;
right : 13px ;
top : 12px ;
padding : 0 ;
margin : 0 ;
cursor : pointer ;
height : 0 ;
width : 0 ;
z-index : 3001 ;
}
# hidden-divs {
display : none ;
}
/* Message images */
. mes . mes_img_container {
max-width : 100 % ;
/*to fit inside single window height of mobile landscape*/
display : none ;
position : relative ;
width : fit-content ;
transition : all 0 . 1s ;
padding : 0 . 5rem ;
}
. mes_img {
border-radius : 10px ;
max-width : 100 % ;
max-height : 40vh ;
image-rendering : -webkit-optimize-contrast ;
}
2024-08-13 22:21:00 +02:00
. mes_img_swipes ,
2023-07-20 19:32:15 +02:00
. mes_img_controls {
position : absolute ;
2024-06-23 02:32:06 +02:00
top : 0 . 1em ;
2023-07-20 19:32:15 +02:00
left : 0 ;
width : 100 % ;
2024-06-23 02:32:06 +02:00
display : flex ;
opacity : 0 ;
2023-07-20 19:32:15 +02:00
flex-direction : row ;
justify-content : space-between ;
2024-08-13 22:21:00 +02:00
align-items : center ;
2023-07-20 19:32:15 +02:00
padding : 1em ;
}
2024-08-13 22:21:00 +02:00
. mes_img_swipes {
top : unset ;
bottom : 0 . 1rem ;
}
. mes_img_swipes . right_menu_button ,
2023-07-20 19:32:15 +02:00
. mes_img_controls . right_menu_button {
2024-06-29 23:31:54 +02:00
filter : brightness ( 90 % ) ;
text-shadow : 1px 1px var ( --SmartThemeShadowColor ) ! important ;
2024-06-23 02:32:06 +02:00
padding : 1px ;
height : 1 . 25em ;
width : 1 . 25em ;
}
2024-08-13 22:21:00 +02:00
. mes_img_swipes . right_menu_button :: before ,
2024-06-23 02:32:06 +02:00
. mes_img_controls . right_menu_button :: before {
/* Fix weird alignment with this font-awesome icons on focus */
position : relative ;
top : 0 . 6125em ;
2023-07-20 19:32:15 +02:00
}
2024-08-13 22:21:00 +02:00
. mes_img_swipes . right_menu_button : hover ,
2023-07-20 19:32:15 +02:00
. mes_img_controls . right_menu_button : hover {
filter : brightness ( 150 % ) ;
}
2024-08-13 22:21:00 +02:00
. mes_img_container : hover . mes_img_swipes ,
. mes_img_container : focus-within . mes_img_swipes ,
2024-06-23 02:32:06 +02:00
. mes_img_container : hover . mes_img_controls ,
. mes_img_container : focus-within . mes_img_controls {
opacity : 1 ;
2023-07-20 19:32:15 +02:00
}
. mes . mes_img_container . img_extra {
display : flex ;
}
2024-06-29 23:31:54 +02:00
body : not ( . caption ) . mes_img_caption {
display : none ;
}
2024-08-13 22:21:00 +02:00
. mes_img_container : not ( . img_swipes ) . mes_img_swipes ,
body : not ( . sd ) . mes_img_swipes {
display : none ;
}
. mes_img_swipe_counter {
font-weight : 600 ;
filter : drop-shadow ( 2px 4px 6px black ) ;
cursor : default ;
}
2024-06-23 12:26:52 +02:00
. img_enlarged_holder {
2024-06-23 02:43:37 +02:00
/* Scaling via flex-grow and object-fit only works if we have some kind of base-height set */
min-height : 120px ;
2023-07-20 19:32:15 +02:00
}
2024-06-23 12:26:52 +02:00
. img_enlarged_holder : has ( . zoomed ) {
overflow : auto ;
}
2023-07-20 19:32:15 +02:00
. img_enlarged {
2024-06-23 12:26:52 +02:00
object-fit : contain ;
width : 100 % ;
height : 100 % ;
cursor : zoom-in
}
. img_enlarged . zoomed {
object-fit : cover ;
width : auto ;
height : auto ;
cursor : zoom-out ;
}
. img_enlarged_container {
display : flex ;
flex-direction : column ;
justify-content : center ;
padding : 10px ;
height : 100 % ;
width : 100 % ;
}
. img_enlarged_holder :: -webkit-scrollbar-corner {
background-color : transparent ;
}
. img_enlarged_container pre code {
position : relative ;
display : block ;
overflow-x : auto ;
padding : 1em ;
}
2024-06-28 19:46:41 +02:00
. img_enlarged_container pre {
max-height : 25vh ;
2024-07-14 23:42:16 +02:00
max-height : 25dvh ;
2024-06-28 19:46:41 +02:00
flex-shrink : 0 ;
overflow : auto ;
}
2024-06-23 13:58:08 +02:00
. popup : has ( . img_enlarged . zoomed ) . large_dialogue_popup {
height : 100vh ! important ;
2024-07-14 23:42:16 +02:00
height : 100dvh ! important ;
2024-06-23 13:58:08 +02:00
max-height : 100vh ! important ;
2024-07-14 23:42:16 +02:00
max-height : 100dvh ! important ;
2024-06-23 13:58:08 +02:00
max-width : 100vw ! important ;
2024-07-14 23:42:16 +02:00
max-width : 100dvw ! important ;
2024-06-23 13:58:08 +02:00
padding : 0 ;
}
. popup : has ( . img_enlarged . zoomed ) . large_dialogue_popup . popup-content {
margin : 0 ;
padding : 0 ;
}
. popup : has ( . img_enlarged . zoomed ) . large_dialogue_popup . img_enlarged_container pre {
display : none ;
}
. popup : has ( . img_enlarged . zoomed ) . large_dialogue_popup . popup-button-close {
display : none ! important ;
2023-07-20 19:32:15 +02:00
}
. cropper-container {
max-width : 100 % ! important ;
}
2023-08-20 08:49:27 +02:00
/* Align the content of this span to the right */
. delete-button {
margin-right : 10px ;
display : inline-flex ;
2023-07-20 19:32:15 +02:00
}
2023-08-20 08:49:27 +02:00
# extensions_settings . inline-drawer-toggle . inline-drawer-header ,
2023-09-22 15:16:24 +02:00
# extensions_settings2 . inline-drawer-toggle . inline-drawer-header ,
2023-11-01 18:53:50 +01:00
# user-settings-block h4 ,
. standoutHeader {
2023-08-20 08:49:27 +02:00
background-image : linear-gradient ( 348deg , var ( --white30a ) 2 % , var ( --grey30a ) 10 % , var ( --black70a ) 95 % , var ( --SmartThemeQuoteColor ) 100 % ) ;
margin-bottom : 5px ;
border-radius : 10px ;
2023-09-22 15:16:24 +02:00
padding : 2px 5px ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-08-20 08:49:27 +02:00
transition : all 250ms ;
2023-07-20 19:32:15 +02:00
}
2024-06-01 01:05:42 +02:00
. standoutHeader . inline-drawer-header {
padding : 5px ;
margin-bottom : 0 ;
}
. standoutHeader ~ . inline-drawer-content {
border : 1px solid var ( --SmartThemeBorderColor ) ;
padding : 5px ;
border-radius : 10px ;
background-color : var ( --black30a ) ;
}
2024-05-12 21:15:05 +02:00
# user-settings-block [ name = "MiscellaneousToggles" ] ,
# CustomCSS-block ,
# CustomCSS-textAreaBlock {
display : contents ;
}
2024-05-20 05:18:30 +02:00
2024-05-12 21:15:05 +02:00
# customCSS {
flex : 1 1 auto ;
2024-09-03 21:06:24 +02:00
min-height : 20vh ;
min-height : 20dvh ;
2024-05-12 21:15:05 +02:00
}
2024-03-19 01:38:42 +01:00
# ui_language_select {
2024-04-07 19:36:07 +02:00
width : 8em ;
2024-03-19 01:38:42 +01:00
}
2023-08-20 08:49:27 +02:00
# extensions_settings . inline-drawer-toggle . inline-drawer-header : hover ,
2024-06-01 01:05:42 +02:00
# extensions_settings2 . inline-drawer-toggle . inline-drawer-header : hover ,
. standoutHeader . inline-drawer-header : hover {
2023-08-20 08:49:27 +02:00
filter : brightness ( 150 % ) ;
2023-07-20 19:32:15 +02:00
}
. menu_button_icon {
display : flex ;
align-items : center ;
width : fit-content ;
gap : 5px ;
}
2023-08-22 00:51:31 +02:00
. menu_button_icon span {
font-size : calc ( var ( --mainFontSize ) * 0 . 9 ) ;
}
2023-07-20 19:32:15 +02:00
/*------------ TOP SIDE SETTINGS ----------------*/
# top-settings-holder {
2023-08-25 00:06:52 +02:00
display : flex ;
2023-07-20 19:32:15 +02:00
margin : 0 auto ;
2023-08-25 00:06:52 +02:00
height : var ( --topBarBlockSize ) ;
2023-07-20 19:32:15 +02:00
justify-content : center ;
2024-03-19 00:40:02 +01:00
z-index : 3005 ;
2023-07-20 19:32:15 +02:00
position : relative ;
width : var ( --sheldWidth ) ;
}
2024-03-19 02:00:15 +01:00
body : has ( . drawer-content . maximized ) # top-settings-holder : has ( . drawer-content . openDrawer : not ( . fillLeft ) : not ( . fillRight ) ) ,
2024-03-20 19:33:14 +01:00
body : has ( . drawer-content . open ) # top-settings-holder : has ( . drawer-content . openDrawer : not ( . fillLeft ) : not ( . fillRight ) ) ,
body : has ( # character_popup . open ) # top-settings-holder : has ( . drawer-content . openDrawer : not ( . fillLeft ) : not ( . fillRight ) ) {
2024-03-19 01:15:01 +01:00
z-index : 4005 ;
}
2023-07-20 19:32:15 +02:00
. drawer {
align-items : center ;
2023-08-25 00:06:52 +02:00
justify-content : center ;
2023-07-20 19:32:15 +02:00
display : flex ;
2023-08-25 00:06:52 +02:00
flex-flow : row ;
2023-07-20 19:32:15 +02:00
width : 100 % ;
}
. drawer-icon {
display : inline-block ;
cursor : pointer ;
2023-08-25 00:06:52 +02:00
font-size : var ( --topBarIconSize ) ;
2024-06-06 02:48:06 +02:00
padding : 1px 3px ;
2023-07-20 19:32:15 +02:00
}
. drawer-icon . openIcon {
transition : all 0 . 275s ;
}
. drawer-icon . closedIcon {
opacity : 0 . 3 ;
transition : all 0 . 275s ;
}
. drawer-icon . closedIcon : hover {
opacity : 1 ;
}
. code-copy {
cursor : pointer ;
position : absolute ;
top : 0 ;
right : 0 ;
height : 22px ;
width : 22px ;
margin : 4px ;
opacity : 0 . 4 ;
display : flex ;
align-items : center ;
justify-content : center ;
}
. code-copy : hover {
opacity : 0 . 8 ;
}
2024-03-18 01:12:23 +01:00
. custom-drawer-icon ,
2023-07-20 19:32:15 +02:00
. inline-drawer-icon {
display : block ;
cursor : pointer ;
font-size : calc ( var ( --mainFontSize ) * 1 . 5 ) ;
background-size : cover ;
background-repeat : no-repeat ;
filter : brightness ( 75 % ) ;
}
. inline-drawer-header {
display : flex ;
justify-content : space-between ;
align-items : center ;
padding : 5px 0 ;
cursor : pointer ;
}
. inline-drawer-content {
display : none ;
}
. drawer25pWidth {
flex-basis : calc ( ( var ( --sheldWidth ) / 4 ) - 16px ) ;
}
. drawer33pWidth {
flex-basis : calc ( ( var ( --sheldWidth ) / 3 ) - 16px ) ;
}
. drawer-content {
background-color : var ( --SmartThemeBlurTintColor ) ;
color : var ( --SmartThemeBodyColor ) ;
border-radius : 10px ;
padding : 5px ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
min-width : 450px ;
width : var ( --sheldWidth ) ;
overflow-y : auto ;
2023-08-25 00:06:52 +02:00
max-height : calc ( 100vh - calc ( var ( --topBarBlockSize ) + var ( --bottomFormBlockSize ) ) ) ;
2024-07-14 23:42:16 +02:00
max-height : calc ( 100dvh - calc ( var ( --topBarBlockSize ) + var ( --bottomFormBlockSize ) ) ) ;
2023-07-20 19:32:15 +02:00
display : none ;
position : absolute ;
2023-08-25 00:06:52 +02:00
top : var ( --topBarBlockSize ) ;
2023-07-20 19:32:15 +02:00
left : 0 ;
right : 0 ;
margin : 0 auto ;
backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) ) ) ;
-webkit-backdrop-filter : blur ( calc ( var ( --SmartThemeBlurStrength ) ) ) ;
2024-03-18 01:16:33 +01:00
/* z-index: 1000 !important; */
2023-07-20 19:32:15 +02:00
}
2024-03-19 00:40:02 +01:00
body . movingUI . inline-drawer-maximize {
display : none ;
}
body : not ( . movingUI ) . drawer-content . maximized {
2024-03-18 01:12:23 +01:00
width : var ( --sheldWidth ) ! important ;
top : var ( --topBarBlockSize ) ! important ;
margin : 0 auto ! important ;
right : 0 ! important ;
}
2023-07-20 19:32:15 +02:00
/*to prevent draggables from being made too small to see*/
. fillRight ,
. fillLeft ,
# WorldInfo ,
# floatingPrompt {
min-width : 100px ! important ;
min-height : 100px ! important ;
position : fixed ;
}
. fillLeft {
width : calc ( ( 100vw - var ( --sheldWidth ) - 2px ) / 2 ) ;
2024-07-14 23:42:16 +02:00
width : calc ( ( 100dvw - var ( --sheldWidth ) - 2px ) / 2 ) ;
2023-08-25 00:06:52 +02:00
height : calc ( 100vh - var ( --topBarBlockSize ) ) ;
2024-07-14 23:42:16 +02:00
height : calc ( 100dvh - var ( --topBarBlockSize ) ) ;
2023-08-25 00:06:52 +02:00
max-height : calc ( 100vh - var ( --topBarBlockSize ) ) ;
2024-07-14 23:42:16 +02:00
max-height : calc ( 100dvh - var ( --topBarBlockSize ) ) ;
2023-07-20 19:32:15 +02:00
position : fixed ;
top : 0 ;
margin : 0 ;
left : 0 ;
right : auto ;
border-radius : 10px ;
box-shadow : none ;
overflow : hidden ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
}
. scrollableInner {
overflow-x : hidden ;
height : calc ( 100 % - 30px ) ;
}
2023-10-09 21:49:35 +02:00
. scrollableInnerFull {
height : 100 % ;
overflow-Y : auto ;
overflow-X : hidden ;
}
2023-07-09 14:27:10 +02:00
. fillLeft . scrollableInner {
2023-08-19 19:18:39 +02:00
padding : 0 . 5em 1em 0 . 5em 0 . 5em
2023-07-09 14:27:10 +02:00
}
2023-07-20 19:32:15 +02:00
. drawer-content select {
width : 100 % ;
2023-08-23 14:53:05 +02:00
font-size : calc ( var ( --mainFontSize ) * 0 . 95 ) ;
2023-07-20 19:32:15 +02:00
}
. settingsSectionWrap {
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
border-radius : 10px ;
padding : 5px ;
}
. wi-enter-footer-text {
font-size : calc ( var ( --mainFontSize ) * 0 . 8 ) ;
color : var ( --SmartThemeBodyColor ) ;
}
# openai_api-presets select {
width : 100 % ;
}
. template_element {
display : none ! important ;
}
. openai_logit_bias_text ,
. openai_logit_bias_value {
flex : 1 ;
}
. editable-slider-notification {
position : absolute ;
right : 0px ;
left : 0px ;
margin : 0 auto ;
width : 70 % ;
top : 5px ;
padding : 0 ;
display : block ;
text-align : center ;
}
. openai_logit_bias_form {
display : flex ;
flex-direction : row ;
column-gap : 10px ;
align-items : center ;
}
. openai_logit_bias_list {
display : flex ;
flex-direction : column ;
gap : 10px ;
}
. openai_logit_bias_list : empty {
width : 100 % ;
height : 100 % ;
}
2023-12-18 16:32:10 +01:00
. logit_bias_form {
2023-08-17 07:14:04 +02:00
display : flex ;
flex-direction : row ;
column-gap : 10px ;
align-items : center ;
}
2023-12-18 16:32:10 +01:00
. logit_bias_text ,
. logit_bias_value {
2023-08-17 07:14:04 +02:00
flex : 1 ;
}
2023-12-18 16:32:10 +01:00
. logit_bias_list {
2023-08-17 07:14:04 +02:00
display : flex ;
flex-direction : column ;
gap : 10px ;
}
2023-12-18 16:32:10 +01:00
. logit_bias_list : empty {
2023-08-17 07:14:04 +02:00
width : 100 % ;
height : 100 % ;
}
2023-12-18 16:32:10 +01:00
. logit_bias_list : empty :: before {
2023-08-17 07:14:04 +02:00
display : flex ;
align-items : center ;
justify-content : center ;
content : "No items" ;
font-weight : bolder ;
width : 100 % ;
height : 100 % ;
opacity : 0 . 8 ;
2023-12-18 17:57:10 +01:00
min-height : 2 . 5em ;
2023-08-17 07:14:04 +02:00
}
2023-07-20 19:32:15 +02:00
. openai_logit_bias_preset_form {
display : flex ;
flex-direction : row ;
width : 100 % ;
gap : 5px ;
align-items : baseline ;
}
# openai_logit_bias_new_entry {
margin-top : 0 . 5rem ;
}
. openai_logit_bias_preset_form select {
flex : 1 ;
}
. openai_logit_bias_list : empty :: before {
display : flex ;
align-items : center ;
justify-content : center ;
content : "No items" ;
font-weight : bolder ;
width : 100 % ;
height : 100 % ;
opacity : 0 . 8 ;
min-height : 3rem ;
}
. openai_restorable ,
. title_restorable {
display : flex ;
flex-direction : row ;
justify-content : space-between ;
align-items : center ;
}
. openai_restorable . right_menu_button img {
height : 20px ;
}
# openai_api-presets {
flex-direction : column ;
}
# ReverseProxyWarningMessage {
display : none ;
}
2023-12-20 17:29:03 +01:00
. reverse_proxy_warning : not ( small ) {
2023-08-20 18:09:19 +02:00
color : var ( --warning ) ;
background-color : var ( --black70a ) ;
2023-07-20 19:32:15 +02:00
text-shadow : none ! important ;
2023-12-20 17:29:03 +01:00
margin-top : 5px ! important ;
2023-07-20 19:32:15 +02:00
border-radius : 5px ;
padding : 3px ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-07-20 19:32:15 +02:00
}
. neutral_warning {
2023-08-20 18:09:19 +02:00
color : var ( --warning ) ;
2023-07-20 19:32:15 +02:00
font-weight : 800 ;
}
. neutral_warning [ data-for ] {
display : none ;
}
. max_context_unlocked_block . checkbox_label {
flex-wrap : wrap ;
}
# max_context_unlocked : not ( : checked ) + div {
display : none ;
}
2023-08-20 08:49:27 +02:00
# rm_group_add_members a ,
# rm_group_members a {
color : var ( --SmartThemeBodyColor ) ;
2023-07-20 19:32:15 +02:00
}
2023-10-13 17:29:41 +02:00
. draggable {
2023-08-20 08:49:27 +02:00
min-width : 100px ;
min-height : 100px ;
max-height : 90vh ;
2023-10-13 17:29:41 +02:00
max-width : 90vw ;
width : calc ( ( 100vw - var ( --sheldWidth ) ) / 2 ) ;
2023-08-20 08:49:27 +02:00
position : absolute ;
padding : 0 ;
2023-10-13 17:29:41 +02:00
filter : drop-shadow ( 1px 1px 2px var ( --black50a ) ) ;
2023-08-20 08:49:27 +02:00
z-index : 29 ;
overflow : hidden ;
display : none ;
bottom : 0 ;
2023-07-20 19:32:15 +02:00
border-radius : 10px ;
2023-10-13 17:29:41 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
aspect-ratio : unset ;
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
background-color : var ( --SmartThemeBlurTintColor ) ;
padding : 5px ;
2023-07-20 19:32:15 +02:00
}
2023-10-09 21:49:35 +02:00
. zoomed_avatar {
2023-12-01 13:47:11 +01:00
/* Max height with 2/3 aspect ratio */
--maxWidth : calc ( 90vh * 0 . 666 ) ;
/* Left gap between the left corner and chat */
--leftGapWidth : calc ( ( 100vw - var ( --sheldWidth ) ) / 2 ) ;
/* Left position of the avatar (half of the gap minus half of the avatar width) */
--leftPosition : max ( 0px , calc ( ( var ( --leftGapWidth ) - var ( --maxWidth ) ) / 2 ) ) ;
2023-10-13 17:29:41 +02:00
padding : 0 ;
border : 0 ;
2023-11-05 18:01:48 +01:00
background-color : transparent ;
2023-12-01 13:47:11 +01:00
max-width : var ( --maxWidth ) ;
left : var ( --leftPosition ) ;
2024-04-14 02:57:57 +02:00
position : absolute ;
2024-04-14 19:13:45 +02:00
height : auto ;
2024-04-14 20:17:18 +02:00
max-height : 90vh ! important ;
2024-05-20 05:18:30 +02:00
align-items : start ;
2024-04-14 02:57:57 +02:00
}
2024-05-20 05:18:30 +02:00
/*why were we force hiding the close button again..?*/
/ * . zoomed_avatar . dragClose {
2024-04-14 20:17:18 +02:00
display : none ;
2024-05-20 05:18:30 +02:00
} * /
2024-04-14 20:17:18 +02:00
2024-04-14 02:57:57 +02:00
. zoomed_avatar_container {
width : 100 % ;
2024-05-21 02:55:56 +02:00
/* margin-inline: 10px; */
2024-04-14 20:17:18 +02:00
max-height : 90vh ;
2024-07-14 23:42:16 +02:00
max-width : 90dvh ;
2023-10-09 21:49:35 +02:00
}
2023-10-13 17:29:41 +02:00
. zoomed_avatar img {
2024-04-14 02:57:57 +02:00
height : unset ! important ;
2023-10-13 17:29:41 +02:00
width : 100 % ;
2024-04-14 02:57:57 +02:00
object-fit : contain ! important ;
border-radius : 10px ;
2023-08-28 06:49:20 +02:00
}
/* Hide scrollbar for Chrome, Safari and Opera */
. no-scrollbar :: -webkit-scrollbar {
display : none ;
}
/* Hide scrollbar for IE, Edge, and Firefox */
. no-scrollbar {
2023-08-31 15:58:28 +02:00
-ms-overflow-style : none ;
/* IE and Edge */
scrollbar-width : none ;
/* Firefox */
2023-08-28 06:49:20 +02:00
}
2023-08-20 08:49:27 +02:00
# groupMemberListPopoutClose {
height : 15px ;
aspect-ratio : 1 / 1 ;
font-size : 20px ;
opacity : 0 . 5 ;
transition : all 250ms ;
2023-07-20 19:32:15 +02:00
}
2023-10-13 17:29:41 +02:00
/ * # groupMemberListPopout ,
2023-10-09 22:52:06 +02:00
# summaryExtensionPopout {
2023-08-20 08:49:27 +02:00
aspect-ratio : unset ;
backdrop-filter : blur ( var ( --SmartThemeBlurStrength ) ) ;
background-color : var ( --SmartThemeBlurTintColor ) ;
overflow : auto ;
2023-10-13 17:29:41 +02:00
} * /
2023-07-20 19:32:15 +02:00
2023-10-09 22:53:55 +02:00
# groupMemberListPopout {
padding : 0 ;
2023-10-15 18:42:23 +02:00
height : 50 % ;
}
# groupMemberListPopout # currentGroupMembers {
height : 100 % ;
2023-10-09 22:53:55 +02:00
}
2023-08-20 08:49:27 +02:00
# groupMemberListPopout # rm_group_members {
/* background-color: var(--SmartThemeBlurTintColor); */
margin : 0 ;
2023-07-20 19:32:15 +02:00
padding : 0 ;
2023-08-20 08:49:27 +02:00
padding-top : 20px ;
2023-07-20 19:32:15 +02:00
}
2023-10-13 17:29:41 +02:00
2023-07-26 21:57:05 +02:00
2023-07-20 19:32:15 +02:00
. timestamp {
font-size : calc ( var ( --mainFontSize ) * 0 . 7 ) ;
font-weight : 400 ;
}
. lastInContext {
border-top : 3px dotted var ( --SmartThemeQuoteColor ) ! important ;
}
2023-08-14 00:43:16 +02:00
. icon-svg {
/* Takes on the color of the surrounding text */
2023-12-14 15:56:39 +01:00
fill : currentColor ;
2023-10-29 22:15:22 +01:00
width : auto ;
height : 14px ;
2023-12-14 15:56:39 +01:00
aspect-ratio : 1 ;
2023-08-14 00:43:16 +02:00
/* To align with adjacent text */
2023-12-14 15:56:39 +01:00
place-self : center ;
2023-08-14 00:46:37 +02:00
}
2023-08-18 22:13:15 +02:00
. paginationjs {
display : flex ;
align-items : center ;
flex-direction : row ;
}
/* Pagination */
. paginationsjs-pages {
margin : 0 . 5em 0 ;
display : flex ;
justify-content : center ;
align-items : center ;
}
. paginationjs-pages ul {
list-style-type : none ;
margin : 0 . 25em ;
padding : 0 ;
display : flex ;
justify-content : center ;
align-items : center ;
gap : 5px ;
2023-08-19 15:11:09 +02:00
user-select : none ;
2023-08-18 22:13:15 +02:00
}
. paginationjs-size-changer select {
width : unset ;
margin : 0 ;
2024-03-30 12:46:46 +01:00
font-size : calc ( var ( --mainFontSize ) * 0 . 85 ) ;
2023-08-18 22:13:15 +02:00
}
. paginationjs-pages ul li a {
padding : 0 . 05em 0 . 5em ;
text-decoration : none ;
color : var ( --SmartThemeBodyColor ) ;
2023-09-16 08:42:26 +02:00
border : 1px solid var ( --SmartThemeBorderColor ) ;
2023-08-18 22:13:15 +02:00
border-radius : 5px ;
transition : opacity 0 . 2s ;
opacity : 0 . 8 ;
cursor : pointer ;
}
. paginationjs-pages ul li a : hover {
opacity : 1 ;
}
. paginationjs-pages ul li . active a {
color : var ( --SmartThemeQuoteColor ) ;
border-color : var ( --SmartThemeQuoteColor ) ;
opacity : 1 ;
}
. paginationjs-pages ul li . disabled a {
opacity : 0 . 5 ;
cursor : not-allowed ;
}
. paginationjs-nav {
2024-03-30 12:46:46 +01:00
padding : 2px ;
2023-08-18 22:13:15 +02:00
font-size : calc ( var ( --mainFontSize ) * . 8 ) ;
font-weight : bold ;
2024-03-30 12:46:46 +01:00
width : auto ;
2023-08-18 22:13:15 +02:00
}
2023-08-19 05:48:08 +02:00
2023-08-29 17:04:10 +02:00
. onboarding {
display : flex ;
flex-direction : column ;
gap : 10px ;
text-align : left ;
2024-08-02 22:31:18 +02:00
height : 100 % ;
2023-08-29 17:04:10 +02:00
}
2024-05-12 15:43:09 +02:00
. onboarding span . menu_button {
display : inline-flex ;
}
2023-08-31 15:58:28 +02:00
. onboarding > h3 {
2023-08-29 17:04:10 +02:00
align-self : center ;
}
2023-09-11 00:07:45 +02:00
# show_more_messages {
text-align : center ;
2023-11-19 20:57:54 +01:00
margin : 10px auto ;
2023-09-11 00:07:45 +02:00
font-weight : 500 ;
order : -1 ;
cursor : pointer ;
2023-11-19 20:57:54 +01:00
padding : 0 . 5em 1em ;
background-color : var ( --SmartThemeBlurTintColor ) ;
width : fit-content ;
border-radius : 10px ;
outline : 1px solid var ( --SmartThemeBorderColor ) ;
2023-09-11 00:07:45 +02:00
}
2023-08-30 06:11:20 +02:00
. draggable img {
width : 100 % ;
height : 100 % ;
object-fit : cover ;
2023-08-31 16:10:01 +02:00
}
2023-08-31 04:54:34 +02:00
/* Jank mobile support for gallery and future draggables */
@ media screen and ( max-width : 1000px ) {
# gallery {
display : block ;
width : 100vw ;
height : 100vh ;
z-index : 9999 ;
}
2023-09-05 16:43:19 +02:00
2023-08-31 04:54:34 +02:00
. draggable {
display : block ;
width : 100vw ;
height : 100vh ;
2023-09-05 16:43:19 +02:00
z-index : 9999 ;
2023-08-31 04:54:34 +02:00
}
2024-05-09 03:31:41 +02:00
}
/* CSS styles using a consistent pastel color palette */
2024-05-20 05:18:30 +02:00
. regex-brackets {
color : # FFB347 ;
}
/* Pastel Orange */
. regex-special {
color : # B0E0E6 ;
}
/* Powder Blue */
. regex-quantifier {
color : # DDA0DD ;
}
/* Plum */
. regex-operator {
color : # FFB6C1 ;
}
/* Light Pink */
. regex-flags {
color : # 98FB98 ;
}
/* Pale Green */
. regex-delimiter {
font-weight : bold ;
color : # FF6961 ;
}
/* Pastel Red */
. regex-highlight {
color : # FAF8F6 ;
}
2024-07-09 19:28:06 +02:00
2024-07-19 00:28:24 +02:00
. popup : has ( . faPicker ) {
2024-07-17 20:47:42 +02:00
/* Fix height for fa picker popup, otherwise search is making it resize weirdly */
height : 70 % ;
2024-08-05 17:39:17 +02:00
2024-07-19 00:28:24 +02:00
. popup-content {
display : flex ;
flex-direction : column ;
}
}
. faPicker-container {
display : flex ;
flex-direction : column ;
2024-08-05 17:39:17 +02:00
overflow : hidden ;
;
2024-07-19 00:28:24 +02:00
}
. faQuery-container {
flex : 0 0 auto ;
2024-07-17 20:47:42 +02:00
}
2024-07-09 19:28:06 +02:00
. faPicker {
2024-07-19 00:28:24 +02:00
flex : 1 1 auto ;
overflow : auto ;
2024-08-05 17:39:17 +02:00
gap : 1em ;
2024-07-19 00:28:24 +02:00
display : grid ;
grid-template-columns : repeat ( auto-fill , minmax ( 3 . 5em , 1fr ) ) ;
2024-07-09 19:28:06 +02:00
2024-08-05 17:39:17 +02:00
. menu_button {
aspect-ratio : 1 / 1 ;
font-size : 2em ;
height : 1lh ;
line-height : 1 . 2 ;
padding : 0 . 25em ;
width : unset ;
box-sizing : content-box ;
2024-07-16 00:16:51 +02:00
& . hidden {
display : none ;
}
2024-08-05 17:39:17 +02:00
}
2024-07-09 19:28:06 +02:00
}
2024-07-17 20:47:42 +02:00
. faPicker : not ( : has ( : not ( . hidden ) ) ) :: after {
content : 'No icons found' ;
color : var ( --SmartThemeBodyColor ) ;
opacity : 0 . 7 ;
2024-09-01 15:00:32 +02:00
}
2024-09-01 18:42:08 +02:00
# advanced-formatting-button div [ contenteditable ] {
2024-09-01 15:00:32 +02:00
overflow-wrap : anywhere ;
2024-09-03 20:29:50 +02:00
max-height : 50vh ;
max-height : 50dvh ;
resize : vertical ;
overflow : auto ;
2024-09-04 12:46:54 +02:00
min-height : 1 . 8em ;
2024-09-04 01:43:35 +02:00
}