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