Difference between revisions of "Template:Sidebar"
Adelo Vieira (talk | contribs) |
Adelo Vieira (talk | contribs) |
||
Line 1: | Line 1: | ||
{{#tag:html| | {{#tag:html| | ||
− | + | <style> | |
− | + | /* MediaWiki page configurations */ | |
− | + | #content { margin: -1px 0px 0px 180px; } | |
− | + | #left-navigation { margin-left:180px } | |
− | + | #footer { margin: 0 0 0 180px } | |
− | + | #bodyContent { z-index: 10 } | |
− | + | .mw-wiki-logo { margin: 20px 0px 0px 0.5px } | |
− | + | /* TOC */ | |
− | + | div#toc.toc { | |
− | + | font-size: 12pt; | |
− | + | margin-top: -4.5pt; | |
− | + | background: rgba(255, 255, 255, 1); | |
− | + | margin-right: 12pt; | |
− | + | } | |
− | + | .tocUl { | |
− | + | overflow-y: scroll !important; | |
− | + | overflow-x: scroll !important; | |
− | + | max-height: calc(100vh - 150px); | |
− | + | width: 350px !important; | |
− | + | padding-bottom: 30px !important; | |
− | + | white-space: nowrap !important; | |
− | + | } | |
− | + | .tocUl a { | |
− | + | padding-right: 25px !important; | |
− | + | } | |
− | + | .tochidden { | |
− | + | height: 4pt !important; | |
− | + | } | |
+ | |||
+ | |||
+ | /* This block manages the CSS changes between "Mis paginas" page and the "Sidebar" page CSS */ | ||
+ | #menuToggle ul { | ||
+ | margin-top: 20px !important; | ||
+ | margin-bottom: 35px !important; | ||
+ | } | ||
+ | #menuToggle li { | ||
+ | font: 14px / 22.4px sans-serif; | ||
+ | margin-top: 0px ; | ||
+ | margin-bottom: 15px ; | ||
+ | } | ||
+ | #menuToggle .entre-li { | ||
+ | margin-bottom: -15px ; | ||
+ | } | ||
+ | #menuToggle .entre-li-n4 { | ||
+ | margin-bottom: -30px ; | ||
+ | } | ||
+ | #menuToggle .entre-li-n4-first { | ||
+ | margin-top: -25px ; | ||
+ | } | ||
+ | #menuToggle ul .first-li { | ||
+ | margin-top: -15px !important; | ||
+ | } | ||
+ | #menuToggle ul .first-mwhelp { | ||
+ | margin-top: -7px !important; | ||
+ | } | ||
+ | #menuToggle a { | ||
+ | color: #0645AD !important; | ||
+ | overflow-wrap: break-word; | ||
+ | } | ||
+ | #menuToggle pre { | ||
+ | overflow-wrap: break-word; | ||
+ | } | ||
+ | #menuToggle a:hover { | ||
+ | text-decoration: underline !important; | ||
+ | } | ||
+ | #menuToggle a{ | ||
+ | font: 14px / 22.4px sans-serif; | ||
+ | } | ||
+ | #menuToggle li { | ||
+ | font: 14px / 22.4px sans-serif !important; | ||
+ | } | ||
+ | #menuToggle span { | ||
+ | font: 14px / 22.4px sans-serif; | ||
+ | } | ||
+ | #menuToggle .base-li-1 { | ||
+ | margin-bottom: -25px !important; | ||
+ | } | ||
+ | #menuToggle .base-text { | ||
+ | font-size:12pt !important; | ||
+ | } | ||
+ | #menuToggle .desplaza { | ||
+ | margin-top: -12px; | ||
+ | padding-right: 30px !important; | ||
+ | } | ||
+ | #menuToggle .desplaza-2 { | ||
+ | margin-top: -10px !important; | ||
+ | } | ||
+ | #menuToggle #space-end-pure { | ||
+ | margin-bottom: 80px; | ||
+ | } | ||
+ | #menuToggle #space-end-social { | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | #menuToggle #space-end-music { | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | #menuToggle ul:hover { | ||
+ | /* color:#2864c4; */ | ||
+ | } | ||
+ | #menuToggle .titulo1-text { | ||
+ | font-size: 18px !important; | ||
+ | } | ||
+ | #menuToggle .titulo2-text { | ||
+ | font: 700 14px / 22.4px sans-serif !important; | ||
+ | } | ||
+ | #menuToggle .titulo1-text-marco { | ||
+ | padding-left: 10px !important; | ||
+ | padding-right: 40px !important; | ||
+ | } | ||
+ | #menuToggle .titulo1-marco-oneline { | ||
+ | padding-right: 0px !important; | ||
+ | padding-left: 0px !important; | ||
+ | margin-right: -5px !important; | ||
+ | margin-left: 0px !important; | ||
+ | min-height: 35pt !important; | ||
+ | margin-top: -30pt !important; | ||
+ | } | ||
+ | #menuToggle .titulo1-marco-twolines { | ||
+ | padding-right: 0px !important; | ||
+ | padding-left: 0px !important; | ||
+ | margin-right: -5px !important; | ||
+ | margin-left: 0px !important; | ||
+ | min-height: 50pt !important; | ||
+ | margin-top: -47pt !important; | ||
+ | } | ||
+ | #menuToggle .titulo1MarcoTwolines { | ||
+ | padding-right: 0px; | ||
+ | } | ||
+ | #menuToggle .titulo1-marco-color { | ||
+ | background: #9595ab !important; | ||
+ | } | ||
+ | #menuToggle .titulo1-color { | ||
+ | color: white !important; | ||
+ | } | ||
+ | #menuToggle .marco1-ext { | ||
+ | width: 100% !important; | ||
+ | padding: 0px 0px 0px 0px !important; | ||
+ | background: #e3e3e8 !important; | ||
+ | } | ||
+ | #menuToggle .marco1-int { | ||
+ | background: #e3e3e8 !important; | ||
+ | } | ||
+ | #menuToggle .marco1-ext .mw-editsection { | ||
+ | display: none !important; | ||
+ | } | ||
+ | #menuToggle .divline1 { | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | display: block; | ||
+ | margin-top: -7px !important; | ||
+ | margin-bottom: 30px !important; | ||
+ | margin-right: 0px !important; | ||
+ | margin-left: 2px !important; | ||
+ | background-color: white; | ||
+ | height:1.2pt | ||
+ | } | ||
+ | #menuToggle .mw-collapsible-toggle { | ||
+ | outline: none !important; | ||
+ | color: rgb(58, 58, 63) !important; | ||
+ | } | ||
+ | #menuToggle .mw-collapsible-text { | ||
+ | color: rgb(58, 58, 63) !important; | ||
+ | } | ||
+ | #menuToggle .mw-collapsible-text:hover { | ||
+ | color: red !important; | ||
+ | } | ||
+ | #menuToggle .mw-collapsible-toggle:hover { | ||
+ | color: red !important; | ||
+ | } | ||
+ | #menuToggle .resaltar:hover {background: #bdbdca} | ||
+ | #menuToggle .button-top { | ||
+ | color: #999191; font-size:20px | ||
+ | } | ||
+ | #menuToggle .button-top:hover { | ||
+ | color: #5c4444; | ||
+ | } | ||
− | + | ||
− | + | /* Sidebar (Pure CSS) */ | |
− | + | #menuToggle { | |
− | + | display: block; | |
− | + | position: relative; | |
− | + | top: -145px; | |
− | + | margin-left: -205px; | |
− | + | padding-left: 10px; | |
− | + | <!-- -webkit-user-select: none; --> | |
− | + | <!-- user-select: none; --> | |
− | + | } | |
− | + | #menuToggle a { | |
− | + | text-decoration: none; | |
− | + | color: #232323; | |
− | + | transition: color 0.3s ease; | |
− | + | } | |
− | + | #menuToggle a:hover { color: tomato; } | |
− | + | #menuToggle input { | |
− | + | display: block; | |
− | + | width: 40px; | |
− | + | height: 32px; | |
− | + | position: absolute; | |
− | + | top: -7px; | |
− | + | left: -5px; | |
− | + | cursor: pointer; | |
− | + | opacity: 0; /* hide this */ | |
− | + | z-index: 12; /* and place it over the hamburger */ | |
− | + | -webkit-touch-callout: none; | |
− | + | } | |
− | + | /* Just a quick hamburger */ | |
− | + | #menuToggle .hamb { | |
− | + | display: block; | |
− | + | width: 26px; | |
− | + | height: 4.1px; | |
− | + | margin-bottom: 2.9px; | |
− | + | position: relative; | |
− | + | background: #837e7e; | |
− | + | border-radius: 3px; | |
− | + | z-index: 11; | |
− | + | transform-origin: 4px 0px; | |
− | + | transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), | |
− | + | background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), | |
− | + | opacity 0.55s ease; | |
− | + | } | |
− | + | /* #menuToggle #inputButton:hover + #hamb1 { | |
− | + | background: #5c4444 !important; | |
− | + | } */ | |
− | + | #menuToggle span:first-child { | |
− | + | transform-origin: 0% 0%; | |
− | + | } | |
− | + | #menuToggle span:nth-last-child(2) { | |
− | + | transform-origin: 0% 100%; | |
− | + | } | |
− | + | /* Transform all the slices of hamburger into a crossmark */ | |
− | + | #menuToggle input:checked ~ .hamb { | |
− | + | opacity: 1; | |
− | + | transform: rotate(45deg) translate(-2px, -1px); | |
− | + | background: #837e7e; | |
− | + | } | |
− | + | /* But let's hide the middle one */ | |
− | + | #menuToggle input:checked ~ span:nth-last-child(3) | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
}} | }} | ||
− | + | ||
− | + | ||
<!-- Transclusion of pages that contain MW tags --> | <!-- Transclusion of pages that contain MW tags --> | ||
<div id="MediawikiHelp0-inter0" style="display:none"> | <div id="MediawikiHelp0-inter0" style="display:none"> | ||
− | + | {{#lst:My MediaWiki help|MediawikiHelp0}} | |
</div> | </div> | ||
<html> | <html> | ||
− | + | <script> | |
− | + | document.getElementById("MediawikiHelp0-inter1").innerHTML = document.getElementById("MediawikiHelp0-inter0").innerHTML | |
− | + | </script> | |
</html> | </html> | ||
<div id="Desktop-inter0" style="display:none"> | <div id="Desktop-inter0" style="display:none"> | ||
− | + | {{#lst:Desktop|Desktop0}} | |
</div> | </div> | ||
<html> | <html> | ||
− | + | <style> | |
− | + | #Desktop-inter1 .desktop-1-1 { | |
− | + | border: 0px solid red; | |
− | + | } | |
− | + | #Desktop-inter1 .desktop-2-1 { | |
− | + | background-color: #e3e3e8 !important; | |
− | + | border: 0px solid green !important; | |
− | + | padding-top: 0px !important; | |
− | + | padding-bottom: 40px; | |
− | + | } | |
− | + | #Desktop-inter1 .desktop-cuadro { | |
− | + | border: 0px solid white !important; | |
− | + | background-color: white !important; | |
− | + | } | |
− | + | #Desktop-inter1 .text-2-1 { | |
− | + | margin-bottom: -50px; | |
− | + | } | |
− | + | #Desktop-inter1 .nivel-3 li { | |
− | + | margin-bottom: -3px !important; | |
− | + | } | |
− | + | #Desktop-inter1 .nivel-3 ul { | |
− | + | margin-bottom: -20px !important; | |
− | + | } | |
− | + | #Desktop-inter1 .nivel-3 .first-li { | |
− | + | margin-top: 15px !important; | |
− | + | } | |
− | + | #Desktop-inter1 a { | |
− | + | overflow-wrap: break-word !important; | |
− | + | } | |
− | + | #Desktop-inter1 .text-1-1 { | |
− | + | font: 700 18px / 27.3px "Linux Libertine", Georgia, Times, serif; | |
− | + | background-color: #4081de; | |
− | + | vertical-align: center; | |
− | + | height: 46.6667px; | |
− | + | line-height: 53px; | |
− | + | margin: 7px -1px 50px 0px !important; | |
− | + | padding-left: 10px; | |
− | + | } | |
− | + | #Desktop-inter1 .desktop-2-1-area { | |
− | + | margin-left: -5px; | |
− | + | } | |
− | + | #Desktop-inter2 { | |
− | + | margin-top: -27px !important; | |
− | + | margin-bottom: 200px; | |
− | + | padding-left: 4px; | |
− | + | padding-right: 5px; | |
− | + | } | |
− | + | #Desktop-inter2 .antes-collapsible { | |
− | + | margin-bottom: 30px !important; | |
− | + | } | |
− | + | #Desktop-inter2 .espacio { | |
− | + | margin-left: -20px !important; | |
− | + | } | |
− | + | </style> | |
− | + | <script> | |
− | + | // This allows using the whole table by using «display: none» on the sections that won't be shown: | |
− | + | // document.getElementById("Desktop-inter2").innerHTML = document.getElementById("Desktop-inter0").innerHTML | |
− | + | // $(".invisible").not('.desktop-1').css('display','none') | |
− | + | // $("#Desktop-inter1 #container-desktop-menu").css('display','none') | |
− | + | // $("#Desktop-inter1 #desktop p").addClass("desplaza-2") | |
− | + | // $("#Desktop-inter1 .desktop-1-1").addClass("desplaza-2") | |
− | + | // $("#Desktop-inter1 .text-1-1").removeClass("desplaza-2") | |
− | + | // This is by taking only the section I need: | |
− | + | document.getElementById("desktop-1-titulo-inter").innerHTML = document.getElementById("desktop-1-titulo").innerHTML | |
− | + | document.getElementById("Desktop-inter2").innerHTML = document.getElementById("desktop-main").innerHTML | |
− | + | $("#Desktop-inter1 p").addClass("desplaza-2") | |
− | + | $("#Desktop-inter1 .desktop-1-1").addClass("desplaza-2") | |
− | + | $("#Desktop-inter1 .text-1-1").removeClass("desplaza-2") | |
− | + | $("#desktop-1-titulo-inter").wrap('<a href="Desktop" />'); | |
− | + | </script> | |
</html> | </html> |
Revision as of 02:03, 27 March 2021