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

272 lines
4.3 KiB
CSS
Raw Normal View History

2020-08-14 20:08:00 +02:00
html, body {
margin: 0;
height: 100%;
}
2020-06-26 16:59:54 +02:00
body {
2020-08-14 20:08:00 +02:00
display: flex;
align-items: center;
2020-08-14 20:57:19 +02:00
font: large "Lucida Grande", Helvetica, Arial, sans-serif;
2020-08-14 20:08:00 +02:00
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);
}
2020-08-17 13:22:52 +02:00
h1, h2, h3, p, label {
2020-08-14 20:57:19 +02:00
display: block;
2020-08-14 20:08:00 +02:00
text-align: center;
2020-06-26 16:59:54 +02:00
}
a {
color: #00B7FF;
2020-08-15 11:47:36 +02:00
cursor: pointer;
text-decoration: none;
2020-06-26 16:59:54 +02:00
}
2020-08-14 20:08:00 +02:00
2020-08-18 17:54:00 +02:00
#order {
2020-08-14 20:08:00 +02:00
margin: auto;
display: flex;
flex-direction: column;
}
.field {
2020-08-14 20:57:19 +02:00
margin: 1em auto auto auto;
width: 90%;
2020-08-14 20:08:00 +02:00
}
.field input {
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
2020-08-14 20:57:19 +02:00
margin: auto;
width: 100%;
font-size: 100%;
height: 2.5vh;
2020-08-14 20:08:00 +02:00
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px gray solid;
}
2020-09-20 12:35:02 +02:00
.field input[type="radio"], .field input[type="checkbox"] {
box-shadow: none;
}
2020-08-14 20:57:19 +02:00
.field input[type="submit"] {
height: 4vh;
border: none;
2020-08-14 20:08:00 +02:00
}
2020-08-18 17:54:00 +02:00
#order-action {
2020-08-14 20:08:00 +02:00
display: flex;
justify-content: space-around;
}
2020-08-18 17:54:00 +02:00
#add-order, #remove-order {
2020-08-14 20:08:00 +02:00
font-weight: bold;
font-size: 2em;
margin: auto auto 1em auto;
}
.hide {
display: none;
}
2020-08-15 11:47:36 +02:00
#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;
}
2020-08-21 12:41:34 +02:00
#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;
}
2020-08-17 13:22:52 +02:00
.popup {
2020-08-15 11:47:36 +02:00
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: max-content;
width: max-content;
2020-08-17 10:45:38 +02:00
max-height: 100%;
max-width: 90%;
2020-08-15 11:47:36 +02:00
}
.images {
display: flex;
justify-content: space-around;
2020-08-17 10:45:38 +02:00
flex-wrap: wrap;
overflow-y: auto;
2020-08-15 11:47:36 +02:00
}
.images>div {
display: flex;
align-items: center;
flex-direction: column;
2020-08-17 10:45:38 +02:00
margin: 1em;
2020-08-15 11:47:36 +02:00
}
.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);
}
2020-08-16 12:48:43 +02:00
#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;
2020-08-16 12:48:43 +02:00
margin-left: 1em;
}
2020-08-17 10:45:38 +02:00
2020-08-17 13:22:52 +02:00
.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;
}
2020-08-18 17:54:00 +02:00
#userOrderList {
2020-08-17 17:58:55 +02:00
max-height: 90%;
overflow-y: auto;
}
2020-08-20 11:48:28 +02:00
#ordersManagement, #sandwichesManagement {
2020-08-17 19:04:50 +02:00
max-height: 90%;
}
2020-08-18 17:54:00 +02:00
#ordersManagement h2 {
2020-08-17 19:04:50 +02:00
margin: 0.2em 0 0 0;
}
2020-08-20 11:48:28 +02:00
#ordersManagement>div, #sandwichesManagement>div {
2020-08-17 19:04:50 +02:00
overflow-y: auto;
}
2020-08-18 17:54:00 +02:00
#ordersManagement .order {
2020-08-17 19:04:50 +02:00
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
}
2020-08-18 17:54:00 +02:00
#ordersManagement .order .title, #ordersManagement .sandwich {
2020-08-17 19:04:50 +02:00
display: flex;
justify-content: center;
}
2020-08-18 17:54:00 +02:00
#ordersManagement input[value="x"] {
2020-08-17 19:04:50 +02:00
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 {
2020-09-13 21:17:13 +02:00
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;
}
2020-08-17 10:45:38 +02:00
@media (hover: none) and (pointer: coarse) {
body {
font-size: xx-large;
}
2020-08-21 12:41:34 +02:00
.message>textarea {
font-size: xx-large;
}
2020-08-17 10:45:38 +02:00
}