Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
Line 73: | Line 73: | ||
background: none !important; | background: none !important; | ||
padding-right: 0 !important; | padding-right: 0 !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Layout para os blocos da página inicial */ | ||
+ | .mainpage-contents { | ||
+ | display: flex; | ||
+ | flex-wrap: wrap; | ||
+ | justify-content: center; | ||
+ | gap: 10px; | ||
+ | margin: 10px 0; | ||
+ | } | ||
+ | |||
+ | .tile-halves { | ||
+ | flex: 0 0 calc(16.6% - 10px); | ||
+ | border: 1px solid #ddd; | ||
+ | border-radius: 5px; | ||
+ | overflow: hidden; | ||
+ | transition: transform 0.2s; | ||
+ | max-width: 250px; | ||
+ | } | ||
+ | |||
+ | .tile-halves:hover { | ||
+ | transform: translateY(-5px); | ||
+ | box-shadow: 0 5px 15px rgba(0,0,0,0.1); | ||
+ | } | ||
+ | |||
+ | .tile-top { | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .tile-image img { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .tile-bottom { | ||
+ | padding: 8px 0; | ||
+ | text-align: center; | ||
+ | background-color: #f8f8f8; | ||
+ | } | ||
+ | |||
+ | .link-button h2 { | ||
+ | margin: 0; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | .line-break { | ||
+ | flex-basis: 100%; | ||
+ | height: 0; | ||
+ | display: none; /* Remova esta linha se quiser 3 itens por linha */ | ||
+ | } | ||
+ | |||
+ | /* Responsividade para dispositivos móveis */ | ||
+ | @media (max-width: 768px) { | ||
+ | .tile-halves { | ||
+ | flex: 0 0 calc(33.3% - 10px); | ||
+ | } | ||
+ | |||
+ | .nomobile { | ||
+ | display: block; /* Mantenha as imagens no mobile */ | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 480px) { | ||
+ | .tile-halves { | ||
+ | flex: 0 0 calc(50% - 10px); | ||
+ | } | ||
} | } |
Revision as of 16:24, 23 April 2025
/* CSS placed here will be applied to all skins */ * body.page-Main_Page h1.firstHeading { display:none; } /* { font-family: courier new } */ /* Estilo para os elementos clicáveis */ .warp-copy { color: #0066cc; cursor: pointer; text-decoration: none; position: relative; display: inline-block; border-bottom: none; /* Remove a borda inferior */ text-decoration: underline dotted #0066cc; /* Usa sublinhado pontilhado */ text-underline-offset: 2px; /* Ajusta a altura do sublinhado para corresponder aos links */ } /* Tooltip personalizado */ .warp-copy::after { content: "Copy"; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #333; color: white; padding: 2px 6px; border-radius: 3px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; z-index: 100; } /* Seta do tooltip */ .warp-copy::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 4px; border-style: solid; border-color: transparent transparent #333 transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; z-index: 100; } /* Mostrar tooltip ao passar o mouse */ .warp-copy:hover::after, .warp-copy:hover::before { opacity: 1; visibility: visible; bottom: calc(100% + 5px); } /* Mantém o estilo padrão dos links */ a { /* Não alteramos o estilo padrão dos links */ /* Possivelmente, você pode adicionar aqui um offset explícito se necessário */ text-underline-offset: 0px; /* Opcional, para garantir consistência */ } .external { background: none !important; padding-right: 0 !important; } /* Layout para os blocos da página inicial */ .mainpage-contents { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 10px 0; } .tile-halves { flex: 0 0 calc(16.6% - 10px); border: 1px solid #ddd; border-radius: 5px; overflow: hidden; transition: transform 0.2s; max-width: 250px; } .tile-halves:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .tile-top { width: 100%; text-align: center; } .tile-image img { width: 100%; height: auto; display: block; } .tile-bottom { padding: 8px 0; text-align: center; background-color: #f8f8f8; } .link-button h2 { margin: 0; font-size: 16px; } .line-break { flex-basis: 100%; height: 0; display: none; /* Remova esta linha se quiser 3 itens por linha */ } /* Responsividade para dispositivos móveis */ @media (max-width: 768px) { .tile-halves { flex: 0 0 calc(33.3% - 10px); } .nomobile { display: block; /* Mantenha as imagens no mobile */ } } @media (max-width: 480px) { .tile-halves { flex: 0 0 calc(50% - 10px); } }