styles.css 82 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898
  1. :root {
  2. --toolbar-horizontal-offset: 0px;
  3. --toolbar-vertical-offset: 0px;
  4. --editing-toolbar-background-color: rgba(var(--background-secondary-rgb), 0.7);
  5. --editing-toolbar-icon-color: var(--text-normal);
  6. --toolbar-icon-size: 18px;
  7. }
  8. #editingToolbarModalBar {
  9. width: auto;
  10. height: auto;
  11. /* padding: 3px; */
  12. display: grid;
  13. user-select: none;
  14. border-radius: var(--radius-m);
  15. position: absolute;
  16. transition: 100ms cubic-bezier(0.92, -0.53, 0.65, 1.21);
  17. -webkit-transition: 100ms cubic-bezier(0.92, -0.53, 0.65, 1.21);
  18. min-width: fit-content;
  19. justify-content: space-around;
  20. z-index: var(--layer-modal);
  21. transform: translate(var(--toolbar-horizontal-offset), var(--toolbar-vertical-offset));
  22. }
  23. #editingToolbarModalBar[data-toolbar-style="following"] {
  24. transition: none !important;
  25. -webkit-transition: none !important;
  26. }
  27. #editingToolbarModalBar.editingToolbarCustomAesthetic,
  28. :is(#editingToolbarModalBar, #editingToolbarPopoverBar).editingToolbarCustomAesthetic button[class^=editingToolbarCommandsubItem]>.subitem,
  29. #editingToolbarPopoverBar.editingToolbarCustomAesthetic {
  30. background-color: var(--editing-toolbar-background-color);
  31. gap: calc(var(--toolbar-icon-size) / 15) !important;
  32. }
  33. :is(#editingToolbarModalBar, #editingToolbarPopoverBar).editingToolbarCustomAesthetic button[class^=editingToolbarCommandsubItem]>.subitem::before {
  34. content: '';
  35. position: absolute;
  36. inset: 0;
  37. z-index: -1;
  38. backdrop-filter: blur(12px);
  39. -webkit-backdrop-filter: blur(12px); /* Safari 兼容 */
  40. border-radius: inherit; /* 继承父元素圆角 */
  41. }
  42. #editingToolbarModalBar.editingToolbarCustomAesthetic
  43. {
  44. padding:calc(var(--toolbar-icon-size) / 4);
  45. }
  46. :is(#editingToolbarModalBar, #editingToolbarPopoverBar).editingToolbarCustomAesthetic :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]):not(.editingToolbar-Divider-Line) {
  47. height: var(--toolbar-icon-size) + 8px;
  48. }
  49. /* 应用到工具栏图标 */
  50. :is(#editingToolbarModalBar, #editingToolbarPopoverBar).editingToolbarCustomAesthetic .editingToolbarCommandItem svg,
  51. :is(#editingToolbarModalBar, #editingToolbarPopoverBar).editingToolbarCustomAesthetic button[class^=editingToolbarCommandsubItem] svg,
  52. :is(#editingToolbarModalBar, #editingToolbarPopoverBar).editingToolbarCustomAesthetic button[class^=editingToolbarCommandsubItem]>.subitem svg
  53. {
  54. color: var(--editing-toolbar-icon-color);
  55. width: var(--toolbar-icon-size);
  56. height: var(--toolbar-icon-size);
  57. max-width: var(--toolbar-icon-size);
  58. max-height: var(--toolbar-icon-size);
  59. }
  60. #editingToolbarModalBar.fixed{
  61. display: grid;
  62. grid-template-columns: repeat(12, calc(var(--toolbar-icon-size) + 10px));
  63. }
  64. #editingToolbarModalBar.editingToolbarFlex {
  65. display: flex;
  66. transform:none;
  67. }
  68. #editingToolbarModalBar.editingToolbarFlex :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]) {
  69. min-width: 20px;
  70. }
  71. #editingToolbarModalBar .editingToolbarCommandItem.editingToolbarCommandItem {
  72. margin: 2px;
  73. border: none;
  74. display: flex;
  75. cursor: default;
  76. padding: 5px 6px;
  77. box-shadow: none;
  78. margin-left: 3px;
  79. margin-right: 3px;
  80. position: relative;
  81. border-radius: var(--radius-s);
  82. font-size: initial !important;
  83. background-color: var(--background-primary-alt);
  84. height: auto;
  85. }
  86. .editing-toolbar-content .editingToolbarCommandItem.editingToolbarCommandItem
  87. {
  88. flex-wrap: wrap;
  89. }
  90. .editing-toolbar-content .setting-item
  91. {
  92. padding-left:1em;
  93. padding-right:1em;
  94. }
  95. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]>.subitem button:hover,
  96. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommand]:hover,
  97. #editingToolbarSecond:hover {
  98. background-color: var(--background-modifier-hover);
  99. }
  100. /* 下拉菜单按钮样式 */
  101. /* 设置界面中的菜单类型选择器样式 */
  102. .editingToolbarMenuTypeDropdown {
  103. min-width: 120px;
  104. margin-left: 8px;
  105. padding: 4px 8px;
  106. border-radius: var(--radius-s);
  107. background-color: var(--background-primary-alt);
  108. border: 1px solid var(--background-modifier-border);
  109. color: var(--text-normal);
  110. cursor: pointer;
  111. }
  112. .editingToolbarMenuTypeDropdown:hover {
  113. background-color: var(--background-modifier-hover);
  114. }
  115. .editingToolbarMenuTypeDropdown:focus {
  116. border-color: var(--interactive-accent);
  117. outline: none;
  118. }
  119. /* #editingToolbarModalBar button.editingToolbarCommandItem svg {
  120. width: 1.3em;
  121. height: 1.3em;
  122. } */
  123. /*----------------------------------------------------------------
  124. editingToolbar SETTINGS BUTTONS
  125. ----------------------------------------------------------------*/
  126. button.editingToolbarSettingsButton {
  127. padding: 4px 14px;
  128. border-radius: var(--radius-m);
  129. }
  130. /*----------------------------------------------------------------
  131. editingToolbar SETTING ITEMS
  132. ----------------------------------------------------------------*/
  133. .setting-item.editingToolbarCommandItem:first-child {
  134. padding-top: 12px;
  135. }
  136. .editingToolbarCommandItem {
  137. cursor: grab;
  138. padding: 10px 0 10px 0;
  139. }
  140. .editingToolbarSettingsTabsContainer .sortable-fallback {
  141. cursor: grabbing;
  142. box-shadow: 0px 3px 32px rgb(31 38 135 / 15%);
  143. }
  144. .editingToolbarSettingsTabsContainer .sortable-grab {
  145. cursor: grabbing !important;
  146. }
  147. .editingToolbarSettingsTabsContainer .sortable-ghost {
  148. opacity: 0.4;
  149. cursor: grabbing;
  150. }
  151. .editingToolbarSettingsTabsContainer .sortable-chosen {
  152. cursor: grabbing;
  153. padding: 10px 0 10px 10px;
  154. background-color: var(--color-base-10, --background-primary);
  155. }
  156. .editingToolbarSettingsTabsContainer .sortable-drag {
  157. cursor: grabbing;
  158. box-shadow: 0px 3px 32px rgb(31 38 135 / 15%);
  159. }
  160. .editingToolbarSettingsTabsContainer {
  161. border-top: 1px solid var(--background-modifier-border);
  162. border-bottom: 1px solid var(--background-modifier-border);
  163. }
  164. .editing-toolbar-native-command-list {
  165. container-type: inline-size;
  166. }
  167. .editing-toolbar-command-page-navigation {
  168. display: none;
  169. }
  170. .editing-toolbar-native-command-list .setting-item.editingToolbarCommandItem {
  171. position: relative;
  172. display: grid;
  173. grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  174. align-items: center;
  175. gap: 8px;
  176. min-width: 0;
  177. padding: 8px 12px;
  178. }
  179. .editingToolbarSettingsTabsContainer.editing-toolbar-native-command-list
  180. .editingToolbarCommandItem > .setting-item-info {
  181. min-width: 0;
  182. flex: none;
  183. }
  184. .editing-toolbar-native-command-list .editingToolbarCommandItem > .setting-item-info .setting-item-name {
  185. overflow-wrap: anywhere;
  186. }
  187. .editingToolbarSettingsTabsContainer.editing-toolbar-native-command-list
  188. .editingToolbarCommandItem > .setting-item-control {
  189. display: flex;
  190. flex: none;
  191. flex-wrap: wrap;
  192. justify-content: flex-end;
  193. gap: 4px;
  194. min-width: 0;
  195. }
  196. .editing-toolbar-native-command-list .setting-item-control > * {
  197. margin-inline-start: 0;
  198. }
  199. .editing-toolbar-native-command-list .setting-item button.editingToolbarSettingsIcon,
  200. .editing-toolbar-native-command-list .setting-item button.editingToolbarSettingsButton {
  201. width: 30px;
  202. min-width: 30px;
  203. height: 30px;
  204. padding: 4px;
  205. transform: none;
  206. -webkit-transform: none;
  207. }
  208. .editing-toolbar-native-command-list
  209. .editingToolbarCommandItem > .setting-item-control > button {
  210. flex: 0 0 30px;
  211. width: 30px;
  212. min-width: 30px;
  213. height: 30px;
  214. padding: 4px;
  215. }
  216. .editing-toolbar-native-command-list .editingToolbarMenuTypeDropdown {
  217. max-width: 132px;
  218. height: 30px;
  219. }
  220. .editingToolbarSettingsTabsContainer.editing-toolbar-native-command-list
  221. .editingToolbarSettingsTabsContainer_sub {
  222. grid-column: 1 / -1;
  223. width: calc(100% - 16px);
  224. min-width: 0;
  225. margin: 6px 0 0 16px;
  226. padding: 0 0 0 8px;
  227. flex: none;
  228. }
  229. .editing-toolbar-native-command-list
  230. .editingToolbarSettingsTabsContainer_sub
  231. .setting-item.editingToolbarCommandItem {
  232. width: 100%;
  233. margin-left: 0;
  234. }
  235. .editing-toolbar-native-command-list .editingToolbarCommandItem.is-command-dragging {
  236. opacity: 0.45;
  237. cursor: grabbing;
  238. }
  239. .editing-toolbar-native-command-list .editingToolbarCommandItem.is-command-drop-before {
  240. box-shadow: inset 0 2px 0 var(--interactive-accent);
  241. }
  242. .editing-toolbar-native-command-list .editingToolbarCommandItem.is-command-drop-after {
  243. box-shadow: inset 0 -2px 0 var(--interactive-accent);
  244. }
  245. .editing-toolbar-native-command-list
  246. .editing-toolbar-command-drop-list.is-command-drop-inside,
  247. .editing-toolbar-native-command-list .editingToolbarSettingsTabsContainer_sub.is-command-drop-inside {
  248. background: rgba(var(--interactive-accent-rgb), 0.08);
  249. outline: 1px dashed var(--interactive-accent);
  250. outline-offset: -1px;
  251. }
  252. @container (max-width: 420px) {
  253. .editing-toolbar-native-command-list .setting-item.editingToolbarCommandItem {
  254. grid-template-columns: minmax(0, 1fr) minmax(168px, 52%);
  255. }
  256. .editing-toolbar-native-command-list
  257. .editingToolbarCommandItem > .setting-item-control {
  258. grid-column: 2;
  259. justify-content: flex-end;
  260. align-content: center;
  261. }
  262. .editing-toolbar-native-command-list .editingToolbarMenuTypeDropdown {
  263. max-width: 110px;
  264. }
  265. }
  266. .commandSetting-container {
  267. margin: 0;
  268. padding: 0;
  269. }
  270. .commandSetting-container > .setting-item {
  271. margin: 0;
  272. padding: 8px 0;
  273. }
  274. .commandSetting-container .command-lists-container {
  275. margin-top: 8px;
  276. padding: 0;
  277. border-radius: 0;
  278. }
  279. .commandSetting-container .command-buttons-container {
  280. margin: 4px 0 8px;
  281. padding: 8px 10px;
  282. }
  283. .commandSetting-container .command-buttons-container .setting-item {
  284. padding: 4px 0;
  285. }
  286. /*----------------------------------------------------------------
  287. editingToolbar CLASS CHANGES
  288. ----------------------------------------------------------------*/
  289. #editingToolbarModalBar.editingToolbarDefaultAesthetic {
  290. border: 1px solid var(--background-modifier-border);
  291. }
  292. #editingToolbarModalBar.editingToolbarDefaultAesthetic:not(.top) :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]) {
  293. min-height: 28px;
  294. }
  295. #editingToolbarModalBar.editingToolbarDefaultAesthetic:not(.top) button[class^=editingToolbarCommandsubItem] {
  296. margin: auto;
  297. padding: 6px;
  298. box-shadow: none;
  299. border: none;
  300. background-color: transparent;
  301. place-items: center;
  302. }
  303. .editingToolbarDefaultAesthetic {
  304. background-color: var(--color-base-10, --background-primary);
  305. }
  306. :is(#editingToolbarModalBar, #editingToolbarPopoverBar).editingToolbarGlassAesthetic {
  307. backdrop-filter: var(--raised-blur, blur(6px));
  308. -webkit-backdrop-filter: var(--raised-blur, blur(6px));
  309. box-shadow: var(--raised-shadow, none);
  310. background-clip: padding-box;
  311. border: var(--raised-mask-border-width, 1px) solid transparent;
  312. background-color: var(--raised-background, color-mix(in srgb, var(--background-secondary) 60%, transparent));
  313. }
  314. .is-phone:not(.is-floating-nav) :is(#editingToolbarModalBar, #editingToolbarPopoverBar).editingToolbarGlassAesthetic {
  315. --raised-background: transparent;
  316. }
  317. :is(#editingToolbarModalBar, #editingToolbarPopoverBar).editingToolbarGlassAesthetic :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]) {
  318. background-color: transparent;
  319. box-shadow: none;
  320. }
  321. #editingToolbarModalBar.editingToolbarGlassAesthetic:not(.top) button[class^=editingToolbarCommandsubItem] {
  322. margin: auto;
  323. padding: 4px 4px;
  324. box-shadow: none;
  325. border: none;
  326. display: flex;
  327. border-radius: var(--radius-s);
  328. font-size: 10px;
  329. margin-right: 0px;
  330. position: relative;
  331. background-color: transparent;
  332. place-items: center;
  333. clear: both;
  334. height: 28px;
  335. }
  336. /*----------------------------------------------------------------
  337. editingToolbar ICONS
  338. ----------------------------------------------------------------*/
  339. .editingToolbarIconPick {
  340. line-height: normal;
  341. vertical-align: middle;
  342. margin-right: 8px;
  343. }
  344. .editingToolbarIconPick svg {
  345. width: 18px;
  346. height: 18px;
  347. }
  348. /*----------------------------------------------------------------
  349. editingToolbar SUPPORT
  350. ---------------------------------------------`-------------------*/
  351. #editingToolbarModalBar {
  352. align-items: center;
  353. justify-items: center;
  354. border: none;
  355. backdrop-filter: none;
  356. }
  357. #editingToolbarModalBar.editingToolbarGlassAesthetic [class^=editingToolbarCommandsubItem] {
  358. background-color: #ffffff00;
  359. }
  360. #editingToolbarModalBar .editingToolbarCommandItem {
  361. justify-content: center;
  362. align-content: center;
  363. place-items: center;
  364. }
  365. /* #editingToolbarModalBar.editingToolbarTinyAesthetic .editingToolbarCommandItem svg{
  366. width: 1em;
  367. height: 1em;
  368. } */
  369. div.modal-container.editingToolbar-Modal:not(:is(.changename,.customicon)) .modal-bg {
  370. background-color: transparent;
  371. backdrop-filter: none;
  372. position: relative;
  373. }
  374. .modal-container.editingToolbar-Modal:not(:is(.changename,.customicon)) .modal {
  375. padding: 10px 20px;
  376. width: 220px;
  377. position: absolute;
  378. bottom: 2em;
  379. right: 0.5em;
  380. background-color: rgb(var(--mono-rgb-0), 0.65);
  381. backdrop-filter: blur(2px);
  382. }
  383. .modal-container.editingToolbar-Modal .modal-title {
  384. display: none;
  385. }
  386. .modal-container.editingToolbar-Modal .modal input[type='range'] {
  387. width: 90%;
  388. }
  389. body.theme-dark .modal-container.editingToolbar-Modal .modal input[type='range'] {
  390. background-color: var(--background-secondary);
  391. }
  392. /*tiny 样式*/
  393. #editingToolbarModalBar.editingToolbarTinyAesthetic {
  394. align-items: center;
  395. justify-items: center;
  396. border: 1px solid var(--background-modifier-border-hover);
  397. backdrop-filter: none;
  398. background-color: var(--background-secondary);
  399. }
  400. #editingToolbarModalBar.editingToolbarTinyAesthetic .editingToolbarCommandItem {
  401. margin: auto;
  402. padding: 0px;
  403. box-shadow: none;
  404. margin-left: 0px;
  405. margin-right: 0px;
  406. position: relative;
  407. background-color: transparent;
  408. }
  409. #editingToolbarModalBar .editingToolbarCommandItem {
  410. margin: auto;
  411. padding: 0px;
  412. box-shadow: none;
  413. margin-left: 4px;
  414. margin-right: 0px;
  415. position: relative;
  416. background-color: transparent;
  417. }
  418. :is(#editingToolbarModalBar).editingToolbarTinyAesthetic:not(.top) button[class^=editingToolbarCommandsubItem] {
  419. margin: auto;
  420. padding: 4px 4px;
  421. box-shadow: none;
  422. border: none;
  423. display: flex;
  424. border-radius: var(--radius-s);
  425. font-size: 10px;
  426. margin-right: 0px;
  427. position: relative;
  428. background-color: transparent;
  429. place-items: center;
  430. clear: both;
  431. max-width: 28px;
  432. max-height: 28px;
  433. }
  434. button[class^=editingToolbarCommandsubItem]::after {
  435. content: url("data:image/svg+xml,%3Csvg width='4' height='4' version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' enable-background='new 0 0 1024 1024' xml:space='preserve'%3E%3Cpath fill='%23666' d='M13.24 80.11 l461.75 560.8 q14.56 16.02 36.41 16.02 q21.85 0 36.42 -16.02 l463.2 -560.8 q10.2 -10.19 12.38 -24.75 q2.18 -14.57 -3.64 -27.68 q-5.82 -13.11 -18.21 -20.39 q-12.39 -7.29 -26.95 -7.29 l-924.95 0 q-20.4 0 -34.23 13.11 q-13.84 13.11 -15.29 32.77 q-1.46 19.66 13.11 34.23 Z'/%3E%3C/svg%3E");
  436. margin-left: 1px;
  437. margin-top: 6px;
  438. }
  439. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]>.subitem {
  440. border-radius: var(--radius-m);
  441. position: absolute;
  442. user-select: none;
  443. transform: translateY(105%) translateX(0%);
  444. -webkit-transform: translateY(105%) translateX(0%);
  445. display: flex;
  446. box-shadow: none;
  447. border: 1px solid var(--background-modifier-border-hover);
  448. background-color: var(--background-secondary);
  449. z-index:1;
  450. visibility: hidden;
  451. transition: all 0.15s linear;
  452. -webkit-transition: all 0.15s linear;
  453. }
  454. /* color-mix(in srgb, var(--background-secondary) 60%, transparent); */
  455. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem] >.subitem:hover {
  456. visibility:visible;
  457. transition: all 0.3s linear;
  458. -webkit-transition: all 0.3s linear;
  459. }
  460. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]:first-child>.subitem
  461. {
  462. left: 0;
  463. }
  464. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]:nth-child(2)>.subitem
  465. {
  466. left: 0;
  467. }
  468. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]:nth-last-child(1)>.subitem
  469. {
  470. right: 0;
  471. }
  472. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]:nth-last-child(2)>.subitem
  473. {
  474. right: 0;
  475. }
  476. @media screen and (max-width: 768px) {
  477. :is(#editingToolbarModalBar, #editingToolbarPopoverBar):not(:is(.top,.editingToolbarFlex)) button[class^=editingToolbarCommandsubItem]>.subitem {
  478. left: 58%;
  479. transform: translate(-60%, 90%);
  480. }
  481. }
  482. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]>.subitem svg {
  483. max-width: 1.3em;
  484. max-height: 1.3em;
  485. }
  486. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]>.subitem button.menu-item:not(.editingToolbar-Divider-Line) {
  487. background-color: transparent;
  488. line-height: 2em;
  489. display: inline-flex;
  490. box-shadow: none;
  491. align-items: center;
  492. }
  493. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]>.subitem .menu-item {
  494. margin-left: 2px;
  495. margin-right: 2px;
  496. padding: 6px 8px;
  497. }
  498. .hide-toolbar :is(#editingToolbarModalBar,#editingToolbarPopoverBar) {
  499. display: none!important;
  500. }
  501. .workspace:has(.markdown-source-view.hide-toolbar) > .workspace-split>#editingToolbarModalBar {
  502. display: none;
  503. }
  504. .workspace:has(.markdown-source-view.hide-toolbar) > .workspace-split>#editingToolbarPopoverBar {
  505. display: none;
  506. }
  507. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-font-color .triangle-icon {
  508. position: absolute;
  509. margin-left: 18px;
  510. bottom: 8%;
  511. background-size: 4px 4px;
  512. background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' enable-background='new 0 0 1024 1024' xml:space='preserve'%3E%3Cpath fill='%23666' d='M13.24 80.11 l461.75 560.8 q14.56 16.02 36.41 16.02 q21.85 0 36.42 -16.02 l463.2 -560.8 q10.2 -10.19 12.38 -24.75 q2.18 -14.57 -3.64 -27.68 q-5.82 -13.11 -18.21 -20.39 q-12.39 -7.29 -26.95 -7.29 l-924.95 0 q-20.4 0 -34.23 13.11 q-13.84 13.11 -15.29 32.77 q-1.46 19.66 13.11 34.23 Z'/%3E%3C/svg%3E");
  513. width: 16px;
  514. height: 20px;
  515. background-position: center;
  516. background-repeat: no-repeat;
  517. min-width: unset;
  518. border-left: 2px solid transparent;
  519. }
  520. :is(#editingToolbarModalBar, #editingToolbarPopoverBar):not(.top) button.editingToolbarCommandsubItem-font-color .triangle-icon {
  521. margin-left: 16px;
  522. }
  523. :is(#editingToolbarModalBar, #editingToolbarPopoverBar):not(:is(.top,.editingToolbarFlex)) button.editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  524. top: auto;
  525. bottom: calc(100% - 2rem);
  526. }
  527. :is(#editingToolbarModalBar, #editingToolbarPopoverBar):not(:is(.top,.editingToolbarFlex)) button[class^=editingToolbarCommandsubItem]:not(.editingToolbarSecond)>.subitem {
  528. bottom: calc(100% + calc(var(--toolbar-icon-size) + 18px));
  529. }
  530. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-font-color .subitem {
  531. visibility: hidden;
  532. transition: all 0.15s linear;
  533. -webkit-transition: all 0.15s linear;
  534. }
  535. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-font-color .subitem:hover {
  536. visibility: visible;
  537. transition: all 0.3s linear;
  538. -webkit-transition: all 0.3s linear;
  539. }
  540. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button[class^=editingToolbarCommandsubItem]:hover>.subitem {
  541. visibility: visible;
  542. transition: all 0.3s linear;
  543. -webkit-transition: all 0.3s linear;
  544. z-index:1;
  545. }
  546. .editingToolbarCommandsubItem-font-color button {
  547. background-color: transparent;
  548. }
  549. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai:not(.editing-toolbar-ai-button-fixed):not(.editing-toolbar-ai-button-inline) {
  550. position: relative;
  551. overflow: visible;
  552. display: inline-flex;
  553. align-items: center;
  554. gap: 4px;
  555. padding-right: 0px;
  556. isolation: isolate;
  557. }
  558. :is(#editingToolbarModalBar[data-toolbar-style="following"], #editingToolbarModalBar.top, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai.editing-toolbar-ai-button-inline .editing-toolbar-ai-button-label {
  559. max-width: 5.2em;
  560. }
  561. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai.editing-toolbar-ai-button-fixed.editingToolbarCommandsubItem-ai {
  562. gap: 2px;
  563. justify-content: center;
  564. padding-left: 4px;
  565. padding-right: 4px;
  566. }
  567. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai::before {
  568. content: "";
  569. position: absolute;
  570. inset: -1px;
  571. border-radius: 12px;
  572. background: rgba(99, 102, 241, 0.08);
  573. opacity: 0;
  574. transition: opacity 0.16s ease;
  575. pointer-events: none;
  576. }
  577. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai:hover::before {
  578. opacity: 1;
  579. }
  580. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai::after {
  581. content: none;
  582. }
  583. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai > svg,
  584. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai svg.svg-icon {
  585. flex-shrink: 0;
  586. position: relative;
  587. z-index: 1;
  588. }
  589. .editing-toolbar-ai-button-main {
  590. display: inline-flex;
  591. align-items: center;
  592. min-width: 0;
  593. position: relative;
  594. z-index: 1;
  595. }
  596. .editing-toolbar-ai-button-label {
  597. display: inline-block;
  598. max-width: 6em;
  599. overflow: hidden;
  600. text-overflow: ellipsis;
  601. white-space: nowrap;
  602. font-size: 12px;
  603. font-weight: 600;
  604. line-height: 1.2;
  605. color: var(--text-accent);
  606. }
  607. .editing-toolbar-ai-button-arrow {
  608. display: inline-flex;
  609. align-items: center;
  610. justify-content: center;
  611. width: 14px;
  612. min-height: 16px;
  613. margin-left: 1px;
  614. padding-left: 4px;
  615. border-left: 1px solid var(--background-modifier-border-hover);
  616. color: var(--text-muted);
  617. font-size: 9px;
  618. line-height: 1;
  619. flex-shrink: 0;
  620. position: relative;
  621. z-index: 1;
  622. }
  623. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai.editing-toolbar-ai-button-fixed .editing-toolbar-ai-button-arrow {
  624. width: 10px;
  625. min-height: 14px;
  626. margin-left: 0;
  627. padding-left: 2px;
  628. border-left: none;
  629. }
  630. @media screen and (max-width: 768px) {
  631. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai.editing-toolbar-ai-button-inline.editingToolbarCommandsubItem-ai {
  632. gap: 2px;
  633. justify-content: center;
  634. padding-left: 4px;
  635. padding-right: 4px;
  636. }
  637. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai.editing-toolbar-ai-button-inline .editing-toolbar-ai-button-label {
  638. display: none;
  639. }
  640. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai.editing-toolbar-ai-button-inline .editing-toolbar-ai-button-arrow {
  641. width: 10px;
  642. min-height: 14px;
  643. margin-left: 0;
  644. padding-left: 2px;
  645. border-left: none;
  646. }
  647. }
  648. .workspace-leaf-content:has(.cm-ai-loading, .cm-ai-result-panel[data-phase="streaming"])
  649. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai,
  650. body[data-editing-toolbar-ai-busy="true"]
  651. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai,
  652. body:has(.workspace-leaf.mod-active .cm-ai-loading, .workspace-leaf.mod-active .cm-ai-result-panel[data-phase="streaming"])
  653. :is(#editingToolbarModalBar[data-toolbar-style="fixed"], #editingToolbarModalBar[data-toolbar-style="mobile"], #editingToolbarPopoverBar[data-toolbar-style="fixed"], #editingToolbarPopoverBar[data-toolbar-style="mobile"]) button.editingToolbarCommandsubItem-ai {
  654. opacity: 0.82;
  655. pointer-events: none;
  656. overflow: hidden;
  657. }
  658. .workspace-leaf-content:has(.cm-ai-loading, .cm-ai-result-panel[data-phase="streaming"])
  659. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai::before,
  660. body[data-editing-toolbar-ai-busy="true"]
  661. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai::before,
  662. body:has(.workspace-leaf.mod-active .cm-ai-loading, .workspace-leaf.mod-active .cm-ai-result-panel[data-phase="streaming"])
  663. :is(#editingToolbarModalBar[data-toolbar-style="fixed"], #editingToolbarModalBar[data-toolbar-style="mobile"], #editingToolbarPopoverBar[data-toolbar-style="fixed"], #editingToolbarPopoverBar[data-toolbar-style="mobile"]) button.editingToolbarCommandsubItem-ai::before {
  664. opacity: 1;
  665. background: linear-gradient(135deg, color-mix(in srgb, var(--interactive-accent) 14%, transparent), color-mix(in srgb, var(--background-secondary) 90%, transparent));
  666. box-shadow: 0 0 0 1px color-mix(in srgb, var(--interactive-accent) 14%, transparent), 0 8px 22px color-mix(in srgb, var(--interactive-accent) 10%, transparent), inset 0 1px 0 color-mix(in srgb, white 16%, transparent);
  667. animation: cm-ai-toolbar-glow 2.1s ease-in-out infinite;
  668. }
  669. .workspace-leaf-content:has(.cm-ai-loading, .cm-ai-result-panel[data-phase="streaming"])
  670. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai::after,
  671. body[data-editing-toolbar-ai-busy="true"]
  672. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai::after,
  673. body:has(.workspace-leaf.mod-active .cm-ai-loading, .workspace-leaf.mod-active .cm-ai-result-panel[data-phase="streaming"])
  674. :is(#editingToolbarModalBar[data-toolbar-style="fixed"], #editingToolbarModalBar[data-toolbar-style="mobile"], #editingToolbarPopoverBar[data-toolbar-style="fixed"], #editingToolbarPopoverBar[data-toolbar-style="mobile"]) button.editingToolbarCommandsubItem-ai::after {
  675. content: "";
  676. position: absolute;
  677. inset: -1px;
  678. border-radius: 12px;
  679. background: linear-gradient(115deg, transparent 0%, transparent 34%, color-mix(in srgb, white 68%, transparent) 48%, transparent 62%, transparent 100%);
  680. transform: translateX(-150%) skewX(-24deg);
  681. opacity: 0;
  682. animation: cm-ai-sheen 2.8s ease-in-out infinite;
  683. pointer-events: none;
  684. mix-blend-mode: screen;
  685. }
  686. .workspace-leaf-content:has(.cm-ai-loading, .cm-ai-result-panel[data-phase="streaming"])
  687. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai > svg,
  688. .workspace-leaf-content:has(.cm-ai-loading, .cm-ai-result-panel[data-phase="streaming"])
  689. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai svg.svg-icon,
  690. body[data-editing-toolbar-ai-busy="true"]
  691. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai > svg,
  692. body[data-editing-toolbar-ai-busy="true"]
  693. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai svg.svg-icon,
  694. body:has(.workspace-leaf.mod-active .cm-ai-loading, .workspace-leaf.mod-active .cm-ai-result-panel[data-phase="streaming"])
  695. :is(#editingToolbarModalBar[data-toolbar-style="fixed"], #editingToolbarModalBar[data-toolbar-style="mobile"], #editingToolbarPopoverBar[data-toolbar-style="fixed"], #editingToolbarPopoverBar[data-toolbar-style="mobile"]) button.editingToolbarCommandsubItem-ai > svg,
  696. body:has(.workspace-leaf.mod-active .cm-ai-loading, .workspace-leaf.mod-active .cm-ai-result-panel[data-phase="streaming"])
  697. :is(#editingToolbarModalBar[data-toolbar-style="fixed"], #editingToolbarModalBar[data-toolbar-style="mobile"], #editingToolbarPopoverBar[data-toolbar-style="fixed"], #editingToolbarPopoverBar[data-toolbar-style="mobile"]) button.editingToolbarCommandsubItem-ai svg.svg-icon {
  698. animation: cm-ai-toolbar-breathe 1.8s ease-in-out infinite;
  699. filter: drop-shadow(0 0 8px color-mix(in srgb, var(--interactive-accent) 26%, transparent));
  700. }
  701. .workspace-leaf-content:has(.cm-ai-loading, .cm-ai-result-panel[data-phase="streaming"])
  702. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai .editing-toolbar-ai-button-label,
  703. .workspace-leaf-content:has(.cm-ai-loading, .cm-ai-result-panel[data-phase="streaming"])
  704. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai .editing-toolbar-ai-button-arrow,
  705. body[data-editing-toolbar-ai-busy="true"]
  706. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai .editing-toolbar-ai-button-label,
  707. body[data-editing-toolbar-ai-busy="true"]
  708. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbarCommandsubItem-ai .editing-toolbar-ai-button-arrow,
  709. body:has(.workspace-leaf.mod-active .cm-ai-loading, .workspace-leaf.mod-active .cm-ai-result-panel[data-phase="streaming"])
  710. :is(#editingToolbarModalBar[data-toolbar-style="fixed"], #editingToolbarModalBar[data-toolbar-style="mobile"], #editingToolbarPopoverBar[data-toolbar-style="fixed"], #editingToolbarPopoverBar[data-toolbar-style="mobile"]) button.editingToolbarCommandsubItem-ai .editing-toolbar-ai-button-label,
  711. body:has(.workspace-leaf.mod-active .cm-ai-loading, .workspace-leaf.mod-active .cm-ai-result-panel[data-phase="streaming"])
  712. :is(#editingToolbarModalBar[data-toolbar-style="fixed"], #editingToolbarModalBar[data-toolbar-style="mobile"], #editingToolbarPopoverBar[data-toolbar-style="fixed"], #editingToolbarPopoverBar[data-toolbar-style="mobile"]) button.editingToolbarCommandsubItem-ai .editing-toolbar-ai-button-arrow {
  713. color: var(--text-muted);
  714. animation: cm-ai-label-breathe 1.8s ease-in-out infinite;
  715. }
  716. .menu.editing-toolbar-ai-dropdown-menu .menu-item.is-disabled {
  717. opacity: 0.72;
  718. }
  719. .editing-toolbar-ai-inline-prompt {
  720. position: fixed;
  721. z-index: 1001;
  722. width: min(420px, calc(100vw - 24px));
  723. max-width: 90vw;
  724. padding: 8px;
  725. border: 1px solid var(--background-modifier-border);
  726. border-radius: 12px;
  727. background: var(--background-primary);
  728. box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  729. backdrop-filter: blur(8px);
  730. overflow: hidden;
  731. }
  732. .editing-toolbar-ai-inline-prompt button {
  733. padding: unset!important;
  734. box-shadow: none!important;
  735. }
  736. @media (max-width: 768px) {
  737. .editing-toolbar-ai-inline-prompt {
  738. width: calc(100vw - 16px);
  739. max-width: calc(100vw - 16px);
  740. }
  741. }
  742. @media (max-width: 480px) {
  743. .editing-toolbar-ai-inline-prompt {
  744. width: calc(100vw - 8px);
  745. max-width: calc(100vw - 8px);
  746. border-radius: 8px;
  747. }
  748. }
  749. @media (max-width: 768px) {
  750. .editing-toolbar-ai-inline-prompt-header {
  751. padding: 10px 12px;
  752. min-height: 44px;
  753. }
  754. }
  755. .editing-toolbar-ai-inline-prompt-drag-handle {
  756. width: 4px;
  757. height: 20px;
  758. background: linear-gradient(
  759. to right,
  760. var(--background-modifier-border) 0%,
  761. var(--background-modifier-border) 33%,
  762. transparent 33%,
  763. transparent 66%,
  764. var(--background-modifier-border) 66%,
  765. var(--background-modifier-border) 100%
  766. );
  767. cursor: grab;
  768. flex-shrink: 0;
  769. }
  770. @media (max-width: 768px) {
  771. .editing-toolbar-ai-inline-prompt-drag-handle {
  772. width: 6px;
  773. height: 24px;
  774. }
  775. }
  776. .editing-toolbar-ai-inline-prompt-drag-handle:active {
  777. cursor: grabbing;
  778. }
  779. .editing-toolbar-ai-inline-prompt-title {
  780. flex: 1;
  781. font-size: 12px;
  782. font-weight: 600;
  783. color: var(--text-normal);
  784. cursor: grab;
  785. white-space: nowrap;
  786. overflow: hidden;
  787. text-overflow: ellipsis;
  788. }
  789. .editing-toolbar-ai-inline-prompt-title:active {
  790. cursor: grabbing;
  791. }
  792. .editing-toolbar-ai-inline-prompt-header-actions {
  793. display: flex;
  794. align-items: center;
  795. gap: 4px;
  796. flex-shrink: 0;
  797. }
  798. .editing-toolbar-ai-inline-prompt-header {
  799. display: flex;
  800. justify-content: space-between;
  801. gap: 8px;
  802. align-items: center;
  803. user-select: none;
  804. }
  805. .editing-toolbar-ai-inline-prompt-close {
  806. display: inline-flex;
  807. align-items: center;
  808. justify-content: center;
  809. width: 20px;
  810. height: 20px;
  811. padding: 0;
  812. border: none;
  813. border-radius: 6px;
  814. background: transparent;
  815. color: var(--text-muted);
  816. cursor: pointer;
  817. }
  818. .editing-toolbar-ai-inline-prompt-close:hover {
  819. background: var(--background-modifier-hover);
  820. color: var(--text-normal);
  821. }
  822. .editing-toolbar-ai-inline-prompt-settings {
  823. display: inline-flex;
  824. align-items: center;
  825. justify-content: center;
  826. width: 20px;
  827. height: 20px;
  828. padding: 0;
  829. border: none;
  830. border-radius: 6px;
  831. background: transparent;
  832. color: var(--text-muted);
  833. cursor: pointer;
  834. }
  835. .editing-toolbar-ai-inline-prompt-settings:hover {
  836. background: var(--background-modifier-hover);
  837. color: var(--text-normal);
  838. }
  839. .editing-toolbar-ai-inline-prompt-input-wrapper {
  840. position: relative;
  841. margin: 8px;
  842. margin-bottom: 6px;
  843. }
  844. .editing-toolbar-ai-inline-prompt-input {
  845. width: 100%;
  846. min-height: 56px;
  847. max-height: 240px;
  848. resize: none;
  849. padding: 8px 42px 8px 10px;
  850. border: 1px solid var(--background-modifier-border);
  851. border-radius: 8px;
  852. background: var(--background-secondary);
  853. color: var(--text-normal);
  854. font-size: 13px;
  855. line-height: 1.5;
  856. overflow-y: hidden;
  857. transition: height 0.1s ease;
  858. }
  859. @media (max-width: 768px) {
  860. .editing-toolbar-ai-inline-prompt-input {
  861. font-size: 14px;
  862. min-height: 48px;
  863. padding: 10px 32px 10px 12px;
  864. }
  865. }
  866. @media (max-width: 480px) {
  867. .editing-toolbar-ai-inline-prompt-input {
  868. font-size: 16px;
  869. min-height: 44px;
  870. }
  871. }
  872. .editing-toolbar-ai-inline-prompt-input:focus {
  873. outline: none;
  874. border-color: var(--interactive-accent);
  875. box-shadow: 0 0 0 2px color-mix(in srgb, var(--interactive-accent) 15%, transparent);
  876. }
  877. .editing-toolbar-ai-inline-prompt-input::placeholder {
  878. color: var(--text-faint);
  879. }
  880. .editing-toolbar-ai-inline-prompt-history-btn {
  881. position: absolute;
  882. top: 6px;
  883. right: 6px;
  884. width: 22px;
  885. height: 22px;
  886. padding: 0;
  887. border: none;
  888. border-radius: 5px;
  889. background: transparent;
  890. color: var(--text-muted);
  891. cursor: pointer;
  892. display: flex;
  893. align-items: center;
  894. justify-content: center;
  895. transition: all 0.15s ease;
  896. }
  897. .editing-toolbar-ai-inline-prompt-history-btn:hover {
  898. background: var(--background-modifier-hover);
  899. color: var(--text-normal);
  900. }
  901. .editing-toolbar-ai-inline-prompt-history-dropdown {
  902. position: absolute;
  903. top: 32px;
  904. right: 0;
  905. width: 100%;
  906. max-height: 180px;
  907. overflow-y: auto;
  908. border: 1px solid var(--background-modifier-border);
  909. border-radius: 6px;
  910. background: var(--background-primary);
  911. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  912. z-index: 10;
  913. }
  914. .editing-toolbar-ai-inline-prompt-history-item {
  915. padding: 6px 10px;
  916. cursor: pointer;
  917. font-size: 12px;
  918. color: var(--text-normal);
  919. border-bottom: 1px solid var(--background-modifier-border);
  920. white-space: nowrap;
  921. overflow: hidden;
  922. text-overflow: ellipsis;
  923. transition: background 0.1s ease;
  924. }
  925. .editing-toolbar-ai-inline-prompt-history-item:last-child {
  926. border-bottom: none;
  927. }
  928. .editing-toolbar-ai-inline-prompt-history-item:hover {
  929. background: var(--background-modifier-hover);
  930. }
  931. .editing-toolbar-ai-inline-prompt-history-empty {
  932. padding: 10px;
  933. text-align: center;
  934. font-size: 11px;
  935. color: var(--text-faint);
  936. }
  937. .editing-toolbar-ai-inline-prompt-templates {
  938. display: flex;
  939. flex-wrap: wrap;
  940. gap: 4px;
  941. margin-bottom: 6px;
  942. }
  943. .editing-toolbar-ai-inline-prompt-template-btn {
  944. box-shadow: none !important;
  945. padding: 0px 6px;
  946. height: 22px;
  947. border: 1px solid var(--background-modifier-border);
  948. border-radius: 8px;
  949. background: var(--background-secondary);
  950. color: var(--text-muted);
  951. font-size: 10px;
  952. cursor: pointer;
  953. transition: all 0.12s ease;
  954. white-space: nowrap;
  955. }
  956. .editing-toolbar-ai-inline-prompt-template-btn:hover {
  957. background: var(--interactive-accent);
  958. color: var(--text-on-accent);
  959. border-color: var(--interactive-accent);
  960. transform: translateY(-1px);
  961. }
  962. .editing-toolbar-ai-inline-prompt-footer {
  963. display: flex;
  964. justify-content: space-between;
  965. align-items: center;
  966. gap:15px;
  967. }
  968. .editing-toolbar-ai-inline-prompt-send-btn {
  969. position: absolute;
  970. bottom: 6px;
  971. right: 6px;
  972. display: flex;
  973. align-items: center;
  974. justify-content: center;
  975. width: 22px;
  976. height: 22px;
  977. padding: 0;
  978. border: none;
  979. border-radius: 6px;
  980. background: var(--interactive-accent);
  981. color: var(--text-on-accent);
  982. cursor: pointer;
  983. transition: all 0.15s ease;
  984. flex-shrink: 0;
  985. z-index: 1;
  986. }
  987. @media (max-width: 768px) {
  988. .editing-toolbar-ai-inline-prompt-send-btn {
  989. width: 32px;
  990. height: 32px;
  991. }
  992. .editing-toolbar-ai-inline-prompt-send-btn svg {
  993. width: 14px;
  994. height: 14px;
  995. }
  996. }
  997. @media (max-width: 480px) {
  998. .editing-toolbar-ai-inline-prompt-send-btn {
  999. width: 36px;
  1000. height: 36px;
  1001. }
  1002. .editing-toolbar-ai-inline-prompt-send-btn svg {
  1003. width: 16px;
  1004. height: 16px;
  1005. }
  1006. }
  1007. .editing-toolbar-ai-inline-prompt-send-btn:hover:not(:disabled) {
  1008. background: var(--interactive-accent-hover);
  1009. transform: scale(1.08);
  1010. }
  1011. .editing-toolbar-ai-inline-prompt-send-btn:disabled {
  1012. opacity: 0.3;
  1013. cursor: not-allowed;
  1014. background: var(--background-modifier-border);
  1015. }
  1016. .editing-toolbar-ai-inline-prompt-hint {
  1017. font-size: 10px;
  1018. color: var(--text-faint);
  1019. }
  1020. .editing-toolbar-ai-inline-prompt-context {
  1021. margin-bottom: 8px;
  1022. padding: 8px;
  1023. background: var(--background-secondary);
  1024. border-radius: 6px;
  1025. max-height: 120px;
  1026. overflow-y: auto;
  1027. }
  1028. .editing-toolbar-ai-inline-prompt-context-stats {
  1029. display: flex;
  1030. align-items: center;
  1031. gap: 12px;
  1032. padding: 6px 10px;
  1033. margin-bottom: 8px;
  1034. background: var(--background-modifier-border);
  1035. border-radius: 6px;
  1036. font-size: 10px;
  1037. color: var(--text-muted);
  1038. }
  1039. .editing-toolbar-ai-inline-prompt-context-stats-item {
  1040. display: flex;
  1041. align-items: center;
  1042. gap: 4px;
  1043. }
  1044. .editing-toolbar-ai-inline-prompt-context-stats-item svg {
  1045. flex-shrink: 0;
  1046. }
  1047. .editing-toolbar-ai-inline-prompt-context-item {
  1048. display: flex;
  1049. align-items: center;
  1050. gap: 6px;
  1051. padding: 4px 6px;
  1052. margin-bottom: 4px;
  1053. background: var(--background-primary);
  1054. border-radius: 4px;
  1055. font-size: 11px;
  1056. }
  1057. .editing-toolbar-ai-inline-prompt-context-item:last-child {
  1058. margin-bottom: 0;
  1059. }
  1060. .editing-toolbar-ai-inline-prompt-context-label {
  1061. color: var(--text-accent);
  1062. font-weight: 500;
  1063. flex-shrink: 0;
  1064. }
  1065. .editing-toolbar-ai-inline-prompt-context-preview {
  1066. color: var(--text-muted);
  1067. flex: 1;
  1068. overflow: hidden;
  1069. text-overflow: ellipsis;
  1070. white-space: nowrap;
  1071. }
  1072. .editing-toolbar-ai-inline-prompt-context-remove {
  1073. padding: 2px;
  1074. border: none;
  1075. background: transparent;
  1076. color: var(--text-muted);
  1077. cursor: pointer;
  1078. border-radius: 3px;
  1079. display: flex;
  1080. align-items: center;
  1081. justify-content: center;
  1082. flex-shrink: 0;
  1083. box-shadow: none!important;
  1084. }
  1085. .editing-toolbar-ai-inline-prompt-context-remove:hover {
  1086. background: var(--background-modifier-error);
  1087. color: var(--text-error);
  1088. }
  1089. .editing-toolbar-ai-inline-prompt-mention-dropdown {
  1090. bottom: 100%;
  1091. left: 0;
  1092. width: 100%;
  1093. max-height: 200px;
  1094. overflow-y: auto;
  1095. margin-bottom: 4px;
  1096. border: 1px solid var(--background-modifier-border);
  1097. border-radius: 6px;
  1098. background: var(--background-primary);
  1099. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  1100. z-index: 10;
  1101. }
  1102. .editing-toolbar-ai-inline-prompt-mention-item {
  1103. padding: 8px 12px;
  1104. cursor: pointer;
  1105. font-size: 12px;
  1106. color: var(--text-normal);
  1107. border-bottom: 1px solid var(--background-modifier-border);
  1108. transition: background 0.1s ease;
  1109. }
  1110. .editing-toolbar-ai-inline-prompt-mention-item:last-child {
  1111. border-bottom: none;
  1112. }
  1113. .editing-toolbar-ai-inline-prompt-mention-item:hover,
  1114. .editing-toolbar-ai-inline-prompt-mention-item.selected {
  1115. background: var(--background-modifier-hover);
  1116. }
  1117. .editing-toolbar-ai-inline-prompt-mention-icon {
  1118. display: inline-block;
  1119. width: 16px;
  1120. margin-right: 6px;
  1121. color: var(--text-accent);
  1122. }
  1123. .editing-toolbar-ai-inline-prompt-actions {
  1124. display: flex;
  1125. justify-content: flex-end;
  1126. gap: 8px;
  1127. margin-top: 10px;
  1128. }
  1129. .editing-toolbar-ai-inline-prompt-action {
  1130. min-width: 72px;
  1131. padding: 8px 12px;
  1132. border: 1px solid var(--background-modifier-border);
  1133. border-radius: 10px;
  1134. background: var(--background-secondary);
  1135. color: var(--text-normal);
  1136. cursor: pointer;
  1137. }
  1138. .editing-toolbar-ai-inline-prompt-action:hover:not(:disabled) {
  1139. background: var(--background-modifier-hover);
  1140. }
  1141. .editing-toolbar-ai-inline-prompt-action.mod-cta {
  1142. border-color: var(--interactive-accent);
  1143. background: var(--interactive-accent);
  1144. color: var(--text-on-accent, #fff);
  1145. }
  1146. .editing-toolbar-ai-inline-prompt-action:disabled {
  1147. opacity: 0.55;
  1148. cursor: not-allowed;
  1149. }
  1150. .is-mobile .editing-toolbar-ai-inline-prompt-action {
  1151. flex: 1;
  1152. }
  1153. .editingToolbarSettingsTabsContainer .editingToolbarCommandItem .setting-item-info {
  1154. flex: 30%;
  1155. margin: 0;
  1156. }
  1157. .editingToolbarSettingsTabsContainer .editingToolbarSettingsTabsContainer_sub {
  1158. border-left: 1px solid var(--background-modifier-border);
  1159. flex-flow: column;
  1160. min-height: 45px;
  1161. display: flex;
  1162. padding: 0;
  1163. margin-left: 10px;
  1164. flex: 70%;
  1165. }
  1166. .editingToolbarSettingsTabsContainer .editingToolbarSettingsTabsContainer_sub:empty {
  1167. border: 2px dashed rgba(var(--interactive-accent-rgb), 0.5);
  1168. }
  1169. .editingToolbarSettingsTabsContainer .editingToolbarSettingsTabsContainer_sub:empty::before {
  1170. content: "✖️Drag it here";
  1171. margin: auto;
  1172. font-size: 12px;
  1173. }
  1174. .editingToolbarSettingsTabsContainer .editingToolbarSettingsTabsContainer_sub .editingToolbarCommandItem {
  1175. flex: auto;
  1176. margin-left: 2em;
  1177. ;
  1178. }
  1179. .editingToolbarSettingsTabsContainer .editingToolbarSettingsTabsContainer_sub .setting-item-control {
  1180. flex: 0;
  1181. }
  1182. .editingToolbarSettingsTabsContainer .editingToolbarCommandSubItem>.setting-item-info {
  1183. flex: 70px;
  1184. }
  1185. .editingToolbarCommandSubItem>.setting-item-control {
  1186. justify-content: flex-start;
  1187. }
  1188. .modal.mod-settings button:not(.mod-cta):not(.mod-warning).editingToolbarSettingsButton.editingToolbarSettingsButtonaddsub {
  1189. background-color: var(--background-secondary-alt);
  1190. }
  1191. .setting-item button.editingToolbarSettingsIcon {
  1192. display: flex;
  1193. transform: translateX(-30%);
  1194. -webkit-transform: translateX(-30%);
  1195. }
  1196. .setting-item .editingToolbarSettingsIcon:empty::before {
  1197. content: "❗";
  1198. }
  1199. .modal.mod-settings .custom-commands-container .editingToolbarSettingsIcon{
  1200. box-shadow: none;
  1201. }
  1202. .modal.mod-settings .custom-commands-container .editingToolbarSettingsIcon:hover{
  1203. background-color: transparent;
  1204. color: var(--text-normal);
  1205. }
  1206. .modal .setting-item-control>input.id-is-disabled{
  1207. background-color: var(--background-modifier-border);
  1208. }
  1209. .setting-item button.editingToolbarSettingsIcon svg {
  1210. max-width: 1.5em;
  1211. max-height: 1.5em;
  1212. }
  1213. .modal.mod-settings button:not(.mod-cta):not(.mod-warning).editingToolbarSettingsIcon:hover {
  1214. background-color: var(--interactive-accent-hover);
  1215. }
  1216. .modal.mod-settings button:not(.mod-cta):not(.mod-warning).editingToolbarSettingsIcon {
  1217. background-color: transparent;
  1218. box-shadow: 0 1px 1px 0px var(--background-modifier-border);
  1219. }
  1220. @media screen and (min-width: 781px) {
  1221. .editingToolbar-Modal .wideInputPromptInputEl {
  1222. width: 40rem;
  1223. max-width: 100%;
  1224. height: 20rem;
  1225. background-color: rgb(var(--mono-rgb-0), 0.8);
  1226. }
  1227. }
  1228. .editingToolbarcustomIcon svg {
  1229. max-width: 1.3em;
  1230. max-height: 1.3em;
  1231. display: flex;
  1232. }
  1233. .editingToolbarSettingsButton svg {
  1234. max-width: 1.3em;
  1235. max-height: 1.3em;
  1236. display: flex;
  1237. }
  1238. .cmdr-page-header {
  1239. min-width: 1em;
  1240. ;
  1241. }
  1242. .x-color-picker-wrapper {
  1243. right: -50%;
  1244. transform: translateX(50%);
  1245. top: 1.8em;
  1246. min-width: 1px;
  1247. padding: 10px;
  1248. box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14);
  1249. position: absolute;
  1250. width: fit-content;
  1251. font-weight: 400;
  1252. font-family: Source Sans Pro, sans-serif;
  1253. border-radius: var(--radius-s);
  1254. background-color: var(--color-base-10, --background-primary);
  1255. }
  1256. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button:first-child.editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  1257. right: unset;
  1258. transform: translateX(0);
  1259. left: 0px;
  1260. }
  1261. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button:nth-child(2).editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  1262. right: unset;
  1263. transform: translateX(0);
  1264. left: 0px;
  1265. }
  1266. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button:nth-child(3).editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  1267. right: unset;
  1268. transform: translateX(0);
  1269. left: -30px;
  1270. }
  1271. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button:nth-child(4).editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  1272. right: unset;
  1273. transform: translateX(0);
  1274. left: -50px;
  1275. }
  1276. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button:nth-last-child(1).editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  1277. right: 0px;
  1278. transform: translateX(0);
  1279. }
  1280. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button:nth-last-child(2).editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  1281. right: 0px;
  1282. transform: translateX(0);
  1283. }
  1284. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button:nth-last-child(3).editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  1285. right: 0px;
  1286. transform: translateX(30px);
  1287. }
  1288. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button:nth-last-child(4).editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  1289. right: 0px;
  1290. transform: translateX(40px);
  1291. }
  1292. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button:nth-last-child(5).editingToolbarCommandsubItem-font-color .x-color-picker-wrapper {
  1293. right: 0px;
  1294. transform: translateX(50px);
  1295. }
  1296. .markdown-source-view.mod-cm6 .x-color-picker-wrapper table.x-color-picker-table#x-color-picker-table {
  1297. width: unset;
  1298. border-collapse: separate;
  1299. border-spacing: 6px;
  1300. margin: auto;
  1301. }
  1302. .x-color-picker-wrapper table.x-color-picker-table#x-backgroundcolor-picker-table {
  1303. width: unset;
  1304. border-collapse: separate;
  1305. border-spacing: 6px;
  1306. margin: auto;
  1307. }
  1308. .x-color-picker-wrapper .x-color-picker-table th {
  1309. border: 0;
  1310. text-align: left;
  1311. font-weight: normal;
  1312. background: transparent;
  1313. color: #718096;
  1314. }
  1315. .x-color-picker-wrapper #x-color-picker-table td {
  1316. font-size: 1px;
  1317. padding: 9px;
  1318. cursor: default;
  1319. border: solid 1px var(--background-modifier-border);
  1320. }
  1321. .x-color-picker-wrapper #x-backgroundcolor-picker-table td {
  1322. font-size: 1px;
  1323. border-radius: 50%;
  1324. padding: 9px;
  1325. cursor: default;
  1326. border: solid 1px var(--background-modifier-border);
  1327. }
  1328. .x-color-picker-wrapper .x-color-picker-table tr td:hover {
  1329. filter: brightness(1.2);
  1330. box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
  1331. }
  1332. /* .x-color-picker-wrapper tbody>tr:hover {
  1333. background-color: transparent !important;
  1334. } */
  1335. /**top**/
  1336. #editingToolbarModalBar.top {
  1337. display: flex;
  1338. flex-wrap: nowrap;
  1339. margin-right: 12px;
  1340. position: relative;
  1341. height: calc(var(--toolbar-icon-size) + 18px);
  1342. align-items: center;
  1343. transition: all 0.2s linear;
  1344. -webkit-transition: all 0.2s linear;
  1345. transform: none;
  1346. z-index: var(--layer-status-bar);
  1347. }
  1348. #editingToolbarModalBar ~.excalidraw .FixedSideContainer_side_top
  1349. {
  1350. top: 38px;
  1351. }
  1352. .excalidraw-wrapper #editingToolbarModalBar.top
  1353. {
  1354. top: 38px;
  1355. }
  1356. .excalidraw-wrapper #editingToolbarPopoverBar
  1357. {
  1358. top: 76px;
  1359. }
  1360. #editingToolbarModalBar.top.autohide {
  1361. opacity: 0;
  1362. transition: all 0.5s linear;
  1363. -webkit-transition: all 0.5s linear;
  1364. }
  1365. #editingToolbarModalBar.top.centered {
  1366. max-width: var(--file-line-width) ;
  1367. align-self: center;
  1368. }
  1369. #editingToolbarModalBar.top.autohide:hover {
  1370. opacity: 1;
  1371. transition: all 1s linear;
  1372. -webkit-transition: all 1s linear;
  1373. }
  1374. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]):not(.editingToolbar-Divider-Line) {
  1375. font-size: 10px;
  1376. clear: both;
  1377. opacity: 1;
  1378. flex-shrink: 0;
  1379. height: 28px;
  1380. padding: 4px 4px;
  1381. border: none;
  1382. background: transparent;
  1383. cursor: default;
  1384. outline: none;
  1385. box-shadow: none;
  1386. border-radius: var(--radius-s);
  1387. display: inline-flex;
  1388. justify-content: center;
  1389. align-items: center;
  1390. contain: none;
  1391. }
  1392. /* Some themes animate all workspace SVG icons. Opt toolbar controls out so
  1393. inherited visibility changes hide the whole toolbar in one frame. */
  1394. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]):not(.editingToolbar-Divider-Line):not(.editingToolbarCommandsubItem-ai),
  1395. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]):not(.editingToolbar-Divider-Line):not(.editingToolbarCommandsubItem-ai) *:not(.subitem),
  1396. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]):not(.editingToolbar-Divider-Line):not(.editingToolbarCommandsubItem-ai) svg.svg-icon,
  1397. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]):not(.editingToolbar-Divider-Line):not(.editingToolbarCommandsubItem-ai) svg.svg-icon * {
  1398. animation: none;
  1399. transition: none !important;
  1400. -webkit-transition: none !important;
  1401. }
  1402. #editingToolbarModalBar ~.canvas-controls{
  1403. top: calc(var(--size-4-2) + 50px);
  1404. }
  1405. /* #editingToolbarModalBar.top button.editingToolbarCommandItem:hover {
  1406. background-color: var(--interactive-hover);
  1407. } */
  1408. #editingToolbarPopoverBar {
  1409. flex-wrap: wrap;
  1410. display: inline-flex;
  1411. height: auto;
  1412. align-items: center;
  1413. overflow: visible;
  1414. width: fit-content;
  1415. z-index: var(--layer-popover);
  1416. background-color: var(--color-base-10, --background-primary);
  1417. background-clip: padding-box;
  1418. border-radius: var(--radius-m);
  1419. margin-left: 25px;
  1420. margin-right: 25px;
  1421. transition: all 0.1s linear;
  1422. -webkit-transition: all 0.1s linear;
  1423. position: absolute;
  1424. right: 0;
  1425. }
  1426. @media screen and (max-width: 768px) {
  1427. #editingToolbarPopoverBar {
  1428. left: 15%;
  1429. transform: translateX(-15%);
  1430. right: unset;
  1431. }
  1432. }
  1433. .markdown-source-view.mod-cm6 #editingToolbarPopoverBar {
  1434. margin-top: calc(var(--toolbar-icon-size) + 20px);
  1435. }
  1436. #editingToolbarPopoverBar :is(.editingToolbarCommandItem, button[class^=editingToolbarCommandsubItem]) {
  1437. height: 28px;
  1438. font-size: 10px;
  1439. clear: both;
  1440. opacity: 1;
  1441. flex-shrink: 0;
  1442. padding: 4px 4px;
  1443. border: none;
  1444. background: transparent;
  1445. cursor: default;
  1446. outline: none;
  1447. box-shadow: none;
  1448. border-radius: var(--radius-s);
  1449. display: inline-flex;
  1450. justify-content: center;
  1451. align-items: center;
  1452. transition: all 0.2s linear;
  1453. -webkit-transition: all 0.2s linear;
  1454. }
  1455. #editingToolbarModalBar .more-menu {
  1456. display: flex;
  1457. align-items: center;
  1458. box-shadow: none;
  1459. height: 28px;
  1460. opacity: 0.8;
  1461. }
  1462. #editingToolbarModalBar.editingToolbarCustomAesthetic .more-menu>.editingToolbarCommandItem svg {
  1463. width: calc(var(--toolbar-icon-size) * 0.8);
  1464. height: calc(var(--toolbar-icon-size) * 0.8);
  1465. }
  1466. /*Divider-Line**/
  1467. .editingToolbarSettingsTabsContainer .editingToolbar-Divider-Line {
  1468. padding: 0;
  1469. line-height: 0px;
  1470. border-left: 200px solid rgba(var(--interactive-accent-rgb), 0.05);
  1471. border-right: 200px solid rgba(var(--interactive-accent-rgb), 0.05);
  1472. text-align: center;
  1473. background: rgba(var(--interactive-accent-rgb), 0.2);
  1474. }
  1475. .editingToolbarSettingsTabsContainer .editingToolbar-Divider-Line .setting-item-control button:not(:last-child) {
  1476. display: none;
  1477. }
  1478. .editingToolbarSettingsTabsContainer .editingToolbar-Divider-Line .setting-item-info {
  1479. flex: 1 1 auto;
  1480. }
  1481. .editingToolbarSettingsTabsContainer .editingToolbar-Divider-Line .setting-item-control {
  1482. justify-content: flex-start;
  1483. }
  1484. .editingToolbarSettingsTabsContainer .editingToolbar-Divider-Line .setting-item-info .setting-item-name {
  1485. font-size: 12px;
  1486. text-align: right;
  1487. }
  1488. .editingToolbarSettingsTabsContainer .editingToolbar-Divider-Line .setting-item-control button:last-child {
  1489. padding: 0;
  1490. background-color: transparent;
  1491. }
  1492. .editingToolbarSettingsTabsContainer .editingToolbar-Divider-Line .setting-item-control button:last-child svg {
  1493. display: none;
  1494. }
  1495. .editingToolbarSettingsTabsContainer .editingToolbar-Divider-Line .setting-item-control button:last-child::before {
  1496. content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M511.674077 66.707284c-246.52265 0-446.347744 199.835328-446.347744 446.347744s199.825095 446.356954 446.347744 446.356954c246.50423 0 446.348768-199.844537 446.348768-446.356954S758.177284 66.707284 511.674077 66.707284zM744.967424 667.159826c21.8701 21.8701 21.8701 57.310264 0 79.199807-21.8701 21.851681-57.30924 21.851681-79.198783-0.019443L511.674077 592.264045 357.56007 746.359632c-21.8701 21.8701-57.30924 21.851681-79.17934-0.019443s-21.8701-57.290821 0-79.160921L432.493713 513.065262 278.379707 358.950232c-21.8701-21.86089-21.8701-57.328683 0-79.18855 21.8701-21.87931 57.30924-21.87931 79.17934 0l154.114007 154.104797 154.095587-154.104797c21.889543-21.87931 57.32766-21.87931 79.198783-0.010233 21.8701 21.8701 21.8701 57.348126 0 79.207993L590.89128 513.065262 744.967424 667.159826z' fill='%23666666'/%3E%3C/svg%3E");
  1497. }
  1498. :is(#editingToolbarModalBar:not(.top), #editingToolbarPopoverBar) button.editingToolbar-Divider-Line
  1499. {
  1500. display: none;
  1501. }
  1502. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbar-Divider-Line
  1503. {
  1504. min-width: unset;
  1505. flex-shrink: 0;
  1506. display: inline-flex;
  1507. width: 0.6px;
  1508. background-color: var(--background-modifier-border);
  1509. height: 22px;
  1510. opacity: 0.8;
  1511. margin: 0;
  1512. padding:0;
  1513. align-self: center;
  1514. }
  1515. .theme-dark :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbar-Divider-Line {
  1516. background-color: #4f4f5188;
  1517. }
  1518. :is(#editingToolbarModalBar, #editingToolbarPopoverBar) button.editingToolbar-Divider-Line svg {
  1519. display: none;
  1520. }
  1521. /* 下拉菜单中的分类标题样式 - 文字在线条中间 */
  1522. .menu.editing-toolbar-dropdown-menu .menu-separator
  1523. {
  1524. display:none;
  1525. }
  1526. .menu.editing-toolbar-dropdown-menu .menu-item.is-disabled {
  1527. opacity: 0.7;
  1528. cursor: default;
  1529. font-size: 10px;
  1530. font-weight: 400;
  1531. color: var(--text-muted);
  1532. text-transform: uppercase;
  1533. letter-spacing: 0.8px;
  1534. padding: 8px 12px;
  1535. background-color: transparent;
  1536. display: flex;
  1537. align-items: center;
  1538. gap: 6px;
  1539. filter: contrast(0.5);
  1540. }
  1541. .theme-dark .menu.editing-toolbar-dropdown-menu .menu-item.is-disabled
  1542. {
  1543. color: var(--text-muted); /* 文字直接变透明背景色 */
  1544. opacity: 0.7;
  1545. }
  1546. /* 左侧线条 */
  1547. .menu.editing-toolbar-dropdown-menu .menu-item.is-disabled::before {
  1548. content: '';
  1549. flex: 1;
  1550. height: 1px;
  1551. background-color: var(--background-modifier-border);
  1552. opacity: 0.5;
  1553. }
  1554. /* 右侧线条 */
  1555. .menu.editing-toolbar-dropdown-menu .menu-item.is-disabled::after {
  1556. content: '';
  1557. flex: 1;
  1558. height: 1px;
  1559. background-color: var(--background-modifier-border);
  1560. opacity: 0.5;
  1561. }
  1562. .menu.editing-toolbar-dropdown-menu .menu-item.is-disabled:hover {
  1563. background-color: transparent;
  1564. }
  1565. .workspace-tabs.mod-stacked .workspace-tab-header:not(.is-active)+.workspace-leaf #editingToolbarModalBar {
  1566. opacity: 0;
  1567. }
  1568. :is(.cm-line, p) mark[style^="background:rgba"] {
  1569. color: var(--text-normal);
  1570. }
  1571. :is(.cm-line, p) mark[style^="background:#"] {
  1572. color: black;
  1573. }
  1574. :is(.cm-line, p) span[style^="background:rgba"] {
  1575. color: var(--text-normal);
  1576. }
  1577. :is(.cm-line, p) span[style^="background:#"] {
  1578. color: black;
  1579. }
  1580. /* 快捷键样式 */
  1581. .menu.editing-toolbar-dropdown-menu .menu-item-hotkey {
  1582. margin-left: auto;
  1583. font-size:10px;
  1584. color: var(--text-muted);
  1585. opacity: 0.7;
  1586. font-family: var(--font-monospace);
  1587. }
  1588. .setting-item.toolbar-cta:after {
  1589. content: "";
  1590. position: absolute;
  1591. top: -10%;
  1592. width: 104%;
  1593. left: -2%;
  1594. height: 120%;
  1595. outline: 2px solid var(--text-accent);
  1596. border-radius: 1em;
  1597. pointer-events: none;
  1598. }
  1599. .setting-item.toolbar-cta {
  1600. position: relative;
  1601. }
  1602. .toolbar-pickr .pcr-last-color,
  1603. .pickr .pcr-button{
  1604. background-color: var(--pcr-color);
  1605. }
  1606. .toolbar-pickr .pcr-interaction :not(:is(input.pcr-save,.pcr-result)){
  1607. display:none;
  1608. }
  1609. .toolbar-pickr .pcr-swatches {
  1610. display:none;
  1611. }
  1612. .toolbar-pickr {
  1613. display:flex;
  1614. }
  1615. div[data-type="thino_view"] .memo-editor-wrapper:has(#editingToolbarModalBar)
  1616. {
  1617. padding-top:0;
  1618. padding-left:0;
  1619. padding-right:0;
  1620. }
  1621. div[data-type="thino_view"] .memo-editor-wrapper:has(#editingToolbarModalBar) .common-tools-wrapper
  1622. {
  1623. padding-left:16px;
  1624. padding-right:16px;
  1625. }
  1626. div[data-type="thino_view"] .memo-editor-wrapper #editingToolbarModalBar ~ .cm-editor{
  1627. padding-top:38px;
  1628. padding-bottom:0px;
  1629. padding-left:16px;
  1630. padding-right:16px;
  1631. }
  1632. div[data-type=thino_view] .common-editor-wrapper .common-editor-inputer:has(#editingToolbarModalBar)
  1633. {
  1634. min-height:118px;
  1635. }
  1636. div[data-type=thino_view] #editingToolbarModalBar.top
  1637. {
  1638. position:absolute;
  1639. width: 100%;
  1640. }
  1641. body.auto-hide-header .workspace-tab-header-container:hover + .workspace-tab-container .workspace-leaf .workspace-leaf-content>.view-header {
  1642. margin-top: 0;
  1643. transition: all 0.1s linear;
  1644. }
  1645. body.auto-hide-header .workspace-tab-header-container + .workspace-tab-container .workspace-leaf .workspace-leaf-content>.view-header:hover {
  1646. margin-top: 0;
  1647. transition: all 0.6s linear;
  1648. }
  1649. body.auto-hide-header .workspace-tab-header-container + .workspace-tab-container .workspace-leaf .workspace-leaf-content>.view-header {
  1650. margin-top: -40px;
  1651. transition: all 0.6s linear;
  1652. }
  1653. .setting-item:is(.custom_bg, .custom_font) .pickr-container {
  1654. display: flex;
  1655. gap: 8px;
  1656. position: relative;
  1657. }
  1658. .setting-item:is(.custom_bg, .custom_font) .pickr-container .picker {
  1659. width: 32px;
  1660. height: 32px;
  1661. }
  1662. /* 头部容器样式 */
  1663. .editing-toolbar-header {
  1664. display: flex;
  1665. align-items: center;
  1666. justify-content: space-between;
  1667. gap: 12px;
  1668. margin-bottom: 24px;
  1669. padding: 0 8px;
  1670. }
  1671. /* 标题容器样式 */
  1672. .editing-toolbar-title-container {
  1673. min-width: 0;
  1674. }
  1675. .editing-toolbar-title-container h1{
  1676. display:inline;
  1677. }
  1678. .editing-toolbar-title {
  1679. margin: 0;
  1680. overflow-wrap: anywhere;
  1681. }
  1682. /* 信息容器样式 */
  1683. .editing-toolbar-info {
  1684. display: flex;
  1685. align-items: center;
  1686. flex: 0 0 auto;
  1687. }
  1688. /* 标题栏修复按钮 */
  1689. .editing-toolbar-fix-button {
  1690. flex: 0 0 32px;
  1691. width: 32px;
  1692. min-width: 32px;
  1693. height: 32px;
  1694. margin: 0;
  1695. padding: 6px;
  1696. border: 0;
  1697. }
  1698. @media screen and (max-width: 1024px) {
  1699. .editing-toolbar-title {
  1700. font-size: 1.25rem;
  1701. }
  1702. }
  1703. /* 链接样式 */
  1704. .editing-toolbar-info a {
  1705. color: var(--text-accent);
  1706. text-decoration: none;
  1707. }
  1708. .editing-toolbar-info a:hover {
  1709. text-decoration: underline;
  1710. }
  1711. .editing-toolbar-tabs {
  1712. display: flex;
  1713. border-bottom: 2px solid var(--background-modifier-border);
  1714. margin-bottom: 24px;
  1715. padding: 0 8px;
  1716. }
  1717. .editing-toolbar-tab {
  1718. display: flex;
  1719. align-items: center;
  1720. gap: 8px;
  1721. padding: 8px 12px;
  1722. cursor: pointer;
  1723. border-bottom: 2px solid transparent;
  1724. margin-bottom: -2px;
  1725. color: var(--text-muted);
  1726. }
  1727. .editing-toolbar-tab:hover {
  1728. color: var(--text-normal);
  1729. background-color: var(--background-modifier-hover);
  1730. }
  1731. .editing-toolbar-tab.active {
  1732. color: var(--text-accent);
  1733. border-bottom-color: var(--text-accent);
  1734. }
  1735. .editing-toolbar-content {
  1736. padding: 0 8px;
  1737. }
  1738. /* 添加到你的 styles.css 文件中 */
  1739. @keyframes sortable-feedback {
  1740. 0% {
  1741. transform: scale(1);
  1742. }
  1743. 50% {
  1744. transform: scale(0.98);
  1745. }
  1746. 100% {
  1747. transform: scale(1);
  1748. }
  1749. }
  1750. .sortable-chosen-feedback {
  1751. animation: sortable-feedback 0.3s ease-in-out;
  1752. position: relative;
  1753. }
  1754. .sortable-chosen-feedback::after {
  1755. content: '';
  1756. position: absolute;
  1757. top: 0;
  1758. left: 0;
  1759. right: 0;
  1760. bottom: 0;
  1761. background: var(--background-modifier-hover);
  1762. opacity: 0;
  1763. animation: toolbar-fade-in 0.3s ease-in-out forwards;
  1764. pointer-events: none;
  1765. border-radius: 4px;
  1766. }
  1767. @keyframes toolbar-fade-in {
  1768. from {
  1769. opacity: 0;
  1770. }
  1771. to {
  1772. opacity: 0.3;
  1773. }
  1774. }
  1775. .insert-callout-modal textarea {
  1776. width: 100%;
  1777. resize: vertical;
  1778. }
  1779. .callout-type-container {
  1780. display: flex;
  1781. align-items: center;
  1782. gap: 8px;
  1783. }
  1784. .callout-type-container .setting-item
  1785. {
  1786. width: 100%;
  1787. }
  1788. .callout-icon-container {
  1789. display: flex;
  1790. width: 24px;
  1791. height: 24px;
  1792. align-items: center;
  1793. }
  1794. .callout-icon-container svg {
  1795. width: 16px;
  1796. height: 16px;
  1797. color: rgb(var(--callout-color));
  1798. }
  1799. .callout-icon-container svg.custom-admonition-icon {
  1800. width: var(--icon-size);
  1801. height: var(--icon-size);
  1802. }
  1803. .insert-link-modal .setting-item
  1804. {
  1805. border-top: none;
  1806. }
  1807. .insert-link-modal input{
  1808. width: 100%;
  1809. }
  1810. .modal .insert-link-modal-title{
  1811. font-size: 12px;
  1812. color: var(--text-muted);
  1813. }
  1814. .insert-link-modal .preview-setting
  1815. {
  1816. display: block;
  1817. }
  1818. .insert-link-modal .preview-setting input{
  1819. width: 100%;
  1820. background-color: transparent;
  1821. border: none;
  1822. color: var(--text-muted);
  1823. font-size: 12px;
  1824. }
  1825. .position-style-info{
  1826. margin-bottom: 1rem;
  1827. padding: 0.5rem;
  1828. border-radius: 4px;
  1829. text-align: center;
  1830. font-weight: bold;
  1831. position: sticky;
  1832. color: white;
  1833. background-color: rgba(var(--color-purple-rgb), 0.8);
  1834. top: 0;
  1835. }
  1836. .position-style-info.following{
  1837. background-color: rgba(var(--color-green-rgb), 0.8);
  1838. }
  1839. .position-style-info.fixed{
  1840. background-color: rgba(var(--color-blue-rgb), 0.8);
  1841. }
  1842. .position-style-info.top{
  1843. background-color: rgba(var(--color-yellow-rgb), 0.8);
  1844. }
  1845. .command-lists-container.following{
  1846. background-color: rgba(var(--color-green-rgb), 0.1);
  1847. border: 1px solid rgba(var(--color-green-rgb), 0.3);
  1848. }
  1849. .command-lists-container.fixed{
  1850. background-color: rgba(var(--color-blue-rgb), 0.1);
  1851. border: 1px solid rgba(var(--color-blue-rgb), 0.3);
  1852. }
  1853. .command-lists-container.top{
  1854. background-color: rgba(var(--color-yellow-rgb), 0.1);
  1855. border: 1px solid rgba(var(--color-yellow-rgb), 0.3);
  1856. }
  1857. @media screen and (max-width: 1024px) {
  1858. .editing-toolbar-tabs .editing-toolbar-tab:not(.active)>span {
  1859. display: none;
  1860. }
  1861. }
  1862. /* 命令类型标签 */
  1863. .command-type-badge {
  1864. display: inline-block;
  1865. padding: 2px 6px;
  1866. margin-left: 8px;
  1867. border-radius: 4px;
  1868. font-size: 0.8em;
  1869. background-color: var(--background-modifier-border);
  1870. }
  1871. .command-type-badge.regex {
  1872. background-color: var(--text-accent);
  1873. color: var(--text-on-accent);
  1874. }
  1875. .custom-commands-container .command-list-container .setting-item-name {
  1876. display: flex;
  1877. gap: 8px;
  1878. }
  1879. .custom-commands-modal {
  1880. width: auto;
  1881. max-width: 800px;
  1882. }
  1883. .custom-commands-modal input {
  1884. width: 100%;
  1885. max-width: 300px;
  1886. }
  1887. .command-buttons-container {
  1888. background: var(--background-secondary);
  1889. border-radius: 5px;
  1890. padding: 10px;
  1891. margin-bottom: 15px;
  1892. }
  1893. .command-buttons-container .setting-item {
  1894. border: none;
  1895. padding: 8px 0;
  1896. }
  1897. .command-buttons-container .setting-item-control {
  1898. display: flex;
  1899. gap: 10px;
  1900. align-items: center;
  1901. }
  1902. /* 工具栏预览样式 */
  1903. .toolbar-preview {
  1904. background-color: var(--editing-toolbar-background-color);
  1905. }
  1906. .toolbar-preview .clickable-icon svg {
  1907. color: var(--editing-toolbar-icon-color);
  1908. width: var(--toolbar-icon-size);
  1909. height: var(--toolbar-icon-size);
  1910. }
  1911. .toolbar-preview-container #editingToolbarModalBar{
  1912. visibility:visible;
  1913. position: relative;
  1914. }
  1915. .confirm-modal .confirm-modal-buttons {
  1916. gap: 8px;
  1917. display: flex;
  1918. justify-content: flex-end;
  1919. }
  1920. .confirm-modal p{
  1921. margin: 0;
  1922. line-height: 1.6;
  1923. }
  1924. .modal.editing-toolbar-ai-consent-modal {
  1925. width: min(560px, calc(100vw - 32px));
  1926. }
  1927. .modal.editing-toolbar-text-input-modal-wide {
  1928. width: min(600px, calc(100vw - 40px));
  1929. }
  1930. .editing-toolbar-text-input-suggestions {
  1931. margin-top: 8px;
  1932. }
  1933. .editing-toolbar-text-input-suggestions-label {
  1934. margin-bottom: 10px;
  1935. color: var(--text-muted);
  1936. font-size: 12px;
  1937. font-weight: 600;
  1938. }
  1939. .editing-toolbar-text-input-suggestions-chips {
  1940. display: flex;
  1941. flex-wrap: wrap;
  1942. gap: 8px;
  1943. }
  1944. .editing-toolbar-text-input-suggestion-chip {
  1945. padding: 7px 12px;
  1946. border: 1px solid var(--background-modifier-border);
  1947. border-radius: 999px;
  1948. background: var(--background-secondary);
  1949. color: var(--text-normal);
  1950. font-size: 12px;
  1951. line-height: 1.2;
  1952. cursor: pointer;
  1953. transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  1954. }
  1955. .editing-toolbar-text-input-suggestion-chip:hover {
  1956. background: color-mix(in srgb, var(--interactive-accent) 12%, var(--background-secondary));
  1957. border-color: color-mix(in srgb, var(--interactive-accent) 30%, var(--background-modifier-border));
  1958. transform: translateY(-1px);
  1959. }
  1960. .editing-toolbar-text-input-field-full {
  1961. position: relative;
  1962. margin: 12px 0;
  1963. }
  1964. .editing-toolbar-text-input-field-full input,
  1965. .editing-toolbar-text-input-field-full textarea {
  1966. width: 100%;
  1967. display: block;
  1968. box-sizing: border-box;
  1969. }
  1970. .editing-toolbar-text-input-linked-note-host {
  1971. position: relative;
  1972. }
  1973. .editing-toolbar-text-input-context {
  1974. margin: 8px 0 12px;
  1975. padding: 10px;
  1976. border: 1px solid var(--background-modifier-border);
  1977. border-radius: 12px;
  1978. background: var(--background-secondary);
  1979. }
  1980. .editing-toolbar-text-input-context-label {
  1981. margin-bottom: 8px;
  1982. color: var(--text-muted);
  1983. font-size: 12px;
  1984. font-weight: 600;
  1985. }
  1986. .editing-toolbar-text-input-context-item {
  1987. display: flex;
  1988. align-items: center;
  1989. gap: 10px;
  1990. padding: 6px 8px;
  1991. border-radius: 8px;
  1992. }
  1993. .editing-toolbar-text-input-context-item + .editing-toolbar-text-input-context-item {
  1994. margin-top: 4px;
  1995. }
  1996. .editing-toolbar-text-input-context-item:hover {
  1997. background: var(--background-modifier-hover);
  1998. }
  1999. .editing-toolbar-text-input-context-item-label {
  2000. flex-shrink: 0;
  2001. color: var(--text-accent);
  2002. font-weight: 500;
  2003. }
  2004. .editing-toolbar-text-input-context-item-preview {
  2005. min-width: 0;
  2006. color: var(--text-muted);
  2007. white-space: nowrap;
  2008. overflow: hidden;
  2009. text-overflow: ellipsis;
  2010. }
  2011. .editing-toolbar-textarea-input {
  2012. width: 100%;
  2013. min-height: 80px;
  2014. resize: vertical;
  2015. }
  2016. .editing-toolbar-text-input-footer-hint {
  2017. margin-top: 8px;
  2018. color: var(--text-muted);
  2019. font-size: 12px;
  2020. line-height: 1.5;
  2021. }
  2022. .editing-toolbar-text-input-mention-dropdown {
  2023. position: absolute;
  2024. top: calc(100% + 6px);
  2025. left: 0;
  2026. right: 0;
  2027. z-index: 20;
  2028. display: none;
  2029. max-height: 220px;
  2030. overflow-y: auto;
  2031. border: 1px solid var(--background-modifier-border);
  2032. border-radius: 10px;
  2033. background: var(--background-primary);
  2034. box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  2035. }
  2036. .editing-toolbar-text-input-mention-item {
  2037. display: flex;
  2038. align-items: center;
  2039. gap: 8px;
  2040. padding: 8px 10px;
  2041. cursor: pointer;
  2042. }
  2043. .editing-toolbar-text-input-mention-item + .editing-toolbar-text-input-mention-item {
  2044. border-top: 1px solid var(--background-modifier-border-hover);
  2045. }
  2046. .editing-toolbar-text-input-mention-item:hover,
  2047. .editing-toolbar-text-input-mention-item.selected {
  2048. background: var(--background-modifier-hover);
  2049. }
  2050. .editing-toolbar-text-input-mention-icon {
  2051. flex-shrink: 0;
  2052. }
  2053. .editing-toolbar-text-input-mention-name {
  2054. color: var(--text-normal);
  2055. font-weight: 500;
  2056. }
  2057. .editing-toolbar-text-input-mention-path {
  2058. min-width: 0;
  2059. margin-left: auto;
  2060. color: var(--text-faint);
  2061. font-size: 11px;
  2062. white-space: nowrap;
  2063. overflow: hidden;
  2064. text-overflow: ellipsis;
  2065. }
  2066. .editing-toolbar-ai-consent {
  2067. display: flex;
  2068. flex-direction: column;
  2069. gap: 16px;
  2070. font-size: var(--font-ui-small);
  2071. }
  2072. .editing-toolbar-ai-consent-hero h2 {
  2073. margin: 10px 0 0;
  2074. font-size: 24px;
  2075. line-height: 1.25;
  2076. }
  2077. .editing-toolbar-ai-consent-badge {
  2078. display: inline-flex;
  2079. align-items: center;
  2080. padding: 6px 10px;
  2081. border-radius: 999px;
  2082. background: color-mix(in srgb, var(--interactive-accent) 14%, var(--background-secondary));
  2083. color: var(--interactive-accent);
  2084. font-size: 12px;
  2085. font-weight: 700;
  2086. }
  2087. .editing-toolbar-ai-consent-desc {
  2088. margin-top: 12px;
  2089. color: var(--text-muted);
  2090. line-height: 1.7;
  2091. }
  2092. .editing-toolbar-ai-consent-note {
  2093. margin-top: 12px;
  2094. padding: 12px 14px;
  2095. border: 1px solid var(--background-modifier-border);
  2096. border-radius: 14px;
  2097. background: var(--background-secondary);
  2098. color: var(--text-muted);
  2099. line-height: 1.6;
  2100. }
  2101. .editing-toolbar-ai-consent-section {
  2102. padding: 14px 16px;
  2103. border: 1px solid var(--background-modifier-border);
  2104. border-radius: 16px;
  2105. background: var(--background-secondary);
  2106. }
  2107. .editing-toolbar-ai-consent-section-title {
  2108. font-size: 14px;
  2109. font-weight: 700;
  2110. color: var(--text-normal);
  2111. }
  2112. .editing-toolbar-ai-consent-list {
  2113. display: grid;
  2114. gap: 10px;
  2115. margin-top: 12px;
  2116. }
  2117. .editing-toolbar-ai-consent-item {
  2118. display: flex;
  2119. align-items: flex-start;
  2120. gap: 10px;
  2121. }
  2122. .editing-toolbar-ai-consent-dot {
  2123. flex-shrink: 0;
  2124. width: 7px;
  2125. height: 7px;
  2126. margin-top: 0.55em;
  2127. border-radius: 999px;
  2128. background: var(--interactive-accent);
  2129. opacity: 0.9;
  2130. }
  2131. .editing-toolbar-ai-consent-text {
  2132. color: var(--text-muted);
  2133. line-height: 1.65;
  2134. }
  2135. .editing-toolbar-ai-consent-actions {
  2136. display: flex;
  2137. justify-content: flex-end;
  2138. gap: 8px;
  2139. padding-top: 4px;
  2140. }
  2141. .format-brush-cursor .cm-content {
  2142. cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='18' height='18'%3E%3Cpath d='M786.285714 56.888889h121.93727A20.280889 20.280889 0 0 0 928.507937 36.591746v-16.294603A20.284952 20.284952 0 0 0 908.222984 0h-398.287238A20.280889 20.280889 0 0 0 489.650794 20.297143v16.294603A20.284952 20.284952 0 0 0 509.935746 56.888889H635.936508v910.222222h-126.000762A20.280889 20.280889 0 0 0 489.650794 987.408254v16.294603a20.284952 20.284952 0 0 0 20.284952 20.297143h398.287238a20.280889 20.280889 0 0 0 20.284953-20.297143v-16.294603a20.284952 20.284952 0 0 0-20.284953-20.297143H786.285714V56.888889zM359.619048 903.233016H310.857143V690.793651H266.15873v213.577143H217.396825V690.793651H172.698413v213.577143h-29.415619c-49.290159 0-42.573206-44.901587-42.573207-44.901588S97.076825 722.306032 97.10527 642.031746H480.467302c-0.008127 80.428698-3.604317 216.299683-3.604318 216.299683s6.716952 44.901587-42.57727 44.901587H404.31746V690.793651H359.619048v212.439365zM97.828571 597.333333l0.065016-1.235301c2.816-50.704254-5.640127-98.588444 66.186159-123.936508 71.830349-25.35619 47.896381-35.210159 54.934349-83.098413 7.037968-47.88419-18.310095-71.826286-18.310095-207.034921 0-109.04381 51.301587-125.456254 79.766349-127.723682 0.353524-0.934603 0.723302-1.414095 1.113397-1.414095 16.420571 0 95.288889-7.200508 95.288889 128 0 135.208635-25.348063 159.15073-18.314159 207.03492 7.037968 47.888254-16.891937 57.742222 54.938413 83.098413 71.822222 25.348063 63.370159 73.236317 66.186159 123.936508l0.121904 2.373079H97.824508zM288.507937 166.603175a34.539683 34.539683 0 1 0 0-69.079365 34.539683 34.539683 0 0 0 0 69.079365z' fill='%235c5c5c'/%3E%3C/svg%3E") 16 16, auto;
  2143. }
  2144. .format-brush-cursor button[aria-label="Format Brush"]
  2145. {
  2146. background-color: var(--background-modifier-hover) !important ;
  2147. }
  2148. .theme-dark.format-brush-cursor .cm-content {
  2149. cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='18' height='18'%3E%3Cpath d='M786.285714 56.888889h121.93727A20.280889 20.280889 0 0 0 928.507937 36.591746v-16.294603A20.284952 20.284952 0 0 0 908.222984 0h-398.287238A20.280889 20.280889 0 0 0 489.650794 20.297143v16.294603A20.284952 20.284952 0 0 0 509.935746 56.888889H635.936508v910.222222h-126.000762A20.280889 20.280889 0 0 0 489.650794 987.408254v16.294603a20.284952 20.284952 0 0 0 20.284952 20.297143h398.287238a20.280889 20.280889 0 0 0 20.284953-20.297143v-16.294603a20.284952 20.284952 0 0 0-20.284953-20.297143H786.285714V56.888889zM359.619048 903.233016H310.857143V690.793651H266.15873v213.577143H217.396825V690.793651H172.698413v213.577143h-29.415619c-49.290159 0-42.573206-44.901587-42.573207-44.901588S97.076825 722.306032 97.10527 642.031746H480.467302c-0.008127 80.428698-3.604317 216.299683-3.604318 216.299683s6.716952 44.901587-42.57727 44.901587H404.31746V690.793651H359.619048v212.439365zM97.828571 597.333333l0.065016-1.235301c2.816-50.704254-5.640127-98.588444 66.186159-123.936508 71.830349-25.35619 47.896381-35.210159 54.934349-83.098413 7.037968-47.88419-18.310095-71.826286-18.310095-207.034921 0-109.04381 51.301587-125.456254 79.766349-127.723682 0.353524-0.934603 0.723302-1.414095 1.113397-1.414095 16.420571 0 95.288889-7.200508 95.288889 128 0 135.208635-25.348063 159.15073-18.314159 207.03492 7.037968 47.888254-16.891937 57.742222 54.938413 83.098413 71.822222 25.348063 63.370159 73.236317 66.186159 123.936508l0.121904 2.373079H97.824508zM288.507937 166.603175a34.539683 34.539683 0 1 0 0-69.079365 34.539683 34.539683 0 0 0 0 69.079365z' fill='%23dadada'/%3E%3C/svg%3E") 16 16, auto;
  2150. }
  2151. /* 1) TOP – full-width bar at the top of its box */
  2152. .preview-toolbar-wrapper.preview-top #editingToolbarModalBar {
  2153. width: 100%;
  2154. position: center;
  2155. border-radius: var(--radius-m);
  2156. }
  2157. /* 2) FOLLOWING – small floating pill in the middle */
  2158. .preview-toolbar-wrapper.preview-following {
  2159. display: flex;
  2160. justify-content: center;
  2161. }
  2162. .preview-toolbar-wrapper.preview-following #editingToolbarModalBar {
  2163. position: center;
  2164. justify-content: center;
  2165. width: 0;
  2166. border-radius: var(--radius-m);
  2167. }
  2168. /* 3) FIXED – compact grid at the bottom */
  2169. .preview-toolbar-wrapper.preview-fixed {
  2170. display: flex;
  2171. justify-content: center;
  2172. }
  2173. .preview-toolbar-wrapper.preview-fixed #editingToolbarModalBar {
  2174. margin: 8px auto 8px auto;
  2175. align-self: flex-end;
  2176. border-radius: var(--radius-m);
  2177. }
  2178. /* 3) FIXED – For Mobile */
  2179. .is-phone.is-hidden-nav #editingToolbarModalBar.top
  2180. {
  2181. margin-top: calc(var(--safe-area-inset-top) );
  2182. }
  2183. .is-phone:not(.is-hidden-nav) #editingToolbarModalBar.top
  2184. {
  2185. margin-top: calc(var(--safe-area-inset-top) + var(--view-header-height));
  2186. }
  2187. .is-phone #editingToolbarModalBar.top
  2188. {
  2189. margin-right:0px;
  2190. padding:0;
  2191. }
  2192. .is-phone #editingToolbarModalBar.top::-webkit-scrollbar {
  2193. display: none;
  2194. }
  2195. .is-phone .mod-root .workspace-leaf-content[data-type="markdown"] .view-content:has(.editingToolbarModalBar){
  2196. -webkit-mask-image: none;
  2197. }
  2198. .is-mobile.is-hidden-nav .mod-root .workspace-leaf-content[data-type="markdown"]:has(.editingToolbarModalBar) .view-header
  2199. {
  2200. display:none;
  2201. }
  2202. .is-phone .markdown-source-view.mod-cm6 #editingToolbarPopoverBar {
  2203. /* margin-top: calc(var(--toolbar-icon-size) + var(--view-header-height) + 20px); */
  2204. margin-top: calc(var(--safe-area-inset-top) + var(--view-header-height) + var(--toolbar-icon-size) + 10px);
  2205. }
  2206. .is-phone .mod-root .workspace-leaf-content .view-content:has(.editingToolbarModalBar) .markdown-source-view > .cm-editor > .cm-scroller {
  2207. padding-top: 0px;
  2208. }
  2209. .is-phone .mod-root .workspace-leaf-content .view-content:has(.editingToolbarModalBar) .markdown-reading-view > .markdown-preview-view
  2210. {
  2211. padding-top: calc(var(--safe-area-inset-top) + var(--view-header-height) + 36px);
  2212. }
  2213. @keyframes cm-ai-fade-in {
  2214. from {
  2215. opacity: 0;
  2216. transform: translateY(4px);
  2217. }
  2218. to {
  2219. opacity: 1;
  2220. transform: translateY(0);
  2221. }
  2222. }
  2223. @keyframes cm-ai-spin {
  2224. from {
  2225. transform: rotate(0deg);
  2226. }
  2227. to {
  2228. transform: rotate(360deg);
  2229. }
  2230. }
  2231. @keyframes cm-ai-pill-breathe {
  2232. 0%, 100% {
  2233. transform: translateY(0);
  2234. box-shadow: 0 6px 20px color-mix(in srgb, var(--interactive-accent) 8%, transparent), inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
  2235. }
  2236. 50% {
  2237. transform: translateY(-0.5px);
  2238. box-shadow: 0 10px 28px color-mix(in srgb, var(--interactive-accent) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--interactive-accent) 10%, transparent), inset 0 1px 0 color-mix(in srgb, white 26%, transparent);
  2239. }
  2240. }
  2241. @keyframes cm-ai-breathe {
  2242. 0%, 100% {
  2243. transform: scale(0.88);
  2244. opacity: 0.72;
  2245. }
  2246. 50% {
  2247. transform: scale(1.05);
  2248. opacity: 1;
  2249. }
  2250. }
  2251. @keyframes cm-ai-toolbar-breathe {
  2252. 0%, 100% {
  2253. transform: scale(0.9);
  2254. opacity: 0.78;
  2255. }
  2256. 50% {
  2257. transform: scale(1.06);
  2258. opacity: 1;
  2259. }
  2260. }
  2261. @keyframes cm-ai-toolbar-glow {
  2262. 0%, 100% {
  2263. opacity: 0.62;
  2264. transform: scale(0.985);
  2265. }
  2266. 50% {
  2267. opacity: 1;
  2268. transform: scale(1.015);
  2269. }
  2270. }
  2271. @keyframes cm-ai-glow {
  2272. 0%, 100% {
  2273. transform: scale(0.9);
  2274. opacity: 0.24;
  2275. }
  2276. 50% {
  2277. transform: scale(1.28);
  2278. opacity: 0.56;
  2279. }
  2280. }
  2281. @keyframes cm-ai-label-breathe {
  2282. 0%, 100% {
  2283. opacity: 0.78;
  2284. }
  2285. 50% {
  2286. opacity: 1;
  2287. }
  2288. }
  2289. @keyframes cm-ai-sheen {
  2290. 0% {
  2291. transform: translateX(-140%) skewX(-24deg);
  2292. opacity: 0;
  2293. }
  2294. 18% {
  2295. opacity: 0;
  2296. }
  2297. 38% {
  2298. opacity: 0.62;
  2299. }
  2300. 58% {
  2301. opacity: 0;
  2302. }
  2303. 100% {
  2304. transform: translateX(180%) skewX(-24deg);
  2305. opacity: 0;
  2306. }
  2307. }
  2308. .cm-tooltip {
  2309. z-index: 1000;
  2310. }
  2311. .editing-toolbar-ai-grid {
  2312. display: grid;
  2313. gap: 16px;
  2314. }
  2315. .editing-toolbar-ai-card {
  2316. background: var(--background-secondary);
  2317. border: 1px solid var(--background-modifier-border);
  2318. border-radius: 16px;
  2319. box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  2320. overflow: hidden;
  2321. }
  2322. .editing-toolbar-ai-card-summary {
  2323. list-style: none;
  2324. cursor: pointer;
  2325. padding: 16px 18px;
  2326. }
  2327. .editing-toolbar-ai-card-summary::-webkit-details-marker {
  2328. display: none;
  2329. }
  2330. .editing-toolbar-ai-card-summary-static {
  2331. cursor: default;
  2332. }
  2333. .editing-toolbar-ai-card-header {
  2334. display: flex;
  2335. align-items: flex-start;
  2336. justify-content: space-between;
  2337. gap: 12px;
  2338. }
  2339. .editing-toolbar-ai-card-copy {
  2340. min-width: 0;
  2341. }
  2342. .editing-toolbar-ai-card-title {
  2343. font-size: 15px;
  2344. font-weight: 700;
  2345. color: var(--text-normal);
  2346. }
  2347. .editing-toolbar-ai-card-desc {
  2348. margin-top: 6px;
  2349. font-size: 13px;
  2350. line-height: 1.6;
  2351. color: var(--text-muted);
  2352. }
  2353. .editing-toolbar-ai-card-badge {
  2354. flex-shrink: 0;
  2355. padding: 4px 10px;
  2356. border-radius: 999px;
  2357. background: var(--background-modifier-hover);
  2358. color: var(--text-muted);
  2359. font-size: 12px;
  2360. font-weight: 600;
  2361. }
  2362. .editing-toolbar-ai-card-chevron {
  2363. flex-shrink: 0;
  2364. width: 24px;
  2365. height: 24px;
  2366. border-radius: 999px;
  2367. display: flex;
  2368. align-items: center;
  2369. justify-content: center;
  2370. color: var(--text-muted);
  2371. background: var(--background-modifier-hover);
  2372. font-size: 18px;
  2373. font-weight: 700;
  2374. line-height: 1;
  2375. transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
  2376. }
  2377. .editing-toolbar-ai-disclosure[open] .editing-toolbar-ai-card-chevron {
  2378. transform: rotate(180deg);
  2379. }
  2380. .editing-toolbar-ai-card-summary:hover .editing-toolbar-ai-card-chevron {
  2381. color: var(--text-normal);
  2382. background: var(--background-modifier-border-hover);
  2383. }
  2384. .editing-toolbar-ai-card-toggle {
  2385. flex-shrink: 0;
  2386. }
  2387. .editing-toolbar-ai-card-header-select {
  2388. flex-shrink: 0;
  2389. font-size: 12px;
  2390. padding: 3px 8px;
  2391. border-radius: 6px;
  2392. border: 1px solid var(--background-modifier-border);
  2393. color: var(--text-normal);
  2394. cursor: pointer;
  2395. }
  2396. .editing-toolbar-ai-card-body {
  2397. padding: 0 18px 16px;
  2398. }
  2399. .editing-toolbar-ai-disclosure[open] .editing-toolbar-ai-card-summary {
  2400. border-bottom: 1px solid var(--background-modifier-border);
  2401. }
  2402. .editing-toolbar-ai-card .setting-item {
  2403. border-top: 1px solid var(--background-modifier-border-hover);
  2404. padding-top: 14px;
  2405. padding-bottom: 14px;
  2406. }
  2407. .editing-toolbar-ai-card .setting-item:first-child {
  2408. border-top: none;
  2409. }
  2410. .editing-toolbar-ai-note {
  2411. margin-top: 8px;
  2412. font-size: 12px;
  2413. line-height: 1.6;
  2414. color: var(--text-muted);
  2415. }
  2416. .editing-toolbar-ai-inline-disclosure {
  2417. margin-top: 12px;
  2418. border-top: 1px solid var(--background-modifier-border-hover);
  2419. }
  2420. .editing-toolbar-ai-inline-summary {
  2421. cursor: pointer;
  2422. padding: 12px 0 4px;
  2423. font-size: 13px;
  2424. font-weight: 600;
  2425. color: var(--text-muted);
  2426. list-style: none;
  2427. }
  2428. .editing-toolbar-ai-inline-summary::-webkit-details-marker {
  2429. display: none;
  2430. }
  2431. .editing-toolbar-ai-inline-body .setting-item {
  2432. border-top: 1px solid var(--background-modifier-border-hover);
  2433. }
  2434. /* 更新提示弹窗(UpdateNoticeModal):样式集中在 styles.css,不再动态注入 <style> */
  2435. .editing-toolbar-update-modal .changelog-container {
  2436. margin-top: 20px;
  2437. margin-bottom: 20px;
  2438. padding: 10px;
  2439. border: 1px solid var(--background-modifier-border);
  2440. border-radius: 5px;
  2441. max-height: 200px;
  2442. overflow-y: auto;
  2443. }
  2444. .editing-toolbar-update-modal .changelog-content {
  2445. padding: 0 10px;
  2446. }
  2447. .editing-toolbar-update-modal .changelog-content a {
  2448. text-decoration: underline;
  2449. }