console.css 27 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436
  1. /* Material Design 颜色变量 - 浅色主题 */
  2. :root {
  3. --primary-color: #1976D2;
  4. --primary-light: #BBDEFB;
  5. --primary-dark: #0D47A1;
  6. --success-color: #388E3C;
  7. --success-light: #C8E6C9;
  8. --error-color: #D32F2F;
  9. --error-light: #FFCDD2;
  10. --warning-color: #F57C00;
  11. --warning-light: #FFE0B2;
  12. --info-color: #7B1FA2;
  13. --info-light: #E1BEE7;
  14. /* 终端颜色 - 浅色主题 */
  15. --terminal-bg: #FAFAFA;
  16. --terminal-fg: #212121;
  17. --terminal-prompt: #1976D2;
  18. --terminal-input-bg: #FFFFFF;
  19. --terminal-output-bg: #F5F5F5;
  20. --terminal-border: #E0E0E0;
  21. --terminal-selection: #BBDEFB;
  22. /* 字体 */
  23. --font-mono: 'Courier New', 'Consolas', 'Monaco', monospace;
  24. --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  25. }
  26. * {
  27. margin: 0;
  28. padding: 0;
  29. box-sizing: border-box;
  30. }
  31. /* Material Icons 全局样式 */
  32. .material-icons {
  33. font-family: 'Material Icons';
  34. font-weight: normal;
  35. font-style: normal;
  36. font-size: 24px;
  37. display: inline-block;
  38. line-height: 1;
  39. text-transform: none;
  40. letter-spacing: normal;
  41. word-wrap: normal;
  42. white-space: nowrap;
  43. direction: ltr;
  44. -webkit-font-smoothing: antialiased;
  45. text-rendering: optimizeLegibility;
  46. -moz-osx-font-smoothing: grayscale;
  47. font-feature-settings: 'liga';
  48. }
  49. body {
  50. font-family: var(--font-sans);
  51. background: var(--terminal-bg);
  52. color: var(--terminal-fg);
  53. height: 100vh;
  54. overflow: hidden;
  55. }
  56. /* 应用容器 */
  57. .app-container {
  58. display: flex;
  59. flex-direction: column;
  60. height: 100vh;
  61. background: var(--terminal-bg);
  62. }
  63. /* 顶部导航栏 */
  64. .top-nav {
  65. display: flex;
  66. align-items: center;
  67. justify-content: space-between;
  68. padding: 12px 20px;
  69. background: #FFFFFF;
  70. border-bottom: 1px solid var(--terminal-border);
  71. min-height: 56px;
  72. }
  73. .mdc-elevation--z4 {
  74. box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
  75. 0 4px 5px 0 rgba(0, 0, 0, 0.14),
  76. 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  77. }
  78. .nav-brand {
  79. display: flex;
  80. align-items: center;
  81. gap: 12px;
  82. font-size: 20px;
  83. font-weight: 500;
  84. color: var(--primary-color);
  85. }
  86. .nav-brand .material-icons {
  87. font-size: 28px;
  88. }
  89. .brand-text {
  90. font-weight: 500;
  91. letter-spacing: 0.5px;
  92. }
  93. .nav-actions {
  94. display: flex;
  95. gap: 8px;
  96. }
  97. .nav-btn {
  98. display: flex;
  99. align-items: center;
  100. justify-content: center;
  101. width: 40px;
  102. height: 40px;
  103. border: none;
  104. border-radius: 50%;
  105. background: transparent;
  106. color: var(--terminal-fg);
  107. cursor: pointer;
  108. transition: background 0.2s;
  109. }
  110. .nav-btn:hover {
  111. background: rgba(0, 0, 0, 0.04);
  112. }
  113. .nav-btn:active {
  114. background: rgba(0, 0, 0, 0.12);
  115. }
  116. .nav-btn .material-icons {
  117. font-size: 24px;
  118. }
  119. /* 终端容器 */
  120. .terminal-container {
  121. flex: 1;
  122. display: flex;
  123. flex-direction: column;
  124. overflow: hidden;
  125. background: var(--terminal-bg);
  126. padding: 16px 20px;
  127. position: relative;
  128. }
  129. /* 终端输出区域 */
  130. .terminal-output {
  131. flex: 1;
  132. overflow-y: auto;
  133. overflow-x: hidden;
  134. font-family: var(--font-mono);
  135. font-size: 14px;
  136. line-height: 1.6;
  137. padding-bottom: 16px;
  138. }
  139. .terminal-output::-webkit-scrollbar {
  140. width: 8px;
  141. }
  142. .terminal-output::-webkit-scrollbar-track {
  143. background: transparent;
  144. }
  145. .terminal-output::-webkit-scrollbar-thumb {
  146. background: #BDBDBD;
  147. border-radius: 4px;
  148. }
  149. .terminal-output::-webkit-scrollbar-thumb:hover {
  150. background: #9E9E9E;
  151. }
  152. /* 终端输出行 */
  153. .terminal-line {
  154. margin-bottom: 12px;
  155. animation: fadeIn 0.2s ease-out;
  156. }
  157. @keyframes fadeIn {
  158. from {
  159. opacity: 0;
  160. transform: translateY(-4px);
  161. }
  162. to {
  163. opacity: 1;
  164. transform: translateY(0);
  165. }
  166. }
  167. /* 命令输入显示 */
  168. .command-line {
  169. display: flex;
  170. gap: 8px;
  171. margin-bottom: 4px;
  172. color: var(--terminal-fg);
  173. }
  174. .command-prompt {
  175. color: var(--primary-color);
  176. font-weight: 600;
  177. flex-shrink: 0;
  178. min-width: 50px;
  179. }
  180. .command-text {
  181. color: var(--terminal-fg);
  182. word-break: break-all;
  183. flex: 1;
  184. }
  185. /* 结果输出 */
  186. .result-line {
  187. display: flex;
  188. gap: 8px;
  189. padding: 12px 16px;
  190. margin: 8px 0 8px 0;
  191. background: #FFFFFF;
  192. border-left: 3px solid var(--success-color);
  193. border-radius: 4px;
  194. color: var(--terminal-fg);
  195. word-break: break-word;
  196. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  197. }
  198. .result-prompt {
  199. color: var(--error-color);
  200. font-weight: 600;
  201. flex-shrink: 0;
  202. min-width: 50px;
  203. }
  204. .result-text {
  205. flex: 1;
  206. }
  207. /* 错误输出 */
  208. .error-line {
  209. padding: 12px 16px;
  210. margin: 8px 0 8px 0;
  211. background: var(--error-light);
  212. border-left: 3px solid var(--error-color);
  213. border-radius: 4px;
  214. color: var(--error-color);
  215. word-break: break-word;
  216. }
  217. /* 信息输出 */
  218. .info-line {
  219. padding: 12px 16px;
  220. margin: 8px 0 8px 0;
  221. background: var(--primary-light);
  222. border-left: 3px solid var(--primary-color);
  223. border-radius: 4px;
  224. color: var(--primary-dark);
  225. word-break: break-word;
  226. white-space: pre-wrap;
  227. }
  228. /* 警告输出 */
  229. .warning-line {
  230. padding: 12px 16px;
  231. margin: 8px 0 8px 24px;
  232. background: var(--warning-light);
  233. border-left: 3px solid var(--warning-color);
  234. border-radius: 4px;
  235. color: #E65100;
  236. word-break: break-word;
  237. }
  238. /* LaTeX 渲染输出 */
  239. .latex-line {
  240. display: flex;
  241. gap: 8px;
  242. padding: 16px;
  243. margin: 8px 0 8px 0;
  244. background: #FFFFFF;
  245. border-left: 3px solid var(--info-color);
  246. border-radius: 4px;
  247. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  248. }
  249. .latex-content {
  250. flex: 1;
  251. }
  252. .latex-rendered {
  253. text-align: center;
  254. margin: 12px 0;
  255. color: var(--terminal-fg);
  256. }
  257. .latex-source {
  258. font-family: var(--font-mono);
  259. font-size: 12px;
  260. color: #616161;
  261. background: #F5F5F5;
  262. padding: 8px 12px;
  263. border-radius: 4px;
  264. margin-top: 12px;
  265. word-break: break-all;
  266. }
  267. .latex-actions {
  268. margin-top: 12px;
  269. display: flex;
  270. gap: 8px;
  271. }
  272. .latex-btn {
  273. padding: 6px 12px;
  274. border: none;
  275. border-radius: 4px;
  276. font-size: 12px;
  277. font-weight: 500;
  278. cursor: pointer;
  279. transition: all 0.2s;
  280. }
  281. .latex-toggle {
  282. background: var(--info-color);
  283. color: #FFFFFF;
  284. }
  285. .latex-toggle:hover {
  286. background: #6A1B9A;
  287. }
  288. .latex-copy {
  289. background: var(--success-color);
  290. color: #FFFFFF;
  291. }
  292. .latex-copy:hover {
  293. background: #2E7D32;
  294. }
  295. .latex-source {
  296. font-family: var(--font-mono);
  297. font-size: 12px;
  298. color: #616161;
  299. background: #F5F5F5;
  300. padding: 8px 12px;
  301. border-radius: 4px;
  302. margin-top: 12px;
  303. display: none;
  304. word-break: break-all;
  305. }
  306. .latex-actions {
  307. margin-top: 12px;
  308. display: flex;
  309. gap: 8px;
  310. }
  311. .latex-btn {
  312. padding: 6px 12px;
  313. border: none;
  314. border-radius: 4px;
  315. font-size: 12px;
  316. font-weight: 500;
  317. cursor: pointer;
  318. transition: all 0.2s;
  319. }
  320. .latex-toggle {
  321. background: var(--info-color);
  322. color: #FFFFFF;
  323. }
  324. .latex-toggle:hover {
  325. background: #6A1B9A;
  326. }
  327. .latex-copy {
  328. background: var(--success-color);
  329. color: #FFFFFF;
  330. }
  331. .latex-copy:hover {
  332. background: #2E7D32;
  333. }
  334. /* 终端输入行 */
  335. .terminal-input-line {
  336. display: flex;
  337. align-items: center;
  338. gap: 12px;
  339. padding: 12px 16px;
  340. background: #FFFFFF;
  341. border: 2px solid var(--terminal-border);
  342. border-radius: 8px;
  343. margin-top: 16px;
  344. transition: border-color 0.2s;
  345. }
  346. .terminal-input-line:focus-within {
  347. border-color: var(--primary-color);
  348. box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
  349. }
  350. .terminal-prompt {
  351. font-family: var(--font-mono);
  352. font-size: 14px;
  353. font-weight: 500;
  354. color: var(--primary-color);
  355. flex-shrink: 0;
  356. user-select: none;
  357. }
  358. .terminal-input {
  359. flex: 1;
  360. border: none;
  361. outline: none;
  362. background: transparent;
  363. font-family: var(--font-mono);
  364. font-size: 14px;
  365. color: var(--terminal-fg);
  366. padding: 4px 0;
  367. }
  368. .terminal-input::placeholder {
  369. color: #9E9E9E;
  370. }
  371. .terminal-input::selection {
  372. background: var(--terminal-selection);
  373. }
  374. /* 自动补全列表 */
  375. .completion-list {
  376. display: none;
  377. position: fixed;
  378. bottom: 80px;
  379. left: 80px;
  380. right: 40px;
  381. max-height: 200px;
  382. overflow-y: auto;
  383. background: #FFFFFF;
  384. border: 1px solid var(--terminal-border);
  385. border-radius: 6px;
  386. box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  387. z-index: 100;
  388. }
  389. .completion-list.show {
  390. display: block;
  391. }
  392. .completion-item {
  393. padding: 8px 12px;
  394. cursor: pointer;
  395. font-family: var(--font-mono);
  396. font-size: 13px;
  397. color: var(--terminal-fg);
  398. border-bottom: 1px solid #F5F5F5;
  399. transition: background 0.1s;
  400. }
  401. .completion-item:last-child {
  402. border-bottom: none;
  403. }
  404. .completion-item:hover {
  405. background: var(--primary-light);
  406. color: var(--primary-dark);
  407. }
  408. .completion-item:active {
  409. background: var(--primary-color);
  410. color: #FFFFFF;
  411. }
  412. .completion-list::-webkit-scrollbar {
  413. width: 6px;
  414. }
  415. .completion-list::-webkit-scrollbar-track {
  416. background: #F5F5F5;
  417. }
  418. .completion-list::-webkit-scrollbar-thumb {
  419. background: #BDBDBD;
  420. border-radius: 3px;
  421. }
  422. /* 快捷键提示栏 */
  423. .shortcuts-bar {
  424. display: flex;
  425. align-items: center;
  426. justify-content: flex-start;
  427. padding: 12px 20px;
  428. background: #FFFFFF;
  429. border-top: 1px solid var(--terminal-border);
  430. gap: 8px;
  431. overflow-x: auto;
  432. }
  433. .mdc-elevation--z2 {
  434. box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
  435. 0 2px 2px 0 rgba(0, 0, 0, 0.14),
  436. 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  437. }
  438. .shortcuts-group {
  439. display: flex;
  440. gap: 8px;
  441. flex-shrink: 0;
  442. }
  443. .shortcut-btn {
  444. display: flex;
  445. align-items: center;
  446. justify-content: center;
  447. min-width: 36px;
  448. height: 36px;
  449. padding: 0 12px;
  450. border: 1px solid var(--terminal-border);
  451. border-radius: 6px;
  452. background: #FAFAFA;
  453. color: var(--terminal-fg);
  454. font-family: var(--font-mono);
  455. font-size: 14px;
  456. font-weight: 500;
  457. cursor: pointer;
  458. transition: all 0.2s;
  459. }
  460. .shortcut-btn:hover {
  461. background: var(--primary-light);
  462. border-color: var(--primary-color);
  463. color: var(--primary-dark);
  464. }
  465. .shortcut-btn:active {
  466. transform: scale(0.95);
  467. }
  468. .shortcut-btn .material-icons {
  469. font-size: 20px;
  470. font-family: 'Material Icons';
  471. font-weight: normal;
  472. font-style: normal;
  473. display: inline-block;
  474. line-height: 1;
  475. text-transform: none;
  476. letter-spacing: normal;
  477. word-wrap: normal;
  478. white-space: nowrap;
  479. direction: ltr;
  480. -webkit-font-smoothing: antialiased;
  481. text-rendering: optimizeLegibility;
  482. -moz-osx-font-smoothing: grayscale;
  483. font-feature-settings: 'liga';
  484. }
  485. .icon-symbol {
  486. font-size: 18px;
  487. font-weight: 500;
  488. display: inline-block;
  489. line-height: 1;
  490. }
  491. .shortcut-key {
  492. font-family: var(--font-mono);
  493. }
  494. /* 帮助页面 */
  495. .help-page {
  496. position: fixed;
  497. top: 0;
  498. left: 0;
  499. width: 100%;
  500. height: 100%;
  501. background: rgba(0, 0, 0, 0.5);
  502. display: none;
  503. align-items: center;
  504. justify-content: center;
  505. z-index: 1000;
  506. animation: fadeIn 0.2s;
  507. }
  508. .help-page.show {
  509. display: flex;
  510. }
  511. .help-container {
  512. width: 90%;
  513. max-width: 900px;
  514. max-height: 90vh;
  515. background: #FFFFFF;
  516. border-radius: 12px;
  517. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  518. display: flex;
  519. flex-direction: column;
  520. overflow: hidden;
  521. animation: slideUp 0.3s ease-out;
  522. }
  523. @keyframes slideUp {
  524. from {
  525. transform: translateY(50px);
  526. opacity: 0;
  527. }
  528. to {
  529. transform: translateY(0);
  530. opacity: 1;
  531. }
  532. }
  533. .help-header {
  534. display: flex;
  535. align-items: center;
  536. justify-content: flex-end;
  537. padding: 12px 16px;
  538. background: #FFB7C5;
  539. color: #FFFFFF;
  540. border-bottom: 1px solid #FF9FB0;
  541. }
  542. .close-help-btn {
  543. display: flex;
  544. align-items: center;
  545. justify-content: center;
  546. width: 36px;
  547. height: 36px;
  548. border: none;
  549. border-radius: 50%;
  550. background: rgba(255, 255, 255, 0.2);
  551. color: #FFFFFF;
  552. font-size: 20px;
  553. cursor: pointer;
  554. transition: background 0.2s;
  555. }
  556. .close-help-btn:hover {
  557. background: rgba(255, 255, 255, 0.3);
  558. }
  559. .close-help-btn .icon-symbol {
  560. font-size: 20px;
  561. }
  562. .help-content {
  563. flex: 1;
  564. overflow-y: auto;
  565. padding: 0;
  566. }
  567. .help-content::-webkit-scrollbar {
  568. width: 8px;
  569. }
  570. .help-content::-webkit-scrollbar-track {
  571. background: #F5F5F5;
  572. }
  573. .help-content::-webkit-scrollbar-thumb {
  574. background: #BDBDBD;
  575. border-radius: 4px;
  576. }
  577. .help-table {
  578. width: 100%;
  579. border-collapse: collapse;
  580. font-size: 14px;
  581. }
  582. .help-table thead {
  583. position: sticky;
  584. top: 0;
  585. background: #FFB7C5;
  586. color: #FFFFFF;
  587. z-index: 10;
  588. }
  589. .help-table th {
  590. padding: 12px 16px;
  591. text-align: left;
  592. font-weight: 500;
  593. border-bottom: 2px solid #FF9FB0;
  594. }
  595. .help-table td {
  596. padding: 10px 16px;
  597. border-bottom: 1px solid var(--terminal-border);
  598. vertical-align: top;
  599. }
  600. .help-table td:first-child {
  601. color: #424242;
  602. white-space: nowrap;
  603. width: 140px;
  604. }
  605. .help-table td:nth-child(2) {
  606. font-family: var(--font-mono);
  607. font-size: 13px;
  608. color: var(--terminal-fg);
  609. word-break: break-all;
  610. }
  611. .help-table tbody tr:hover td {
  612. background: #FFE4E9;
  613. }
  614. /* 插件面板 - 保持原样但调整颜色 */
  615. .plugin-panel {
  616. position: fixed;
  617. top: 0;
  618. right: -100%;
  619. width: 90%;
  620. max-width: 500px;
  621. height: 100vh;
  622. background: #FFFFFF;
  623. box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
  624. transition: right 0.3s ease-out;
  625. z-index: 1000;
  626. display: flex;
  627. flex-direction: column;
  628. }
  629. .plugin-panel.show {
  630. right: 0;
  631. }
  632. /* 响应式设计 */
  633. @media (max-width: 600px) {
  634. .top-nav {
  635. padding: 8px 16px;
  636. }
  637. .nav-brand {
  638. font-size: 18px;
  639. }
  640. .nav-brand .material-icons {
  641. font-size: 24px;
  642. }
  643. .terminal-container {
  644. padding: 12px 16px;
  645. }
  646. .terminal-output {
  647. font-size: 13px;
  648. }
  649. .terminal-input {
  650. font-size: 13px;
  651. }
  652. .shortcuts-bar {
  653. padding: 8px 16px;
  654. }
  655. .help-container {
  656. width: 95%;
  657. max-height: 95vh;
  658. }
  659. .help-content {
  660. padding: 16px;
  661. }
  662. }
  663. /* 欢迎消息样式 */
  664. .welcome-message {
  665. padding: 20px;
  666. margin: 16px 0;
  667. background: linear-gradient(135deg, var(--primary-light) 0%, var(--info-light) 100%);
  668. border-radius: 8px;
  669. border-left: 4px solid var(--primary-color);
  670. }
  671. .welcome-message h2 {
  672. color: var(--primary-dark);
  673. font-size: 18px;
  674. font-weight: 500;
  675. margin-bottom: 12px;
  676. }
  677. .welcome-message p {
  678. color: #424242;
  679. line-height: 1.6;
  680. margin: 8px 0;
  681. }
  682. .welcome-message code {
  683. font-family: var(--font-mono);
  684. background: rgba(255, 255, 255, 0.7);
  685. padding: 2px 6px;
  686. border-radius: 3px;
  687. color: var(--primary-dark);
  688. }
  689. /* 插件面板样式 */
  690. .plugin-panel {
  691. position: fixed;
  692. top: 0;
  693. right: -100%;
  694. width: 90%;
  695. max-width: 500px;
  696. height: 100vh;
  697. background: #FFF5F7;
  698. box-shadow: -4px 0 16px rgba(255, 183, 197, 0.3);
  699. transition: right 0.3s ease-out;
  700. z-index: 1000;
  701. display: flex;
  702. flex-direction: column;
  703. }
  704. .plugin-panel.show {
  705. right: 0;
  706. }
  707. .plugin-panel-header {
  708. display: flex;
  709. align-items: center;
  710. justify-content: space-between;
  711. padding: 20px 24px;
  712. background: #FFB7C5;
  713. color: #FFFFFF;
  714. border-bottom: 1px solid #FF9FB0;
  715. }
  716. .plugin-panel-header h2 {
  717. font-size: 20px;
  718. font-weight: 500;
  719. }
  720. .close-btn {
  721. width: 32px;
  722. height: 32px;
  723. border: none;
  724. border-radius: 50%;
  725. background: rgba(255, 255, 255, 0.2);
  726. color: #FFFFFF;
  727. font-size: 20px;
  728. cursor: pointer;
  729. transition: background 0.2s;
  730. }
  731. .close-btn:hover {
  732. background: rgba(255, 255, 255, 0.3);
  733. }
  734. .plugin-panel-tabs {
  735. display: flex;
  736. background: #FFE4E9;
  737. border-bottom: 1px solid #FFCDD6;
  738. }
  739. .plugin-tab {
  740. flex: 1;
  741. padding: 12px 16px;
  742. border: none;
  743. background: transparent;
  744. color: #8B5A6B;
  745. font-size: 14px;
  746. font-weight: 500;
  747. cursor: pointer;
  748. border-bottom: 2px solid transparent;
  749. transition: all 0.2s;
  750. }
  751. .plugin-tab:hover {
  752. background: rgba(255, 183, 197, 0.2);
  753. }
  754. .plugin-tab.active {
  755. color: #D84A6B;
  756. border-bottom-color: #FFB7C5;
  757. background: #FFF5F7;
  758. }
  759. .tab-content {
  760. display: none;
  761. flex: 1;
  762. overflow-y: auto;
  763. overflow-x: hidden;
  764. padding: 20px;
  765. }
  766. .tab-content.active {
  767. display: flex;
  768. flex-direction: column;
  769. }
  770. .plugin-list {
  771. flex-direction: column;
  772. gap: 12px;
  773. }
  774. .plugin-item {
  775. display: flex;
  776. gap: 16px;
  777. padding: 16px;
  778. background: #FFFFFF;
  779. border: 1px solid #FFCDD6;
  780. border-radius: 8px;
  781. cursor: pointer;
  782. transition: all 0.2s;
  783. }
  784. .plugin-item:hover {
  785. background: #FFE4E9;
  786. border-color: #FFB7C5;
  787. transform: translateY(-2px);
  788. box-shadow: 0 4px 8px rgba(255, 183, 197, 0.2);
  789. }
  790. .plugin-icon {
  791. font-size: 32px;
  792. flex-shrink: 0;
  793. }
  794. .plugin-info {
  795. flex: 1;
  796. }
  797. .plugin-name {
  798. font-size: 16px;
  799. font-weight: 500;
  800. color: #5A3A47;
  801. margin-bottom: 4px;
  802. }
  803. .plugin-desc {
  804. font-size: 13px;
  805. color: #8B5A6B;
  806. line-height: 1.4;
  807. }
  808. .plugin-command {
  809. font-size: 12px;
  810. color: #D84A6B;
  811. margin-top: 4px;
  812. font-family: var(--font-mono);
  813. }
  814. .no-plugins {
  815. text-align: center;
  816. padding: 40px 20px;
  817. color: #C99AA8;
  818. font-size: 14px;
  819. }
  820. /* 插件文档样式 */
  821. .plugin-docs {
  822. font-size: 14px;
  823. line-height: 1.6;
  824. }
  825. .doc-section {
  826. margin-bottom: 24px;
  827. }
  828. .doc-section h3 {
  829. color: var(--primary-color);
  830. font-size: 18px;
  831. font-weight: 500;
  832. margin-bottom: 12px;
  833. }
  834. .doc-section h4 {
  835. color: var(--terminal-fg);
  836. font-size: 16px;
  837. font-weight: 500;
  838. margin: 16px 0 8px 0;
  839. }
  840. .doc-section h5 {
  841. color: var(--terminal-fg);
  842. font-size: 14px;
  843. font-weight: 500;
  844. margin: 12px 0 8px 0;
  845. }
  846. .doc-section p {
  847. margin: 8px 0;
  848. color: #424242;
  849. }
  850. .doc-section ul {
  851. margin: 8px 0 8px 20px;
  852. }
  853. .doc-section li {
  854. margin: 4px 0;
  855. color: #424242;
  856. }
  857. .doc-section code {
  858. font-family: var(--font-mono);
  859. font-size: 13px;
  860. background: #F5F5F5;
  861. padding: 2px 6px;
  862. border-radius: 3px;
  863. color: var(--primary-dark);
  864. }
  865. .code-block {
  866. font-family: var(--font-mono);
  867. font-size: 12px;
  868. background: #F5F5F5;
  869. padding: 12px;
  870. border-radius: 6px;
  871. border-left: 3px solid var(--primary-color);
  872. overflow-x: auto;
  873. margin: 12px 0;
  874. white-space: pre-wrap;
  875. word-break: break-word;
  876. }
  877. .api-table {
  878. width: 100%;
  879. border-collapse: collapse;
  880. margin: 12px 0;
  881. font-size: 13px;
  882. }
  883. .api-table th,
  884. .api-table td {
  885. padding: 8px 12px;
  886. border: 1px solid var(--terminal-border);
  887. text-align: left;
  888. }
  889. .api-table th {
  890. background: var(--primary-light);
  891. color: var(--primary-dark);
  892. font-weight: 500;
  893. }
  894. .api-table tr:nth-child(even) {
  895. background: #FAFAFA;
  896. }
  897. .api-table code {
  898. background: rgba(25, 118, 210, 0.1);
  899. }
  900. /* 插件导入/分享样式 */
  901. .plugin-import {
  902. flex-direction: column;
  903. gap: 24px;
  904. }
  905. .import-section {
  906. padding: 16px;
  907. background: #FFFFFF;
  908. border-radius: 8px;
  909. border: 1px solid #FFCDD6;
  910. }
  911. .import-section h3 {
  912. color: #D84A6B;
  913. font-size: 16px;
  914. font-weight: 500;
  915. margin-bottom: 8px;
  916. }
  917. .import-section p {
  918. color: #8B5A6B;
  919. font-size: 13px;
  920. margin-bottom: 12px;
  921. }
  922. .share-select {
  923. width: 100%;
  924. padding: 10px 12px;
  925. border: 1px solid #FFCDD6;
  926. border-radius: 6px;
  927. background: #FFFFFF;
  928. font-size: 14px;
  929. margin-bottom: 12px;
  930. cursor: pointer;
  931. transition: border-color 0.2s;
  932. }
  933. .share-select:focus {
  934. outline: none;
  935. border-color: #FFB7C5;
  936. }
  937. .share-textarea {
  938. width: 100%;
  939. min-height: 150px;
  940. padding: 12px;
  941. border: 1px solid #FFCDD6;
  942. border-radius: 6px;
  943. font-family: var(--font-mono);
  944. font-size: 12px;
  945. resize: vertical;
  946. margin-bottom: 12px;
  947. transition: border-color 0.2s;
  948. }
  949. .share-textarea:focus {
  950. outline: none;
  951. border-color: #FFB7C5;
  952. }
  953. .action-btn {
  954. padding: 10px 20px;
  955. border: none;
  956. border-radius: 6px;
  957. background: #FFB7C5;
  958. color: #FFFFFF;
  959. font-size: 14px;
  960. font-weight: 500;
  961. cursor: pointer;
  962. transition: all 0.2s;
  963. margin-right: 8px;
  964. }
  965. .action-btn:hover {
  966. background: #FF9FB0;
  967. transform: translateY(-1px);
  968. box-shadow: 0 2px 4px rgba(255, 183, 197, 0.3);
  969. }
  970. .action-btn.secondary {
  971. background: #FFC9D4;
  972. }
  973. .action-btn.secondary:hover {
  974. background: #FFB7C5;
  975. }
  976. .action-btn.danger {
  977. background: #FF6B8A;
  978. }
  979. .action-btn.danger:hover {
  980. background: #FF5278;
  981. }
  982. .plugin-path {
  983. font-size: 13px;
  984. color: #424242;
  985. line-height: 1.6;
  986. }
  987. .plugin-path code {
  988. font-family: var(--font-mono);
  989. font-size: 12px;
  990. background: #F5F5F5;
  991. padding: 4px 8px;
  992. border-radius: 3px;
  993. display: block;
  994. margin: 8px 0;
  995. word-break: break-all;
  996. }
  997. /* 插件对话框样式 */
  998. .plugin-dialog {
  999. position: fixed;
  1000. top: 0;
  1001. left: 0;
  1002. width: 100%;
  1003. height: 100%;
  1004. background: rgba(0, 0, 0, 0.5);
  1005. display: none;
  1006. align-items: center;
  1007. justify-content: center;
  1008. z-index: 2000;
  1009. animation: fadeIn 0.2s;
  1010. }
  1011. .plugin-dialog.show {
  1012. display: flex;
  1013. }
  1014. .plugin-dialog-content {
  1015. width: 90%;
  1016. max-width: 600px;
  1017. max-height: 90vh;
  1018. background: #FFFFFF;
  1019. border-radius: 12px;
  1020. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  1021. display: flex;
  1022. flex-direction: column;
  1023. overflow: hidden;
  1024. animation: slideUp 0.3s ease-out;
  1025. }
  1026. .plugin-dialog-header {
  1027. display: flex;
  1028. align-items: center;
  1029. justify-content: space-between;
  1030. padding: 20px 24px;
  1031. background: #FFB7C5;
  1032. color: #FFFFFF;
  1033. }
  1034. .plugin-dialog-header h3 {
  1035. font-size: 20px;
  1036. font-weight: 500;
  1037. }
  1038. .plugin-dialog-desc {
  1039. padding: 16px 24px;
  1040. color: #8B5A6B;
  1041. font-size: 14px;
  1042. border-bottom: 1px solid #FFCDD6;
  1043. background: #FFF5F7;
  1044. }
  1045. .plugin-inputs {
  1046. flex: 1;
  1047. overflow-y: auto;
  1048. padding: 20px 24px;
  1049. }
  1050. .input-group {
  1051. margin-bottom: 16px;
  1052. }
  1053. .input-group label {
  1054. display: block;
  1055. font-size: 14px;
  1056. font-weight: 500;
  1057. color: var(--terminal-fg);
  1058. margin-bottom: 6px;
  1059. }
  1060. .input-group input {
  1061. width: 100%;
  1062. padding: 10px 12px;
  1063. border: 1px solid var(--terminal-border);
  1064. border-radius: 6px;
  1065. font-size: 14px;
  1066. transition: border-color 0.2s;
  1067. }
  1068. .input-group input:focus {
  1069. outline: none;
  1070. border-color: var(--primary-color);
  1071. box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
  1072. }
  1073. .plugin-dialog-actions {
  1074. display: flex;
  1075. gap: 12px;
  1076. padding: 16px 24px;
  1077. background: #FAFAFA;
  1078. border-top: 1px solid var(--terminal-border);
  1079. }
  1080. .execute-btn {
  1081. flex: 1;
  1082. padding: 12px 24px;
  1083. border: none;
  1084. border-radius: 6px;
  1085. background: var(--primary-color);
  1086. color: #FFFFFF;
  1087. font-size: 14px;
  1088. font-weight: 500;
  1089. cursor: pointer;
  1090. transition: all 0.2s;
  1091. }
  1092. .execute-btn:hover {
  1093. background: var(--primary-dark);
  1094. transform: translateY(-1px);
  1095. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  1096. }
  1097. .cancel-btn {
  1098. flex: 1;
  1099. padding: 12px 24px;
  1100. border: 1px solid var(--terminal-border);
  1101. border-radius: 6px;
  1102. background: #FFFFFF;
  1103. color: var(--terminal-fg);
  1104. font-size: 14px;
  1105. font-weight: 500;
  1106. cursor: pointer;
  1107. transition: all 0.2s;
  1108. }
  1109. .cancel-btn:hover {
  1110. background: #F5F5F5;
  1111. }
  1112. /* 绘图对话框样式 */
  1113. .plot-dialog-content {
  1114. max-width: 900px;
  1115. max-height: 95vh;
  1116. }
  1117. .plot-info {
  1118. padding: 12px 24px;
  1119. background: #FFE4E9;
  1120. color: #8B5A6B;
  1121. font-family: var(--font-mono);
  1122. font-size: 12px;
  1123. border-bottom: 1px solid #FFCDD6;
  1124. text-align: center;
  1125. }
  1126. .plot-container {
  1127. padding: 20px;
  1128. background: #FFF5F7;
  1129. display: flex;
  1130. justify-content: center;
  1131. align-items: center;
  1132. }
  1133. #plotCanvas {
  1134. max-width: 100%;
  1135. height: auto;
  1136. border: 2px solid #FFCDD6;
  1137. border-radius: 8px;
  1138. box-shadow: 0 4px 12px rgba(255, 183, 197, 0.2);
  1139. }
  1140. /* 插件信息输出(通过 Symja.print 输出的内容)*/
  1141. .plugin-info-line {
  1142. padding: 10px 16px;
  1143. margin: 4px 0 4px 24px;
  1144. background: #FFF9E6;
  1145. border-left: 3px solid #FFC107;
  1146. border-radius: 4px;
  1147. color: #5D4037;
  1148. font-size: 13px;
  1149. word-break: break-word;
  1150. white-space: pre-wrap;
  1151. }
  1152. /* 插件结果输出(插件的返回值)*/
  1153. .plugin-line {
  1154. display: flex;
  1155. gap: 8px;
  1156. padding: 12px 16px;
  1157. margin: 8px 0 8px 0;
  1158. background: #E8F5E9;
  1159. border-left: 3px solid #4CAF50;
  1160. border-radius: 4px;
  1161. color: #1B5E20;
  1162. word-break: break-word;
  1163. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  1164. font-weight: 500;
  1165. }
  1166. /* 反馈样式 */
  1167. .feedback-line {
  1168. display: flex;
  1169. gap: 12px;
  1170. padding: 12px 16px;
  1171. background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%);
  1172. border-radius: 6px;
  1173. border-left: 3px solid var(--primary-color);
  1174. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  1175. max-width: 100%;
  1176. overflow: hidden;
  1177. }
  1178. .feedback-icon {
  1179. font-size: 24px;
  1180. flex-shrink: 0;
  1181. line-height: 1;
  1182. }
  1183. .feedback-content {
  1184. flex: 1;
  1185. min-width: 0;
  1186. }
  1187. .feedback-title {
  1188. font-size: 15px;
  1189. font-weight: 500;
  1190. color: var(--primary-dark);
  1191. margin-bottom: 4px;
  1192. }
  1193. .feedback-text {
  1194. font-size: 13px;
  1195. color: #424242;
  1196. line-height: 1.4;
  1197. margin-bottom: 8px;
  1198. }
  1199. .feedback-email-container {
  1200. display: flex;
  1201. align-items: center;
  1202. gap: 8px;
  1203. padding: 8px 12px;
  1204. background: #FFFFFF;
  1205. border-radius: 4px;
  1206. border: 1px solid var(--terminal-border);
  1207. max-width: 100%;
  1208. overflow: hidden;
  1209. }
  1210. .feedback-email {
  1211. flex: 1;
  1212. font-family: var(--font-mono);
  1213. font-size: 13px;
  1214. color: var(--primary-color);
  1215. font-weight: 500;
  1216. overflow: hidden;
  1217. text-overflow: ellipsis;
  1218. white-space: nowrap;
  1219. }
  1220. .feedback-copy-btn {
  1221. padding: 6px 12px;
  1222. border: none;
  1223. border-radius: 4px;
  1224. background: var(--primary-color);
  1225. color: #FFFFFF;
  1226. font-size: 12px;
  1227. font-weight: 500;
  1228. cursor: pointer;
  1229. transition: all 0.2s;
  1230. white-space: nowrap;
  1231. flex-shrink: 0;
  1232. }
  1233. .feedback-copy-btn:hover {
  1234. background: var(--primary-dark);
  1235. transform: translateY(-1px);
  1236. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  1237. }
  1238. .feedback-copy-btn:active {
  1239. transform: translateY(0);
  1240. }