You are here

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

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

Same filename and directory in other branches
  1. 7 css/mo-card.css
/* this is for tour button */

.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: 50%;
    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-tour-title>h1 {     font-size: 16px; margin:0;}
.mo-tour-content-area>h2 {     font-size: 13px; margin:0;}
.mo-card>h3, .mo-card>p, .mo-card>div, .mo-card>input {     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: 100%;
    left : 5%;
    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;

}
.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: 8%;
    margin-bottom: 7px;
}

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

.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 7px;
    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;
    position: relative !important;
    background-color: #ffffff;
}
.mo-extrabig{
    height: 20em;
    margin-top: -10em;
}
.mo-big {
    height: 19em;
    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: 170px;
    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: 108px;
    border-right-color: #fff;
}
/*arrow when pointing to right side*/
.mo-saml-arrow-right
{
    margin-left: 323px;
    margin-top: 92px;
    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. 

  3. .mo-tour-backdrop {

  4.     opacity: 1;

  5.     z-index: 2;

  6. }

  7. 

  8. .mo-tour-overlay {

  9.     top: 0;

  10.     left: 0;

  11.     position: fixed;

  12.     width: 100%!important;

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

  14.     height: 100%!important;

  15.     z-index: 999991;

  16.     display:block;

  17. }

  18. 

  19. .mo-card {

  20.     top: 50%;

  21.     left: 50%;

  22.     width: 24em;

  23.     margin-left: -12em;

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

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

  26.     background-color: #ffffff00;

  27.     position: fixed;

  28.     z-index : 999991;

  29.     border-radius: 4px;

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

  31. }

  32. 

  33. .mo-tour-title>h1 {     font-size: 16px; margin:0;}

  34. .mo-tour-content-area>h2 {     font-size: 13px; margin:0;}

  35. .mo-card>h3, .mo-card>p, .mo-card>div, .mo-card>input {     font-size: 14px;margin:0;}

  36. 

  37. 

  38. /* when no side, centre */

  39. .mo-tour-content-area{

  40.     height: 120%;

  41.     width: 100%;

  42.     position: absolute;

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

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

  45.     text-align: center;

  46.     border-radius: 4px;

  47. 

  48. }

  49. 

  50. .mo-tour-arrow{

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

  52.     text-align: center;

  53.     height: 0;

  54.     font-size: 5em;

  55. }

  56. 

  57. .mo-tour-arrow>i {

  58.     position: relative;

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

  60. }

  61. 

  62. 

  63. /* when pointing left */

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

  65.     height: 100%;

  66.     width: 5%;

  67.     position: relative;

  68.     left : 0;

  69.     float: left;

  70. 

  71. }

  72. 

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

  74.     width: 100%;

  75.     left : 5%;

  76.     float: left;

  77.     padding-left:10px;

  78. }

  79. 

  80. /* when pointing right */

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

  82.     height: 100%;

  83.     width: 5%;

  84.     position: relative;

  85.     float: left;

  86.     margin-left: -27px;

  87. }

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

  89.     width: 95%;

  90.     float: left;

  91. 

  92. }

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

  94. {

  95.     margin:0;

  96. }

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

  98.     margin:0;

  99. }

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

  101.     margin:0;

  102. }

  103. /* when pointing top */

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

  105.     height: 8%;

  106.     margin-bottom: 7px;

  107. }

  108. 

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

  110.     height: 92%;

  111. }

  112. 

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

  114.  margin-top:    15px;

  115. }

  116. /* when pointing bottom */

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

  118.     height: 7%;

  119.     top: 94%;

  120.     position: relative;

  121.     margin-top: -5px;

  122. 

  123. }

  124. 

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

  126.     height: 92%;

  127.     top: 0;

  128. }

  129. 

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

  131.     padding-top: 5px;

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

  133. }

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

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

  136. 

  137. }

  138. 

  139. .mo-tour-button-area{

  140.     position: absolute;

  141.     bottom: 0;

  142.     margin: 25px auto;

  143.     margin-bottom: 15px;

  144.     text-align: center;

  145.     width: inherit;

  146.     border-radius: 7px;

  147. }

  148. 

  149. .mo-tour-button {

  150.     line-height: 1.4;

  151.     font-weight: 600;

  152.     margin:auto 7px;

  153.     height: 35px;

  154.     width: 110px;

  155.     padding: 0 20px;

  156.     border: none;

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

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

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

  160. }

  161. 

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

  163.     margin:auto 10px;

  164. }

  165. 

  166. .mo-skip-btn:hover {

  167.     background-color: #f61717d9;

  168.     color: #ffffff;

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

  170. }

  171. 

  172. .mo-skip-btn {

  173.     background-color: #ffffff00;

  174.     border: 2px solid #f61717d9;

  175.     color: #f61717d9;

  176.     cursor: pointer;

  177. }

  178. 

  179. .mo-tour-primary-btn {

  180.     color : #48a0dc;

  181.     background-color: #ffffff00;

  182.     border: 2px solid #48a0dc;

  183.     cursor:pointer;

  184. }

  185. 

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

  187.     color : #ffffff;

  188.     background-color:  #48a0dc;

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

  190. }

  191. 

  192. .mo-target-index {

  193.     z-index: 999992 !important;

  194.     position: relative !important;

  195.     background-color: #ffffff;

  196. }

  197. .mo-extrabig{

  198.     height: 20em;

  199.     margin-top: -10em;

  200. }

  201. .mo-big {

  202.     height: 19em;

  203.     margin-top: -10em;

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

  205. }

  206. 

  207. .mo-medium {

  208.     height: 14em;

  209.     margin-top: -7em;

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

  211. }

  212. .mo-largemedium {

  213.     height: 15.4em;

  214.     margin-top: -7em;

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

  216. }

  217. 

  218. .mo-small {

  219.     height: 10em;

  220.     margin-top: -5em;

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

  222. }

  223. 

  224. .mo-big img {

  225.     height:80px;

  226. }

  227. 

  228. .mo-medium img {

  229.     height:60px;

  230.     padding-top:10px;

  231. }

  232. 

  233. .mo-small img {

  234.     height:40px;

  235. }

  236. 

  237. .mo-saml-header{

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

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

  240.     border: 1px solid #3592b6;

  241.     border-bottom: none;

  242.     line-height: 1.4em;

  243.     font-size: 14px;

  244.     color: #fff;

  245.     background: #00a0d2;

  246.     border-radius: 1px;

  247. }

  248. .mo-saml-arrow

  249. {

  250.     margin-left: -9px;

  251.     border: 13px solid transparent;

  252.     border-right-color: #fff;

  253.     display: block;

  254.     content: " ";

  255.     position: initial;

  256.     width: 0;

  257.     height: 0;

  258. }

  259. .mo-saml-arrow

  260. {

  261.     border: 13px solid transparent;

  262. }

  263. /*arrow when pointing to top*/

  264. .mo-saml-arrow-up

  265. {

  266.     margin-left: 170px;

  267.     margin-top: -26px;

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

  269. }

  270. /*arrow when pointing to bottom*/

  271. .mo-saml-arrow-down

  272. {

  273.     margin-left: 170px;

  274.     margin-top: 196px;

  275.     border-top-color: #fff;

  276. }

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

  278.     .mo-saml-arrow-left

  279. {

  280.     margin-left: -9px;

  281.     margin-top: 108px;

  282.     border-right-color: #fff;

  283. }

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

  285. .mo-saml-arrow-right

  286. {

  287.     margin-left: 323px;

  288.     margin-top: 92px;

  289.     border-left-color: #fff;

  290. }

  291. 

  292. .next_button{

  293.     padding:5px 10px;

  294.     float:right;

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

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

  297.     color: #fff;

  298.     text-decoration: none;

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

  300.     position: relative;

  301.     bottom:-70px;

  302.     right: 17px;

  303. }

  304. .mo_saml_vt_h3

  305. {

  306.     height: 30px;

  307.     position: relative;

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

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

  310.     border: 1px solid #3592b6;

  311.     border-bottom: none;

  312.     line-height: 1.4em;

  313.     font-size: 14px;

  314.     color: #fff;

  315.     background: #00a0d2;

  316. }

  317. .mo_visual_tour_box

  318. {

  319.     position: absolute;

  320.     width: 320px;

  321.     height: 180px;

  322.     top: 0px;

  323.     left: 100px;

  324.     z-index: 9999;

  325.     background-color: #ffffff!important;

  326. 

  327. }

  328. .restart_button{

  329.     padding:5px 10px;

  330.     float:right;

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

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

  333.     color: #fff;

  334.     text-decoration: none;

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

  336. }