Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Sobrepor tag

4 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Ir para baixo

Tópico resolvido Sobrepor tag

Mensagem por Knockturn Alley 03.01.24 4:22

Detalhes da questão


Endereço do fórum: https://knockturnalleyrpg.forumeiros.com
Versão do fórum: phpBB3

Descrição

Problema enfrentado: https://i.imgur.com/5O1QrJb.png // Quero que esse hover fique acima absolutamente de tudo ao passar o mouse por cima dos avatares ou do botão de adicionar.

Boa noite!
Gostaria de saber como coloco esse hover acima dos demais ícones pra sobrepor.


HTML do overall_footer_end:
Código:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <ul>
                        <li>
<!-- END html_validation -->
                        </li>
                     </ul>
                     <!-- BEGIN switch_footer_links -->
                     <ul class="linklist clearfix">
                        <li class="rightside">
                           <!-- BEGIN footer_link -->
                              <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                              {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                           <!-- END footer_link -->
                        </li>
                     </ul>
                     <!-- END switch_footer_links -->
                     <span class="corners-bottom"><span></span></span>
                  </div>
               </div>
               <p class="copyright">
                  <strong>{ADMIN_LINK}</strong>
               </p>
            </div>
            {PROTECT_FOOTER}
         </div>
      </div>
   </div>
</div>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    $(document).ready( function() {
        $('div.fb-login-button, span.fb-login-button').attr({
            "data-scope": "{switch_facebook_login.FB_SCOPE}",
            "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
            "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
            "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
            "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
        });
        $('div.fb-login-button, span.fb-login-button').each(function() {
            if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
                $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
            }
            if($(this).html() == '') {
                $(this).html('{switch_facebook_login.FB_LABEL}');
            }
        });

        FB.init({
            appId  : "{switch_facebook_login.FB_APP_ID}",
            cookie  : {switch_facebook_login.FB_COOKIE},
            xfbml  : {switch_facebook_login.FB_XFBML},
            oauth  : {switch_facebook_login.FB_OAUTH},
            version : '{switch_facebook_login.FB_VERSION}'
        });

        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
                js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
    function onLoginFB() {
        window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
    }
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
    $(document).ready( function() {
        $('div.ti-connect').attr({
            'data-loc' : '{switch_topicit_connect.TOPICIT_URL}',
            'data-login' : '{switch_topicit_connect.BOARD_LOGIN}',
            'data-version' : '{switch_topicit_connect.TOPICIT_VERSION}',
            'data-lang' : '{switch_topicit_connect.BOARD_LANG}'
        });

        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'topicit-connect'));
    });
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
   <!-- BEGIN switch_webpush_notifications -->
   if('serviceWorker' in navigator && 'PushManager' in window && navigator.userAgent.includes('Mac') && Notification.permission === 'default' && window.matchMedia('(display-mode: standalone)').matches) {
        window.addEventListener('DOMContentLoaded', function() {
            const subButton = document.createElement('span');
            subButton.setAttribute('id', 'sub-to-pushs');
            subButton.innerHTML = '&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg> {switch_webpush_notifications.INSCRIPTION_PUSH_NOTIFICATIONS}';
            const pageFooter = document.getElementById('page-footer');
            pageFooter.getElementsByClassName('footer-home')[0].append(' | ');
            pageFooter.getElementsByClassName('footer-home')[0].append(subButton);

            subButton.addEventListener('click', async () => {

                const result = await window.Notification.requestPermission();
                if (result === 'granted') {
                    subscribeUser();
                }
            });
        });
    }
   <!-- END switch_webpush_notifications -->
   fa_endpage();
//]]>
</script>
<!-- Plugin main bar, where the magic happens. Some values can be edited. -->
<nav id="switcheroo" class="switcheroo" direction="horizontal" position="top"></nav>

<!-- Monomer.js and Switcheroo.js -->
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>

<!-- Script to boot the plugin -->
<script>
(function() {
      new Switcheroo('#switcheroo');
})();
</script>
</body>
</html>

CSS do Plugin:
Código:
/*** ------------------------------- ***/
/*** SWITCHEROO - Par Monomer ------ ***/
/*** Gestionnaire de multicompte --- ***/

:root {
    --text: #333;
    --red: #D31141;
    --link: #000;
    --light: #FFF;
    --lighter: #fafafa;
    --grey: #cdc200;
    --greyer: #ffcc00;
    --border: 1px solid #cdc200;
    --font: 'Open Sans';
    --gap-size: 16px;
    --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}

/* BARRE SWITCHEROO --- */
.switcheroo {}

.switcheroo[position="static"] {
  position: relative;
}

/* if bar on TOP */
.switcheroo[position="top"] {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

/* if bar on BOT */
.switcheroo[position="bottom"] {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}

/* HORIZONTAL bar */
.switcheroo[direction="horizontal"] {
  width: 100%;
}

/* VERTICAL bar */
.switcheroo[direction="vertical"] {
  height: 100%;
}

/* Circles display */
.switcheroo__squircles {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  padding: var(--gap-size);
  gap: var(--gap-size);
}
.switcheroo[direction="horizontal"] .switcheroo__squircles {
  flex-direction: row;
}
.switcheroo[direction="vertical"] .switcheroo__squircles {
  flex-direction: column;
}

/* BAR --- */
.switcheroo {
  color: var(--color-text);
  background-color: #000;
  border: var(--grey);
  font-size: 16px;
}


/* ACCOUNT DISPLAY ---*/

/* Circles */
.switcheroo__squircle {
  position: relative;
  display: grid;
  place-items: center;
  background-color: var(--grey);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: border-radius 128ms var(--ease);
}

/* Circles on hover */
.switcheroo__squircle:hover {
  border-radius: 6px;
  background: var(--greyer)
}

/* Avatar container */
.switcheroo__avatar {}


/* Avatar image */
.switcheroo__avatar img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  transition: border-radius 128ms var(--ease);
  position: relative;
}

/* Avatar image on hover */
.switcheroo__avatar img:hover {
  border-radius: 5px;
}

/* Connected account avatar */
.switcheroo__squircle.active,
.switcheroo__squircle.active img {
  border-radius: 6px;
  cursor: default;
}


/* Display of the hovered avatar */
.switcheroo__squircle:before {
  content: "";
  display: block;
  background-color: var(--grey);
  border: var(--border);
  border-radius: 50%;
  height: 48px;
  width: 48px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: -5px;
  bottom: 0;
  right: 0;
  left: -5px;
  z-index: -1;
  transform 128ms var(--ease), opacity 64ms var(--ease);
}


/* display of the selected/active account */
.switcheroo__squircle.active:before {
  opacity: 1;
  border-radius: 8px;
}

.switcheroo__squircle:hover:before {
    border-radius: 8px;
    opacity: 1;
  transform 128ms var(--ease), opacity 64ms var(--ease);
}


/* Delete button */
.switcheroo__delete {
  display: grid;
  place-items: center;
  position: absolute;
  width: 16px;
  height: 16px;
  top: -7px;
  right: -7px;
  border-radius: 50%;
  background-color: var(--red);
  transform: scale(0);
  opacity: 1;
  transition: transform 128ms var(--ease), opacity 64ms var(--ease);
  cursor: pointer;
  color: var(--light);
}
.switcheroo__squircle:hover .switcheroo__delete {
  opacity: 1;
  transform: scale(1);
}



/* TOOLTIP NAME ---*/

/* Name container */
.switcheroo__popper {
  background-color: var(--text);
  padding: 0.68rem 1rem;
  position: absolute;
  width: -webkit-max-content;
  width: max-content;
  border-radius: 4px;
  z-index: 0;
  opacity: 0;
  transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
  pointer-events: none;
  color: #fff;
}

/* name container if vertical */
.switcheroo[direction="vertical"] .switcheroo__popper {
  left: 155%;
  top: 50%;
  transform-origin: left;
  transform: translateY(-50%) scale(0.98);
}
/* name container if horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper {
  top: 0%;
  left: 375%;
  transform-origin: right;
  transform: translateX(-50%) scale(0.98);
}

/* tooltip arrow */
.switcheroo__popper:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: var(--text);
  z-index: -1;
}

/* tooltip arrow if vertical */
.switcheroo[direction="vertical"] .switcheroo__popper:before {
  left: -2px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* tooltip arrow if horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper:before {
  left: 10%;
  top: 10px;
  transform: translateX(-50%) rotate(-45deg);
}


/* Tooltip display on hover */
.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}



/* LOGO --- */
.switcheroo__logo {
  /* display: none */
  /* à ajouter si vous voulez supprimer le logo*/
}

/* DIVIDER --- */
.switcheroo__divider {
  /* display: none */
  /* à ajouter si vous voulez supprimer le logo*/
 
  background-color: var(--greyer);
  border-radius: 3px;
  transform: scale(0.8);
}

/* Divider if vertical */
.switcheroo[direction="vertical"] .switcheroo__divider {
  width: 100%;
  height: 2px;
}

/* Divider if horizontal */
.switcheroo[direction="horizontal"] .switcheroo__divider {
  width: 2px;
}


/* ADD AN ACCOUNT ---*/

/* button : add an account */
.switcheroo__squircle--button {
  transition: border-radius 128ms var(--ease);
  color: var(--text);
}
.switcheroo__squircle--button:hover {
  color: var(--light);
  font-weight: bold;
}


/* LOGIN MODAL --- */

/* Background popup */
.monomer-overlay {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s opacity ease;
  background: rgba(255, 255, 255, 0.6);
}

/* Login modal box */
.monomer-modal {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  opacity: 0;
  width: 94%;
  padding: 24px 20px;
  transition: 0.2s opacity ease;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: var(--grey);
  border: var(--border);
  color: var(--text);
}

/* Login form */
.switcheroo__form {
  padding: 48px;
  background: var(--light);
  border-radius: 5px;
}

/* field */
.switcheroo__form-row {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* field label */
.switcheroo__form-label {
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

/* text input */
.switcheroo__form-input {
  padding: 6px;
  font-size: 16px;
  border-radius: 4px;
  width: 100%;
  background-color: var(--light);
  border: var(--border)!important;
  border-bottom: 3px solid var(--greyer)!important;
  color: var(--text);
  cursor: text;
}

/* Login button */
.switcheroo__form-button {
  border-radius: 8px;
  padding: 4px 6px;
  border: none;
  outline: none;
  box-shadow: none;
  text-transform: uppercase;
  font-size: 14px;
  align-self: flex-end;
  background-color: var(--light);
  border: var(--border);
  cursor: pointer;
}

.switcheroo__form-button:hover {
  border: 1px solid transparent;
  background: var(--text);
  color: var(--light);
}

.monomer-modal.monomer-open, .monomer-overlay.monomer-open {
  opacity: 1;
}

/* Close popup button */
.monomer-close {
  font-size: 20px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -7px;
  right: -7px;
  padding: 5px;
  cursor: pointer;
  color: #fff;
  border: 0;
  outline: none;
  background: var(--red);
  border-radius: 50%;
  padding: 0;
}
.monomer-close:hover {
  background: var(--text);
  font-weight: 700;
}
Knockturn Alley
Knockturn Alley
Novo Membro

Membro desde : 03/01/2024
Mensagens : 1
Pontos : 3

https://knockturnalleyrpg.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Sobrepor tag

Mensagem por Musashi 04.01.24 13:31

Bom dia, @Knockturn Alley!

Poderia fornecer uma conta teste para que eu consiga olhar melhor sobre o problema? Caso não queira que o pessoal veja o acesso, informe dentro da tag hide!

Atenciosamente,
do seu amigo da comunidade, Musashi! Muito feliz
Musashi
Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Sobrepor tag

Mensagem por CalebMitchell 04.01.24 15:06


Adicione a propriedade z-index com um valor alto ao estilo do hover no seu CSS do Plugin para garantir que ele fique acima dos demais elementos. Por exemplo:

css
Copy code
seletor-do-hover:hover {
z-index: 999;
/* Outras propriedades do hover */
}
CalebMitchell
CalebMitchell
Novo Membro

Membro desde : 27/12/2023
Mensagens : 2
Pontos : 3

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Sobrepor tag

Mensagem por Sleep 07.01.24 0:27

Olá @Knockturn Alley,

Olá! Seja bem-vindo(a) ao suporte Forumeiros!


Como acabou de inscrever-se, aqui estão alguns pontos importantes a saber:

Substitua o CSS acima, por este:

Código:
:root {
    --text: #333;
    --red: #D31141;
    --link: #000;
    --light: #FFF;
    --lighter: #fafafa;
    --grey: #cdc200;
    --greyer: #ffcc00;
    --border: 1px solid #cdc200;
    --font: 'Open Sans';
    --gap-size: 16px;
    --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}

/* BARRE SWITCHEROO --- */
.switcheroo {}

.switcheroo[position="static"] {
    position: relative;
}

/* if bar on TOP */
.switcheroo[position="top"] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

/* if bar on BOT */
.switcheroo[position="bottom"] {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
}

/* HORIZONTAL bar */
.switcheroo[direction="horizontal"] {
    width: 100%;
}

/* VERTICAL bar */
.switcheroo[direction="vertical"] {
    height: 100%;
}

/* Circles display */
.switcheroo__squircles {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    padding: var(--gap-size);
    gap: var(--gap-size);
}

.switcheroo[direction="horizontal"] .switcheroo__squircles {
    flex-direction: row;
}

.switcheroo[direction="vertical"] .switcheroo__squircles {
    flex-direction: column;
}

/* BAR --- */
.switcheroo {
    color: var(--color-text);
    background-color: #000;
    border: var(--grey);
    font-size: 16px;
}

/* ACCOUNT DISPLAY ---*/
 
/* Circles */
.switcheroo__squircle {
    position: relative;
    display: grid;
    place-items: center;
    background-color: var(--grey);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: border-radius 128ms var(--ease);
}

/* Circles on hover */
.switcheroo__squircle:hover {
    border-radius: 6px;
    background: var(--greyer)
}

/* Avatar container */
.switcheroo__avatar {}

/* Avatar image */
.switcheroo__avatar img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    transition: border-radius 128ms var(--ease);
    position: relative;
}

/* Avatar image on hover */
.switcheroo__avatar img:hover {
    border-radius: 5px;
}

/* Connected account avatar */
.switcheroo__squircle.active,
.switcheroo__squircle.active img {
    border-radius: 6px;
    cursor: default;
}

/* Display of the hovered avatar */
.switcheroo__squircle:before {
    content: "";
    display: block;
    background-color: var(--grey);
    border: var(--border);
    border-radius: 50%;
    height: 48px;
    width: 48px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -5px;
    bottom: 0;
    right: 0;
    left: -5px;
    z-index: -1;
    transform 128ms var(--ease), opacity 64ms var(--ease);
}

/* display of the selected/active account */
.switcheroo__squircle.active:before {
    opacity: 1;
    border-radius: 8px;
}

.switcheroo__squircle:hover:before {
    border-radius: 8px;
    opacity: 1;
    transform 128ms var(--ease), opacity 64ms var(--ease);
}

/* Delete button */
.switcheroo__delete {
    display: grid;
    place-items: center;
    position: absolute;
    width: 16px;
    height: 16px;
    top: -7px;
    right: -7px;
    border-radius: 50%;
    background-color: var(--red);
    transform: scale(0);
    opacity: 1;
    transition: transform 128ms var(--ease), opacity 64ms var(--ease);
    cursor: pointer;
    color: var(--light);
}

.switcheroo__squircle:hover .switcheroo__delete {
    opacity: 1;
    transform: scale(1);
}

/* TOOLTIP NAME ---*/
 
/* Name container */
.switcheroo__popper {
    background-color: var(--text);
    padding: 0.68rem 1rem;
    position: absolute;
    width: -webkit-max-content;
    width: max-content;
    border-radius: 4px;
    z-index: 0;
    opacity: 0;
    transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
    pointer-events: none;
    color: #fff;
}

/* name container if vertical */
.switcheroo[direction="vertical"] .switcheroo__popper {
    left: 155%;
    top: 50%;
    transform-origin: left;
    transform: translateY(-50%) scale(0.98);
}

/* name container if horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper {
    top: 0%;
    left: 375%;
    transform-origin: right;
    transform: translateX(-50%) scale(0.98);
}

/* tooltip arrow */
.switcheroo__popper:before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: var(--text);
    z-index: -1;
}

/* tooltip arrow if vertical */
.switcheroo[direction="vertical"] .switcheroo__popper:before {
    left: -2px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* tooltip arrow if horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper:before {
    left: 10%;
    top: 10px;
    transform: translateX(-50%) rotate(-45deg);
}

/* Tooltip display on hover */
.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* LOGO --- */
.switcheroo__logo {
    /* display: none */
    /* à ajouter si vous voulez supprimer le logo*/
}

/* DIVIDER --- */
.switcheroo__divider {
    /* display: none */
    /* à ajouter si vous voulez supprimer le logo*/
    background-color: var(--greyer);
    border-radius: 3px;
    transform: scale(0.8);
}

/* Divider if vertical */
.switcheroo[direction="vertical"] .switcheroo__divider {
    width: 100%;
    height: 2px;
}

/* Divider if horizontal */
.switcheroo[direction="horizontal"] .switcheroo__divider {
    width: 2px;
}

/* ADD AN ACCOUNT ---*/
 
/* button : add an account */
.switcheroo__squircle--button {
    transition: border-radius 128ms var(--ease);
    color: var(--text);
}

.switcheroo__squircle--button:hover {
    color: var(--light);
    font-weight: bold;
}

/* LOGIN MODAL --- */
 
/* Background popup */
.monomer-overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: 0.2s opacity ease;
    background: rgba(255, 255, 255, 0.6);
}

/* Login modal box */
.monomer-modal {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 94%;
    padding: 24px 20px;
    transition: 0.2s opacity ease;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: var(--grey);
    border: var(--border);
    color: var(--text);
}

/* Login form */
.switcheroo__form {
    padding: 48px;
    background: var(--light);
    border-radius: 5px;
}

/* field */
.switcheroo__form-row {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin-bottom: 16px;
}

/* field label */
.switcheroo__form-label {
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

/* text input */
.switcheroo__form-input {
    padding: 6px;
    font-size: 16px;
    border-radius: 4px;
    width: 100%;
    background-color: var(--light);
    border: var(--border)!important;
    border-bottom: 3px solid var(--greyer)!important;
    color: var(--text);
    cursor: text;
}

/* Login button */
.switcheroo__form-button {
    border-radius: 8px;
    padding: 4px 6px;
    border: none;
    outline: none;
    box-shadow: none;
    text-transform: uppercase;
    font-size: 14px;
    align-self: flex-end;
    background-color: var(--light);
    border: var(--border);
    cursor: pointer;
}

.switcheroo__form-button:hover {
    border: 1px solid transparent;
    background: var(--text);
    color: var(--light);
}

.monomer-modal.monomer-open, .monomer-overlay.monomer-open {
    opacity: 1;
}

/* Close popup button */
.monomer-close {
    font-size: 20px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    position: absolute;
    top: -7px;
    right: -7px;
    padding: 5px;
    cursor: pointer;
    color: #fff;
    border: 0;
    outline: none;
    background: var(--red);
    border-radius: 50%;
    padding: 0;
}

.monomer-close:hover {
    background: var(--text);
    font-weight: 700;
}

Atenciosamente,
Sleep
Sleep
Sleep
Ajudeiro
Ajudeiro

Membro desde : 10/08/2012
Mensagens : 1117
Pontos : 1352

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Sobrepor tag

Mensagem por Sleep 13.01.24 1:19

Tópico resolvido


Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.
Sleep
Sleep
Ajudeiro
Ajudeiro

Membro desde : 10/08/2012
Mensagens : 1117
Pontos : 1352

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

 
Permissões neste sub-fórum
Não podes responder a tópicos