offline-editor-js/samples/css/modular-popup.css
2014-06-08 10:59:37 -06:00

138 lines
2.8 KiB
CSS

.mod-popup-modal-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.5;
background-color: black;
z-index: 99;
display: table;
}
.mod-popup-input {
border-bottom: solid #ffffff 1px;
width: 80%;
display: table-cell;
vertical-align: middle;
padding: 12px;
}
.mod-popup-label {
padding: 12px;
width: 20%;
display: table-cell;
vertical-align: middle;
background-color: dimgrey;
}
.mod-popup-label-top-left {
padding: 12px;
width: 20%;
display: table-cell;
vertical-align: middle;
background-color: dimgray;
border-top-left-radius: 10px;
}
.mod-popup-table-row {
color: white;
border-radius: 10px;
display: table-row;
}
.mod-popup-stop-input {
border-radius: 5px;
font-size: x-large;
width: 90%;
height: 75%;
padding: 5px;
}
.mod-popup-stop-input-disabled {
color: white;
border-radius: 5px;
font-size: x-large;
background-color: dimgray;
opacity: 1.0; /* For safari display bug */
padding: 5px;
width: 90%;
height: 75%;
}
.mod-popup-button {
position: relative;
float: left;
color: #ffffff;
font-size: x-large;
border-radius: 10px;
width: 45%;
padding: 8px;
background-color: #000000;
border: solid #ffffff 2px;
}
.mod-popup-button:active {
position: relative;
float: left;
color: #000000;
font-size: x-large;
border-radius: 10px;
width: 45%;
padding: 8px;
background-color: lightyellow;
border: solid #ffffff 2px;
}
.mod-popup-button-cancel {
position: relative;
float: left;
color: lightgray;
font-size: x-large;
border-radius: 10px;
width: 100%;
padding: 8px;
background-color: #000000;
border: solid lightgray 1px;
}
.mod-popup-button-cancel:active {
position: relative;
float: left;
color: #000000;
font-size: x-large;
border-radius: 10px;
width: 100%;
padding: 8px;
background-color: lightyellow;
border: solid lightgray 1px;
}
.mod-popup-button-div {
padding: 12px;
display: table-cell;
background-color: #000000;
}
.mod-popup-button-div-bottom-left {
padding: 12px;
display: table-cell;
background-color: #000000;
border-bottom-left-radius: 8px;
}
@media (max-width: 500px) {
.mod-popup-button {
font-size: small;
}
.mod-popup-button:active{
font-size: small;
}
.mod-popup-button-cancel {
font-size: small;
}
.mod-popup-button-cancel:active {
font-size: small;
}
}
@media (max-width: 450px) {
.mod-popup-button {
font-size: x-small;
}
.mod-popup-button:active{
font-size: x-small;
}
.mod-popup-button-cancel {
font-size: x-small;
}
.mod-popup-button-cancel:active {
font-size: x-small;
}
}