jekyll-obsidian 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,28 @@
1
+ /* https://codepen.io/mandelid/pen/kNBYLJ */
2
+
3
+ #loading-spinner {
4
+ position: absolute;
5
+ top: calc(100vh - 65%);
6
+ left: calc(100vw - 68%);
7
+ z-index: 10;
8
+ display: inline-block;
9
+ width: 30vw;
10
+ height: 30vw;
11
+ border: 16px solid rgba(255, 255, 255, .3);
12
+ border-radius: 50%;
13
+ border-top-color: #5f6ce9;
14
+ animation: spin 1s linear infinite;
15
+ -webkit-animation: spin 1s linear infinite;
16
+ }
17
+
18
+ @keyframes spin {
19
+ to {
20
+ -webkit-transform: rotate(360deg);
21
+ }
22
+ }
23
+
24
+ @-webkit-keyframes spin {
25
+ to {
26
+ -webkit-transform: rotate(360deg);
27
+ }
28
+ }
@@ -0,0 +1,206 @@
1
+ #obsidian {
2
+ #modals {
3
+ >* {
4
+ border: 0;
5
+ box-shadow: 0px 0px 50px var(--bg-tinted);
6
+ border-radius: 1rem;
7
+ width: 40%;
8
+ background-color: var(--bg);
9
+ border: 1px double var(--color-button);
10
+
11
+ @media (min-width:320px) {
12
+ min-width: 80%;
13
+ }
14
+
15
+ @media (min-width:481px) {
16
+ min-width: 70%;
17
+ }
18
+
19
+ @media (min-width:961px) {
20
+ min-width: 60%;
21
+ }
22
+
23
+ @media (min-width:1025px) {
24
+ min-width: 50%;
25
+ }
26
+
27
+ @media (min-width:1281px) {
28
+ min-width: 0;
29
+ max-width: 30%;
30
+ }
31
+ }
32
+
33
+ >*::backdrop {
34
+ background-color: light-dark(rgba(200, 200, 200, 0.5),
35
+ rgba(50, 50, 50, 0.5));
36
+ backdrop-filter: blur(2px);
37
+ }
38
+
39
+ >*:popover-open {
40
+ animation: slideIn 100ms ease-in-out;
41
+ }
42
+
43
+ .modal-close {
44
+ font-size: x-large;
45
+ line-height: 0.5em;
46
+ float: right;
47
+
48
+ &:hover {
49
+ font-weight: bold;
50
+ }
51
+ }
52
+
53
+ // ---------------------------- Search Modal -----------------------------
54
+ #search-modal {
55
+ padding-left: 0;
56
+ padding-top: 0;
57
+ height: fit-content;
58
+ min-height: 25%;
59
+ max-height: 45%;
60
+ overscroll-behavior: none;
61
+
62
+ #header {
63
+ display: flex;
64
+ align-items: center;
65
+ position: sticky;
66
+ top: 0;
67
+ left: 0;
68
+
69
+ input[type="text"] {
70
+ flex-grow: 1;
71
+ margin-right: 10px;
72
+ padding: 10px;
73
+ border-bottom-right-radius: 0.8rem;
74
+ border-top: none;
75
+ border-right: 1px solid var(--color-button);
76
+ border-bottom: 1px solid var(--color-button);
77
+ border-left: none;
78
+ background-color: var(--bg);
79
+ }
80
+
81
+ button {
82
+ padding: 4px;
83
+ font-size: xx-large;
84
+ cursor: pointer;
85
+ background: none;
86
+ border: none;
87
+ }
88
+ }
89
+
90
+ :popover-open {
91
+ animation: slideIn 150ms ease-in-out;
92
+ }
93
+
94
+ ul {
95
+ list-style-type: none;
96
+ margin-left: 10px;
97
+
98
+ li {
99
+ margin-top: 4px;
100
+
101
+ button {
102
+ font-size: medium;
103
+ white-space: nowrap;
104
+ overflow: hidden;
105
+ text-overflow: ellipsis;
106
+ max-width: 100%;
107
+ direction: rtl;
108
+ text-align: left;
109
+
110
+ &:hover {
111
+ background-color: var(--explorer-button-hover);
112
+ font-weight: bold;
113
+ }
114
+ }
115
+ }
116
+ }
117
+ }
118
+
119
+ // ----------------------------- Info Modal ------------------------------
120
+ #info-modal {
121
+ height: 25%;
122
+ color: var(--color-text);
123
+ font-size: large;
124
+
125
+ >* {
126
+ margin-left: 8px;
127
+ }
128
+
129
+ p {
130
+ margin-top: 2px;
131
+ margin-bottom: 5px;
132
+ }
133
+
134
+ a:hover {
135
+ color: #5a8fbb;
136
+ }
137
+
138
+ :popover-open {
139
+ display: flex;
140
+ flex-direction: column;
141
+ align-items: stretch;
142
+ gap: 1em;
143
+ }
144
+
145
+ >div:first-child {
146
+ align-self: center;
147
+ }
148
+
149
+ >div:not(:first-child),
150
+ >button:not(:first-child) {
151
+ align-self: flex-start;
152
+ }
153
+
154
+ #color-scheme {
155
+ padding: 5px 10px;
156
+ background-color: var(--bg);
157
+ font-size: medium;
158
+ color: var(--color-text);
159
+ border-radius: 10px;
160
+
161
+ &:focus {
162
+ outline: none;
163
+ }
164
+
165
+ option {
166
+ background-color: white;
167
+ }
168
+ }
169
+ }
170
+
171
+ // ----------------------------- Media Modal -----------------------------
172
+ #media-modal {
173
+ width: max-content;
174
+ height: max-content;
175
+ min-width: max-content;
176
+ max-width: 80% !important;
177
+ max-height: 80% !important;
178
+
179
+ #media {
180
+
181
+ img,
182
+ video {
183
+ border-radius: .8rem;
184
+ }
185
+ }
186
+
187
+ #media-data {
188
+ font-size: small;
189
+ padding-left: 6px;
190
+ color: var(--color-text);
191
+ }
192
+ }
193
+ }
194
+ }
195
+
196
+ @keyframes slideIn {
197
+ 0% {
198
+ transform: translateX(-40%);
199
+ opacity: 0;
200
+ }
201
+
202
+ 100% {
203
+ transform: translateX(0);
204
+ opacity: 1;
205
+ }
206
+ }
@@ -0,0 +1,113 @@
1
+ #obsidian {
2
+ #fileread {
3
+ #note {
4
+ padding-top: 0;
5
+ padding-bottom: 0;
6
+ display: flex;
7
+ flex-direction: column;
8
+ align-items: center;
9
+ flex: 1;
10
+
11
+ .backlink,
12
+ #linked-mentions .title {
13
+ background: none;
14
+ border: none;
15
+ padding: 0;
16
+ margin: 0;
17
+ cursor: pointer;
18
+ }
19
+
20
+ table td {
21
+ color: var(--color-text);
22
+ }
23
+
24
+ #linked-mentions {
25
+ font-size: 1.2em;
26
+ width: 100%;
27
+ margin: 8rem 0 3rem 0;
28
+ border-top: 1px solid var(--color-border);
29
+ list-style: none;
30
+ padding: 0;
31
+ margin-left: 0;
32
+ padding-top: 4px;
33
+ margin-bottom: 5px;
34
+
35
+ h4 {
36
+ color: var(--color-button);
37
+ }
38
+
39
+ .title {
40
+ width: 100%;
41
+
42
+ ul {
43
+ margin-left: 0px;
44
+ }
45
+
46
+ button {
47
+ font-size: .8em;
48
+ display: block;
49
+ width: auto;
50
+ text-align: left;
51
+ padding: 5px 5px 5px 10px;
52
+ }
53
+ }
54
+
55
+ button {
56
+ &:hover {
57
+ background-color: var(--linked-mention-hover) !important;
58
+ }
59
+
60
+ ul {
61
+ li.sentence {
62
+ color: var(--linked-mention-color);
63
+ width: 96%;
64
+ padding: 8px 5px;
65
+ font-size: 1rem;
66
+ line-height: 1.4rem;
67
+ }
68
+
69
+ button.sentence:not(:first-child),
70
+ button.sentence:last-child:hover {
71
+ border-bottom: 1px solid var(--color-border);
72
+ border-left: 1px solid var(--color-border);
73
+ border-right: 1px solid var(--color-border);
74
+ }
75
+ }
76
+ }
77
+
78
+ ul {
79
+ button.sentence {
80
+ border: 1px solid var(--color-border);
81
+ color: var(--color-text);
82
+ background-color: var(--bg);
83
+ width: 100%;
84
+
85
+ &:first-child {
86
+ border-top-left-radius: .6rem;
87
+ border-top-right-radius: .6rem;
88
+ }
89
+
90
+ &:not(:first-child):not(:last-child) {
91
+ border-top: none;
92
+ }
93
+
94
+ &:nth-last-child(2) {
95
+ border-bottom: none;
96
+ }
97
+
98
+ &:last-child {
99
+ border-bottom-left-radius: .6rem;
100
+ border-bottom-right-radius: .6rem;
101
+ }
102
+ }
103
+ }
104
+ }
105
+ }
106
+
107
+ #note-title {
108
+ font-size: 2em;
109
+ font-weight: bold;
110
+ margin: .2em 0 1rem 0;
111
+ }
112
+ }
113
+ }
@@ -0,0 +1,30 @@
1
+ #obsidian {
2
+ #sidebar {
3
+ button {
4
+ background: none;
5
+ border: none;
6
+ padding: 0;
7
+ margin: 0;
8
+ cursor: pointer;
9
+ color: var(--color-button);
10
+ }
11
+ #top-container {
12
+ flex: 1;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ width: 100%;
17
+ justify-content: flex-start;
18
+ gap: 0.5vh;
19
+ margin-top: 2px;
20
+ }
21
+ #bottom-container {
22
+ flex: 1;
23
+ display: flex;
24
+ flex-direction: column;
25
+ align-items: center;
26
+ width: 100%;
27
+ justify-content: flex-end;
28
+ }
29
+ }
30
+ }