You are here

Home » API reference » Drupal OAuth & OpenID Connect Login - OAuth2 Client SSO Login 7

mo-card.css in Drupal OAuth & OpenID Connect Login - OAuth2 Client SSO Login 7

Same filename and directory in other branches
  1. 8 css/mo-card.css
/* this is for tour button */
.mo-otp-help-button.fixed#restart_tour_button{
    /* right:5.6em; */
    position:relative;
}

.mo-tour-backdrop {
    opacity: 1;
    z-index: 2;
}

.mo-tour-overlay {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%!important;
    background-color: #000000a1!important;
    height: 100%!important;
    z-index: 999991;
    display:block;
}

.mo-card {
    top: 50%;
    left: 40%;
    width: 24em;
    margin-left: -12em;
    /*set to a negative number 1/2 of your width*/
    /* border: 1px solid #ccc; */
    background-color: #ffffff00;
    position: fixed;
    z-index : 999991;
    border-radius: 4px;
    /* transform: scale(0.8); */
}

.mo-card h1 {     font-size: 20px; margin:0;}
.mo-card h2 {     font-size: 17px; margin:0;}
.mo-card {     font-size: 14px;margin:0;}


/* when no side, centre */
.mo-tour-content-area{
    height: 120%;
    width: 100%;
    position: absolute;
    /* border: 1px solid #b8acee; */
    background-color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 4px;

}

.mo-tour-arrow{
    /* border: 1px solid #bcda18; */
    text-align: center;
    height: 0;
    font-size: 5em;
}

.mo-tour-arrow>i {
    position: relative;
    top: calc(50% - 0.6em);
}


/* when pointing left */
.mo-point-left.mo-tour-arrow{
    height: 100%;
    width: 5%;
    position: relative;
    left : 0;
    float: left;

}

.mo-point-left.mo-tour-content-area {
    width: 95%;
    left : 5%;
    top: -11%;
    float: left;
    padding-left:10px;
}

/* when pointing right */
.mo-point-right.mo-tour-arrow{
    height: 100%;
    width: 5%;
    position: relative;
    float: left;
    margin-left: -27px;
}
.mo-point-right.mo-tour-content-area {
    width: 95%;
    float: left;
    top: -17%;
}
.mo-point-center > .mo-saml-header
{

    margin:0;
}
.mo-point-right > .mo-saml-header{
    margin:0;
}
.mo-point-up > .mo-saml-header{
    margin:0;
}
/* when pointing top */
.mo-point-up.mo-tour-arrow{
    height: 6.8%;
    margin-bottom: 9px;
}

.mo-point-up.mo-tour-content-area {
    height: 115%;
}

.mo-point-up #mo-card {
 margin-top:    15px;
}
/* when pointing bottom */
.mo-point-down.mo-tour-arrow{
    height: 7%;
    top: 94%;
    position: relative;
    margin-top: -5px;

}

.mo-point-down.mo-tour-content-area {
    height: 92%;
    top: 0;
}

.mo-tour-content-area>img {
    padding-top: 5px;
    width:auto;     /*maintain aspect ratio*/
}
.mo-tour-title>h1 , .mo-tour-content{
    padding: 15px 15px 10px 25px;

}

.mo-tour-button-area{
    position: absolute;
    bottom: 0;
    margin: 25px auto;
    margin-bottom: 15px;
    text-align: center;
    width: inherit;
    border-radius: 7px;
}

.mo-tour-button {
    line-height: 1.4;
    font-weight: 600;
    margin:auto 15px;
    height: 35px;
    width: 110px;
    padding: 0 20px;
    border: none;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: background-color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.mo-point-left.mo-tour-button {
    margin:auto 10px;
}

.mo-skip-btn:hover {
    background-color: #f61717d9;
    color: #ffffff;
    /* box-shadow: 0px 4px 10px 0px #32373c; */
}

.mo-skip-btn {
    background-color: #ffffff00;
    border: 2px solid #f61717d9;
    color: #f61717d9;
    cursor: pointer;
}

.mo-tour-primary-btn {
    color : #48a0dc;
    background-color: #ffffff00;
    border: 2px solid #48a0dc;
    cursor:pointer;
}

.mo-tour-primary-btn:hover {
    color : #ffffff;
    background-color:  #48a0dc;
    /* border: 2px solid #48a0dc; */
}

.mo-target-index {
    z-index: 999992 !important;
}
.mo-target-position {
    position: relative !important;
    background-color: #ffffff;
}

.mo-big {
    height: 18em;
    margin-top: -10em;
    /*set to a negative number 1/2 of your height*/
}

.mo-medium {
    height: 14em;
    margin-top: -7em;
    /*set to a negative number 1/2 of your height*/
}
.mo-largemedium {
    height: 15.4em;
    margin-top: -7em;
    /*set to a negative number 1/2 of your height*/
}

.mo-small {
    height: 10em;
    margin-top: -5em;
    /*set to a negative number 1/2 of your height*/
}

.mo-big img {
    height:80px;
}

.mo-medium img {
    height:60px;
    padding-top:10px;
}

.mo-small img {
    height:40px;
}

.mo-saml-header{
    margin: 0px 0px 0px -10px;
    padding: 1px 5px 5px 2px;
    border: 1px solid #3592b6;
    border-bottom: none;
    line-height: 1.4em;
    font-size: 14px;
    color: #fff;
    background: #00a0d2;
    border-radius: 1px;
}
.mo-saml-arrow
{
    margin-left: -9px;
    border: 13px solid transparent;
    border-right-color: #fff;
    display: block;
    content: " ";
    position: initial;
    width: 0;
    height: 0;
}
.mo-saml-arrow
{
    border: 13px solid transparent;
}
/*arrow when pointing to top*/
.mo-saml-arrow-up
{
    margin-left: 165px;
    margin-top: -26px;
    border-bottom-color: #3eb0e4;
}
/*arrow when pointing to bottom*/
.mo-saml-arrow-down
{
    margin-left: 170px;
    margin-top: 196px;
    border-top-color: #fff;
}
/*arrow when pointing to left side*/
    .mo-saml-arrow-left
{
    margin-left: -9px;
    margin-top: 111px;
    border-right-color: #fff;
}
/*arrow when pointing to right side*/
.mo-saml-arrow-right
{
    margin-left: 346px;
    margin-top: 86px;
    border-left-color: #fff;
}

.next_button{
    padding:5px 10px;
    float:right;
    border-color: #0073aa #006799 #006799;
    box-shadow: 0 1px 0 #006799;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
    position: relative;
    bottom:-70px;
    right: 17px;
}
.mo_saml_vt_h3
{
    height: 30px;
    position: relative;
    margin: -1px -1px 5px;
    padding: 15px 18px 14px 60px;
    border: 1px solid #3592b6;
    border-bottom: none;
    line-height: 1.4em;
    font-size: 14px;
    color: #fff;
    background: #00a0d2;
}
.mo_visual_tour_box
{
    position: absolute;
    width: 320px;
    height: 180px;
    top: 0px;
    left: 100px;
    z-index: 9999;
    background-color: #ffffff!important;

}
.restart_button{
    padding:5px 10px;
    float:right;
    border-color: #0073aa #006799 #006799;
    box-shadow: 0 1px 0 #006799;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
}

File

css/mo-card.css
View source 
  1. /* this is for tour button */

  2. .mo-otp-help-button.fixed#restart_tour_button{

  3.     /* right:5.6em; */

  4.     position:relative;

  5. }

  6. 

  7. .mo-tour-backdrop {

  8.     opacity: 1;

  9.     z-index: 2;

  10. }

  11. 

  12. .mo-tour-overlay {

  13.     top: 0;

  14.     left: 0;

  15.     position: fixed;

  16.     width: 100%!important;

  17.     background-color: #000000a1!important;

  18.     height: 100%!important;

  19.     z-index: 999991;

  20.     display:block;

  21. }

  22. 

  23. .mo-card {

  24.     top: 50%;

  25.     left: 40%;

  26.     width: 24em;

  27.     margin-left: -12em;

  28.     /*set to a negative number 1/2 of your width*/

  29.     /* border: 1px solid #ccc; */

  30.     background-color: #ffffff00;

  31.     position: fixed;

  32.     z-index : 999991;

  33.     border-radius: 4px;

  34.     /* transform: scale(0.8); */

  35. }

  36. 

  37. .mo-card h1 {     font-size: 20px; margin:0;}

  38. .mo-card h2 {     font-size: 17px; margin:0;}

  39. .mo-card {     font-size: 14px;margin:0;}

  40. 

  41. 

  42. /* when no side, centre */

  43. .mo-tour-content-area{

  44.     height: 120%;

  45.     width: 100%;

  46.     position: absolute;

  47.     /* border: 1px solid #b8acee; */

  48.     background-color: rgb(255, 255, 255);

  49.     text-align: center;

  50.     border-radius: 4px;

  51. 

  52. }

  53. 

  54. .mo-tour-arrow{

  55.     /* border: 1px solid #bcda18; */

  56.     text-align: center;

  57.     height: 0;

  58.     font-size: 5em;

  59. }

  60. 

  61. .mo-tour-arrow>i {

  62.     position: relative;

  63.     top: calc(50% - 0.6em);

  64. }

  65. 

  66. 

  67. /* when pointing left */

  68. .mo-point-left.mo-tour-arrow{

  69.     height: 100%;

  70.     width: 5%;

  71.     position: relative;

  72.     left : 0;

  73.     float: left;

  74. 

  75. }

  76. 

  77. .mo-point-left.mo-tour-content-area {

  78.     width: 95%;

  79.     left : 5%;

  80.     top: -11%;

  81.     float: left;

  82.     padding-left:10px;

  83. }

  84. 

  85. /* when pointing right */

  86. .mo-point-right.mo-tour-arrow{

  87.     height: 100%;

  88.     width: 5%;

  89.     position: relative;

  90.     float: left;

  91.     margin-left: -27px;

  92. }

  93. .mo-point-right.mo-tour-content-area {

  94.     width: 95%;

  95.     float: left;

  96.     top: -17%;

  97. }

  98. .mo-point-center > .mo-saml-header

  99. {

  100. 

  101.     margin:0;

  102. }

  103. .mo-point-right > .mo-saml-header{

  104.     margin:0;

  105. }

  106. .mo-point-up > .mo-saml-header{

  107.     margin:0;

  108. }

  109. /* when pointing top */

  110. .mo-point-up.mo-tour-arrow{

  111.     height: 6.8%;

  112.     margin-bottom: 9px;

  113. }

  114. 

  115. .mo-point-up.mo-tour-content-area {

  116.     height: 115%;

  117. }

  118. 

  119. .mo-point-up #mo-card {

  120.  margin-top:    15px;

  121. }

  122. /* when pointing bottom */

  123. .mo-point-down.mo-tour-arrow{

  124.     height: 7%;

  125.     top: 94%;

  126.     position: relative;

  127.     margin-top: -5px;

  128. 

  129. }

  130. 

  131. .mo-point-down.mo-tour-content-area {

  132.     height: 92%;

  133.     top: 0;

  134. }

  135. 

  136. .mo-tour-content-area>img {

  137.     padding-top: 5px;

  138.     width:auto;     /*maintain aspect ratio*/

  139. }

  140. .mo-tour-title>h1 , .mo-tour-content{

  141.     padding: 15px 15px 10px 25px;

  142. 

  143. }

  144. 

  145. .mo-tour-button-area{

  146.     position: absolute;

  147.     bottom: 0;

  148.     margin: 25px auto;

  149.     margin-bottom: 15px;

  150.     text-align: center;

  151.     width: inherit;

  152.     border-radius: 7px;

  153. }

  154. 

  155. .mo-tour-button {

  156.     line-height: 1.4;

  157.     font-weight: 600;

  158.     margin:auto 15px;

  159.     height: 35px;

  160.     width: 110px;

  161.     padding: 0 20px;

  162.     border: none;

  163.     transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);

  164.     transition: background-color 0.3s ease-in-out;

  165.     transition: color 0.3s ease-in-out;

  166. }

  167. 

  168. .mo-point-left.mo-tour-button {

  169.     margin:auto 10px;

  170. }

  171. 

  172. .mo-skip-btn:hover {

  173.     background-color: #f61717d9;

  174.     color: #ffffff;

  175.     /* box-shadow: 0px 4px 10px 0px #32373c; */

  176. }

  177. 

  178. .mo-skip-btn {

  179.     background-color: #ffffff00;

  180.     border: 2px solid #f61717d9;

  181.     color: #f61717d9;

  182.     cursor: pointer;

  183. }

  184. 

  185. .mo-tour-primary-btn {

  186.     color : #48a0dc;

  187.     background-color: #ffffff00;

  188.     border: 2px solid #48a0dc;

  189.     cursor:pointer;

  190. }

  191. 

  192. .mo-tour-primary-btn:hover {

  193.     color : #ffffff;

  194.     background-color:  #48a0dc;

  195.     /* border: 2px solid #48a0dc; */

  196. }

  197. 

  198. .mo-target-index {

  199.     z-index: 999992 !important;

  200. }

  201. .mo-target-position {

  202.     position: relative !important;

  203.     background-color: #ffffff;

  204. }

  205. 

  206. .mo-big {

  207.     height: 18em;

  208.     margin-top: -10em;

  209.     /*set to a negative number 1/2 of your height*/

  210. }

  211. 

  212. .mo-medium {

  213.     height: 14em;

  214.     margin-top: -7em;

  215.     /*set to a negative number 1/2 of your height*/

  216. }

  217. .mo-largemedium {

  218.     height: 15.4em;

  219.     margin-top: -7em;

  220.     /*set to a negative number 1/2 of your height*/

  221. }

  222. 

  223. .mo-small {

  224.     height: 10em;

  225.     margin-top: -5em;

  226.     /*set to a negative number 1/2 of your height*/

  227. }

  228. 

  229. .mo-big img {

  230.     height:80px;

  231. }

  232. 

  233. .mo-medium img {

  234.     height:60px;

  235.     padding-top:10px;

  236. }

  237. 

  238. .mo-small img {

  239.     height:40px;

  240. }

  241. 

  242. .mo-saml-header{

  243.     margin: 0px 0px 0px -10px;

  244.     padding: 1px 5px 5px 2px;

  245.     border: 1px solid #3592b6;

  246.     border-bottom: none;

  247.     line-height: 1.4em;

  248.     font-size: 14px;

  249.     color: #fff;

  250.     background: #00a0d2;

  251.     border-radius: 1px;

  252. }

  253. .mo-saml-arrow

  254. {

  255.     margin-left: -9px;

  256.     border: 13px solid transparent;

  257.     border-right-color: #fff;

  258.     display: block;

  259.     content: " ";

  260.     position: initial;

  261.     width: 0;

  262.     height: 0;

  263. }

  264. .mo-saml-arrow

  265. {

  266.     border: 13px solid transparent;

  267. }

  268. /*arrow when pointing to top*/

  269. .mo-saml-arrow-up

  270. {

  271.     margin-left: 165px;

  272.     margin-top: -26px;

  273.     border-bottom-color: #3eb0e4;

  274. }

  275. /*arrow when pointing to bottom*/

  276. .mo-saml-arrow-down

  277. {

  278.     margin-left: 170px;

  279.     margin-top: 196px;

  280.     border-top-color: #fff;

  281. }

  282. /*arrow when pointing to left side*/

  283.     .mo-saml-arrow-left

  284. {

  285.     margin-left: -9px;

  286.     margin-top: 111px;

  287.     border-right-color: #fff;

  288. }

  289. /*arrow when pointing to right side*/

  290. .mo-saml-arrow-right

  291. {

  292.     margin-left: 346px;

  293.     margin-top: 86px;

  294.     border-left-color: #fff;

  295. }

  296. 

  297. .next_button{

  298.     padding:5px 10px;

  299.     float:right;

  300.     border-color: #0073aa #006799 #006799;

  301.     box-shadow: 0 1px 0 #006799;

  302.     color: #fff;

  303.     text-decoration: none;

  304.     text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;

  305.     position: relative;

  306.     bottom:-70px;

  307.     right: 17px;

  308. }

  309. .mo_saml_vt_h3

  310. {

  311.     height: 30px;

  312.     position: relative;

  313.     margin: -1px -1px 5px;

  314.     padding: 15px 18px 14px 60px;

  315.     border: 1px solid #3592b6;

  316.     border-bottom: none;

  317.     line-height: 1.4em;

  318.     font-size: 14px;

  319.     color: #fff;

  320.     background: #00a0d2;

  321. }

  322. .mo_visual_tour_box

  323. {

  324.     position: absolute;

  325.     width: 320px;

  326.     height: 180px;

  327.     top: 0px;

  328.     left: 100px;

  329.     z-index: 9999;

  330.     background-color: #ffffff!important;

  331. 

  332. }

  333. .restart_button{

  334.     padding:5px 10px;

  335.     float:right;

  336.     border-color: #0073aa #006799 #006799;

  337.     box-shadow: 0 1px 0 #006799;

  338.     color: #fff;

  339.     text-decoration: none;

  340.     text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;

  341. }