diff --git a/client/src/styles/components/imagePicker.css b/client/src/styles/components/imagePicker.css index cf2640c..ca1c8e7 100644 --- a/client/src/styles/components/imagePicker.css +++ b/client/src/styles/components/imagePicker.css @@ -132,6 +132,63 @@ } @media screen and (max-width: 1024px) and (min-width: 768px) { + .ImagePicker_Content_Container { + border-radius: 8px; + padding: 15px; + } + + .ImagePicker_Content_Container h2 { + font-size: 0.7rem; + } + + .ImagePicker_Image_Url_Field { + border-radius: 4px; + border-width: 1.5px; + margin-bottom: 5px; + height: 1.5rem; + padding: 3px; + } + + .ImagePicker_Image_Url_Field:read-write { + font-size: 0.8rem; + } + + .ImagePicker_File_Picker_Label_Container { + padding: 4px; + gap: 8px; + border-radius: 4px; + } + + .ImagePicker_File_Picker_Label_Container label { + font-size: 0.8rem; + } + + .ImagePicker_File_Picker_Label_Container svg { + font-size: 0.8rem; + } + + .ImagePicker_Content_Preview { + height: 40vh; + border-radius: 8px; + } + + .ImagePicker_Content_Preview h3 { + font-size: 0.7rem; + } + + .ImagePicker_Content_Preview_ImgElement { + border-radius: 8px; + } + + .ImagePicker_Submit_Button { + padding: 8px; + border-radius: 4px; + border-width: 0px; + font-size: 0.8rem; + } +} + +@media screen and (max-width: 768px) and (min-width: 480px) { .ImagePicker_Page { position: fixed; width: 100%; @@ -145,24 +202,14 @@ } .ImagePicker_Content_Container { - /* border: 1px solid red; */ - width: 40%; - height: 80vh; - background-color: white; - border-radius: 8px; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - text-align: center; - padding: 15px; - box-sizing: border-box; + width: 60%; + height: 70vh; + border-radius: 7px; + padding: 10px; } .ImagePicker_Content_Container h2 { - font-family: var(--primary-font-family); - font-size: 0.7rem; - font-weight: 600; + font-size: 0.65rem; } .ImagePicker_Image_Url_Container { @@ -172,42 +219,19 @@ .ImagePicker_Image_Url_Field { border-radius: 4px; border-width: 1.5px; - border-style: solid; - width: 100%; margin-bottom: 5px; - height: 1.5rem; + height: 1.3rem; padding: 3px; - border-color: rgb(150, 150, 150); - } - - .ImagePicker_Image_Url_Field:focus { - outline: none; } .ImagePicker_Image_Url_Field:read-write { - font-family: var(--primary-font-family); - font-size: 0.8rem; - text-align: center; - } - - /* .ImagePicker_File_Picker_Container { -} */ - - .ImagePicker_File_Picker_Field { - position: absolute; - display: none; + font-size: 0.7rem; } .ImagePicker_File_Picker_Label_Container { - /* border: 1px solid red; */ - background-color: #c9c9c9; padding: 4px; - display: flex; - align-items: center; - gap: 10px; + gap: 8px; border-radius: 4px; - cursor: pointer; - transition-duration: 200ms; } .ImagePicker_File_Picker_Label_Container:hover { @@ -216,51 +240,32 @@ .ImagePicker_File_Picker_Label_Container label { cursor: pointer; - font-size: 0.8rem; + font-size: 0.7rem; } .ImagePicker_File_Picker_Label_Container svg { - font-size: 0.8rem; + font-size: 0.7rem; } .ImagePicker_Content_Preview { width: 65%; - height: 40vh; - background-color: var(--logo-icon-low-opacity-black-color); - border-radius: 8px; - display: flex; - justify-content: center; - align-items: center; + height: 35vh; + border-radius: 6px; } .ImagePicker_Content_Preview h3 { - color: white; - font-family: var(--primary-font-family); font-size: 0.7rem; - font-weight: 600; } .ImagePicker_Content_Preview_ImgElement { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 8px; + border-radius: 6px; } .ImagePicker_Submit_Button { - padding: 8px; + padding: 6px; border-radius: 4px; border-width: 0px; - background-color: var(--primary-color); - color: white; - font-family: var(--primary-font-family); - font-size: 0.8rem; - cursor: pointer; - transition-duration: 200ms; + font-size: 0.7rem; width: 65%; } - - .ImagePicker_Submit_Button:hover { - background-color: var(--primary-color-button-hover-color); - } }