Difference between revisions of "Template:Sidebar"

From Sinfronteras
Jump to: navigation, search
Line 1: Line 1:
 
{{#tag:html|
 
{{#tag:html|
−
  <style>
+
    <style>
−
  /* MediaWiki page configurations */
+
    /* MediaWiki page configurations */
−
  #content { margin: -1px 0px 0px 180px; }
+
    #content { margin: -1px 0px 0px 180px; }
−
  #left-navigation { margin-left:180px }
+
    #left-navigation { margin-left:180px }
−
  #footer { margin: 0 0 0 180px }
+
    #footer { margin: 0 0 0 180px }
−
  #bodyContent { z-index: 10 }
+
    #bodyContent { z-index: 10 }
−
  .mw-wiki-logo { margin: 20px 0px 0px 0.5px }
+
    .mw-wiki-logo { margin: 20px 0px 0px 0.5px }
−
  /* TOC */
+
    /* TOC */
−
  div#toc.toc {
+
    div#toc.toc {
−
      font-size: 12pt;
+
        font-size: 12pt;
−
      margin-top: -4.5pt;
+
        margin-top: -4.5pt;
−
      background: rgba(255, 255, 255, 1);
+
        background: rgba(255, 255, 255, 1);
−
       margin-right: 12pt;
+
        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 a {
 +
        color: #0645AD !important;
 +
        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;
 +
    }
 +
    #menuToggle span {
 +
        font: 14px / 22.4px sans-serif;
 +
    }
 +
    #menuToggle .base-li-1 {
 +
        margin-bottom: -5px !important;
 +
    }
 +
    #menuToggle .desplaza {
 +
        margin-top: -13px;
 +
        padding-right: 30px !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;
 +
    }
 +
    #menuToggle .mw-collapsible-text:hover {
 +
      color: red !important;
 +
    }
 +
    #menuToggle .mw-collapsible-toggle:hover {
 +
      color: red !important;
 +
    }
 +
    #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) {
 +
        opacity: 0;
 +
        transform: rotate(0deg) scale(0.2, 0.2);
 +
    }
 +
    /* Ohyeah and the last one should go the other direction */
 +
    #menuToggle input:checked ~ span:nth-last-child(2) {
 +
        transform: rotate(-45deg) translate(0, -1px);
 +
    }
 +
   
 +
    /* Make this absolute positioned at the top left of the screen */
 +
    #menu {
 +
        position: absolute;
 +
        width: 300px;
 +
        margin: -55px 0 0 -10px;
 +
        padding: 50px 0px 30px 0px;
 +
        background: #ededed;
 +
        list-style-type: none;
 +
        -webkit-font-smoothing: antialiased;
 +
        /* to stop flickering of text in safari */
 +
        transform-origin: 0% 0%;
 +
        <!-- transform: translate(-100%, 0); -->
 +
        display: none;
 +
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 +
    }
 +
    #menu li {
 +
        padding: 10px 0 0 0;
 +
        font-size: 22px;
 +
    }
 +
    /* And let's slide it in from the left */
 +
    #menuToggle input:checked ~ #menu {
 +
        <!-- transform: none; -->
 +
        display: block;
 +
    }
 +
   
 +
 
 +
    /* Tab Menu */
 +
    .button {
 +
        font-size: 22px;
 +
        color: inherit;
 +
        background-color :inherit;
 +
        padding: 6px 0px 6px 0px;
 +
        border: none;
 +
        outline: 0;
 +
        cursor: pointer;
 +
    }
 +
    .button:hover { }
 +
    .bottom-selected {
 +
      color:rgb(60, 60, 70);
 +
      background-color: #d1d1de !important;  /*  #f44336  rgb(60, 60, 70)  #3c4043  */
 +
    }
 +
    .fa-atom        { font-size: 21px; }
 +
    .fa-info        { font-size: 18px; }
 +
    .fa-tools      { font-size: 17px; }
 +
    .fa-atom:hover  { color:black; }
 +
    .fa-info:hover  { color:black; }
 +
    .fa-tools:hover { color:black; }
 +
    .area {
 +
        color: black;
 +
        padding: 5px 0px 5000px 3px;
 +
        border: 0px solid #ccc !important;
 +
    }
 +
    #container-button-tap {
 +
    width:100%;
 +
    color:rgb(97, 97, 114);
 +
    background-color: white;
 
   }
 
   }
−
   .tocUl {
+
   .izquierda{
−
      overflow-y: scroll  !important;
+
    float:left;
−
      overflow-x: scroll  !important;
+
    width:33.3%;
−
      max-height: calc(100vh - 150px);
+
    text-align: center;
−
      width: 350px !important;
 
−
      padding-bottom: 30px !important;
 
−
      white-space: nowrap !important;
 
 
   }
 
   }
−
   .tocUl a {
+
   .derecha{
−
      padding-right: 25px !important;
+
    float:right;
 +
    width:33.3%;
 +
    text-align: center;
 
   }
 
   }
−
   .tochidden {
+
   .centrar{
−
      height: 4pt !important;
+
    margin:0 auto;
 +
    width:33.3%;
 +
    text-align: center;
 
   }
 
   }
 +
   
 +
    </style>
 +
   
 +
 
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 +
    <script src="https://kit.fontawesome.com/423f4585a2.js" crossorigin="anonymous"></script>
 +
 
 +
 
 +
    <nav id="MySidebar" role="navigation" style="position: fixed; z-index: 1">  <!-- class="oculto" -->
 +
        <div id="menuToggle">
 +
            <!--
 +
            A fake / hidden checkbox is used as click reciever,
 +
            so you can use the :checked selector on it.
 +
            -->
 +
            <input id="inputButton" type="checkbox" onclick="myFunction()"/>
 +
           
 +
            <!--
 +
            Some spans to act as a hamburger.
 +
            -->
 +
            <!-- <div> -->
 +
            <span id="hamb1" class="hamb"></span>
 +
            <span id="hamb2" class="hamb"></span>
 +
            <span id="hamb3" class="hamb"></span>
 +
            <!-- </div> -->
 +
           
 +
            <!-- <i style="font-size: 30px"  class="fa fa-bars fa-w-14 fa-10x"></i> -->
 +
           
 +
            <!--
 +
            Too bad the menu has to be inside of the button
 +
            but hey, it's pure CSS magic.
 +
            -->
 +
            <div id="menu" style="border-right: 0px solid rgb(177, 177, 180);">
 +
               
 +
                <!--Tap Menu -->
 +
                <div style="padding: 10px 0px 0px 0px; border-right: 2px solid #ededed">
 +
 
 +
                    <div style="text-align:right; margin-top:-31px; margin-bottom: 15px; padding-right: 5px">
 +
                      <button onclick="expandSidebar()" style="cursor:pointer; outline: none; border-width:0px"> <i id="expandSidebar-icon" class="fa fa-arrow-right button-top" aria-hidden="true"></i>  </button>
 +
                    </div>
 +
 
 +
                    <div id="container-button-tap" style="margin-top:-9px;">
 +
                        <button id="button-pe"    class="button izquierda tablink bottom-selected"                            onclick="openCity(event,'PE')"    > <i class="fas fa-atom"> </i> </button>
 +
                        <button id="button-others" class="button derecha  tablink"  onclick="openCity(event,'Others')"> <i class="fas fa-info"> </i> </button>
 +
                        <button id="button-tools"  class="button centrar  tablink"                                            onclick="openCity(event,'Tools')" > <i class="fas fa-tools"></i> </button>
 +
                    </div>
 +
                   
 +
                    <div id="PE" class="area city">
 +
                      <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
 +
                      <!-- {{#lst:Mis páginas|Carrera1}} -->
 +
                      <div id="sectionBase"    style="margin-bottom: 30px;  margin-top: 10px" > {{#lst:Mis páginas|base}}</div>
 +
                      <div id="sectionPure"    style="margin-bottom: 73px;  margin-top:-5px"  > {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 +
                      <div id="sectionSocial"  style="margin-bottom: 55px;  margin-top: 2px"  > {{#lst:Mis páginas|social_sciences0}}</div>
 +
                      <div id="sectionMusic"  style="margin-bottom: 30px;  margin-top: 2px"  > {{#lst:Mis páginas|musica0}}</div>
 +
                      <div id="sectionCarrera" style="margin-bottom: 800px; margin-top: 2px"  > {{#lst:Mis páginas|Carrera0}}</div>
 +
                      </div>
 +
                    </div>
 +
                   
 +
                    <div id="Tools"  class="area city" style="display:none">
 +
                        <p>Under construction...</p>
 +
                    </div>
 +
                   
 +
                    <div id="Others"  class="area city" style="display:none">
 +
                        <p>Under construction...</p>
 +
                    </div>
 +
                </div>
 +
               
 +
                <!-- <a href="#"><li>Home</li></a>
 +
                <a href="#"><li>About</li></a>
 +
                <a href="#"><li>Info</li></a>
 +
                <a href="#"><li>Contact</li></a>
 +
                <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a> -->
 +
               
 +
            </div>
 +
        </div>
 +
    </nav>
 +
 
 +
 
 +
    <script>
 +
 
 +
        function openCity(evt, cityName) {
 +
          var i, x, tablinks;
 +
          x = document.getElementsByClassName("city");
 +
          for (i = 0; i < x.length; i++) {
 +
              x[i].style.display = "none";
 +
          }
 +
          tablinks = document.getElementsByClassName("tablink");
 +
          for (i = 0; i < x.length; i++) {
 +
              tablinks[i].className = tablinks[i].className.replace(" bottom-selected", "");
 +
          }
 +
          document.getElementById(cityName).style.display = "block";
 +
          evt.currentTarget.className += " bottom-selected";
 +
 
 +
          if (cityName == "PE") {
 +
            $(".fa-atom").css('font-size', '21px')
 +
            $(".fa-info").css('font-size', '18px')
 +
            $(".fa-tools").css('font-size','17px')
 +
          }else if (cityName == "Others") {
 +
            $(".fa-atom").css('font-size', '19px')
 +
            $(".fa-info").css('font-size', '20px')
 +
            $(".fa-tools").css('font-size','17px')
 +
          }else {
 +
            $(".fa-atom").css('font-size', '19px')
 +
            $(".fa-info").css('font-size', '18px')
 +
            $(".fa-tools").css('font-size','19px')
 +
          }
 +
        }
 +
 
 +
       
 +
        function myFunction() {
 +
            var checkBox = document.getElementById("inputButton");
 +
            if (checkBox.checked == true){
 +
                $('#content').css('margin-left', '300px')
 +
                $('#left-navigation').css({'cssText':'margin-left:300px'})
 +
                $('#menuToggle').css('margin-left', '-325px')
 +
                $('#footer').css('margin-left', '308px')
 +
            } else {
 +
                $('#content').css('margin-left', '180px')
 +
                $('#left-navigation').css({'cssText':'margin-left:180px'})
 +
                $('#menuToggle').css('margin-left', '-205px')
 +
                $('#footer').css('margin-left', '180px')
 +
            }
 +
        }
 +
 
 +
        function checkUser(){
 +
            if ( document.getElementById('pt-userpage') != null ) {
 +
                if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){
 +
                    $('.oculto').css('display','block')
 +
                    $('.link-hidden').css('pointer-events','auto')
 +
                    // $('body').css('background','red');
 +
                }else{
 +
                    // $('body').css('background','blue');   
 +
                }
 +
            }else{
 +
                // $('body').css('background','blue');
 +
                // $('#hideThis').show();
 +
            }
 +
        }
 +
 
 +
        function removeCSS() {
 +
          $('#menuToggle li').css({'margin-bottom':'','margin-top':''})
 +
          $('#menuToggle p ').css({'margin-bottom':'','margin-top':''})
 +
          // $('#mis-paginas li').css({'margin-bottom':'','margin-top':''})
 +
          // $('#mis-paginas p ').css({'margin-bottom':'','margin-top':''})
 +
          // $('#mis-paginas ul ').css({'margin-bottom':'','margin-top':''})
 +
        }
 +
 
 +
        function collapseSome() {
 +
            $(".mw-collapsible").not('.keep-abierto').addClass("mw-collapsed");
 +
        }
 +
 
 +
        function expandSidebar() {
 +
          var menuWidth = parseInt(window.getComputedStyle(document.getElementById("menu")).width)
 +
          if (menuWidth < 400 ) {
 +
            $("#menu").css('width','600px')
 +
            $(".titulo1-marco-twolines").addClass("titulo1MarcoTwolines")
 +
            $(".titulo1-marco-twolines").addClass("titulo1-marco-oneline")
 +
            $(".titulo1MarcoTwolines").removeClass("titulo1-marco-twolines")
 +
            $("#sectionPure").css({'margin-bottom':  '30px', 'margin-top':'2px'})
 +
            $("#sectionSocial").css({'margin-bottom':'30px', 'margin-top':'2px'})
 +
            $("#space-end-pure").css({'margin-bottom':'85px'})
 +
            $("#space-end-social").css({'margin-bottom':'60px'})
 +
            $("#space-end-music").css({'margin-bottom':'45px'})
 +
            $("#expandSidebar-icon").removeClass("fa-arrow-right")
 +
            $("#expandSidebar-icon").addClass("fa-arrow-left")
 +
          }else{
 +
            $("#menu").css('width','300px')
 +
            $(".titulo1MarcoTwolines").addClass("titulo1-marco-twolines")
 +
            $(".titulo1-marco-twolines").removeClass("titulo1MarcoTwolines")
 +
            $(".titulo1-marco-twolines").removeClass("titulo1-marco-oneline")
 +
            $("#sectionPure").css({'margin-bottom':  '73px', 'margin-top':'-5px'})
 +
            $("#sectionSocial").css({'margin-bottom':'55px', 'margin-top':' 2px'})
 +
            $("#space-end-pure").css({'margin-bottom':'80px'})
 +
            $("#space-end-social").css({'margin-bottom':'30px'})
 +
            $("#space-end-music").css({'margin-bottom':'40px'})
 +
            $("#expandSidebar-icon").removeClass("fa-arrow-left")
 +
            $("#expandSidebar-icon").addClass("fa-arrow-right")
 +
          }
 +
        }
 +
 
 +
       
 +
        $("#inputButton").hover(function(){
 +
          $(".hamb").css("background", "#5c4444");
 +
          }, function(){
 +
          $(".hamb").css("background", "#837e7e");
 +
        });
 +
       
 +
 
 +
        $("#button-pe").hover(function(){
 +
          $(".fa-atom").css('font-size', '21px')
 +
          }, function(){
 +
            if ( $(this).hasClass("bottom-selected") ) {
 +
              $(".fa-atom").css('font-size', '21px')
 +
            }else{
 +
              $(".fa-atom").css('font-size', '19px')
 +
            }
 +
        });
 +
 
 +
        $("#button-others").hover(function(){
 +
          $(".fa-info").css('font-size', '20px')
 +
          }, function(){
 +
            if ( $(this).hasClass("bottom-selected") ) {
 +
              $(".fa-info").css('font-size', '20px')
 +
            }else{
 +
              $(".fa-info").css('font-size', '18px')
 +
            }
 +
        });
 +
 
 +
        $("#button-tools").hover(function(){
 +
          $(".fa-tools").css('font-size', '19px')
 +
          }, function(){
 +
            if ( $(this).hasClass("bottom-selected") ) {
 +
              $(".fa-tools").css('font-size', '19px')
 +
            }else{
 +
              $(".fa-tools").css('font-size', '17px')
 +
            }
 +
        });
 +
 
 +
 
 +
        // function collapseAll() {
 +
        //  $('.mw-collapsible').on( "click", "#aver", function() {
 +
        //    $(".mw-collapsible").addClass("mw-collapsed");
 +
        //  });
 +
        // }
 +
 
 +
        // function collapseAll() {
 +
        //  $(".mw-collapsible").addClass("mw-collapsed").reload();
 +
        //  $( ".mw-collapsible" ).load(window.location.href + " .mw-collapsible" );
 +
        // }
 +
 
 +
        // $(document).ready(function(){
 +
        //  $("button").click(function(){
 +
        //    $(".mw-collapsible").toggleClass("mw-collapsed");
 +
        //  });
 +
        // });
 +
 
 +
        // $(document).on('click', '.DoFirst', function() {
 +
        //  $('#totalItems, #enteredItems').keyup(function(){
 +
        //    collapseAll()
 +
        //  }); 
 +
        //  collapseAll()
 +
        // });
 +
 
 +
        // $(document).on( function() {
 +
        //  $('#totalItems, #enteredItems').keyup(function(){
 +
        //    collapseAll()
 +
        //  }); 
 +
        //  collapseAll()
 +
        // });
 +
 
 +
        // function moveSidebarToBody() {
 +
        //    $("#MySidebar").appendTo("#pt-userpage");
 +
        //    // document.body.appendChild(document.getElementById('MySidebar'))
 +
        // }
 +
 
 +
        // Shortkey: https://www.techiedelight.com/create-keyboard-shortcuts-with-javascript-jquery-hotkeys-mousetrap-library/
 +
        // For some reason, in MediaWiki pages, the && operator is not being interpreted by the web browser
 +
        // as such in «keydown» functions. The web browser is reading «&amp;», instead of «&&» which generates a systax error.
 +
        // To work around this problem I just broke the function using «2» if statements:
 +
 
 +
        // $(document).keydown(function(event) {
 +
        //  if ( (event.ctrlKey) && (event.which === 88) ) {
 +
        //    alert('Alt + X pressed!')
 +
        //    e.preventDefault()
 +
        //  }
 +
        // });
 +
 
 +
        $(document).keydown(function(event) {
 +
          if ( event.ctrlKey ) {
 +
            if ( event.which === 66 )  { // Check key codes here: https://css-tricks.com/snippets/javascript/javascript-keycodes/
 +
              // alert('Ctrl + B pressed!')
 +
              var checkBox = document.getElementById("inputButton");
 +
              if (checkBox.checked == true){
 +
                checkBox.checked = false
 +
              }else{
 +
                checkBox.checked = true
 +
              }
 +
              myFunction()
 +
              e.preventDefault()
 +
            }
 +
 
 +
            // if ( event.which === 89 )  {
 +
            //  $(document).on( function() {
 +
            //    $('#totalItems, #enteredItems').keyup(function(){
 +
            //      collapseAll()
 +
            //    }); 
 +
            //    collapseAll()
 +
            //  });
 +
            // }
 +
 
 +
          }
 +
         
 +
          if ( event.ctrlKey ) {
 +
            if ( event.which === 89 ) {
 +
              expandSidebar()
 +
            }
 +
          }
 +
 
 +
        });
 +
 
 +
        // Esta es otra forma de hacerlo
 +
        // document.addEventListener("keydown", function(event) {
 +
        //  if (event.ctrlKey && event.code === "KeyB") {
 +
        //    alert('Alt + X pressed!');
 +
        //    event.preventDefault();
 +
        //  }
 +
        // });
 +
 
 +
       
 +
        $(document).ready( function() {
 +
            $('#totalItems, #enteredItems').keyup(function(){
 +
                checkUser()
 +
                collapseSome()
 +
                removeCSS()
 +
                // moveSidebarToBody()
 +
            }); 
 +
            checkUser()
 +
            collapseSome()
 +
            removeCSS()
 +
            // moveSidebarToBody()
 +
        });
 +
    </script>
 +
  }}
 +
 
 
    
 
    
−
 
+
  <br />
−
   /* This block manages the CSS changes between "Mis paginas" page and the "Sidebar" page CSS */
+
  <div class="mw-collapsible mw-collapsed" style="width:340px; display: none !important">
−
   #menuToggle ul {
+
   '''Previous version without <nowiki><html></nowiki> tag:'''
−
      margin-top:    20px !important;
+
  <div class="mw-collapsible-content" style="width: 900pt !important">
−
      margin-bottom: 35px !important;
+
  <syntaxhighlight lang="html">
 +
  {{#css:
 +
  #mw-panel { visibility: collapse !important; }
 +
  #p-namespaces { visibility: collapse !important; }
 +
  #content { max-width: 1200pt !important; margin-left: auto !important; margin-right: auto !important; }
 +
  #mw-panel { visibility: collapse !important; }
 +
  #mw-page-base { visibility: collapse !important; }
 +
  #ca-head-base { display: none !important; }
 +
  #ca-nstab-main { display: none !important; }
 +
  #ca-talk { display: none !important; }
 +
  #ca-view { display: none !important; }
 +
  #ca-viewsource { display: none !important; }
 +
  #ca-edit { display: none !important; }
 +
  #ca-ve-edit { display: none !important; }
 +
  #ca-history { display: none !important; }
 +
  #ca-unwatch { display: none !important; }
 +
  #ca-watch { display: none !important; }
 +
  #p-cactions { display: none !important; }
 +
  #pt-userpage { display: none !important; }
 +
  #pt-mytalk { display: none !important; }
 +
  #pt-preferences { display: none !important; }
 +
  #pt-watchlist { display: none !important; }
 +
  #pt-mycontris { display: none !important; }
 +
  #pt-logout { display: none !important; }
 +
  #pt-anonuserpage { display: none !important; }
 +
  #pt-anontalk { display: none !important; }
 +
  #pt-createaccount { display: none !important; }
 +
  #pt-login { display: none !important; }
 +
  #footer-info-copyright { display: none !important; }
 +
  #footer-places-privacy { display: none !important; }
 +
  #footer-places-about { display: none !important; }
 +
   #footer-places-disclaimer { display: none !important; }
 +
  #p-tb { display: none !important; }
 +
  body {
 +
    background:    #ededf2;
 +
    padding-left:  35pt !important;  
 +
    padding-right: 35pt !important;  
 
   }
 
   }
−
   #menuToggle li {
+
   #mw-head {
−
      font: 14px / 22.4px sans-serif;
+
    z-index: -1;
−
      margin-top:     0px  ;
 
−
      margin-bottom:  15px ;
 
 
   }
 
   }
−
   #menuToggle .entre-li {
+
   .mediawiki {  
−
      margin-bottom:  -15px ;
+
    padding-left:  40pt !important;
 +
    padding-right: 30pt !important;  
 
   }
 
   }
−
   #menuToggle .entre-li-n4 {
+
   #content {
−
      margin-bottom: -30px ;
+
    border-top: 1px solid rgba(184, 134, 11, 0.5) !important;    <!-- This means the page contains hidden text #B8860B -->
 +
    border:    1px solid rgba(184, 134, 11, 0.5);                <!-- rgba(56, 139, 253, 0.4); -->
 +
  }  
 +
  #right-navigation {
 +
    visibility: collapse;
 
   }
 
   }
−
   #menuToggle .entre-li-n4-first {
+
   #p-search {
−
      margin-top: -25px ;
+
    visibility: visible;
 
   }
 
   }
−
   #menuToggle ul .first-li {
+
   #simpleSearch {
−
      margin-top: -15px !important;
+
    <!-- border: 0.1px solid rgba(166, 44, 32, 0.5); -->
 +
  }  
 +
  #footer {
 +
    padding-left: 10pt;
 +
    margin-left: auto  !important;
 +
    margin-right: auto !important;
 +
    max-width:    1100pt;
 
   }
 
   }
−
   #menuToggle a {
+
   #footer-info {
−
      color: #0645AD !important;
+
    margin-left: 0pt;
−
      overflow-wrap: break-word;
 
 
   }
 
   }
−
   #menuToggle a:hover {
+
   div#toc.toc {
−
      text-decoration: underline !important;
+
    font-size: 12pt;
 +
    margin-top: -4.5pt;
 +
    background: rgba(255, 255, 255, 0.85);
 +
    border: 0.1px solid rgba(166, 44, 32, 0.5);
 +
 
 +
    max-width: 200pt;
 +
    margin-right: 12pt;
 
   }
 
   }
−
   #menuToggle a{
+
   .toc ul {
−
      font: 14px / 22.4px sans-serif;
+
    overflow-y: scroll  !important;
 +
    max-height: 500pt;  <!-- max-height: 100vh; -->
 
   }
 
   }
−
   #menuToggle li{
+
   .tocUl {
−
      font: 14px / 22.4px sans-serif;
+
    overflow-y: scroll  !important;
 +
    max-height: 500pt;  <!-- max-height: 100vh; -->
 
   }
 
   }
−
   #menuToggle span {
+
   .tochidden {
−
      font: 14px / 22.4px sans-serif;
+
     height: 4pt !important;
−
  }
 
−
  #menuToggle .base-li-1 {
 
−
      margin-bottom: -5px !important;
 
−
  }
 
−
  #menuToggle .desplaza {
 
−
      margin-top: -13px !important;
 
−
      padding-right: 30px !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 {
+
   .rcorners {
−
      width: 100% !important;
+
    border-radius: 3px;
−
      padding: 0px 0px 0px 0px !important;
+
    padding: 2px;
−
      background: #e3e3e8 !important;
+
    border: 1.5px solid #B8860B;
 
   }
 
   }
−
   #menuToggle .marco1-int {
+
   .under {
−
      background: #e3e3e8 !important;
+
    margin-right: 10px;
 +
    <!-- display:inline-block;
 +
    border-bottom:1px solid #A62C20;
 +
    padding-bottom:-5px !important; -->
 
   }
 
   }
−
   #menuToggle .marco1-ext .mw-editsection {
+
   .title {
−
      display: none !important;
+
    <!-- margin-top: 5px; -->
 +
    margin-left: -10px !important;
 +
    margin-right: -5px !important;
 +
    font-weight: normal;
 +
    font-family: 'Zapf Dingbats';
 +
    font-size: 40px;
 +
    font-family: 'Linux Libertine','Georgia','Times',serif;
 +
    background: red; <!-- #8c94ab -->
 +
    color: white;
 +
    height: 70pt;
 +
    line-height: 70pt;
 +
    text-aligh: center; 
 +
    <!-- background: rgba(0, 0, 0, 0) linear-gradient(90deg, #007bff, rgb(0, 0, 0)) repeat scroll 0% 0% / auto padding-box border-box; margin-left:-10px; --> 
 +
    <!-- linear-gradient(90deg, rgb(31, 112, 193), rgb(0, 0, 0)) -->  <!-- #0074D9 -->
 
   }
 
   }
−
   #menuToggle .divline1 {
+
   .cover {
−
      padding: 0;  
+
    object-fit: cover;  
−
      border: 0;  
+
    width: 100%;  
−
      display: block;  
+
    height: 250px;  
−
      margin-top: -7px !important;
+
    margin-bottom: 2000px;
−
      margin-bottom: 30px !important;  
+
    margin-top: -20px;
−
      margin-right: 0px !important;
 
−
      margin-left: 2px  !important;
 
−
      background-color: white;  
 
−
      height:1.2pt
 
 
   }
 
   }
−
   #menuToggle .mw-collapsible-toggle {
+
   .icon {
−
     outline: none !important;
+
     color: #2d2e27;
 
   }
 
   }
−
   #menuToggle .mw-collapsible-text:hover {
+
   .texticon {
−
     color: red !important;
+
    color: #2d2e27;  <!-- #f0f2e4 -->
 +
     font-size: 20px !important;
 
   }
 
   }
−
   #menuToggle .mw-collapsible-toggle:hover {
+
   .textlink {
−
     color: red !important;
+
    color: #0854a6 !important;  <!-- #f0f2e4 #007bff -->
 +
     font-size: 20px !important;
 
   }
 
   }
−
   #menuToggle .button-top {
+
   .container {
−
     color: #999191; font-size:20px
+
     width: 150px;
 +
    height: 150px;
 +
    position: relative;
 +
    margin: 0px;
 
   }
 
   }
−
   #menuToggle .button-top:hover {
+
   .box {
−
     color: #5c4444;
+
    z-index: 10;
 +
    width: 100%;
 +
    height: 100%;
 +
    position: absolute;
 +
    top: 0;
 +
     left: 0;
 
   }
 
   }
−
    
+
   .overlay {
−
 
+
    z-index: 1;
−
  /* Sidebar (Pure CSS) */
+
    margin-left: -5px;
−
  #menuToggle {
+
    margin-top: -23px;
−
      display: block;
 
−
      position: relative;
 
−
      top: -145px;
 
−
      margin-left: -205px;
 
−
      padding-left: 10px;
 
−
      -webkit-user-select: none;
 
−
      user-select: none;
 
 
   }
 
   }
−
   #menuToggle a {
+
   .titulo1-text {
−
      text-decoration: none;
+
    font-size: 18px !important;
−
      color: #232323;
 
−
      transition: color 0.3s ease;
 
 
   }
 
   }
−
   #menuToggle a:hover { color: tomato; }
+
   .titulo1-text-marco {
−
  #menuToggle input {
+
    padding-left: 10px !important;
−
      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 */
+
   .titulo1-marco-oneline {
−
  #menuToggle .hamb {
+
    padding-right: 0px !important;
−
      display: block;
+
    padding-left: 0px !important;
−
      width: 26px;
+
    margin-right: -5px !important;
−
      height: 4.1px;
+
    margin-left: 0px !important;
−
      margin-bottom: 2.9px;
+
    min-height: 35pt !important;
−
      position: relative;
+
    margin-top:-32pt !important;
−
      background: #837e7e;
+
  } 
−
      border-radius: 3px;
+
  .titulo1-marco-twolines {
−
      z-index: 11;
+
    padding-right: 0px !important;
−
      transform-origin: 4px 0px;
+
    padding-left: 0px !important;
−
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+
    margin-right: -5px !important;
−
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+
    margin-left: 0px !important;
−
                  opacity 0.55s ease;
+
    min-height: 50pt !important;
 +
    margin-top:-47pt !important;
 
   }
 
   }
−
   /* #menuToggle #inputButton:hover + #hamb1 {
+
   .marco1-ext {
−
     background: #5c4444 !important;
+
     width: 100% !important;
−
  } */
+
    padding: 0px 0px 0px 0px !important;
−
  #menuToggle span:first-child {
+
    background: #e3e3e8 !important;
−
      transform-origin: 0% 0%;
 
 
   }
 
   }
−
   #menuToggle span:nth-last-child(2) {
+
   .marco1-int {
−
      transform-origin: 0% 100%;
+
    background: #e3e3e8 !important;
 
   }
 
   }
−
   /* Transform all the slices of hamburger into a crossmark */
+
   .marco1-ext .mw-editsection {
−
  #menuToggle input:checked ~ .hamb {
+
    display: none !important;
−
      opacity: 1;
 
−
      transform: rotate(45deg) translate(-2px, -1px);
 
−
      background: #837e7e;
 
 
   }
 
   }
−
   /* But let's hide the middle one */
+
   .divline1 {
−
  #menuToggle input:checked ~ span:nth-last-child(3) {
+
    padding: 0;  
−
      opacity: 0;
+
    border: 0;  
−
      transform: rotate(0deg) scale(0.2, 0.2);
+
    display: block;
−
  }
+
    margin-top:-10px;
−
  /* Ohyeah and the last one should go the other direction */
+
    margin-right: 0px !important;
−
  #menuToggle input:checked ~ span:nth-last-child(2) {
+
    margin-left: 2px  !important;
−
      transform: rotate(-45deg) translate(0, -1px);
+
    background-color: white;  
 +
    height:1.2pt
 
   }
 
   }
 
    
 
    
−
   /* Make this absolute positioned at the top left of the screen */
+
   .toggleNode { <!-- visibility: hidden --> }
−
  #menu {
+
  }}
−
      position: absolute;
+
  <!-- some colors I have tried and liked: #dcd8ed  #3182f5  #D8BFD8  #E6E6FA  rgb(79.998779%,79.998779%,100%)-->
−
      width: 300px;
+
  <div class="container" style="position: fixed; height: 0px; width: 250px; margin-left: -70px; margin-top: -132px; z-index: 200; background: red !important; background-color: red !important">
−
      margin: -55px 0 0 -10px;
+
  <div class="box mw-customtoggle-myToggle1" style="cursor:pointer; color:blue; width:0px; z-index: 100">[+/-]</div>
−
      padding: 50px 0px 30px 0px;
+
   <div style="border-top:-50px;" class="box overlay mw-collapsible" id="mw-customcollapsible-myToggle1">
−
      background: #ededed;
+
  <div style="border-top:-50px;" style="background: transparent; border: 0px solid blue; padding:0px" class="toccolours mw-collapsible-content">
−
      list-style-type: none;
+
   <!--  
−
      -webkit-font-smoothing: antialiased;
+
   <div style="border-top:-50px; background: #E6E6FA; min-height:50px; line-height: 50px; text-align: left; padding-left: 35px; font-size: 20px; font-family: 'Linux Libertine','Georgia','Times',serif;">
−
      /* to stop flickering of text in safari */
+
  '''''[[Carrera|<span style="color:#B8860B; font-weight: bold;">Carrera</span>]]'''''
−
      transform-origin: 0% 0%;
+
   </div>
−
      <!-- transform: translate(-100%, 0); -->
+
   -->
−
      display: none;
+
   <div style="height: 50px; width:100%; background: #e3e3e8">
−
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+
   </div>
−
  }
+
   <!-- <div style="overflow-y: scroll; height: 100vh !important; background: #f7f7f8; margin-top:0px; padding:0.1px 20px 20px 20px;"> -->
−
  #menu li {
+
   <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
−
      padding: 10px 0 0 0;
+
  <!-- {{#lst:Mis páginas|Carrera1}} -->
−
      font-size: 22px;
+
   <div style="margin-bottom: 42px; margin-top:2px"> {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
−
  }
+
   <div style="margin-bottom: 50px"> {{#lst:Mis páginas|social_sciences0}}</div>
−
  /* And let's slide it in from the left */
+
  <div style="margin-bottom: 30px"> {{#lst:Mis páginas|musica0}}</div>
−
  #menuToggle input:checked ~ #menu {
+
  <div style="margin-bottom: 150px">{{#lst:Mis páginas|Carrera0}}</div>
−
      <!-- transform: none; -->
+
  </div>
−
      display: block;
+
  </div>
−
  }
+
  </div>
−
 
+
  </div>
−
 
+
  </syntaxhighlight>
−
  /* Tab Menu */
+
  </div>
−
  .button {
+
  </div>
−
      font-size: 22px;
 
−
      color: inherit;
 
−
      background-color :inherit;
 
−
      padding: 6px 0px 6px 0px;  
 
−
      border: none;  
 
−
      outline: 0;
 
−
      cursor: pointer;
 
−
  }
 
−
   .button:hover { }
 
−
  .bottom-selected {
 
−
    color:rgb(60, 60, 70);
 
−
    background-color: #d1d1de !important; /*  #f44336  rgb(60, 60, 70)  #3c4043  */
 
−
  }
 
−
  .fa-atom        { font-size: 21px; }
 
−
  .fa-info        { font-size: 18px; }
 
−
   .fa-tools      { font-size: 17px; }
 
−
   .fa-atom:hover  { color:black; }
 
−
  .fa-info:hover  { color:black; }
 
−
  .fa-tools:hover { color:black; }
 
−
  .area {
 
−
      color: black;
 
−
      padding: 5px 0px 5000px 3px;
 
−
      border: 0px solid #ccc !important;
 
−
  }
 
−
  #container-button-tap {
 
−
  width:100%;
 
−
   color:rgb(97, 97, 114);
 
−
   background-color: white;
 
−
}
 
−
.izquierda{
 
−
   float:left;
 
−
  width:33.3%;
 
−
  text-align: center;
 
−
}
 
−
.derecha{
 
−
   float:right;
 
−
   width:33.3%;
 
−
  text-align: center;
 
−
}
 
−
.centrar{
 
−
  margin:0 auto;
 
−
  width:33.3%;
 
−
  text-align: center;
 
−
}
 
−
 
 
−
   </style>
 
−
 
 
−
 
 
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
−
   <script src="https://kit.fontawesome.com/423f4585a2.js" crossorigin="anonymous"></script>
 
−
 
 
−
 
 
−
   <nav id="MySidebar" role="navigation" style="position: fixed; z-index: 1"> <!-- class="oculto" -->
 
−
      <div id="menuToggle">
 
−
          <!--
 
−
          A fake / hidden checkbox is used as click reciever,
 
−
          so you can use the :checked selector on it.
 
−
          -->
 
−
          <input id="inputButton" type="checkbox" onclick="myFunction()"/>
 
−
         
 
−
          <!--
 
−
          Some spans to act as a hamburger.
 
−
          -->
 
−
          <!-- <div> -->
 
−
          <span id="hamb1" class="hamb"></span>
 
−
          <span id="hamb2" class="hamb"></span>
 
−
          <span id="hamb3" class="hamb"></span>
 
−
          <!-- </div> -->
 
−
         
 
−
          <!-- <i style="font-size: 30px"  class="fa fa-bars fa-w-14 fa-10x"></i> -->
 
−
         
 
−
          <!--
 
−
          Too bad the menu has to be inside of the button
 
−
          but hey, it's pure CSS magic.
 
−
          -->
 
−
          <div id="menu" style="border-right: 0px solid rgb(177, 177, 180);">
 
−
             
 
−
              <!--Tap Menu -->
 
−
              <div style="padding: 10px 0px 0px 0px; border-right: 2px solid #ededed">
 
−
 
 
−
                  <div style="text-align:right; margin-top:-31px; margin-bottom: 15px; padding-right: 5px">
 
−
                    <button onclick="expandSidebar()" style="cursor:pointer; outline: none; border-width:0px"> <i id="expandSidebar-icon" class="fa fa-arrow-right button-top" aria-hidden="true"></i>  </button>
 
−
                  </div>
 
−
 
 
−
                  <div id="container-button-tap" style="margin-top:-9px;">
 
−
                      <button id="button-pe"    class="button izquierda tablink bottom-selected"                            onclick="openCity(event,'PE')"    > <i class="fas fa-atom"> </i> </button>
 
−
                      <button id="button-others" class="button derecha  tablink"  onclick="openCity(event,'Others')"> <i class="fas fa-info"> </i> </button>
 
−
                      <button id="button-tools"  class="button centrar  tablink"                                            onclick="openCity(event,'Tools')" > <i class="fas fa-tools"></i> </button>
 
−
                  </div>
 
−
                 
 
−
                  <div id="PE" class="area city">
 
−
                    <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
 
−
                    <!-- {{#lst:Mis páginas|Carrera1}} -->
 
−
                    <div id="sectionBase"    style="margin-bottom: 30px;  margin-top: 10px" > {{#lst:Mis páginas|base}}</div>
 
−
                    <div id="sectionPure"    style="margin-bottom: 73px;  margin-top:-5px"  > {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 
−
                    <div id="sectionSocial"  style="margin-bottom: 55px;  margin-top: 2px"  > {{#lst:Mis páginas|social_sciences0}}</div>
 
−
                    <div id="sectionMusic"  style="margin-bottom: 30px;  margin-top: 2px"  > {{#lst:Mis páginas|musica0}}</div>
 
−
                    <div id="sectionCarrera" style="margin-bottom: 800px; margin-top: 2px"  > {{#lst:Mis páginas|Carrera0}}</div>
 
−
                    </div>
 
−
                  </div>
 
−
                 
 
−
                  <div id="Tools"  class="area city" style="display:none">
 
−
                      <p>Under construction...</p>
 
−
                  </div>
 
−
                 
 
−
                  <div id="Others"  class="area city" style="display:none">
 
−
                      <p>Under construction...</p>
 
−
                  </div>
 
−
              </div>
 
−
             
 
−
              <!-- <a href="#"><li>Home</li></a>
 
−
              <a href="#"><li>About</li></a>
 
−
              <a href="#"><li>Info</li></a>
 
−
              <a href="#"><li>Contact</li></a>
 
−
              <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a> -->
 
−
             
 
−
          </div>
 
−
      </div>
 
−
  </nav>
 
−
 
 
−
 
 
−
  <script>
 
−
 
 
−
      function openCity(evt, cityName) {
 
−
        var i, x, tablinks;
 
−
        x = document.getElementsByClassName("city");
 
−
        for (i = 0; i < x.length; i++) {
 
−
            x[i].style.display = "none";
 
−
        }
 
−
        tablinks = document.getElementsByClassName("tablink");
 
−
        for (i = 0; i < x.length; i++) {
 
−
            tablinks[i].className = tablinks[i].className.replace(" bottom-selected", "");
 
−
        }
 
−
        document.getElementById(cityName).style.display = "block";
 
−
        evt.currentTarget.className += " bottom-selected";
 
−
 
 
−
        if (cityName == "PE") {
 
−
          $(".fa-atom").css('font-size', '21px')
 
−
          $(".fa-info").css('font-size', '18px')
 
−
          $(".fa-tools").css('font-size','17px')
 
−
        }else if (cityName == "Others") {
 
−
          $(".fa-atom").css('font-size', '19px')
 
−
          $(".fa-info").css('font-size', '20px')
 
−
          $(".fa-tools").css('font-size','17px')
 
−
        }else {
 
−
          $(".fa-atom").css('font-size', '19px')
 
−
          $(".fa-info").css('font-size', '18px')
 
−
          $(".fa-tools").css('font-size','19px')
 
−
        }
 
−
      }
 
−
 
 
−
     
 
−
      function myFunction() {
 
−
          var checkBox = document.getElementById("inputButton");
 
−
          if (checkBox.checked == true){
 
−
              $('#content').css('margin-left', '300px')
 
−
              $('#left-navigation').css({'cssText':'margin-left:300px'})
 
−
              $('#menuToggle').css('margin-left', '-325px')
 
−
              $('#footer').css('margin-left', '308px')
 
−
          } else {
 
−
              $('#content').css('margin-left', '180px')
 
−
              $('#left-navigation').css({'cssText':'margin-left:180px'})
 
−
              $('#menuToggle').css('margin-left', '-205px')
 
−
              $('#footer').css('margin-left', '180px')
 
−
          }
 
−
      }
 
−
 
 
−
      function checkUser(){
 
−
          if ( document.getElementById('pt-userpage') != null ) {
 
−
              if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){
 
−
                  $('.oculto').css('display','block')
 
−
                  $('.link-hidden').css('pointer-events','auto')
 
−
                  // $('body').css('background','red');
 
−
              }else{
 
−
                  // $('body').css('background','blue');   
 
−
              }
 
−
          }else{
 
−
              // $('body').css('background','blue');
 
−
              // $('#hideThis').show();
 
−
          }
 
−
      }
 
−
 
 
−
      function removeCSS() {
 
−
        $('#menuToggle li').css({'margin-bottom':'','margin-top':''})
 
−
        $('#menuToggle p ').css({'margin-bottom':'','margin-top':''})
 
−
        // $('#mis-paginas li').css({'margin-bottom':'','margin-top':''})
 
−
        // $('#mis-paginas p ').css({'margin-bottom':'','margin-top':''})
 
−
        // $('#mis-paginas ul ').css({'margin-bottom':'','margin-top':''})
 
−
      }
 
−
 
 
−
      function collapseSome() {
 
−
          $(".mw-collapsible").not('.keep-abierto').addClass("mw-collapsed");
 
−
      }
 
−
 
 
−
      function expandSidebar() {
 
−
        var menuWidth = parseInt(window.getComputedStyle(document.getElementById("menu")).width)
 
−
        if (menuWidth < 400 ) {
 
−
          $("#menu").css('width','600px')
 
−
          $(".titulo1-marco-twolines").addClass("titulo1MarcoTwolines")
 
−
          $(".titulo1-marco-twolines").addClass("titulo1-marco-oneline")
 
−
          $(".titulo1MarcoTwolines").removeClass("titulo1-marco-twolines")
 
−
          $("#sectionPure").css({'margin-bottom':  '30px', 'margin-top':'2px'})
 
−
          $("#sectionSocial").css({'margin-bottom':'30px', 'margin-top':'2px'})
 
−
          $("#space-end-pure").css({'margin-bottom':'85px'})
 
−
          $("#space-end-social").css({'margin-bottom':'60px'})
 
−
          $("#space-end-music").css({'margin-bottom':'45px'})
 
−
          $("#expandSidebar-icon").removeClass("fa-arrow-right")
 
−
          $("#expandSidebar-icon").addClass("fa-arrow-left")
 
−
        }else{
 
−
          $("#menu").css('width','300px')
 
−
          $(".titulo1MarcoTwolines").addClass("titulo1-marco-twolines")
 
−
          $(".titulo1-marco-twolines").removeClass("titulo1MarcoTwolines")
 
−
          $(".titulo1-marco-twolines").removeClass("titulo1-marco-oneline")
 
−
          $("#sectionPure").css({'margin-bottom':  '73px', 'margin-top':'-5px'})
 
−
          $("#sectionSocial").css({'margin-bottom':'55px', 'margin-top':' 2px'})
 
−
          $("#space-end-pure").css({'margin-bottom':'80px'})
 
−
          $("#space-end-social").css({'margin-bottom':'30px'})
 
−
          $("#space-end-music").css({'margin-bottom':'40px'})
 
−
          $("#expandSidebar-icon").removeClass("fa-arrow-left")
 
−
          $("#expandSidebar-icon").addClass("fa-arrow-right")
 
−
        }
 
−
      }
 
−
 
 
−
     
 
−
      $("#inputButton").hover(function(){
 
−
        $(".hamb").css("background", "#5c4444");
 
−
        }, function(){
 
−
        $(".hamb").css("background", "#837e7e");
 
−
      });
 
−
     
 
−
 
 
−
      $("#button-pe").hover(function(){
 
−
        $(".fa-atom").css('font-size', '21px')
 
−
        }, function(){
 
−
          if ( $(this).hasClass("bottom-selected") ) {
 
−
            $(".fa-atom").css('font-size', '21px')
 
−
          }else{
 
−
            $(".fa-atom").css('font-size', '19px')
 
−
          }
 
−
      });
 
−
 
 
−
      $("#button-others").hover(function(){
 
−
        $(".fa-info").css('font-size', '20px')
 
−
        }, function(){
 
−
          if ( $(this).hasClass("bottom-selected") ) {
 
−
            $(".fa-info").css('font-size', '20px')
 
−
          }else{
 
−
            $(".fa-info").css('font-size', '18px')
 
−
          }
 
−
      });
 
−
 
 
−
      $("#button-tools").hover(function(){
 
−
        $(".fa-tools").css('font-size', '19px')
 
−
        }, function(){
 
−
          if ( $(this).hasClass("bottom-selected") ) {
 
−
            $(".fa-tools").css('font-size', '19px')
 
−
          }else{
 
−
            $(".fa-tools").css('font-size', '17px')
 
−
          }
 
−
      });
 
−
 
 
−
 
 
−
      // function collapseAll() {
 
−
      //  $('.mw-collapsible').on( "click", "#aver", function() {
 
−
      //    $(".mw-collapsible").addClass("mw-collapsed");
 
−
      //  });
 
−
      // }
 
−
 
 
−
      // function collapseAll() {
 
−
      //  $(".mw-collapsible").addClass("mw-collapsed").reload();
 
−
      //  $( ".mw-collapsible" ).load(window.location.href + " .mw-collapsible" );
 
−
      // }
 
−
 
 
−
      // $(document).ready(function(){
 
−
      //  $("button").click(function(){
 
−
      //    $(".mw-collapsible").toggleClass("mw-collapsed");
 
−
      //  });
 
−
      // });
 
−
 
 
−
      // $(document).on('click', '.DoFirst', function() {
 
−
      //  $('#totalItems, #enteredItems').keyup(function(){
 
−
      //    collapseAll()
 
−
      //  }); 
 
−
      //  collapseAll()
 
−
      // });
 
−
 
 
−
      // $(document).on( function() {
 
−
      //  $('#totalItems, #enteredItems').keyup(function(){
 
−
      //    collapseAll()
 
−
      //  }); 
 
−
      //  collapseAll()
 
−
      // });
 
−
 
 
−
      // function moveSidebarToBody() {
 
−
      //    $("#MySidebar").appendTo("#pt-userpage");
 
−
      //    // document.body.appendChild(document.getElementById('MySidebar'))
 
−
      // }
 
−
 
 
−
      // Shortkey: https://www.techiedelight.com/create-keyboard-shortcuts-with-javascript-jquery-hotkeys-mousetrap-library/
 
−
      // For some reason, in MediaWiki pages, the && operator is not being interpreted by the web browser
 
−
      // as such in «keydown» functions. The web browser is reading «&amp;», instead of «&&» which generates a systax error.
 
−
      // To work around this problem I just broke the function using «2» if statements:
 
−
 
 
−
      // $(document).keydown(function(event) {
 
−
      //  if ( (event.ctrlKey) && (event.which === 88) ) {
 
−
      //    alert('Alt + X pressed!')
 
−
      //    e.preventDefault()
 
−
      //  }
 
−
      // });
 
−
 
 
−
      $(document).keydown(function(event) {
 
−
        if ( event.ctrlKey ) {
 
−
          if ( event.which === 66 )  { // Check key codes here: https://css-tricks.com/snippets/javascript/javascript-keycodes/
 
−
            // alert('Ctrl + B pressed!')
 
−
            var checkBox = document.getElementById("inputButton");
 
−
            if (checkBox.checked == true){
 
−
              checkBox.checked = false
 
−
            }else{
 
−
              checkBox.checked = true
 
−
            }
 
−
            myFunction()
 
−
            e.preventDefault()
 
−
          }
 
−
 
 
−
          // if ( event.which === 89 )  {
 
−
          //  $(document).on( function() {
 
−
          //    $('#totalItems, #enteredItems').keyup(function(){
 
−
          //      collapseAll()
 
−
          //    }); 
 
−
          //    collapseAll()
 
−
          //  });
 
−
          // }
 
−
 
 
−
        }
 
−
       
 
−
        if ( event.ctrlKey ) {
 
−
          if ( event.which === 89 ) {
 
−
            expandSidebar()
 
−
          }
 
−
        }
 
−
 
 
−
      });
 
−
 
 
−
      // Esta es otra forma de hacerlo
 
−
      // document.addEventListener("keydown", function(event) {
 
−
      //  if (event.ctrlKey && event.code === "KeyB") {
 
−
      //    alert('Alt + X pressed!');
 
−
      //    event.preventDefault();
 
−
      //  }
 
−
      // });
 
−
 
 
−
     
 
−
      $(document).ready( function() {
 
−
          $('#totalItems, #enteredItems').keyup(function(){
 
−
              checkUser()
 
−
              collapseSome()
 
−
              removeCSS()
 
−
              // moveSidebarToBody()
 
−
          }); 
 
−
          checkUser()
 
−
          collapseSome()
 
−
          removeCSS()
 
−
          // moveSidebarToBody()
 
−
      });
 
−
  </script>
 
−
}}
 
−
 
 
−
 
 
−
<br />
 
−
<div class="mw-collapsible mw-collapsed" style="width:340px; display: none !important">
 
−
'''Previous version without <nowiki><html></nowiki> tag:'''
 
−
<div class="mw-collapsible-content" style="width: 900pt !important">
 
−
<syntaxhighlight lang="html">
 
−
{{#css:
 
−
#mw-panel { visibility: collapse !important; }
 
−
#p-namespaces { visibility: collapse !important; }
 
−
#content { max-width: 1200pt !important; margin-left: auto !important; margin-right: auto !important; }
 
−
#mw-panel { visibility: collapse !important; }
 
−
#mw-page-base { visibility: collapse !important; }
 
−
#ca-head-base { display: none !important; }
 
−
#ca-nstab-main { display: none !important; }
 
−
#ca-talk { display: none !important; }
 
−
#ca-view { display: none !important; }
 
−
#ca-viewsource { display: none !important; }
 
−
#ca-edit { display: none !important; }
 
−
#ca-ve-edit { display: none !important; }
 
−
#ca-history { display: none !important; }
 
−
#ca-unwatch { display: none !important; }
 
−
#ca-watch { display: none !important; }
 
−
#p-cactions { display: none !important; }
 
−
#pt-userpage { display: none !important; }
 
−
#pt-mytalk { display: none !important; }
 
−
#pt-preferences { display: none !important; }
 
−
#pt-watchlist { display: none !important; }
 
−
#pt-mycontris { display: none !important; }
 
−
#pt-logout { display: none !important; }
 
−
#pt-anonuserpage { display: none !important; }
 
−
#pt-anontalk { display: none !important; }
 
−
#pt-createaccount { display: none !important; }
 
−
#pt-login { display: none !important; }
 
−
#footer-info-copyright { display: none !important; }
 
−
#footer-places-privacy { display: none !important; }
 
−
#footer-places-about { display: none !important; }
 
−
#footer-places-disclaimer { display: none !important; }
 
−
#p-tb { display: none !important; }
 
−
body {
 
−
  background:    #ededf2;
 
−
  padding-left:  35pt !important;
 
−
  padding-right: 35pt !important;
 
−
}
 
−
#mw-head {
 
−
  z-index: -1;
 
−
}
 
−
.mediawiki {
 
−
  padding-left:  40pt !important;
 
−
  padding-right: 30pt !important;
 
−
}
 
−
#content {
 
−
  border-top: 1px solid rgba(184, 134, 11, 0.5) !important;    <!-- This means the page contains hidden text #B8860B -->
 
−
  border:    1px solid rgba(184, 134, 11, 0.5);                <!-- rgba(56, 139, 253, 0.4); -->
 
−
} 
 
−
#right-navigation {
 
−
  visibility: collapse;
 
−
}
 
−
#p-search {
 
−
  visibility: visible;
 
−
}
 
−
#simpleSearch {
 
−
  <!-- border: 0.1px solid rgba(166, 44, 32, 0.5); -->
 
−
} 
 
−
#footer {
 
−
  padding-left: 10pt;
 
−
  margin-left:  auto  !important;
 
−
  margin-right: auto  !important;
 
−
  max-width:    1100pt;
 
−
}
 
−
#footer-info {
 
−
  margin-left: 0pt;
 
−
}
 
−
div#toc.toc {
 
−
  font-size: 12pt;
 
−
  margin-top: -4.5pt;
 
−
  background: rgba(255, 255, 255, 0.85);
 
−
  border: 0.1px solid rgba(166, 44, 32, 0.5);
 
−
 
 
−
  max-width: 200pt;
 
−
  margin-right: 12pt;
 
−
}
 
−
.toc ul {
 
−
  overflow-y: scroll  !important;
 
−
  max-height: 500pt;  <!-- max-height: 100vh; -->
 
−
}
 
−
.tocUl {
 
−
  overflow-y: scroll  !important;
 
−
  max-height: 500pt;  <!-- max-height: 100vh; -->
 
−
}
 
−
.tochidden {
 
−
  height: 4pt !important;
 
−
}
 
−
.rcorners {
 
−
  border-radius: 3px;
 
−
  padding: 2px;
 
−
  border: 1.5px solid #B8860B;
 
−
}
 
−
.under {
 
−
  margin-right: 10px;
 
−
  <!-- display:inline-block;
 
−
  border-bottom:1px solid #A62C20;
 
−
  padding-bottom:-5px !important; -->
 
−
}
 
−
.title {
 
−
  <!-- margin-top: 5px; -->
 
−
  margin-left: -10px !important;
 
−
  margin-right: -5px !important;
 
−
  font-weight: normal;
 
−
  font-family: 'Zapf Dingbats';
 
−
  font-size: 40px;
 
−
  font-family: 'Linux Libertine','Georgia','Times',serif;
 
−
  background: red; <!-- #8c94ab -->
 
−
  color: white;
 
−
  height: 70pt;
 
−
  line-height: 70pt;
 
−
  text-aligh: center; 
 
−
  <!-- background: rgba(0, 0, 0, 0) linear-gradient(90deg, #007bff, rgb(0, 0, 0)) repeat scroll 0% 0% / auto padding-box border-box; margin-left:-10px; --> 
 
−
  <!-- linear-gradient(90deg, rgb(31, 112, 193), rgb(0, 0, 0)) -->  <!-- #0074D9 -->
 
−
}
 
−
.cover {
 
−
  object-fit: cover;
 
−
  width: 100%;
 
−
  height: 250px;
 
−
  margin-bottom: 2000px;
 
−
  margin-top: -20px;
 
−
}
 
−
.icon {
 
−
  color: #2d2e27;
 
−
}
 
−
.texticon {
 
−
  color: #2d2e27;  <!-- #f0f2e4 -->
 
−
  font-size: 20px !important;
 
−
}
 
−
.textlink {
 
−
  color: #0854a6 !important;  <!-- #f0f2e4 #007bff -->
 
−
  font-size: 20px !important;
 
−
}
 
−
.container {
 
−
  width: 150px;
 
−
  height: 150px;
 
−
  position: relative;
 
−
  margin: 0px;
 
−
}
 
−
.box {
 
−
  z-index: 10;
 
−
  width: 100%;
 
−
  height: 100%;
 
−
  position: absolute;
 
−
  top: 0;
 
−
  left: 0;
 
−
}
 
−
.overlay {
 
−
  z-index: 1;
 
−
  margin-left: -5px;
 
−
  margin-top: -23px;
 
−
}
 
−
.titulo1-text {
 
−
  font-size: 18px !important;
 
−
}
 
−
.titulo1-text-marco {
 
−
  padding-left: 10px !important;
 
−
}
 
−
.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:-32pt !important;
 
−
} 
 
−
.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;
 
−
}
 
−
.marco1-ext {
 
−
  width: 100% !important;
 
−
  padding: 0px 0px 0px 0px !important;
 
−
  background: #e3e3e8 !important;
 
−
}
 
−
.marco1-int {
 
−
  background: #e3e3e8 !important;
 
−
}
 
−
.marco1-ext .mw-editsection {
 
−
  display: none !important;
 
−
}
 
−
.divline1 {
 
−
  padding: 0;
 
−
  border: 0;
 
−
  display: block;
 
−
  margin-top:-10px;
 
−
  margin-right: 0px !important;
 
−
  margin-left: 2px  !important;
 
−
  background-color: white;
 
−
  height:1.2pt
 
−
}
 
−
 
 
−
.toggleNode { <!-- visibility: hidden --> }
 
−
}}
 
−
<!-- some colors I have tried and liked: #dcd8ed  #3182f5  #D8BFD8  #E6E6FA  rgb(79.998779%,79.998779%,100%)-->
 
−
<div class="container" style="position: fixed; height: 0px; width: 250px; margin-left: -70px; margin-top: -132px; z-index: 200; background: red !important; background-color: red !important">
 
−
<div class="box mw-customtoggle-myToggle1" style="cursor:pointer; color:blue; width:0px;  z-index: 100">[+/-]</div>
 
−
<div style="border-top:-50px;" class="box overlay mw-collapsible" id="mw-customcollapsible-myToggle1">
 
−
<div style="border-top:-50px;" style="background: transparent; border: 0px solid blue; padding:0px" class="toccolours mw-collapsible-content">
 
−
<!--
 
−
<div style="border-top:-50px; background: #E6E6FA; min-height:50px; line-height: 50px; text-align: left; padding-left: 35px; font-size: 20px; font-family: 'Linux Libertine','Georgia','Times',serif;">
 
−
'''''[[Carrera|<span style="color:#B8860B; font-weight: bold;">Carrera</span>]]'''''
 
−
</div>
 
−
-->
 
−
<div style="height: 50px; width:100%; background: #e3e3e8">
 
−
</div>
 
−
<!-- <div style="overflow-y: scroll; height: 100vh !important; background: #f7f7f8; margin-top:0px; padding:0.1px 20px 20px 20px;"> -->
 
−
<div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
 
−
<!-- {{#lst:Mis páginas|Carrera1}} -->
 
−
<div style="margin-bottom: 42px; margin-top:2px"> {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 
−
<div style="margin-bottom: 50px"> {{#lst:Mis páginas|social_sciences0}}</div>
 
−
<div style="margin-bottom: 30px"> {{#lst:Mis páginas|musica0}}</div>
 
−
<div style="margin-bottom: 150px">{{#lst:Mis páginas|Carrera0}}</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</syntaxhighlight>
 
−
</div>
 
−
</div>
 

Revision as of 21:55, 15 March 2021


 


 Previous version without <html> tag:

  {{#css:
  #mw-panel { visibility: collapse !important; }
  #p-namespaces { visibility: collapse !important; } 
  #content { max-width: 1200pt !important; margin-left: auto !important; margin-right: auto !important; }
  #mw-panel { visibility: collapse !important; }
  #mw-page-base { visibility: collapse !important; }
  #ca-head-base { display: none !important; }
  #ca-nstab-main { display: none !important; }
  #ca-talk { display: none !important; }
  #ca-view { display: none !important; }
  #ca-viewsource { display: none !important; }
  #ca-edit { display: none !important; }
  #ca-ve-edit { display: none !important; }
  #ca-history { display: none !important; }
  #ca-unwatch { display: none !important; }
  #ca-watch { display: none !important; }
  #p-cactions { display: none !important; }
  #pt-userpage { display: none !important; }
  #pt-mytalk { display: none !important; }
  #pt-preferences { display: none !important; }
  #pt-watchlist { display: none !important; }
  #pt-mycontris { display: none !important; }
  #pt-logout { display: none !important; }
  #pt-anonuserpage { display: none !important; }
  #pt-anontalk { display: none !important; }
  #pt-createaccount { display: none !important; }
  #pt-login { display: none !important; }
  #footer-info-copyright { display: none !important; }
  #footer-places-privacy { display: none !important; }
  #footer-places-about { display: none !important; }
  #footer-places-disclaimer { display: none !important; }
  #p-tb { display: none !important; }
  body { 
    background:    #ededf2; 
    padding-left:  35pt !important; 
    padding-right: 35pt !important; 
  }
  #mw-head {
    z-index: -1;
  }
  .mediawiki { 
    padding-left:  40pt !important; 
    padding-right: 30pt !important; 
  }
  #content {
    border-top: 1px solid rgba(184, 134, 11, 0.5) !important;     <!-- This means the page contains hidden text #B8860B -->
    border:     1px solid rgba(184, 134, 11, 0.5);                <!-- rgba(56, 139, 253, 0.4); -->
  }  
  #right-navigation {
    visibility: collapse;
  }
  #p-search {
    visibility: visible;
  }
  #simpleSearch {
    <!-- border: 0.1px solid rgba(166, 44, 32, 0.5); -->
  }  
  #footer {
    padding-left: 10pt;
    margin-left:  auto  !important;
    margin-right: auto  !important;
    max-width:    1100pt;
  }
  #footer-info {
    margin-left: 0pt;
  }
  div#toc.toc {
    font-size: 12pt;
    margin-top: -4.5pt;
    background: rgba(255, 255, 255, 0.85);
    border: 0.1px solid rgba(166, 44, 32, 0.5);
  
    max-width: 200pt;
    margin-right: 12pt;
  }
  .toc ul {
    overflow-y: scroll  !important;
    max-height: 500pt;  <!-- max-height: 100vh; -->
  }
  .tocUl {
    overflow-y: scroll  !important;
    max-height: 500pt;  <!-- max-height: 100vh; -->
  }
  .tochidden {
    height: 4pt !important;
  }
  .rcorners {
    border-radius: 3px;
    padding: 2px;
    border: 1.5px solid #B8860B;
  }
  .under {
    margin-right: 10px;
    <!-- display:inline-block;
    border-bottom:1px solid #A62C20;
    padding-bottom:-5px !important; -->
  }
  .title { 
    <!-- margin-top: 5px; -->
    margin-left: -10px !important;
    margin-right: -5px !important;
    font-weight: normal; 
    font-family: 'Zapf Dingbats'; 
    font-size: 40px; 
    font-family: 'Linux Libertine','Georgia','Times',serif; 
    background: red; <!-- #8c94ab -->
    color: white; 
    height: 70pt; 
    line-height: 70pt; 
    text-aligh: center;   
    <!-- background: rgba(0, 0, 0, 0) linear-gradient(90deg, #007bff, rgb(0, 0, 0)) repeat scroll 0% 0% / auto padding-box border-box; margin-left:-10px; -->   
    <!-- linear-gradient(90deg, rgb(31, 112, 193), rgb(0, 0, 0)) -->  <!-- #0074D9 -->
  }
  .cover {
    object-fit: cover; 
    width: 100%; 
    height: 250px; 
    margin-bottom: 2000px;
    margin-top: -20px;
  }
  .icon {
    color: #2d2e27;
  }
  .texticon {
    color: #2d2e27;  <!-- #f0f2e4 -->
    font-size: 20px !important;
  }
  .textlink {
    color: #0854a6 !important;  <!-- #f0f2e4 #007bff -->
    font-size: 20px !important;
  }
  .container {
    width: 150px;
    height: 150px;
    position: relative;
    margin: 0px;
  }
  .box {
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .overlay {
    z-index: 1;
    margin-left: -5px;
    margin-top: -23px;
  }
  .titulo1-text {
    font-size: 18px !important;
  }
  .titulo1-text-marco {
    padding-left: 10px !important;
  }
  .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:-32pt !important;
  }  
  .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;
  }
  .marco1-ext {
    width: 100% !important;
    padding: 0px 0px 0px 0px !important;
    background: #e3e3e8 !important;
  }
  .marco1-int {
    background: #e3e3e8 !important;
  }
  .marco1-ext .mw-editsection {
    display: none !important;
  }
  .divline1 {
    padding: 0; 
    border: 0; 
    display: block; 
    margin-top:-10px; 
    margin-right: 0px !important; 
    margin-left: 2px  !important; 
    background-color: white; 
    height:1.2pt
  }
  
  .toggleNode { <!-- visibility: hidden --> }
  }}
  <!-- some colors I have tried and liked: #dcd8ed  #3182f5  #D8BFD8  #E6E6FA  rgb(79.998779%,79.998779%,100%)-->
  <div class="container" style="position: fixed; height: 0px; width: 250px; margin-left: -70px; margin-top: -132px; z-index: 200; background: red !important; background-color: red !important"> 
  <div class="box mw-customtoggle-myToggle1" style="cursor:pointer; color:blue; width:0px;  z-index: 100">[+/-]</div>
  <div style="border-top:-50px;" class="box overlay mw-collapsible" id="mw-customcollapsible-myToggle1">
  <div style="border-top:-50px;" style="background: transparent; border: 0px solid blue; padding:0px" class="toccolours mw-collapsible-content">
  <!-- 
  <div style="border-top:-50px; background: #E6E6FA; min-height:50px; line-height: 50px; text-align: left; padding-left: 35px; font-size: 20px; font-family: 'Linux Libertine','Georgia','Times',serif;">
  '''''[[Carrera|<span style="color:#B8860B; font-weight: bold;">Carrera</span>]]'''''
  </div>
  -->
  <div style="height: 50px; width:100%; background: #e3e3e8">
  </div>
  <!-- <div style="overflow-y: scroll; height: 100vh !important; background: #f7f7f8; margin-top:0px; padding:0.1px 20px 20px 20px;"> -->
  <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
  <!-- {{#lst:Mis páginas|Carrera1}} -->
  <div style="margin-bottom: 42px; margin-top:2px"> {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
  <div style="margin-bottom: 50px"> {{#lst:Mis páginas|social_sciences0}}</div>
  <div style="margin-bottom: 30px"> {{#lst:Mis páginas|musica0}}</div>
  <div style="margin-bottom: 150px">{{#lst:Mis páginas|Carrera0}}</div>
  </div>
  </div>
  </div>
  </div>
Retrieved from "http://wiki.sinfronteras.ws/index.php?title=Template:Sidebar&oldid=22159"