xref: /plugin/myshortcuts/style.css (revision 61ef61f6aef59d2b4dc796cb87289ce67202085d) 
1/**
2 * DokuWiki Plugin myshortcuts (CSS Styles)
3 *
4 * @license GPL 2 http://www.gnu.org/licenses/gpl-2.0.html
5 * @author David Jiménez <davidjimenez75@gmail.com>
6 */
7
8/* Overlay for snippet dialog */
9.myshortcuts-overlay {
10    position: fixed;
11    top: 0;
12    left: 0;
13    width: 100%;
14    height: 100%;
15    background: rgba(0, 0, 0, 0.7);
16    display: flex;
17    justify-content: center;
18    align-items: center;
19    z-index: 9999;
20    animation: fadeIn 0.2s ease-in;
21}
22
23@keyframes fadeIn {
24    from {
25        opacity: 0;
26    }
27    to {
28        opacity: 1;
29    }
30}
31
32/* Dialog box */
33.myshortcuts-dialog {
34    background: white;
35    border-radius: 8px;
36    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
37    max-width: 500px;
38    width: 90%;
39    max-height: 80vh;
40    overflow: hidden;
41    display: flex;
42    flex-direction: column;
43    animation: slideIn 0.2s ease-out;
44}
45
46@keyframes slideIn {
47    from {
48        transform: translateY(-20px);
49        opacity: 0;
50    }
51    to {
52        transform: translateY(0);
53        opacity: 1;
54    }
55}
56
57/* Dialog header */
58.myshortcuts-dialog h3 {
59    margin: 0;
60    padding: 20px;
61    border-bottom: 1px solid #e0e0e0;
62    font-size: 1.2em;
63    color: #333;
64}
65
66/* Snippet list container */
67.myshortcuts-snippet-list {
68    overflow-y: auto;
69    flex: 1;
70    padding: 10px;
71}
72
73/* Individual snippet item */
74.myshortcuts-snippet-item {
75    display: flex;
76    align-items: center;
77    gap: 15px;
78    width: 100%;
79    padding: 12px 15px;
80    margin: 5px 0;
81    text-align: left;
82    background: #f9f9f9;
83    border: 2px solid #e0e0e0;
84    border-radius: 5px;
85    cursor: pointer;
86    transition: all 0.2s ease;
87}
88
89.myshortcuts-snippet-item:hover,
90.myshortcuts-snippet-item:focus {
91    background: #e8f4f8;
92    border-color: #4a90e2;
93    outline: none;
94    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
95}
96
97/* Key indicator badge */
98.myshortcuts-key-indicator {
99    display: inline-flex;
100    align-items: center;
101    justify-content: center;
102    min-width: 32px;
103    height: 32px;
104    padding: 0 8px;
105    background: #4a90e2;
106    color: white;
107    font-weight: bold;
108    font-size: 1.1em;
109    border-radius: 5px;
110    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
111    flex-shrink: 0;
112}
113
114.myshortcuts-snippet-item:hover .myshortcuts-key-indicator,
115.myshortcuts-snippet-item:focus .myshortcuts-key-indicator {
116    background: #357abd;
117    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
118}
119
120/* Snippet content container */
121.myshortcuts-snippet-content {
122    flex: 1;
123    min-width: 0;
124}
125
126.myshortcuts-snippet-item strong {
127    display: block;
128    color: #333;
129    font-size: 1.1em;
130    margin-bottom: 5px;
131}
132
133.myshortcuts-snippet-preview {
134    color: #666;
135    font-size: 0.9em;
136    white-space: nowrap;
137    overflow: hidden;
138    text-overflow: ellipsis;
139}
140
141/* Close button */
142.myshortcuts-close-btn {
143    margin: 15px 20px 20px;
144    padding: 10px 20px;
145    background: #f0f0f0;
146    border: 1px solid #ccc;
147    border-radius: 5px;
148    cursor: pointer;
149    transition: background 0.2s ease;
150}
151
152.myshortcuts-close-btn:hover {
153    background: #e0e0e0;
154}
155
156/* Dark mode support */
157@media (prefers-color-scheme: dark) {
158    .myshortcuts-dialog {
159        background: #2d2d2d;
160        color: #e0e0e0;
161    }
162
163    .myshortcuts-dialog h3 {
164        color: #e0e0e0;
165        border-bottom-color: #444;
166    }
167
168    .myshortcuts-snippet-item {
169        background: #3a3a3a;
170        border-color: #555;
171    }
172
173    .myshortcuts-snippet-item:hover,
174    .myshortcuts-snippet-item:focus {
175        background: #4a4a4a;
176        border-color: #6a9bd8;
177    }
178
179    .myshortcuts-key-indicator {
180        background: #6a9bd8;
181    }
182
183    .myshortcuts-snippet-item:hover .myshortcuts-key-indicator,
184    .myshortcuts-snippet-item:focus .myshortcuts-key-indicator {
185        background: #5080c0;
186    }
187
188    .myshortcuts-snippet-item strong {
189        color: #e0e0e0;
190    }
191
192    .myshortcuts-snippet-preview {
193        color: #aaa;
194    }
195
196    .myshortcuts-close-btn {
197        background: #3a3a3a;
198        border-color: #555;
199        color: #e0e0e0;
200    }
201
202    .myshortcuts-close-btn:hover {
203        background: #4a4a4a;
204    }
205}
206