code/app/static/main.css (88 lines of code) (raw):
/**
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
body{
width: 800px;
margin: 10px auto;
font-family: 'Lato', sans-serif;
font-weight: 100;
}
h1{
color: 333;
}
.gallery .frame{
display: inline-block;
border: 1px solid #ccc;
padding: 5px;
margin: 2px 4px;
background-color: #f9f9f9;
position: relative;
}
.gallery .frame img {
box-shadow: 1px 1px 5px #ccc;
}
.delete-btn{
position: absolute;
top:3px;
right:3px;
opacity: .1;
background-color: #d0e1de;
color: #333
}
.upload{
background-color: #333; /* Green */
border: none;
color: #d0e1de;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'Lato', sans-serif;
font-weight: 400;
cursor: pointer;
}
.upload:disabled,
.upload[disabled]{
cursor:default;
display: none;
}
.delete-btn:hover, .delete-btn:active{
opacity: 1;
}
form{
border: 1px solid #ccc;
background-color: #d0e1de;
padding: 25px;
margin-bottom: 20px;
}
input[type="file"] {
display: none;
}
.file-label{
background-color: #333; /* Green */
border: none;
color: #d0e1de;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.alert{
padding: 20px;
border: 1px solid rgb(91, 198, 255);
background-color: rgb(225, 243, 252);
color: rgb(21, 70, 94);
margin: 20px 0;
font-weight: 900;
display: none;
-webkit-transition:opacity 2s;
-moz-transition:opacity 2s;
-o-transition:opacity 2s;
transition:opacity 2s;
}
.error{
border: 1px solid rgb(255, 148, 91);
background-color: rgb(252, 231, 225);
color: rgb(94, 53, 21);
}