body {
font-family : "Segoe UI" , Arial , sans-serif ;
margin : 0 ;
padding : 0 ;
background-color : # 2b2b2b ;
color : # e0e0e0 ;
}
. container {
max-width : 90 % ;
margin : 50px auto ;
padding : 15px ;
background : # 333333 ;
box-shadow : 0 2px 4px rgba ( 255 , 255 , 255 , 0 . 1 ) ;
border-radius : 5px ;
}
# responseContainer {
margin-top : 15px ;
border : 1px solid # 444 ;
padding : 10px ;
min-height : 100px ;
background-color : # 3a3a3a ;
color : # e0e0e0 ;
}
. btn-primary {
background-color : # 007bff ;
color : white ;
border : none ;
}
# userInput {
margin-bottom : 10px ;
background-color : # 424242 ; /* Darker shade for textarea */
color : # e0e0e0 ; /* Light text for readability */
border : 1px solid # 555 ; /* Adjusted border color */
padding : 10px ; /* Added padding for better text visibility */
}
. selector-container {
display : flex ;
gap : 10px ;
margin-bottom : 10px ;
}
# patternSelector ,
# modelSelector {
flex : 1 ;
background-color : # 424242 ;
color : # e0e0e0 ;
border : 1px solid # 555 ;
padding : 10px ;
height : 40px ;
}
. light-theme # modelSelector {
background-color : # fff ;
color : # 333 ;
border : 1px solid # ddd ;
}
@ media ( min-width : 768px ) {
. container {
max-width : 80 % ;
}
}
. light-theme {
background-color : # fff ;
color : # 333 ;
}
. light-theme . container {
background : # f0f0f0 ;
box-shadow : 0 2px 4px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
}
. light-theme # responseContainer ,
. light-theme # userInput ,
. light-theme # patternSelector {
background-color : # fff ;
color : # 333 ;
border : 1px solid # ddd ;
}
. light-theme . btn-primary {
background-color : # 0066cc ;
color : white ;
}
. hidden {
display : none ;
}
. drag-over {
background-color : # 505050 ; /* Slightly lighter than the regular background for visibility */
border : 2px dashed # 007bff ; /* Dashed border with the primary button color for emphasis */
box-shadow : 0 0 10px # 007bff ; /* Soft glow effect to highlight the area */
color : # e0e0e0 ; /* Maintaining the light text color for readability */
transition : background-color 0 . 3s ease , box-shadow 0 . 3s ease ; /* Smooth transition for background and shadow changes */
}
. light-theme . drag-over {
background-color : # e6e6e6 ; /* Lighter background for light theme */
border : 2px dashed # 0066cc ; /* Adjusted border color for light theme */
box-shadow : 0 0 10px # 0066cc ; /* Soft glow effect for light theme */
color : # 333 ; /* Darker text for contrast in light theme */
}
/* Existing dark theme styles for reference */
. navbar-dark . bg-dark {
background-color : # 343a40 ! important ;
}
/* Light theme styles */
body . light-theme . navbar-dark . bg-dark {
background-color : # e2e6ea ! important ; /* Slightly darker shade for better visibility */
color : # 000 ! important ; /* Keep dark text color for contrast */
}
body . light-theme . navbar-dark . navbar-brand ,
body . light-theme . navbar-dark . btn-outline-success {
color : # 0056b3 ! important ; /* Darker color for better visibility and contrast */
}
body . light-theme . navbar-toggler-icon {
background-image : url ( "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='rgba(0, 0, 0, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>" ) ! important ;
/* Slightly darker stroke for the navbar-toggler-icon for better visibility */
}
@ media ( max-width : 768px ) {
. navbar-brand img {
height : 20px ; /* Smaller logo for smaller screens */
}
. navbar-dark . navbar-toggler {
padding : 0 . 25rem 0 . 5rem ; /* Adjust padding for the toggle button */
}
}
# responseContainer {
position : relative ; /* Needed for absolute positioning of the child button */
}
# copyButton {
position : absolute ;
top : 10px ; /* Adjust as needed */
right : 10px ; /* Adjust as needed */
background-color : rgba (
0 ,
123 ,
255 ,
0 . 5
) ; /* Bootstrap primary color with transparency */
color : white ;
border : none ;
border-radius : 5px ;
padding : 5px 10px ;
font-size : 0 . 8rem ;
cursor : pointer ;
transition : background-color 0 . 3s ease ;
}
# copyButton : hover {
background-color : rgba (
0 ,
123 ,
255 ,
0 . 8
) ; /* Slightly less transparent on hover */
}
# copyButton : focus {
outline : none ;
}
# patternCreatedMessage {
margin-top : 10px ;
padding : 10px ;
background-color : # 4caf50 ;
color : white ;
border-radius : 5px ;
}
. light-theme # patternCreator {
background : # f0f0f0 ;
box-shadow : 0 2px 4px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
}
. light-theme # patternCreator input ,
. light-theme # patternCreator textarea {
background-color : # fff ;
color : # 333 ;
border : 1px solid # ddd ;
}
# patternCreator textarea {
background-color : # 424242 ;
color : # e0e0e0 ;
border : 1px solid # 555 ;
}
# patternCreator input {
background-color : # 424242 ;
color : # e0e0e0 ;
border : 1px solid # 555 ;
}