“`
—
### 2. Nayi CSS File (`style.css`)
Yeh sabse zaroori badlaav hai. Apni purani `style.css` file ko **poora delete karein** aur ise paste karein. Har rule ab `#my-video-editor-app` se shuru hota hai taaki theme ki CSS ise override na kar sake.
“`css
/* — NEW: Defensive CSS to override WordPress Themes — */
/* Step 1: Main Container Reset */
#my-video-editor-app {
width: 100%;
max-width: 1000px; /* Desktop par max width */
margin: 20px auto;
padding: 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
color: #333;
box-sizing: border-box; /* Sabse zaroori reset */
}
/* Step 2: Reset all child elements inside the app */
#my-video-editor-app *,
#my-video-editor-app *::before,
#my-video-editor-app *::after {
box-sizing: border-box; /* Sabhi elements par box-sizing apply karna */
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; /* Consistent font */
}
/* Step 3: Define New Layout */
#my-video-editor-app .main-container {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
#my-video-editor-app .video-player-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
#my-video-editor-app .preview-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
background: #222;
border: 1px solid #ddd;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
height: 0;
}
#my-video-editor-app #preview-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
touch-action: none;
display: block;
}
/* — Step 4: Style Buttons from scratch — */
#my-video-editor-app .editor-btn {
all: unset; /* WordPress styles ko poori tarah hatana */
display: inline-block;
padding: 12px 25px;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
text-align: center;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
box-sizing: border-box; /* Dobara define karna */
border: none;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
#my-video-editor-app .editor-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
#my-video-editor-app .editor-btn:disabled {
background: #cccccc !important;
color: #888 !important;
cursor: not-allowed;
box-shadow: none;
}
#my-video-editor-app .play-btn {
background: #28a745;
color: #ffffff;
}
#my-video-editor-app .primary-btn {
background: #007bff;
color: #ffffff;
}
#my-video-editor-app .process-btn {
background: #dc3545;
color: #ffffff;
}
#my-video-editor-app .download-btn {
background: #6c757d;
color: #ffffff;
}
#my-video-editor-app #play-pause-btn {
width: 150px;
display: none; /* Initially hidden */
}
#my-video-editor-app .center-controls {
text-align: center;
width: 100%;
}
#my-video-editor-app .center-controls .primary-btn {
width: 100%;
max-width: 400px; /* Button bahut chauda na ho */
}
/* — Step 5: Style Editor Controls Area — */
#my-video-editor-app .editor-controls-area {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
#my-video-editor-app .control-group {
display: flex;
flex-wrap: wrap; /* Mobile par columns ko wrap karega */
gap: 20px;
}
#my-video-editor-app .control-column {
flex: 1 1 45%; /* Desktop par 2 columns */
min-width: 280px; /* Mobile par itna space lega */
display: flex;
flex-direction: column;
gap: 15px;
}
#my-video-editor-app .input-section {
background: #f8f8f8;
padding: 15px;
border-radius: 8px;
border: 1px solid #eee;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
#my-video-editor-app .toggle-label {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
margin-bottom: 10px;
color: #555;
font-size: 1.1em;
}
/* — Step 6: Style Inputs from scratch — */
#my-video-editor-app .editor-input {
all: unset; /* Theme styles ko hatana */
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1em;
margin-top: 5px;
background: #ffffff;
color: #333;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
transition: all 0.3s ease;
}
#my-video-editor-app .editor-input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
#my-video-editor-app .file-input {
padding: 0; /* File input ke liye special padding */
border: 1px dashed #ddd;
background: #fdfdfd;
cursor: pointer;
font-size: 0.95em;
color: #555;
}
#my-video-editor-app .file-input::-webkit-file-upload-button {
all: unset; /* Default button ko hatana */
background: #007bff;
color: white;
padding: 10px 15px;
margin-right: 10px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s ease;
}
#my-video-editor-app .file-input:hover::-webkit-file-upload-button {
background: #0056b3;
}
/* — Step 7: Style Toggle Switch — */
#my-video-editor-app .toggle-switch {
all: unset; /* Reset toggle */
width: 50px;
height: 24px;
position: relative;
background: #ccc;
border-radius: 20px;
cursor: pointer;
transition: background 0.3s;
flex-shrink: 0;
}
#my-video-editor-app .toggle-switch::before {
all: unset; /* Reset pseudo-element */
content: “”;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
top: 2px;
left: 2px;
transition: left 0.3s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#my-video-editor-app .toggle-switch:checked {
background: #007bff;
}
#my-video-editor-app .toggle-switch:checked::before {
left: 28px;
}
/* — Step 8: Final Action Bar — */
#my-video-editor-app .bottom-action-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
padding-top: 20px;
border-top: 1px solid #eee;
margin-top: 10px;
}
#my-video-editor-app .bottom-action-bar .editor-btn {
width: 100%; /* Mobile par full width */
}
#my-video-editor-app #status {
font-weight: bold;
color: #d9534f;
margin: 0;
text-align: center;
min-height: 20px;
flex-basis: 100%;
padding: 5px;
font-size: 0.9em;
}
/* — Step 9: Modal Styling — */
#my-video-editor-app .modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 999998; /* High z-index */
}
#my-video-editor-app .modal-content {
background: white;
padding: 25px;
border-radius: 10px;
width: 90%;
max-width: 650px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
z-index: 999999;
}
#my-video-editor-app .modal-content h3 {
text-align: center;
margin-top: 0;
color: #333;
font-size: 1.5em;
margin-bottom: 20px;
}
#my-video-editor-app .crop-container {
width: 100%;
height: 350px;
margin-bottom: 20px;
background: #f0f0f0;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
}
#my-video-editor-app #image-to-crop {
display: block;
max-width: 100%;
height: auto;
}
#my-video-editor-app #crop-button {
width: 100%;
}
/* — Step 10: Responsive Media Query — */
@media (min-width: 769px) {
#my-video-editor-app .bottom-action-bar .editor-btn {
width: auto; /* Desktop par auto width */
}
}
