@charset "utf-8";
body {
background: #d5ecfc;
color: rgb(80, 80, 80);
}
h1 {
text-align: center;
font-size: 24px;
color: #fff;
background: #04489b;
padding: 15px;
line-height: 1rem;
}
a {
text-decoration: none;
}
input {
padding-left: 3px;
border: 0.5px solid rgb(146, 146, 146);
border-radius: 3px;
display: block;
}
#content {
margin: 15px auto !important;
overflow: hidden;
}
table {
max-width: 520px;
}
td {
padding: 5px;
font-size: 14px;
text-align: center;
margin: 0;
}
.name {
width: 150px;
}
.pass {
width: 150px;
}
.up {
width: 100px;
}
.dele {
width: 100px;
}
.var_dump {
padding: 15px;
background: rgb(224, 255, 224);
font-size: 16px;
}
.return {
width: 800px;
text-align: left;
margin: 30px auto 0;
display: block;
}
h2 {
margin-bottom: 30px;
;
}
/* ==============================================
Design Plus
================================================*/
/* ===================common====================== */
header .icon:hover {
opacity: 0.8;
}
body {
background: url(../img/bg.jpg) no-repeat;
background-color: rgba(255, 255, 255, 0.7);
background-blend-mode: lighten;
background-size: cover;
}
#content {
max-width: 900px;
}
form h2 {
padding: 60px 0;
font-size: 1.2rem;
text-align: center;
}
.return {
width: 100%;
margin: 0;
}
span.strong {
font-size: 1.3em;
}
span.orange {
color: #e2563b;
}
/*heder*/
header {
background: -moz-linear-gradient(to bottom, #7b9bc7, #e9cfd4);
background: -webkit-linear-gradient(to bottom, #7b9bc7, #e9cfd4);
background: linear-gradient(to bottom, #7b9bc7, #e9cfd4);
display: flex;
flex-direction: row;
position: relative;
}
header .icon {
width: 100px;
margin: 19px 19px 0;
text-align: center;
position: absolute;
}
header .icon img {
width: 100%;
}
header h1 {
width: 100%;
background: none;
line-height: 1.1;
}
header h1 span.sub {
font-size: 0.7em;
}
/* ===================list====================== */
/*create_btn*/
.create_btn {
margin: 0 auto 20px;
padding-top: 20px;
font-size: 14pt;
}
.create_btn button {
margin: 0;
position: relative;
}
.create_btn a {
font-weight: bold;
color: #e2563b;
}
.create_btn a:hover {
opacity: 0.7;
}
/*!empty_return*/
p.return_empty a {
font-weight: bold;
color: #e2563b;
}
p.return_empty {
padding-bottom: 30px;
}
/*search*/
#search {
float: right;
width: 30%;
border-radius: 3px;
font-size: 18px;
}
#search form {
position: relative;
background: #fff;
}
#search form input {
width: 100%;
border-color: #e2563b;
}
#search form input::placeholder {
font-size: 12pt;
}
#search button {
height: 100%;
width: 50px;
background: #e2563b;
color: #fff;
top: 0;
right: 0;
position: absolute;
}
#search button:hover {
background: #f0907f;
}
/*btn*/
#search button {
border-radius: 0 3px 3px 0;
}
/*list_table*/
table {
border-spacing: 0px 2px;
max-width: 65%;
}
/*id_color*/
tr:nth-child(n+2) .id {
background-color: #0083ab;
color: #fff;
}
/*Record odd*/
tr:nth-child(odd) .name,
tr:nth-child(odd) .mail,
tr:nth-child(odd) .up,
tr:nth-child(odd) .dele {
background-color: #f5f8fb;
}
/*Record even*/
tr:nth-child(even) .name,
tr:nth-child(even) .mail,
tr:nth-child(even) .up,
tr:nth-child(even) .dele {
background-color: #fff;
}
/*category*/
tr:first-child .id,
tr:first-child .name,
tr:first-child .mail,
tr:first-child .up,
tr:first-child .dele {
height: 40px;
background: #016079;
color: #fff;
font-size: 0.5em;
position: relative;
}
tr:first-child .id,
tr:first-child .up,
tr:first-child .dele {
width: 10%;
}
tr:first-child .mail {
width: 40%;
}
tr:first-child td.id:after,
tr:first-child td.name:after,
tr:first-child td.mail:after,
tr:first-child td.up:after {
height: 80%;
width: 1px;
content: "";
top: 10%;
right: 0;
position: absolute;
background-color: #fff;
}
/*EDIT DELETE_iconColor*/
tr:nth-child(n+2) .up a,
tr:nth-child(n+2) .dele a {
color: #e2563b;
font-size: 1.3em;
}
tr:nth-child(n+2) .up a:hover,
tr:nth-child(n+2) .dele a:hover {
color: #f0907f;
font-size: 1.3em;
}
tr {
margin-bottom: 5px;
overflow: hidden;
}
/* ===================form====================== */
/*form_input*/
.form_input input {
width: 300px;
background: #fff;
border: solid 2px #e2563b;
border-radius: 3px;
}
/*username*/
.form_input .username label {
padding-left: 25px;
font-weight: bold;
color: #0e1d44;
position: relative;
}
.form_input .username label:before {
content: "";
width: 20px;
height: 30px;
bottom: -5px;
left: 3px;
background: url(../img/icon_man.png) no-repeat;
position: absolute;
}
/*mail*/
.form_input .mail label {
padding-left: 35px;
font-weight: bold;
color: #0e1d44;
position: relative;
}
.form_input .mail label:before {
content: "";
width: 30px;
height: 30px;
bottom: -8px;
left: 3px;
background: url(../img/icon_mail.png) no-repeat;
position: absolute;
}
.form_input {
display: flex;
justify-content: center;
}
.form_input .username,
.form_input .mail {
margin: 0 20px;
}
.form_btn {
padding-top: 60px;
display: flex;
justify-content: center;
}
.form_create_btn,
.form_return_btn {
margin: 0 20px;
}
.form_create_btn:hover,
.form_return_btn:hover {
opacity: 0.7;
}
.form_create_btn:active,
.form_return_btn:active {
transform: scale(0.95);
}
/*return_btn*/
p.return {
position: relative;
background: #b0b4c2;
border-radius: 3px;
}
p.return a {
padding: 10px;
padding-left: 50px;
padding-right: 25px;
color: #0e1d44;
font-weight: bold;
display: block;
}
p.return a:before {
content: "";
width: 30px;
height: 25px;
background-image: url(../img/arrow_return.png);
top: 55%;
left: 10%;
transform: translate(0, -55%);
position: absolute;
}
/*create_btn*/
.form_create_btn input {
border: none;
padding: 10px 68px;
background-color: #e2563b;
color: #fff;
}
.var_dump{
padding: 15px;
background: #cef;
font-size: 16px;
}