Utilizador:LBelo (WMB)/Common.css/addin-gpgp.css

Nota: Depois de publicar, poderá ter de contornar a cache do seu navegador para ver as alterações.

Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
Internet Explorer / Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5
Opera: Pressione Ctrl-F5.

/**
 * Esse arquivo CSS é parte do Gerador de Perfis de Grupos de Pesquisa (GPGP) (https://pt.wikiversity.org/wiki/Gerador_de_Perfis_de_Grupos_de_Pesquisa).
 *
 * Autor:
 * @author Wiki Movimento Brasil (WMB) (https://meta.wikimedia.org/wiki/Wiki_Movement_Brazil_User_Group)
 * 
 * Contribuidores
 * @contributors Lucas Belo (https://en.wikiversity.org/wiki/User:LBelo_(WMB))
 * @contributors Éder Porto (https://en.wikiversity.org/wiki/User:EPorto_(WMB))
 
 * Ele contém as diretrizes CSS necessárias para aplicar o layout para todos os elementos relacionados ao GPGP Addin.
 * O código MOOC desenvolvido por Sebastian Schlicht e René Pickhardt serviram de base para o desenvolvimento do código atual (https://pt.wikiversity.org/wiki/MediaWiki:Common.css/addin-mooc.css)
 *
 */

#addin-gpgp .border-box {/* CSS 3 box model with padding included in element size */
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/*####################
  # MODAL BOXES
  # hidden until activated in JS
  ####################*/
#addin-gpgp .modal-box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: default;
  z-index: 1502;
}
#addin-gpgp .modal-box .background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #050404;
  opacity: 0.87;
}
#addin-gpgp .modal-box .content {/* border-box */
  position: relative;
  width: 80%;
  height: 80%;
  left: 48px;
  right: 0;
  top: 15%;
  margin: 0 auto;
  padding: 25px 20px;
  color: #000;
  background-color: #FFF;
  border-radius: 8px;
  overflow: visible;
}
#addin-gpgp .modal-box .btn-close {
  float: right;
  top: 0;
  width: 40px;
  height: 40px;
  margin: -40px -40px 0 0;
  background: #FFF url("https://upload.wikimedia.org/wikipedia/commons/7/7a/OOjs_UI_icon_clear.svg") no-repeat center;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2);
  border-radius: 20px;
  cursor: pointer;
  z-index: 2;
}
#addin-gpgp .modal-box .btn-save {
  display: block;
  width: auto;
  min-width: 120px;
  margin: 15px auto 0 auto;
  padding: 10px 10px 10px 35px;
  color: #000;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/True.svg/20px-True.svg.png') no-repeat 12px 8px;
  text-align: center;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2);
  cursor: pointer;
}
#addin-gpgp .modal-box input[disabled].btn-save {
  color: #DCDAD1;
}
#addin-gpgp .modal-box fieldset {
  height: auto;
}
#addin-gpgp .modal-box label {
  font-weight: bold;
  line-height: 1.6;
}
#addin-gpgp .modal-box .label-title {
  font-size: 1.17em;
}
#addin-gpgp .modal-box .label-summary {
  display: inline-block;
  margin-top: 25px;
}
#addin-gpgp .modal-box input,
#addin-gpgp .modal-box textarea {
  width: 100%;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #AEAEAE;
}
#addin-gpgp .modal-box textarea {/* TODO: auto height */
  height: 21px;
}
#addin-gpgp .modal-box .help {
  min-height: 48px;
  margin-top: 25px;
  padding: 10px 10px 10px 70px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/4/44/Help-browser.svg') no-repeat 10px center;
  border: 1px solid #705000;
}

/*####################
  # SPINNER
  ####################*/

#spinner-modal-box {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Começa oculto */
    z-index: 1510;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}