Skip to content

Commit ed004e2

Browse files
MaxITServiceMaxITService
committed
An effort to put popup styles into different files.
1 parent 47c2a53 commit ed004e2

File tree

8 files changed

+834
-738
lines changed

8 files changed

+834
-738
lines changed

‎popup-page-style.css‎

Lines changed: 0 additions & 733 deletions
This file was deleted.

‎popup-page-styles/popup-base.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/*
2+
popup-base.css
3+
Version: 1.0
4+
5+
This file is responsible for the base styles of the Max Extension Settings popup.
6+
It defines the overall visual foundation including root variables, global body styles,
7+
container centering, section styling, and heading (h2) styles.
8+
These rules set up the basic typography, spacing, and color scheme for the interface.
9+
*/
10+
11+
/* ------------------------------------------------------------------------- */
12+
/* Root Variables for Consistent Styling */
13+
/* ------------------------------------------------------------------------- */
14+
:root {
15+
--primary-color: #7a5cc8; /* Less saturated violet shade for titles and accents */
16+
--danger-color: #a94442; /* Soft red for danger buttons */
17+
--border-color: #ccc; /* Light gray for borders */
18+
--bg-color: #f9f9f9; /* Very light gray for background */
19+
--text-color: #333; /* Dark gray for primary text */
20+
--separator-color: #bbb; /* Medium gray for separators */
21+
--hover-bg-color: #e6e6e6; /* Light gray on hover */
22+
--transition-duration: 0.3s; /* Standard transition duration */
23+
--transition-duration-release: 0.4s; /* Slower transition duration for release */
24+
--box-shadow: 0 2px 4px rgba(0,0,0,0.05);
25+
--box-shadow-hover: 0 4px 8px rgba(0,0,0,0.1);
26+
--checkbox-size: 18px;
27+
--toast-bg-color: rgba(0, 0, 0, 0.8);
28+
--toast-text-color: #fff;
29+
--toast-padding: 12px 24px;
30+
--toast-border-radius: 4px;
31+
--toast-margin: 8px;
32+
--toast-transition: opacity 0.5s ease, transform 0.5s ease;
33+
}
34+
35+
/* ------------------------------------------------------------------------- */
36+
/* Global Body Styles */
37+
/* ------------------------------------------------------------------------- */
38+
body {
39+
margin: 0;
40+
padding: 16px;
41+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
42+
background: var(--bg-color);
43+
color: var(--text-color);
44+
width: 100%;
45+
box-sizing: border-box;
46+
overflow-y: auto;
47+
transition: background-color var(--transition-duration) ease;
48+
}
49+
50+
/* Hide version container when the user is adding or copying a profile */
51+
body:has(#addProfileContainer:not([style*="display: none"])) #versionContainer,
52+
body:has(#copyProfileContainer:not([style*="display: none"])) #versionContainer {
53+
opacity: 0;
54+
transition: opacity 0.4s ease;
55+
}
56+
57+
/* Show version container when not in profile add/copy mode */
58+
#versionContainer {
59+
opacity: 1;
60+
pointer-events: auto;
61+
transition: opacity 0.5s ease;
62+
}
63+
64+
/* Centered version text styling */
65+
#version {
66+
text-align: center;
67+
color: #666666;
68+
width: 100%;
69+
}
70+
71+
/* Explanation text styling */
72+
#topExplanationText {
73+
text-align: center;
74+
color: #666666;
75+
width: 100%;
76+
}
77+
78+
/* ------------------------------------------------------------------------- */
79+
/* Container & Section Styles */
80+
/* ------------------------------------------------------------------------- */
81+
82+
/* Container to Center Content */
83+
.container {
84+
max-width: 800px;
85+
min-width: 700px;
86+
margin: 0 auto;
87+
height: 100%;
88+
display: flex;
89+
flex-direction: column;
90+
justify-content: space-between;
91+
scroll-behavior: smooth;
92+
}
93+
94+
/* Sections Styling: Boxes that wrap content areas */
95+
.section {
96+
margin-bottom: 24px;
97+
border: 1px solid var(--border-color);
98+
border-radius: 8px;
99+
padding: 16px;
100+
background-color: #ffffff;
101+
box-shadow: var(--box-shadow);
102+
transition: box-shadow var(--transition-duration) ease, background-color var(--transition-duration) ease;
103+
}
104+
105+
/* Section Hover Effects: Enhance shadow and background on hover */
106+
.section:hover {
107+
box-shadow: var(--box-shadow-hover);
108+
background-color: #f2f2f2;
109+
transition: box-shadow var(--transition-duration-release) ease, background-color var(--transition-duration-release) ease;
110+
}
111+
112+
/* Additional text spacing within sections */
113+
.text-inside-container {
114+
margin: 0 2rem;
115+
}
116+
117+
/* ------------------------------------------------------------------------- */
118+
/* Headings (h2) Styles */
119+
/* ------------------------------------------------------------------------- */
120+
121+
/* Primary headings for each section */
122+
h2 {
123+
margin: 0 0 16px 0;
124+
font-size: 16px;
125+
font-weight: 600;
126+
color: var(--primary-color);
127+
transition: color var(--transition-duration) ease;
128+
}
129+
130+
/* Hover effect for headings for subtle feedback */
131+
h2:hover {
132+
color: #6a4abd;
133+
transition: color var(--transition-duration-release) ease;
134+
}

‎popup-page-styles/popup-buttons.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
/*
2+
popup-buttons.css
3+
Version: 1.1
4+
5+
This file is responsible for:
6+
1. Base Button Styling: Generic styling for all <button> elements within the popup interface.
7+
2. Custom Button Section: Styles for the custom buttons area including the button list container,
8+
individual custom button items (with hover and dragging effects), drag handles, and separator items.
9+
*/
10+
11+
/* ------------------------------------------------------------------------- */
12+
/* 1. Base Button Styling for All Buttons */
13+
/* ------------------------------------------------------------------------- */
14+
15+
/* Generic styling for all buttons */
16+
button {
17+
padding: 8px 16px;
18+
border: 1px solid var(--border-color);
19+
border-radius: 4px;
20+
background: #ffffff;
21+
color: var(--text-color);
22+
cursor: pointer;
23+
font-size: 14px;
24+
transition: background var(--transition-duration) ease,
25+
transform 0.2s ease,
26+
color var(--transition-duration) ease;
27+
position: relative;
28+
overflow: hidden;
29+
}
30+
31+
/* Hover state for buttons */
32+
button:hover {
33+
background: #e6e6e6;
34+
}
35+
36+
/* Active state for buttons */
37+
button:active {
38+
transform: scale(0.98);
39+
}
40+
41+
/* Special styling for buttons with the "danger" class */
42+
button.danger {
43+
color: var(--danger-color);
44+
border-color: var(--danger-color);
45+
background: #ffffff;
46+
}
47+
48+
button.danger:hover {
49+
background: #f8d7da;
50+
}
51+
52+
53+
/* ------------------------------------------------------------------------- */
54+
/* 2. Custom Buttons Section */
55+
/* ------------------------------------------------------------------------- */
56+
57+
/* Container for the custom button list */
58+
#buttonList {
59+
border: 1px solid var(--border-color);
60+
border-radius: 4px;
61+
padding: 8px;
62+
min-height: 50px;
63+
background-color: #ffffff;
64+
transition: background-color var(--transition-duration) ease;
65+
overflow-y: auto;
66+
flex: 1 1 auto;
67+
scroll-behavior: smooth;
68+
transform-style: preserve-3d;
69+
}
70+
71+
/* Styles for individual custom button items */
72+
.button-item {
73+
display: flex;
74+
align-items: center;
75+
gap: 8px;
76+
padding: 8px;
77+
margin: 4px 0;
78+
border: 1px solid var(--border-color);
79+
border-radius: 4px;
80+
background: #ffffff;
81+
cursor: grab;
82+
position: relative;
83+
/* Set initial scale to 1 and enable a smooth transition */
84+
transform: scale(1);
85+
transition: transform 0.9s ease, background-color 0.9s ease;
86+
will-change: transform, opacity;
87+
backface-visibility: hidden;
88+
perspective: 1000px;
89+
}
90+
91+
/* Hover effect for button items */
92+
.button-item:hover {
93+
background-color: var(--hover-bg-color);
94+
}
95+
96+
/* Styling when a button item is being dragged */
97+
.button-item.dragging {
98+
transform: scale(0.8); /* Shrinks to 80% while dragging */
99+
background-color: #d4f8d4 !important; /* Light green highlight */
100+
opacity: 0.8;
101+
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
102+
cursor: grabbing;
103+
z-index: 2;
104+
}
105+
106+
/* ------------------------------------------------------------------------- */
107+
/* Drag Handle Styling */
108+
/* ------------------------------------------------------------------------- */
109+
110+
/* Visual affordance for dragging custom button items */
111+
.drag-handle {
112+
cursor: grab;
113+
padding: 0 8px;
114+
display: flex;
115+
align-items: center;
116+
font-size: 18px;
117+
}
118+
119+
/* ------------------------------------------------------------------------- */
120+
/* Separator Styles */
121+
/* ------------------------------------------------------------------------- */
122+
123+
/* Special styles for separator items within the button list */
124+
.button-item.separator-item {
125+
display: flex;
126+
align-items: center;
127+
justify-content: center;
128+
gap: 8px;
129+
margin: 8px 0;
130+
padding: 8px;
131+
background: #dcdcdc;
132+
border: none;
133+
cursor: move;
134+
transition: background-color var(--transition-duration) ease;
135+
}
136+
137+
.button-item.separator-item:hover {
138+
background: #c0c0c0;
139+
}
140+
141+
.button-item.separator-item.dragging {
142+
opacity: 0.7;
143+
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
144+
}

0 commit comments

Comments
 (0)