user-auth store frontend css v2

This commit is contained in:
2023-01-03 23:28:44 +05:30
parent 9eabcb9e0d
commit 3ac3720a55
5 changed files with 160 additions and 279 deletions

View File

@@ -36,200 +36,3 @@ body {
overflow: auto; /* Enable scroll if needed */
background-color: #f1f1f1; /* Fallback color */
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
/* margin-top: 80px; Add a top margin to avoid content overlay */
position: absolute;
min-width: 160px;
z-index: 1;
}
/* Float three header columns side by side */
.header {
position: fixed; /* Stay in place */
/* overflow: hidden;*/
z-index: 1; /* Sit on top */
width: 100%;
top: 0; /* Position the navbar at the top of the page */
padding: 0 10px;
background-color: #f1f1f1;
}
.main {
margin-top: 50px; /* Add a top margin to avoid content overlay */
}
/* Float three header columns side by side */
.header-button {
float: left;
width: 10%;
padding: 0 10px;
}
/* Float three header columns side by side */
.header-column {
float: left;
width: 36%;
padding: 0 10px;
}
/* Float three header columns side by side */
.header-page-column {
float: right;
margin-top: 0px;
width: 15%;
padding: 0 10px;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
margin-top: 10px;
margin-bottom: 10px;
}
/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
padding: 16px;
text-align: left;
height: 400px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #f1f1f1;
}
/* Style the counter cards */
.card-openlibrary {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
padding: 16px;
text-align: left;
height: 200px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #f1f1f1;
}
.card img {
float: right;
width: 100px;
padding: 0 20px 20px 0;
}
.card-openlibrary img {
float: right;
width: 100px;
padding: 0 20px 20px 0;
}
.card-title {
padding: 16px;
text-align: left;
width: 60%;
font-weight: bold;
font-size: large;
}
.card-authors {
padding: 16px;
text-align: left;
width: 60%;
font-size: large;
}
.card-desc {
padding: 2px;
text-align: left;
width: 100%;
}
.input-field {
padding: 4px;
float: left;
text-align: left;
width: 50%;
font-size: large;
}
.input-field label {
display: block;
vertical-align: middle;
min-width: 20%;
max-width: 20%;
width: 20%;
padding: 4px;
}
.input-field textarea {
vertical-align: middle;
width: 80%;
}
.input-buttons {
padding: 20px;
float: left;
text-align: left;
width: 100%;
}
.more-info {
width: 90%;
}
.more-info img {
float: right;
width: 200px;
padding: 0 20px 20px 0;
}
.more-info label {
display:inline-block;
text-align: left;
width: 20%;
font-weight: bold;
font-size: large;
}
.more-info-buttons {
padding: 20px;
text-align: left;
}
.page-input {
width: 30px;
}
/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
@media screen and (max-width: 800px) {
.main {
margin-top: 80px; /* Add a top margin to avoid content overlay */
}
.input-field {
width: 100%;
}
}