صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
Atenea
/
sgi
2
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
درخت: 93b41a1319
شاخه‌ها تگ‌ها
sgi
/
CIDIT
/
css
/
secciones
/
cuestionario.css

cuestionario.css 8.8 KB
تاريخچه خام

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 
  1. /*
    2. 

  2. To change this license header, choose License Headers in Project Properties.
    3. 

  3. To change this template file, choose Tools | Templates
    4. 

  4. and open the template in the editor.
    5. 

  5. */
    6. 

  6. /* 
    7. 

  7.     Created on : 27/06/2020, 12:51:03 PM
    8. 

  8.     Author     : LCI
    9. 

  9. */
    10. 

  10. /********** MODAL CUESTIONARIO **********/
    11. 

  11. .modalCuestionario .close{ position: absolute; top: 1.5rem; right: 1.5rem; }
    12. 

  12. .iframeCuestionario{ border:0; min-height: 600px; width: 100%; }
    13. 

  13. #iframeVideo{ width: 100%; border: 0; min-height: 600px; }
    14. 

  14. .formaVoto{ overflow: hidden; overflow-y: auto; }
    15. 

  15. #evalua{ max-height: 600px; overflow: hidden; overflow-y: auto; }
    16. 

  16. #scrollContainer { overflow: auto; position:absolute; top: 0; height: 100%; width: 100%; }
    17. 

  17. input[type="radio"] { display: none; }
    18. 

  18. .modalCuestionario .ing-finalistas, .modalCuestionario .ing-no-cargado, .modalCuestionario .ing-negar{ font-size: 150px; }
    19. 

  19. .modalCuestionario .ing-no-cargado, .modalCuestionario .ing-negar{ color: #D21034; }
    20. 

  20. .modalCuestionario .ing-finalistas{ color:#339933; }
    21. 

  21. .instrucciones{ margin: 0.5rem; color: #001D68; font-size: 1rem; font-family: 'indivisa-text-italic'; }
    22. 

  22. 

  23. /********** OPCIONES **********/
    24. 

  24. section{ margin-bottom: 2rem; }
    25. 

  25. section:last-of-type { margin-bottom: 0; }
    26. 

  26. section > .fondoAnuncio{ padding: 1rem; }
    27. 

  27. section > .fondoAnuncio .ing-no-cargado{ font-size: 100px; }
    28. 

  28. section .pregError, section .pregError .ing-no-cargado{ font-size: 20px; }
    29. 

  29. @media (max-width:520px) { 
    30. 

  30.     section > .fondoAnuncio .ing-no-cargado{ font-size: 50px; }
    31. 

  31. }
    32. 

  32. h3.eval::before{ width: 40px; }
    33. 

  33. .subtituloEval{ background: url('../../img/pleca.webp'); position: relative; height: 15px; margin-top: 15px; }
    34. 

  34. .subtituloEval > h5{ background: #FFFFFF; color: #001D68; width: max-content; padding: 0 10px; margin: 0; position: absolute; top: -7px; left: 25px; }
    35. 

  35. .subtituloEval > h5 > label { margin: 0; }
    36. 

  36. .opciones, .abierta{ display: flex; flex-flow: row wrap; margin: 0.5rem; }
    37. 

  37. .opciones > div{ flex: 1; padding: 0.5rem; }
    38. 

  38. .opciones > div > label { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; border-radius: 1rem; border: 2px solid #696969;
    39. 

  39.                           color: #696969; padding: 1rem; margin: 0; position: relative; }
    40. 

  40. .opciones > div > label{ cursor: pointer; text-align: center; }
    41. 

  41. .opciones > div > input[type="radio"]:checked + label, .opciones > div > label:hover{ color: #001D68; }
    42. 

  42. .opciones > div > label:hover{ text-shadow: 0 0 1px #001D68; }
    43. 

  43. .opciones > div > input[type="radio"]:checked + label::after { position: absolute; bottom: -0.5rem; right: -0.5rem; background: #FFFFFF; border-radius: 50%; width: 34px; height: 34px; font-family: 'ingfont'; content: '\e916'; font-size: 1rem; padding: 5px; }
    44. 

  44. .opciones > div > input[type="radio"]:checked + label.op1, .opciones > div > label.op1:hover { background: #007BC4; border-color: #007BC4; }
    45. 

  45. .opciones > div > label.op1:hover { box-shadow: 0 0 5px #007BC4; }
    46. 

  46. .opciones > div > label.op1:after { color: #007BC4; border: 1px solid #007BC4; }
    47. 

  47. .opciones > div > input[type="radio"]:checked + label.op2, .opciones > div > label.op2:hover { background: #65B2E8; border-color: #65B2E8; }
    48. 

  48. .opciones > div > label.op2:hover { box-shadow: 0 0 5px #65B2E8; }
    49. 

  49. .opciones > div > label.op2:after { color: #65B2E8; border: 1px solid #65B2E8; }
    50. 

  50. .opciones > div > input[type="radio"]:checked + label.op3, .opciones > div > label.op3:hover { background: #009ED7; border-color: #009ED7; }
    51. 

  51. .opciones > div > label.op3:hover { box-shadow: 0 0 5px #009ED7; }
    52. 

  52. .opciones > div > label.op3:after { color: #009ED7; border: 1px solid #009ED7; }
    53. 

  53. .opciones > div > input[type="radio"]:checked + label.op4, .opciones > div > label.op4:hover { background: #00A6CE; border-color: #00A6CE; }
    54. 

  54. .opciones > div > label.op4:hover { box-shadow: 0 0 5px #00A6CE; }
    55. 

  55. .opciones > div > label.op4:after { color: #0091CF; border: 1px solid #00A6CE; }
    56. 

  56. .opciones > div > input[type="radio"]:checked + label.op5, .opciones > div > label.op5:hover { background: #00ADDE; border-color: #00ADDE; }
    57. 

  57. .opciones > div > label.op5:hover { box-shadow: 0 0 5px #00ADDE; }
    58. 

  58. .opciones > div > label.op5:after { color: #00A6CE; border: 1px solid #00ADDE; }
    59. 

  59. .opciones > div > input[type="radio"]:checked + label.op6, .opciones > div > label.op6:hover { background: #64BEE6; border-color: #64BEE6; }
    60. 

  60. .opciones > div > label.op6:hover { box-shadow: 0 0 5px #64BEE6; }
    61. 

  61. .opciones > div > label.op6:after { color: #64BEE6; border: 1px solid #64BEE6; }
    62. 

  62. .opciones > div > input[type="radio"]:checked + label.op7, .opciones > div > label.op7:hover { background: #8AAAC8; border-color: #8AAAC8; }
    63. 

  63. .opciones > div > label.op7:hover { box-shadow: 0 0 5px #8AAAC8; }
    64. 

  64. .opciones > div > label.op7:after { color: #8AAAC8; border: 1px solid #8AAAC8; }
    65. 

  65. .opciones > div > input[type="radio"]:checked + label.op8, .opciones > div > label.op8:hover { background: #7197BA; border-color: #7197BA; }
    66. 

  66. .opciones > div > label.op8:hover { box-shadow: 0 0 5px #7197BA; }
    67. 

  67. .opciones > div > label.op8:after { color: #7197BA; border: 1px solid #7197BA; }
    68. 

  68. .opciones > div > input[type="radio"]:checked + label.op9, .opciones > div > label.op9:hover { background: #5285B2; border-color: #5285B2; }
    69. 

  69. .opciones > div > label.op9:hover { box-shadow: 0 0 5px #5285B2; }
    70. 

  70. .opciones > div > label.op9:after { color: #5285B2; border: 1px solid #5285B2; }
    71. 

  71. .opciones > div > input[type="radio"]:checked + label.op10, .opciones > div > label.op10:hover { background: #137EA3; border-color: #137EA3; }
    72. 

  72. .opciones > div > label.op10:hover { box-shadow: 0 0 5px #137EA3; }
    73. 

  73. .opciones > div > label.op10:after { color: #137EA3; border: 1px solid #137EA3; }
    74. 

  74. .opciones > div > input[type="radio"]:checked + label.op11, .opciones > div > label.op11:hover { background: #0C7696; border-color: #0C7696; }
    75. 

  75. .opciones > div > label.op11:hover { box-shadow: 0 0 5px #0C7696; }
    76. 

  76. .opciones > div > label.op11:after { color: #0C7696; border: 1px solid #0C7696; }
    77. 

  77. .opciones > div > input[type="radio"]:checked + label.op12, .opciones > div > label.op12:hover { background: #2D549B; border-color: #2D549B; }
    78. 

  78. .opciones > div > label.op12:hover { box-shadow: 0 0 5px #2D549B; }
    79. 

  79. .opciones > div > label.op12:after { color: #2D549B; border: 1px solid #2D549B; }
    80. 

  80. .opciones > div > input[type="radio"]:checked + label.op13, .opciones > div > label.op13:hover { background: #27489B; border-color: #27489B; }
    81. 

  81. .opciones > div > label.op13:hover { box-shadow: 0 0 5px #27489B; }
    82. 

  82. .opciones > div > label.op13:after { color: #27489B; border: 1px solid #27489B; }
    83. 

  83. 

  84. @media (max-width:700px) {
    85. 

  85.     .opciones { flex-flow: column wrap; }    
    86. 

  86. }
    87. 

  87. .errorLbl{ background: #D21034; color: #FFFFFF !important; border-color: #D21034 !important; }
    88. 

  88. .errorLbl:hover{ box-shadow: 0 0 5px #D21034 !important; background: #EA0029 !important; }
    89. 

  89. #errorLblEval{ font-size: 25px; }
    90. 

  90. 

  91. /********** RATING **********/
    92. 

  92. .star-rating > .fieldset > label { display: flex; flex-direction: column; align-items: center; padding-left: 1vw; padding-right: 1vw; cursor: pointer; }
    93. 

  93. .star-rating > .fieldset > label > div{ font-family: 'ingfont'; }
    94. 

  94. .star-rating > .fieldset > input:checked ~ label > div{ color: #F9BF3B; }
    95. 

  95. .star-rating > .fieldset > input:checked ~ label > span{ color: #001D68; }
    96. 

  96. .star-rating > .fieldset > input:checked ~ label > div:before { content: '\e903'; }
    97. 

  97. .star-rating > .fieldset > label > div:active { position: relative; top: 2px; }
    98. 

  98. .star-rating > .fieldset:not(:checked) > label > div { font-size: 5vw; color: #969696; }
    99. 

  99. .star-rating > .fieldset:not(:checked) > label > span { font-size: 1.5vw; color: #969696; }
    100. 

  100. .star-rating > .fieldset:not(:checked) > label > div:before { content: '\e904'; }
    101. 

  101. .star-rating > .fieldset:not(:checked) > label:hover{ cursor: pointer; }
    102. 

  102. .star-rating > .fieldset:not(:checked) > label:hover > div,.star-rating > .fieldset:not(:checked) > label:hover ~ label > div { color: #F9BF3B; text-shadow: 0 0 5px #F9BF3B; }
    103. 

  103. .star-rating > .fieldset:not(:checked) > label:hover > span,.star-rating > .fieldset:not(:checked) > label:hover  ~ label > span { color: #001D68; text-shadow: 0 0 1px #001D68; }
    104. 

  104. .star-rating > .fieldset:not(:checked) > div:hover > label,.star-rating > .fieldset:not(:checked) > label:hover ~ label > div:before { content: '\e903'; }
    105. 

  105. 

  106. /********** FALTANTES **********/
    107. 

  107. #faltantes > div { cursor: pointer; background: #F8D52B; padding: 0.5rem 1rem; }
    108. 

  108. #faltantes > div:hover{ opacity: 0.75; }
    109. 

  109. #faltantes > div > #msgFaltantes{ color: #42210B; font-size: 23px; font-family: 'indivisa-text-bold-italic'; }
    110. 

  110. #faltantes > div > #msgFaltantes > .num{ font-family: 'indivisa-text-black-italic'; }
    111. 

  111. #faltantes > div > .ing-importante{ font-size: 40px; color: #FFFFFF; }
    112. 

  112. 

  113. /********** MODAL ALERTA **********/
    114. 

  114. #modalAlerta #listaAlerta { max-height: 400px; overflow-y: auto; }
    115. 

  115. #modalAlerta #listaAlerta > .elemento{ border-bottom: 1px solid #001D68; cursor: pointer; }
    116. 

  116. #modalAlerta #listaAlerta > .elemento:last-of-type{ border-bottom: 0; }
    117. 

  117. #modalAlerta #listaAlerta > .elemento:hover{ background: #E0E0E0; }
    118. 

  118. #modalAlerta #listaAlerta > .elemento > div:first-of-type{ font-family: 'indivisa-text-bold'; }
    119. 

  119. #loaderFaltantes { background: #FFF; }
    120.