@charset "utf-8";
/*
Founadtion
*/
.text_align_left { text-align: left; }
.font_bold { font-weight: bold; }
.margin_auto { margin: auto; }
/*
updating
*/
.updating_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.updating_message {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 120px;
color: #fff;
}
.updating_message:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 80px;
height: 80px;
border-radius: 50%;
border: 12px #2fbf47 solid;
border-right-color: transparent;
animation: spin 1s linear infinite;
}
/*
http://www.html5-memo.com/webtips/css3-loading/
*/
@keyframes spin
{
0% { transform: rotate(0deg); }
/* 50%  { transform: rotate(180deg); } */
100%   { transform: rotate(360deg); }
}
.row_list { margin-left: 2em; }
.row_one { margin: 1em 0;}
/*
buttons
*/
.square_button {
color: #fff;
border-radius: 5%;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
text-align: center;
}
.edit_button,
.del_button,
.open_folder,
.close_folder,
.add_button,
.reset_button,
.all_close_button,
.all_open_button,
.addChild {
cursor: pointer;
}
.reset_button {
margin: 0 1em;
color: #999;
}
.all_close_button,
.all_open_button,
.edit_button,
.del_button,
.addChild {
color: #0000ff;
}
.all_close_button:hover,
.all_open_button:hover,
.edit_button:hover,
.del_button:hover,
.addChild:hover {
padding: 0 0.5em;
background-color: #8080ff;
color: #fff;
}
.open_folder {
background-color: #8080ff;
border: 1px #8080ff solid;
}
.open_folder:hover {
background-color: transparent;
color: #8080ff;
}
.close_folder {
background-color: #80ff80;
border: 1px #80ff80 solid;
}
.close_folder:hover {
background-color: transparent;
color: #80ff80;
}
.add_button {
background-color: #ff8080;
border: 1px #ff8080 solid;
margin: 0 1em;
padding: 0 0.5em;
color: #fff;
}
.add_button:hover {
background-color: transparent;
color: #ff8080;
}
.select_list {
border: 1px #ff8080 solid;
margin: 0 1em;
padding: 0 0.5em;
}
/*
submit
*/
.submit_box {
text-align: right;
padding: 1em;
}
.submit_button {
border: 1px #2fbf47 solid;
border-radius: 3%;
padding: 0.5em 3em;
cursor: pointer;
color: #2fbf47;
font-weight: bold;
}
.submit_button:hover {
background-color: #2fbf47;
color: #fff;
}
/*
support
*/
.support_box {
margin: 1em 0;
}
.support_left {
width: 49%;
margin-right: 1%;
}
.support_right {
width: 49%;
margin-left: 1%;
text-align: right;
}
.settings_link {
margin: 0 1em;
border: 1px #2FBF47 solid;
padding: 0.5em 1em;
color: #2FBF47;
cursor: pointer;
font-weight: bold;
}
.settings_link:hover {
background-color: #2FBF47;
color: #fff;
}
/*
modal
*/
.modal_background {
position: fixed;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal_box {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 90%;
height: 90%;
border-radius: 1%;
background-color: #fff;
overflow: hidden;
}
.modal_title {
width: 100%;
padding: 0.5em;
font-weight: bold;
background-color: #ff8080;
color: #fff;
}
.modal_box_title {
padding: 0.5em;
}
.modal_close {
float: right;
padding: 0.5em;
cursor: pointer;
color: #fff;
border-top-right-radius: 10%;
}
.modal_close:hover {
background-color: #ff4040;
}
.modal_body {
overflow: scroll;
height: 100%;
}
.modal_body_one {
margin: 2em;
}
.modal_body_key {
width: 100%;
}
.modal_body_val {
width: 100%;
}
.modal_body_val .input {
padding: 0.1em 0.3em;
}
.modal_body_val .label {
margin-right: 1em;
}
.modal_body_val .radio,
.modal_body_val .checkbox {
margin-right: 0.5em;
}
.modal_body_val .html_editor {
height: 500px;
}
.modal_body_val .modal_one_image {
background: center center transparent no-repeat;
background-size: cover;
width: 20%;
height: 5em;
}
.modal_body_val .modal_one_video {
width: 20%;
height: 5em;
}
.modal_body_val .sketch_picker_button {
width: 2em;
height: 2em;
border: 1px #999 solid;
}
/*  vue-material md-datepicker
*/
.datetime_box .md-field .md-input {
border-bottom: 1px #111 solid;
}
.md-datepicker-dialog.md-theme-default {
z-index: 2001;
background-color: #fff;
box-shadow: 3px 3px 3px #111;
}
.md-datepicker-header {
background-color: #2fbf47;
color: #fff;
}
.md-button-content {
color: #0d6d93;
}
.md-datepicker-selected {
background-color: #2fbf47;
border-radius: 50%;
color: #fff;
}
.md-datepicker-year-button.md-datepicker-selected {
border-radius: 5px;
width: 96%;
margin: 3px auto;
}
.md-button.md-clear {
display: none;
}