Archived
1
0
Fork 0
This repository has been archived on 2024-02-17. You can view files and clone it, but cannot push or open issues or pull requests.
SOD/public/stylesheets/style.css

271 lines
4.3 KiB
CSS

html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
align-items: center;
font: large "Lucida Grande", Helvetica, Arial, sans-serif;
background-color: #db970a;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.card {
display: flex;
flex-direction: column;
width: max-content;
height: auto;
padding: 1em;
margin: auto;
background-color: white;
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
}
h1, h2, h3, p, label {
display: block;
text-align: center;
}
a {
color: #00B7FF;
cursor: pointer;
text-decoration: none;
}
#order {
margin: auto;
display: flex;
flex-direction: column;
}
.field {
margin: 1em auto auto auto;
width: 90%;
}
.field input {
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
margin: auto;
width: 100%;
font-size: 100%;
height: 2.5vh;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px gray solid;
}
.field input[type="radio"], .field input[type="checkbox"] {
box-shadow: none;
}
.field input[type="submit"] {
height: 4vh;
border: none;
}
#order-action {
display: flex;
justify-content: space-around;
}
#add-order, #remove-order {
font-weight: bold;
font-size: 2em;
margin: auto auto 1em auto;
}
.hide {
display: none;
}
#more {
display: flex;
position: fixed;
bottom: 0;
left: 0;
padding: 0.3em;
background-color: white;
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
border-radius: 0.5em 0.5em 0 0;
}
#more a {
margin: 0.1em;
color: black;
text-decoration: underline;
}
#contact .cont {
display: flex;
justify-content: space-between;
}
#contact .cont .field {
margin: 0.5em;
}
.field.message {
width: max-content;
height: max-content;
}
.message>textarea {
width: 60vw;
height: 30vh;
overflow: auto;
resize: none;
font-size: large;
}
.popup {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: max-content;
width: max-content;
max-height: 100%;
max-width: 90%;
}
.images {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
overflow-y: auto;
}
.images>div {
display: flex;
align-items: center;
flex-direction: column;
margin: 1em;
}
.images img {
height: 5em;
}
p.before-link a::before {
content: " ";
}
#dark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(52, 55, 55, .4);
}
#date-selector {
position: fixed;
top: 0;
left: 0;
border-radius: 0 0 0.5em 0.5em;
}
.department {
box-shadow: 0.3em 0.3em 0.3em rgba(0, 0, 255, .2);
}
.sandwich {
display: flex;
margin-left: 1em;
}
.buttons {
display: flex;
justify-content: space-around;
}
#user {
position: fixed;
top: 0;
right: 0;
display: flex;
padding: 0.3em;
background-color: white;
border-radius: 0 0 0.3em 0.3em;
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
}
#user>p, #user>a {
margin: 0.1em;
}
#user>a {
text-decoration: underline;
color: black;
}
#userOrderList {
max-height: 90%;
overflow-y: auto;
}
#ordersManagement, #sandwichesManagement {
max-height: 90%;
}
#ordersManagement h2 {
margin: 0.2em 0 0 0;
}
#ordersManagement>div, #sandwichesManagement>div {
overflow-y: auto;
}
#ordersManagement .order {
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
}
#ordersManagement .order .title, #ordersManagement .sandwich {
display: flex;
justify-content: center;
}
#ordersManagement input[value="x"] {
border: none;
background-color: unset;
cursor: pointer;
}
#sandwichesManagement>a>button, #departmentsManagement>a>button, #usersManagement>a>button, #ordersManagement>a>button {
width: 100%;
}
.give {
height: min-content;
width: min-content;
}
input[type="list"]::-webkit-calendar-picker-indicator {
display: none;/* remove default arrow */
}
.list_arrow:after {
content: url(https://i.stack.imgur.com/i9WFO.png);
margin-left: -20px;
padding: .1em;
pointer-events:none;
}
@media (hover: none) and (pointer: coarse) {
body {
font-size: xx-large;
}
.message>textarea {
font-size: xx-large;
}
}