[samples/web/ExercisePlanner.git] / css / style.css

body {
        -webkit-user-select: none;
}

#one {
        background-image: url('../images/background.png');
}

.screen {
        font-family: serif;
        color: white;
        font-size: 17pt;
}

#sentence {
        margin: 10px 30px 0 30px;
        position: relative;
        float: right;
        text-indent: 30px;
}

#signature {
        margin: 0px 30px 0 auto;
        position: relative;
        float: right;
}

#logo {
        font-family: courier;
        font-size: 36px;
        width: 100%;
        background-repeat: no-repeat;
        margin: 0px 40px 0 auto;
        color: white;
        border-bottom: 1px solid white;
        font-weight: bolder;
        text-align: right;
        line-height: 43px;
}

#status {
        width: 400px;
        height: 350px;
        margin: 0 auto;
        background-repeat: no-repeat;
}

#status.lazy {
        background-image: url('../images/state_lazy.png');
}

#status.run {
        background-image: url('../images/state_run.png');
}

#communicate {
        font-size: 17pt;
        text-align: center;
        min-height: 50px;
}

#communicate.onAlert {
        font-size: 60px;
        text-align: center;
        text-shadow: 5px 5px 5px black;
}

#communicate b {
        font-size: 25px;
}

#communicate div {
        font-size: 32px;
        font-weight: bold;
}

.schedule {
        height: 100px;
}

.scheduleOptions {
        height: 100px;
}

.increasingStrength {
        display: none;
}

.typeOfPeriods, .typeOfPeriods ul li {
        height:60px;
}

.strength {
        margin: 0 0 20px 0;
}

.timeRangeLabel {
        height: 50px;
}

.activeStatus {
        display: inline;
        float: right;
        color: blue;
}

.activeStatusDisable {
        color: red;
}

.times li {
        display: inline-block;
        width: 200px;
}

.times {
        width: 100%;
        float: left;
        margin: 0;
        padding: 10px;
}

.times .ui-datefield {
        font-size: 60px;
}

h2.ui-title {
        width:99%;
        text-overflow: ellipsis;
}

/**
 * Removing disturbing paddings from wide button
 **/
#addTimeRange .ui-btn-inner.ui-btn-hastxt,
#selectExercises .ui-btn-inner.ui-btn-hastxt {
        padding-left:0;
        padding-right:0;
}
#addTimeRange .ui-btn-text.ui-btn-text-padding-left,
#selectExercises .ui-btn-text.ui-btn-text-padding-left {
        padding:0;
}

/**
* Removing unnecessary line before the first button
**/
#workdaysType span.ui-btn-inner.ui-btn-hastxt {
    border-left: none;
}

old styles;

*/
.exerciseView {
        width: 80%;
        height: 200px;
        border-width: 1px;
        border-color: #888 #DDD #DDD #888;
        border-style: solid;
        background-color: #578;
        -webkit-border-radius: 0.6em;
        -webkit-box-align: center;
        margin: 0 auto;
        box-shadow: 0px 0px 20px #000;
        position: relative;
}

.optionsExercises label {
        line-height: 44px;
}

#exercises {
        margin-bottom: 10px;
}

#exercises > li > span {
        white-space: pre;
}

.myHeader {

}

.ui-controlgroup .ui-radio {
        width: 20%;
}

.myContent {
        margin: auto 10px 10px 10px;
}

.footerContent {
        margin: 0 auto;
        text-align: center;
        padding-top: 20px;
}

.newExerciseName label {
        width: 100%;
}

.newExerciseName input { /*background-color:white;*/

}

.ui-footer {
        z-index: 1000;
}

#availableTime {
        margin-top: 12px;
        overflow: hidden;
        margin-left: 0;
        margin-right: 0;
}

#availableTime li {
        margin-left: 0;
        margin-right: 0;
}

.ui-swipelist-item .ui-btn {
        padding: 4px;
        margin-right: 12px;
}
.ui-li-text-sub-right {
        font-size: 18px;
        margin-right: 17px;
        float: right;
        margin-top: 2px;
        color: #08f;
}

.disabled {
        color: #f00;
}

ul {
        list-style-type: none;
}

.goToOptionsPack {
        width: 100%;
}

.goToOptions {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
}

.buttonOptions {
        float: right;
        box-shadow: 0px 0px 10px #000;
}

.buttonStop {
        background-color: #F40;
        box-shadow: 0px 0px 10px #000;
}

.selectPeriodType .ui-radio {
        width: 100%;
}

#formEnablePeriod {
        margin-bottom: 20px;
}

#ok_wait {
        position: absolute;
        bottom: 0;
        width: 100%;
}

#ok_wait .ok {
        left: 50px;
}

#ok_wait .wait {
        right: 50px;
        position: absolute;
}

span.meterDesc {
        position: absolute;
        z-index: 100;
        display: block;
        text-align: center;
        width: inherit;
        padding-top: 8px;
        color: #333;
}

.enableOption {
        padding-bottom: 20px;
}

.enableOption>div {
        display: table-cell;
}

.enableOption>label {
        float: left;
        padding-right: 20px;
        padding-top: 8px;
        vertical-align: middle;
}

div.period {
        padding-left: 10px;
}

.center {
        text-align: center;
}

#progress {
        display: none;
        z-index: 1001;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 2, 0, 0.7);
}
#progresscenter {
        position:absolute;
        width:100%;
        top: 40%;
}
#progresstitle {
        color:#FFF;
        text-align:center;
        margin-bottom: 20px;
}
#progressbar {
        display:none;
}
#loader {
        margin: 0 auto;
        width:35px;
        height: 35px;
}
#loader-image {
        -webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(359deg);}
}

.timeRangeButtons .enableStatusButton {
        min-width: 95px;
}

#frontPageContent {
        padding: 15px;
        max-width: 450px;
}
ul.times .ui-btn-picker {
        width: 150px;
        line-height: 70px;
}

#exercises li {
        text-overflow: ellipsis;
        overflow: hidden;
}