Difference between revisions of "Template:Sidebar"

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

Latest revision as of 16:58, 26 June 2022



Retrieved from "http://wiki.sinfronteras.ws/index.php?title=Template:Sidebar&oldid=23632"