styles.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. .iconize-inline-title-wrapper {
  2. width: var(--line-width);
  3. max-width: var(--max-width);
  4. margin-inline: var(--content-margin);
  5. }
  6. .iconize-title-icon {
  7. max-width: var(--max-width);
  8. margin-right: var(--size-4-2);
  9. }
  10. .iconize-icon-in-link {
  11. transform: translateY(20%);
  12. margin-right: var(--size-2-2);
  13. display: inline-flex;
  14. }
  15. .iconize-icon {
  16. border: 1px solid transparent;
  17. margin: 0px 4px 0px 0px;
  18. display: flex;
  19. align-self: center;
  20. margin: auto 0;
  21. }
  22. .nav-folder-title,
  23. .nav-file-title {
  24. align-items: center;
  25. }
  26. .iconize-setting input[type='color'] {
  27. margin: 0 6px;
  28. }
  29. .iconize-modal.prompt-results {
  30. margin: 0;
  31. overflow-y: auto;
  32. display: grid;
  33. grid-template-columns: repeat(5, minmax(0, 1fr));
  34. }
  35. .prompt .iconize-subheadline {
  36. margin-top: 12px;
  37. font-size: 12px;
  38. color: gray;
  39. grid-column-start: 1;
  40. grid-column-end: 6;
  41. }
  42. @media (max-width: 640px) {
  43. .iconize-modal.prompt-results {
  44. grid-template-columns: repeat(3, minmax(0, 1fr));
  45. }
  46. .prompt .iconize-subheadline {
  47. grid-column-end: 4;
  48. }
  49. }
  50. .iconize-modal.prompt-results .suggestion-item {
  51. cursor: pointer;
  52. white-space: pre-wrap;
  53. display: flex;
  54. justify-content: flex-end;
  55. align-items: center;
  56. flex-direction: column-reverse;
  57. text-align: center;
  58. font-size: 13px;
  59. color: var(--text-muted);
  60. padding: 16px 8px;
  61. line-break: auto;
  62. word-break: break-word;
  63. line-height: 1.3;
  64. }
  65. .iconize-modal.prompt-results .suggestion-item.suggestion-item__center {
  66. justify-content: center;
  67. }
  68. .iconize-icon-preview {
  69. font-size: 22px;
  70. }
  71. .iconize-icon-preview img {
  72. width: 16px;
  73. height: 16px;
  74. }
  75. .iconize-icon-preview svg {
  76. width: 24px;
  77. height: 24px;
  78. color: currentColor;
  79. margin-bottom: 4px;
  80. }
  81. .iconize-dragover {
  82. position: relative;
  83. }
  84. .iconize-dragover-el {
  85. position: absolute;
  86. width: 100%;
  87. height: 100%;
  88. color: var(--text-normal);
  89. background-color: var(--background-secondary-alt);
  90. display: flex;
  91. align-items: center;
  92. justify-content: center;
  93. }
  94. /* Custom rule modal. */
  95. .iconize-custom-modal .modal-content {
  96. display: flex;
  97. align-items: center;
  98. justify-content: center;
  99. }
  100. .iconize-custom-modal .modal-content input {
  101. width: 100%;
  102. margin-right: 0.5rem;
  103. }