modal.css [src/moplay/stylesheets] Revision: default Date:
/*
* CHART MODAL
*/
.chartModal {
font-weight: 900;
font-size: large;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
color: whitesmoke;
}
.chartModal:target {
opacity:1;
pointer-events: auto;
}
.chartModal > div {
width: 80%;
height: 80%;
position: relative;
margin: 50px auto;
border-radius: 10px;
background: #606060;
background: -moz-linear-gradient(#606060, #646464);
background: -webkit-linear-gradient(#606060, #646464);
background: -o-linear-gradient(#606060, #646464);
}
/*
* OPEN MODAL
*/
.openModal {
font-weight: 900;
font-size: large;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
color: whitesmoke;
}
.openModal:target {
opacity:1;
pointer-events: auto;
}
.openModal > div {
width: 80%;
height: calc(100% - 100px);
height: -webkit-calc(100% - 100px);
position: relative;
margin: 50px auto;
border-radius: 10px;
background: #606060;
/*background: -moz-linear-gradient(#606060, #646464);*/
/*background: -webkit-linear-gradient(#606060, #646464);*/
/*background: -o-linear-gradient(#606060, #646464);*/
}
.problems-list-container {
margin: 5px 5px;
overflow-y: auto;
height: 100%;
}
/*
* OTHER
*/
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #489cfe;
}
input {
background-color: #489cfe;
}
input #json_file {
background-color: #489cfe;
}
#dropbox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
/*z-index: 99999;*/
}
#dropbox.dragging {
font-weight: 900;
font-size: large;
text-align: center;
color: white;
background: #000000;
background: -moz-linear-gradient(#000000, #000000);
background: -webkit-linear-gradient(#000000, #000000);
background: -o-linear-gradient(#000000, #000000);
z-index: 999999;
opacity: 0.75;
}
.create-watershed-header {
position: relative;
width: 230px;
height: 40px;
margin: 10px auto;
display: flex;
}
.create-watershed-row {
position: relative;
width: 230px;
height: 30px;
margin: 10px auto;
display: flex;
}
.create-watershed-button-row {
position: relative;
width: 230px;
height: 40px;
margin: 10px auto;
display: flex;
}
.create-watershed-heading {
position: relative;
width: 60px;
height: 100%;
margin: auto 0;
}
.create-watershed-input {
position: relative;
width: 160px;
margin-left: 10px;
height: 100%;
}
.create-watershed-footer {
position: relative;
top: 10px;
width: 230px;
height: 40px;
margin: 10px auto;
display: flex;
}
.create-watershed-submit {
background-color: darkblue;
color: white;
border: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
font-weight: 900;
font-size: large;
min-width: 100%;
}
.create-watershed-submit:hover {
background-color: #3981dc;
}
.vertically-centered {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.horizontally-centered {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
/*right: auto;*/
/*left: auto;*/
}
.completely-centered {
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
transform: translate(-50%, -50%);
}
.backdrop {
z-index: -1;
}
.file_button_container,
.file_button_container input {
/*background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;*/
background-color: darkblue;
color: white;
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
border: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
font-weight: 900;
font-size: large;
text-align: center;
max-width: 100%;
}
.file_button_container input {
opacity: 0;
}
.file_button_container:hover {
background-color: #3981dc;
}
.hidden {
visibility: hidden;
}
td {
color: black;
}
/*
table.display tr.even td, table.display tr.even td .sorting_1 {
background: rgba(0,0,0,0.8);
}
table.display tr.odd td, table.display tr.even td .sorting_1 {
background: rgba(0,0,0,0.7);
}
*/
.contained-chart {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
left: 10px;
}