@groupdocs.examples.jquery/signature/css/signature.mobile.css

jQuery plugin that allows to display and sign documents supported by groupdocs libraries APIs

@media (max-width: 1024px) {
    .gd-modal-lightbox {
        padding-left: 0px;
        padding-top: 0px;
    }
    .gd-modal-header-lightbox{
        height: 50px;
        padding: 0;
    }
    .gd-modal-title-lightbox {
        font-size: 14px;
        line-height: 50px;
        padding: 0 0 0 10px;
    }
    .gd-lightbox-close {
		background-color: #00c4d7;
		width: 50px;
		height: 50px;
		color: #ffffff;
		text-align: center;
		padding: 13px;
		margin: 0;
        line-height: 60px;
    }
    .gd-signature-thumbnail-text, .gd-signature-thumbnail-image, .gd-signature-thumbnail-hand{
        margin: 0;
    }
    .gd-lightbox-close span{
        color: #FFFFFF;
    }
    .gd-modal-table > tbody > tr > td{
        font-size: 14px;
        padding: 10px 0px;
    }
    .gd-modal-body{
        min-height: 100%;
    }

    #gd-header{
        height: 60px;
    }
    #gd-navbar > li{
        font-size: 16px;
        line-height: 52px;
		padding: 0px 15px 0px 8px;
    }
    .gd-nav-btn-pages,#gd-page-num,.gd-nav-separator{
        display: none;
    }
    .gd-modal-dialog {
        width: 100% !important;
        height: 100% !important;
		left: 0px;
		top: 0px;
    }
    .gd-left-bar-tools-container ul li{
        margin: 0px;
    }
    #gd-btn-download-value {
        top: 78px;
    }

    #gd-btn-download-value li {
        font-size: 44px;
    }   

    .gd-signature-thumbnail-image {
        width: 44px;
        height: 44px;
    }    

    .gd-signature-item .gd-signature-name {
        font-size: 13px;
    }

    .gd-left-bar-spinner {
        top: 20%;
    }

    .gd-left-bar-fade {
        top: 100px;
        right: 0;
    }      

	.gd-signature-thumbnail-digital i {
		font-size: 30px !important;
	}
	
	.gd-signature-item i {
		font-size: 15px;    
	}

    .bcPicker-palette {
        width: 286px !important;
    }

    .bcPicker-palette > .bcPicker-color {
        width: 62px !important;
        height: 57px !important;
    } 

    #gd-modal-signed {
        top: 127px !important;
        font-size: 45px !important;
    } 
	
    .ui-datepicker {
        font-size: 18px;
    }       

    #csg-params-header > button {
        font-size: 14px !important;
    }   

    .csg-border-width {
        width: 25px !important;
        height: 22px !important;
        margin-left: 8px;
        margin-top: 9px;
    }

    .gd-left-bar-wrapper {
        display: none;
        top: 60px;
        width: 100%;
    }

    #gd-header-logo {
        background-image: unset !important;
        width: 60px;
    }

    .gd-tool {
        white-space: nowrap;
        text-align: left;
        width: 100% !important;
        height: auto !important;
        padding: 23px;
        margin: 0;
    }

    .gd-left-bar-tools-container {
        width: 100%;       
    }
	.ui-draggable-handle {
		-ms-touch-action: none;
		touch-action: inherit !important;
	}
    .gd-tool > i {
        font-size: 14px;
        width: auto;
        height: auto !important
    }

    .gd-tool .gd-popupdiv-hover {
        display: inline;
    }

    .gd-tool-tooltip-mobile {
        color: rgba(0,0,0,0.41) !important;
        background-color: #fff !important;
        font-size: 14px;
        position: relative;
        left: 0px;
        padding: 0px;
        text-align: left;
        top: 0;
    }

    .gd-tool-tooltip::after {
        display: none;
    }

    .gd-mobile-menu {
        display: block;
        text-align: center;
    }
    .gd-mobile-menu i{
        line-height: 60px;
    }

    .gd-mobile-menu-open {
        display: block;
        cursor: pointer;
    }

    .gd-mobile-menu-close {
        cursor: pointer;
    }

    .gd-text-menu-top {
        top: 60px;
    }

    .gd-text-menu-down {
        top: unset;
    }

    .gd-text-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
		height: 60px;
        align-items: baseline;
        padding: 0px;
        margin: 0px;
    }

    .gd-blur {
        width: 100%;
        height: 60px;
        background-color: #3E4E5A;
        opacity: 0.7;
        position: absolute;
        z-index: -1;
    }

    .gd-fonts-select {
		background-color: #78838c;
		color: white;
		margin: 25px 3px 4px 15px;
    }

    .gd-fonts-select.font {
        width: 30%;
    }

    .gd-text-menu i {
        color: white;
		margin: 0 9px 0 9px;
    }

	.gd-text-color-picker {
		width: 16px;
		height: 16px;
		margin: 0 19px 0 17px;
		padding: 0;
	}

    .fa-arrow-up {
        color: #dcdcdc;
        -moz-transition: all 0.5s linear;
        -webkit-transition: all 0.5s linear;
        transition: all 0.5s linear;
    }

    .down {
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .gd-signature-context-panel {
        left: 60px;
        right: 0px;
        width: auto;
    }

    .gd-signature-context-panel-title {
        font-size: 12px;
        line-height: 18px;
        margin: 16px 0 14px 12px;
    }

	.gd-digital-input-wrapper {
		width: fit-content;
	}
    .gd-signature-context-panel::after {
        border: 10px solid rgba(0, 0, 0, 0);
        border-right-color: #F3F3F3;
    }

    .gd-signature-context-panel.text::after {
        top: 25px;
    }

    .gd-signature-context-panel.image::after {
        top: 88px;
    }

    .gd-signature-context-panel.digital::after {
        top: 147px;
    }

    .gd-signature-context-panel.qrCode::after {
        top: 209px;
    }

    .gd-signature-context-panel.barCode::after {
        top: 268px;
    }

    .gd-signature-context-panel.stamp::after {
        top: 329px;
    }

    .gd-signature-context-panel.hand::after {
        top: 390px;
    }

    .gd-context-menu i.active {
        background-color: #959da5;

    }

    .gd-context-menu i {
        padding: 10px 7px 10px 10px;
    }

    .gd-context-menu-top {
        top: -34px;
    }

    .ui-resizable-handle {
        width: 18px;
        height: 18px;
        border-radius: 100%;
    }

    .ui-resizable-nw{
        left: -9px;
        top: -9px;
    }
    .ui-resizable-sw{
        left: -9px;
        bottom: -9px;
    }
    .ui-resizable-se{
        bottom: -9px;
        right: -9px;
    }
    .ui-resizable-ne{
        right: -9px;
        top: -9px;
    }

    .gd-upload-container {
		width: -webkit-fill-available;
		height: auto;
    }
	
	.gd-signature-context-panel-title, .gd-signature-context-upload-title {
		width: unset;
	}
    .gd-upload-inputs {
        width: -webkit-fill-available;        
    }

    .gd-upload-inputs input {
        width: -webkit-fill-available;
		height: 201px;
    }

    .gd-digital-inputs i {
        font-size: 13px;
    }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
    .gd-modal-dialog-lightbox {
        position: fixed;
        display: block;
    }

    .gd-mobile-portrait {
        display: none;
    }
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
    .gd-modal-dialog-lightbox {
        display: none;
    }

    .gd-mobile-portrait {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
    }

    .gd-mobile-turn-image {
        background-image: url('../images/noun_landscape orientation.png') !important;
        position: fixed;
        left: Calc((100% - 215px)/2);
        top: Calc((100% - 215px)/2);
        width: 215px;
        height: 215px;
    }
}