Ops-Toolshed-Extension/content.css at main · harrydbarnes/Ops-Toolshed-Extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/* --- Reminder Popup Styles --- */
/* Note: The @import for Montserrat font is intentionally omitted here to avoid conflicts with host pages. */

#meta-reminder-popup, #ias-reminder-popup, #custom-reminder-display-popup { /* Apply styles to all three popups */
    font-family: 'Montserrat', sans-serif;
    position: fixed;
    z-index: 2147483647;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ff4087;
    color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    max-width: 400px;
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
}
#meta-reminder-popup h3, #ias-reminder-popup h3, #custom-reminder-display-popup h3 { margin-top: 0; font-size: 18px; font-weight: 700; }
#meta-reminder-popup p, #ias-reminder-popup p, #custom-reminder-display-popup p { margin-bottom: 10px; font-size: 14px; }
#meta-reminder-popup ul, #ias-reminder-popup ul, #custom-reminder-display-popup ul { text-align: left; margin-bottom: 20px; font-size: 14px; padding-left: 20px; }
#meta-reminder-popup li, #ias-reminder-popup li, #custom-reminder-display-popup li { margin-bottom: 5px; }

.reminder-close-button {
    background-color: white;
    color: #ff4087;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.1s;
}

.reminder-close-button:hover:not(:disabled) {
    background-color: #f8f8f8;
    animation: vibrate 0.3s ease-in-out; /* This vibrate is for reminder buttons */
}

.reminder-close-button:active:not(:disabled) {
    transform: translateY(2px);
}

.reminder-close-button:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* Dimming Overlay */
.reminder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 20% dim */
    z-index: 9999; /* Below popup, above page content */
    animation: fadeInOverlay 0.3s ease-in-out;
}

/* Keyframes (ensure these are defined only once) */
/* fadeIn is used by popups */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* vibrate is used by nav-buttons and reminder buttons. Ensure consistent definition. */
@keyframes vibrate {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
}

/* fadeInOverlay is used by .reminder-overlay */
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* --- End of Reminder Popup Styles --- */