Update styles/styles.css

styles/styles.css

@@ -1,99 +1,116 @@
-/* Custom button styles for Perfect Webinar Framework */
-
-/* Generate Webinar Script button - yellow with black border */
-div.stButton > button:first-child {
-    width: 100%;
-    margin-top: 0.5rem;
-    border-radius: 5px;
-    height: 3em;
-    background: #FFD700; /* Solid yellow color like in the image */
-    color: black;
-    font-weight: bold;
-    border: 1px solid black; /* Changed to 1px border */
-    transition: all 0.3s ease;
-}
-
-div.stButton > button:first-child:hover {
-    background: #FFDF33; /* Slightly brighter yellow on hover */
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    border: 1px solid black;
-}
-
-/* Download buttons - green/blue gradient */
-div.stDownloadButton > button:first-child {
-    background: linear-gradient(90deg, #4CAF50, #2196F3); /* Green to blue gradient */
-    color: white; /* White text for better visibility on gradient */
-    font-weight: bold;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    border: 1px solid black; /* 1px border as requested */
-    transition: all 0.3s;
-    width: 80%; /* Width 80% as requested */
-    margin: 0 auto;
-    display: block;
-}
-
-div.stDownloadButton > button:first-child:hover {
-    background: linear-gradient(135deg, #3ED83E 0%, #4169E1 100%);
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-    border: 2px solid black !important;
-}
-
-/* Special styling for download buttons in the webinar names container */
-.webinar-names-container div.stDownloadButton > button:first-child {
-    background: linear-gradient(90deg, #FF5722, #FF9800); /* Orange gradient */
-    color: white;
-    font-weight: bold;
-    border: 1px solid black;
-}
-
-.webinar-names-container div.stDownloadButton > button:first-child:hover {
-    background: linear-gradient(135deg, #FF7043, #FFA726);
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-    border: 2px solid black !important;
-}
-
-
-/* Reduce top spacing and hide unnecessary elements */
-.block-container {
-    padding-top: 1rem;
-    padding-bottom: 0rem;
-}
-
-header {
-    visibility: hidden;
-}
-
-#MainMenu {
-    visibility: hidden;
-}
-
-footer {
-    visibility: hidden;
-}
-
-/* Add any other custom styles here */
-
-
-/* Styles for the webinar names container in the second tab */
-.webinar-names-container {
-    padding: 15px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-/* Add border to all webinar name containers */
-.webinar-names-container.with-border {
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 20px;
-}
-
-/* Additional styling for containers with many items */
-.webinar-names-container.many-items .stDownloadButton {
-    margin-top: 15px;
-    margin-bottom: 15px;
+/* Custom button styles for Perfect Webinar Framework */
+
+/* Generate Webinar Script button - yellow with black border */
+div.stButton > button:first-child {
+    width: 100%;
+    margin-top: 0.5rem;
+    border-radius: 5px;
+    height: 3em;
+    background: #FFD700; /* Solid yellow color like in the image */
+    color: black;
+    font-weight: bold;
+    border: 1px solid black; /* Changed to 1px border */
+    transition: all 0.3s ease;
+}
+
+div.stButton > button:first-child:hover {
+    background: #FFDF33; /* Slightly brighter yellow on hover */
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    border: 1px solid black;
+}
+
+/* Download buttons - green/blue gradient */
+div.stDownloadButton > button:first-child {
+    background: linear-gradient(90deg, #4CAF50, #2196F3); /* Green to blue gradient */
+    color: white; /* White text for better visibility on gradient */
+    font-weight: bold;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    border: 1px solid black; /* 1px border as requested */
+    transition: all 0.3s;
+    width: 80%; /* Width 80% as requested */
+    margin: 0 auto;
+    display: block;
+}
+
+div.stDownloadButton > button:first-child:hover {
+    background: linear-gradient(135deg, #3ED83E 0%, #4169E1 100%);
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
+}
+
+/* Special styling for download buttons in the webinar names container */
+.webinar-names-container div.stDownloadButton > button:first-child {
+    background: linear-gradient(90deg, #FF5722, #FF9800); /* Orange gradient */
+    color: white;
+    font-weight: bold;
+    border: 1px solid black;
+}
+
+.webinar-names-container div.stDownloadButton > button:first-child:hover {
+    background: linear-gradient(135deg, #FF7043, #FFA726);
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
+}
+
+
+/* Reduce top spacing and hide unnecessary elements */
+.block-container {
+    padding-top: 1rem;
+    padding-bottom: 0rem;
+}
+
+header {
+    visibility: hidden;
+}
+
+#MainMenu {
+    visibility: hidden;
+}
+
+footer {
+    visibility: hidden;
+}
+
+/* Add any other custom styles here */
+
+
+/* Styles for the webinar names container in the second tab */
+.webinar-names-container {
+    padding: 15px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+/* Add border to all webinar name containers */
+.webinar-names-container.with-border {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 20px;
+}
+
+/* Additional styling for containers with many items */
+.webinar-names-container.many-items .stDownloadButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+/* Special styling for download buttons in the webinar names tab */
+div.stDownloadButton[data-testid*="download_top_names"] > button:first-child,
+div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child {
+    background: linear-gradient(90deg, #FF5722, #FF9800) !important; /* Orange gradient */
+    color: white !important;
+    font-weight: bold !important;
+    border: 1px solid black !important;
+}
+
+div.stDownloadButton[data-testid*="download_top_names"] > button:first-child:hover,
+div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child:hover {
+    background: linear-gradient(135deg, #FF7043, #FFA726) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
 }