styles.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705
  1. @keyframes loading {
  2. 0% {
  3. transform: rotate(0deg);
  4. }
  5. 100% {
  6. transform: rotate(360deg);
  7. }
  8. }
  9. .workspace-leaf-content[data-type="git-view"] .button-border {
  10. border: 2px solid var(--interactive-accent);
  11. border-radius: var(--radius-s);
  12. }
  13. .workspace-leaf-content[data-type="git-view"] .view-content {
  14. padding-left: 0;
  15. padding-top: 0;
  16. padding-right: 0;
  17. }
  18. .workspace-leaf-content[data-type="git-history-view"] .view-content {
  19. padding-left: 0;
  20. padding-top: 0;
  21. padding-right: 0;
  22. }
  23. .loading {
  24. overflow: hidden;
  25. }
  26. .loading > svg {
  27. animation: 2s linear infinite loading;
  28. transform-origin: 50% 50%;
  29. display: inline-block;
  30. }
  31. .obsidian-git-center {
  32. margin: auto;
  33. text-align: center;
  34. width: 50%;
  35. }
  36. .obsidian-git-textarea {
  37. display: block;
  38. margin-left: auto;
  39. margin-right: auto;
  40. }
  41. .obsidian-git-disabled {
  42. opacity: 0.5;
  43. }
  44. .obsidian-git-center-button {
  45. display: block;
  46. margin: 20px auto;
  47. }
  48. .tooltip.mod-left {
  49. overflow-wrap: break-word;
  50. }
  51. .tooltip.mod-right {
  52. overflow-wrap: break-word;
  53. }
  54. /* Limits the scrollbar to the view body */
  55. .git-view {
  56. display: flex;
  57. flex-direction: column;
  58. position: relative;
  59. height: 100%;
  60. }
  61. /* Re-enable wrapping of nav buttns to prevent overflow on smaller screens #*/
  62. .workspace-drawer .git-view .nav-buttons-container {
  63. flex-wrap: wrap;
  64. }
  65. .git-tools {
  66. display: flex;
  67. margin-left: auto;
  68. }
  69. .git-tools .type {
  70. padding-left: var(--size-2-1);
  71. display: flex;
  72. align-items: center;
  73. justify-content: center;
  74. width: 11px;
  75. }
  76. .git-tools .type[data-type="M"] {
  77. color: orange;
  78. }
  79. .git-tools .type[data-type="D"] {
  80. color: red;
  81. }
  82. .git-tools .buttons {
  83. display: flex;
  84. }
  85. .git-tools .buttons > * {
  86. padding: 0;
  87. height: auto;
  88. }
  89. .workspace-leaf-content[data-type="git-view"] .tree-item-self,
  90. .workspace-leaf-content[data-type="git-history-view"] .tree-item-self {
  91. align-items: center;
  92. }
  93. .workspace-leaf-content[data-type="git-view"]
  94. .tree-item-self:hover
  95. .clickable-icon,
  96. .workspace-leaf-content[data-type="git-history-view"]
  97. .tree-item-self:hover
  98. .clickable-icon {
  99. color: var(--icon-color-hover);
  100. }
  101. /* Highlight an item as active if it's diff is currently opened */
  102. .is-active .git-tools .buttons > * {
  103. color: var(--nav-item-color-active);
  104. }
  105. .git-author {
  106. color: var(--text-accent);
  107. }
  108. .git-date {
  109. color: var(--text-accent);
  110. }
  111. .git-ref {
  112. color: var(--text-accent);
  113. }
  114. /* ====== diff2html ======
  115. The following styles are adapted from the obsidian-version-history plugin by
  116. @kometenstaub https://github.com/kometenstaub/obsidian-version-history-diff/blob/main/src/styles.scss
  117. which itself is adapted from the diff2html library with the following original license:
  118. https://github.com/rtfpessoa/diff2html/blob/master/LICENSE.md
  119. Copyright 2014-2016 Rodrigo Fernandes https://rtfpessoa.github.io/
  120. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
  121. documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
  122. rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
  123. persons to whom the Software is furnished to do so, subject to the following conditions:
  124. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
  125. Software.
  126. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
  127. WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  128. COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
  129. OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  130. */
  131. .theme-dark,
  132. .theme-light {
  133. --git-delete-bg: #ff475040;
  134. --git-delete-hl: #96050a75;
  135. --git-insert-bg: #68d36840;
  136. --git-insert-hl: #23c02350;
  137. --git-change-bg: #ffd55840;
  138. --git-selected: #3572b0;
  139. --git-delete: #cc3333;
  140. --git-insert: #399839;
  141. --git-change: #d0b44c;
  142. --git-move: #3572b0;
  143. }
  144. .git-diff {
  145. .d2h-d-none {
  146. display: none;
  147. }
  148. .d2h-wrapper {
  149. text-align: left;
  150. border-radius: 0.25em;
  151. overflow: auto;
  152. }
  153. .d2h-file-header.d2h-file-header {
  154. background-color: var(--background-secondary);
  155. border-bottom: 1px solid var(--background-modifier-border);
  156. font-family:
  157. Source Sans Pro,
  158. Helvetica Neue,
  159. Helvetica,
  160. Arial,
  161. sans-serif;
  162. height: 35px;
  163. padding: 5px 10px;
  164. }
  165. .d2h-file-header,
  166. .d2h-file-stats {
  167. display: -webkit-box;
  168. display: -ms-flexbox;
  169. display: flex;
  170. }
  171. .d2h-file-header {
  172. display: none;
  173. }
  174. .d2h-file-stats {
  175. font-size: 14px;
  176. margin-left: auto;
  177. }
  178. .d2h-lines-added {
  179. border: 1px solid var(--color-green);
  180. border-radius: 5px 0 0 5px;
  181. color: var(--color-green);
  182. padding: 2px;
  183. text-align: right;
  184. vertical-align: middle;
  185. }
  186. .d2h-lines-deleted {
  187. border: 1px solid var(--color-red);
  188. border-radius: 0 5px 5px 0;
  189. color: var(--color-red);
  190. margin-left: 1px;
  191. padding: 2px;
  192. text-align: left;
  193. vertical-align: middle;
  194. }
  195. .d2h-file-name-wrapper {
  196. -webkit-box-align: center;
  197. -ms-flex-align: center;
  198. align-items: center;
  199. display: -webkit-box;
  200. display: -ms-flexbox;
  201. display: flex;
  202. font-size: 15px;
  203. width: 100%;
  204. }
  205. .d2h-file-name {
  206. overflow: hidden;
  207. text-overflow: ellipsis;
  208. white-space: nowrap;
  209. color: var(--text-normal);
  210. font-size: var(--h5-size);
  211. }
  212. .d2h-file-wrapper {
  213. border: 1px solid var(--background-secondary-alt);
  214. border-radius: 3px;
  215. margin-bottom: 1em;
  216. max-height: 100%;
  217. }
  218. .d2h-file-collapse {
  219. -webkit-box-pack: end;
  220. -ms-flex-pack: end;
  221. -webkit-box-align: center;
  222. -ms-flex-align: center;
  223. align-items: center;
  224. border: 1px solid var(--background-secondary-alt);
  225. border-radius: 3px;
  226. cursor: pointer;
  227. display: none;
  228. font-size: 12px;
  229. justify-content: flex-end;
  230. padding: 4px 8px;
  231. }
  232. .d2h-file-collapse.d2h-selected {
  233. background-color: var(--git-selected);
  234. }
  235. .d2h-file-collapse-input {
  236. margin: 0 4px 0 0;
  237. }
  238. .d2h-diff-table {
  239. border-collapse: collapse;
  240. font-family: var(--font-monospace);
  241. font-size: var(--code-size);
  242. width: 100%;
  243. }
  244. .d2h-files-diff {
  245. width: 100%;
  246. }
  247. .d2h-file-diff {
  248. /*
  249. overflow-y: scroll;
  250. */
  251. border-radius: 5px;
  252. font-size: var(--font-text-size);
  253. line-height: var(--line-height-normal);
  254. }
  255. .d2h-file-side-diff {
  256. display: inline-block;
  257. margin-bottom: -8px;
  258. margin-right: -4px;
  259. overflow-x: scroll;
  260. overflow-y: hidden;
  261. width: 50%;
  262. }
  263. .d2h-code-line {
  264. padding-left: 6em;
  265. padding-right: 1.5em;
  266. }
  267. .d2h-code-line,
  268. .d2h-code-side-line {
  269. display: inline-block;
  270. -webkit-user-select: none;
  271. -moz-user-select: none;
  272. -ms-user-select: none;
  273. user-select: none;
  274. white-space: nowrap;
  275. width: 100%;
  276. }
  277. .d2h-code-side-line {
  278. /* needed to be changed */
  279. padding-left: 0.5em;
  280. padding-right: 0.5em;
  281. }
  282. .d2h-code-line-ctn {
  283. word-wrap: normal;
  284. background: none;
  285. display: inline-block;
  286. padding: 0;
  287. -webkit-user-select: text;
  288. -moz-user-select: text;
  289. -ms-user-select: text;
  290. user-select: text;
  291. vertical-align: middle;
  292. width: 100%;
  293. /* only works for line-by-line */
  294. white-space: pre-wrap;
  295. }
  296. .d2h-code-line del,
  297. .d2h-code-side-line del {
  298. background-color: var(--git-delete-hl);
  299. color: var(--text-normal);
  300. }
  301. .d2h-code-line del,
  302. .d2h-code-line ins,
  303. .d2h-code-side-line del,
  304. .d2h-code-side-line ins {
  305. border-radius: 0.2em;
  306. display: inline-block;
  307. margin-top: -1px;
  308. text-decoration: none;
  309. vertical-align: middle;
  310. }
  311. .d2h-code-line ins,
  312. .d2h-code-side-line ins {
  313. background-color: var(--git-insert-hl);
  314. text-align: left;
  315. }
  316. .d2h-code-line-prefix {
  317. word-wrap: normal;
  318. background: none;
  319. display: inline;
  320. padding: 0;
  321. white-space: pre;
  322. }
  323. .line-num1 {
  324. float: left;
  325. }
  326. .line-num1,
  327. .line-num2 {
  328. -webkit-box-sizing: border-box;
  329. box-sizing: border-box;
  330. overflow: hidden;
  331. /*
  332. padding: 0 0.5em;
  333. */
  334. text-overflow: ellipsis;
  335. width: 2.5em;
  336. padding-left: 0;
  337. }
  338. .line-num2 {
  339. float: right;
  340. }
  341. .d2h-code-linenumber {
  342. background-color: var(--background-primary);
  343. border: solid var(--background-modifier-border);
  344. border-width: 0 1px;
  345. -webkit-box-sizing: border-box;
  346. box-sizing: border-box;
  347. color: var(--text-faint);
  348. cursor: pointer;
  349. display: inline-block;
  350. position: absolute;
  351. text-align: right;
  352. width: 5.5em;
  353. }
  354. .d2h-code-linenumber:after {
  355. content: "\200b";
  356. }
  357. .d2h-code-side-linenumber {
  358. background-color: var(--background-primary);
  359. border: solid var(--background-modifier-border);
  360. border-width: 0 1px;
  361. -webkit-box-sizing: border-box;
  362. box-sizing: border-box;
  363. color: var(--text-faint);
  364. cursor: pointer;
  365. overflow: hidden;
  366. padding: 0 0.5em;
  367. text-align: right;
  368. text-overflow: ellipsis;
  369. width: 4em;
  370. /* needed to be changed */
  371. display: table-cell;
  372. position: relative;
  373. }
  374. .d2h-code-side-linenumber:after {
  375. content: "\200b";
  376. }
  377. .d2h-code-side-emptyplaceholder,
  378. .d2h-emptyplaceholder {
  379. background-color: var(--background-primary);
  380. border-color: var(--background-modifier-border);
  381. }
  382. .d2h-code-line-prefix,
  383. .d2h-code-linenumber,
  384. .d2h-code-side-linenumber,
  385. .d2h-emptyplaceholder {
  386. -webkit-user-select: none;
  387. -moz-user-select: none;
  388. -ms-user-select: none;
  389. user-select: none;
  390. }
  391. .d2h-code-linenumber,
  392. .d2h-code-side-linenumber {
  393. direction: rtl;
  394. }
  395. .d2h-del {
  396. background-color: var(--git-delete-bg);
  397. border-color: var(--git-delete-hl);
  398. }
  399. .d2h-ins {
  400. background-color: var(--git-insert-bg);
  401. border-color: var(--git-insert-hl);
  402. }
  403. .d2h-info {
  404. background-color: var(--background-primary);
  405. border-color: var(--background-modifier-border);
  406. color: var(--text-faint);
  407. }
  408. .d2h-del,
  409. .d2h-ins,
  410. .d2h-file-diff .d2h-change {
  411. color: var(--text-normal);
  412. }
  413. .d2h-file-diff .d2h-del.d2h-change {
  414. background-color: var(--git-change-bg);
  415. }
  416. .d2h-file-diff .d2h-ins.d2h-change {
  417. background-color: var(--git-insert-bg);
  418. }
  419. .d2h-file-list-wrapper {
  420. a {
  421. text-decoration: none;
  422. cursor: default;
  423. -webkit-user-drag: none;
  424. }
  425. svg {
  426. display: none;
  427. }
  428. }
  429. .d2h-file-list-header {
  430. text-align: left;
  431. }
  432. .d2h-file-list-title {
  433. display: none;
  434. }
  435. .d2h-file-list-line {
  436. display: -webkit-box;
  437. display: -ms-flexbox;
  438. display: flex;
  439. text-align: left;
  440. }
  441. .d2h-file-list {
  442. }
  443. .d2h-file-list > li {
  444. border-bottom: 1px solid var(--background-modifier-border);
  445. margin: 0;
  446. padding: 5px 10px;
  447. }
  448. .d2h-file-list > li:last-child {
  449. border-bottom: none;
  450. }
  451. .d2h-file-switch {
  452. cursor: pointer;
  453. display: none;
  454. font-size: 10px;
  455. }
  456. .d2h-icon {
  457. fill: currentColor;
  458. margin-right: 10px;
  459. vertical-align: middle;
  460. }
  461. .d2h-deleted {
  462. color: var(--git-delete);
  463. }
  464. .d2h-added {
  465. color: var(--git-insert);
  466. }
  467. .d2h-changed {
  468. color: var(--git-change);
  469. }
  470. .d2h-moved {
  471. color: var(--git-move);
  472. }
  473. .d2h-tag {
  474. background-color: var(--background-secondary);
  475. display: -webkit-box;
  476. display: -ms-flexbox;
  477. display: flex;
  478. font-size: 10px;
  479. margin-left: 5px;
  480. padding: 0 2px;
  481. }
  482. .d2h-deleted-tag {
  483. border: 1px solid var(--git-delete);
  484. }
  485. .d2h-added-tag {
  486. border: 1px solid var(--git-insert);
  487. }
  488. .d2h-changed-tag {
  489. border: 1px solid var(--git-change);
  490. }
  491. .d2h-moved-tag {
  492. border: 1px solid var(--git-move);
  493. }
  494. /* needed for line-by-line*/
  495. .d2h-diff-tbody {
  496. position: relative;
  497. }
  498. /* My additions */
  499. .cm-merge-revert {
  500. width: 4em;
  501. }
  502. /* Ensure that merge revert markers are positioned correctly */
  503. .cm-merge-revert > * {
  504. position: absolute;
  505. background-color: var(--background-secondary);
  506. display: flex;
  507. }
  508. }
  509. /* ====================== Line Authoring Information ====================== */
  510. .cm-gutterElement.obs-git-blame-gutter {
  511. /* Add background color to spacing inbetween and around the gutter for better aesthetics */
  512. border-width: 0px 2px 0.2px;
  513. border-style: solid;
  514. border-color: var(--background-secondary);
  515. background-color: var(--background-secondary);
  516. }
  517. .cm-gutterElement.obs-git-blame-gutter > div,
  518. .line-author-settings-preview {
  519. /* delegate text color to settings */
  520. color: var(--obs-git-gutter-text);
  521. font-family: monospace;
  522. height: 100%; /* ensure, that age-based background color occupies entire parent */
  523. text-align: right;
  524. padding: 0px 6px;
  525. white-space: pre; /* Keep spaces and do not collapse them. */
  526. }
  527. @media (max-width: 800px) {
  528. /* hide git blame gutter not to superpose text */
  529. .cm-gutterElement.obs-git-blame-gutter {
  530. display: none;
  531. }
  532. }
  533. .git-unified-diff-view,
  534. .git-split-diff-view .cm-deletedLine .cm-changedText {
  535. background-color: #ee443330;
  536. }
  537. .git-unified-diff-view,
  538. .git-split-diff-view .cm-insertedLine .cm-changedText {
  539. background-color: #22bb2230;
  540. }
  541. .git-obscure-prompt[git-is-obscured="true"] #git-show-password:after {
  542. -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>');
  543. }
  544. .git-obscure-prompt[git-is-obscured="false"] #git-show-password:after {
  545. -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"></path><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path><path d="m2 2 20 20"></path></svg>');
  546. }
  547. /* Override styling of Codemirror merge view "collapsed lines" indicator */
  548. .git-split-diff-view .ͼ2 .cm-collapsedLines {
  549. background: var(--interactive-normal);
  550. border-radius: var(--radius-m);
  551. color: var(--text-accent);
  552. font-size: var(--font-small);
  553. padding: var(--size-4-1) var(--size-4-1);
  554. }
  555. .git-split-diff-view .ͼ2 .cm-collapsedLines:hover {
  556. background: var(--interactive-hover);
  557. color: var(--text-accent-hover);
  558. }
  559. .git-signs-gutter {
  560. .cm-gutterElement {
  561. display: grid;
  562. /* Needed to align the sign properly for different line heigts. Such as
  563. * when having a heading or list item.
  564. */
  565. padding-top: 0 !important;
  566. }
  567. }
  568. .git-gutter-marker:hover {
  569. border-radius: 2px;
  570. }
  571. .git-gutter-marker.git-add {
  572. background-color: var(--color-green);
  573. justify-self: center;
  574. height: inherit;
  575. width: 0.2rem;
  576. }
  577. .git-gutter-marker.git-change {
  578. background-color: var(--color-yellow);
  579. justify-self: center;
  580. height: inherit;
  581. width: 0.2rem;
  582. }
  583. .git-gutter-marker.git-changedelete {
  584. color: var(--color-yellow);
  585. font-weight: var(--font-bold);
  586. font-size: 1rem;
  587. justify-self: center;
  588. height: inherit;
  589. }
  590. .git-gutter-marker.git-delete {
  591. background-color: var(--color-red);
  592. height: 0.2rem;
  593. width: 0.8rem;
  594. align-self: end;
  595. }
  596. .git-gutter-marker.git-topdelete {
  597. background-color: var(--color-red);
  598. height: 0.2rem;
  599. width: 0.8rem;
  600. align-self: start;
  601. }
  602. div:hover > .git-gutter-marker.git-change {
  603. width: 0.6rem;
  604. }
  605. div:hover > .git-gutter-marker.git-add {
  606. width: 0.6rem;
  607. }
  608. div:hover > .git-gutter-marker.git-delete {
  609. height: 0.6rem;
  610. }
  611. div:hover > .git-gutter-marker.git-topdelete {
  612. height: 0.6rem;
  613. }
  614. div:hover > .git-gutter-marker.git-changedelete {
  615. font-weight: var(--font-bold);
  616. }
  617. .git-gutter-marker.staged {
  618. opacity: 0.5;
  619. }
  620. /* Prevent shifting of the editor when git signs gutter is the only gutter present */
  621. .cm-gutters.cm-gutters-before:has(> .git-signs-gutter:only-child) {
  622. margin-inline-end: 0;
  623. .git-signs-gutter {
  624. margin-inline-start: -1rem;
  625. }
  626. }
  627. .git-changes-status-bar-colored {
  628. .git-add {
  629. color: var(--color-green);
  630. }
  631. .git-change {
  632. color: var(--color-yellow);
  633. }
  634. .git-delete {
  635. color: var(--color-red);
  636. }
  637. }
  638. .git-changes-status-bar .git-add {
  639. margin-right: 0.3em;
  640. }
  641. .git-changes-status-bar .git-change {
  642. margin-right: 0.3em;
  643. }