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 }
    <!-- #p-namespaces { margin-left: 124px !important; } -->
+
  <!-- #p-namespaces { margin-left: 124px !important; } -->
    #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 }
   
+
 
    #menuToggle ul {
+
  #menuToggle ul {
        margin-top:    20px !important;     
+
      margin-top:    20px !important;     
        margin-bottom: 35px !important;
+
      margin-bottom: 35px !important;
    }
+
  }
    #menuToggle li {
+
  #menuToggle li {
        font: 14px / 22.4px sans-serif;
+
      font: 14px / 22.4px sans-serif;
        margin-top:    0px;
+
      margin-top:    0px;
        margin-bottom: 10px;
+
      margin-bottom: 10px;
    }
+
  }
    #menuToggle li span { }
+
  #menuToggle li span { }
    #menuToggle a, li {
+
  #menuToggle a, li {
        font: 14px / 22.4px sans-serif;
+
      font: 14px / 22.4px sans-serif;
    }
+
  }
    .base-li-1 {
+
  .base-li-1 {
        margin-bottom: -7px !important;
+
      margin-bottom: -7px !important;
    }
+
  }
    .desplaza {
+
  .desplaza {
        margin-top: -12px !important;
+
      margin-top: -12px !important;
        padding-right: 30px !important;
+
      padding-right: 30px !important;
    }
+
  }
    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 {
+
  .tocUl {
        overflow-y: scroll  !important;
+
      overflow-y: scroll  !important;
        overflow-x: scroll  !important;
+
      overflow-x: scroll  !important;
        max-height: calc(100vh - 150px);
+
      max-height: calc(100vh - 150px);
        width: 350px !important;
+
      width: 350px !important;
        padding-bottom: 30px !important;
+
      padding-bottom: 30px !important;
        white-space: nowrap !important;
+
      white-space: nowrap !important;
    }
+
  }
    .tocUl a {
+
  .tocUl a {
        padding-right: 25px !important;
+
      padding-right: 25px !important;
    }
+
  }
    .tochidden {
+
  .tochidden {
        height: 4pt !important;
+
      height: 4pt !important;
    }
 
    .titulo1-text {
 
        font-size: 18px !important;
 
    }
 
    .titulo2-text {
 
        font: 700 14px / 22.4px sans-serif !important;
 
    }
 
    .titulo1-text-marco {
 
        padding-left: 10px !important;
 
        padding-right: 40px !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:-30pt !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;
 
    }
 
    .titulo1-marco-color {
 
        background: #9595ab !important;
 
    }
 
    .titulo1-color {
 
        color: white !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
 
    }
 
   
 
   
 
    /* Sidebar (Pure CSS) */
 
    body {
 
   
 
    }
 
    #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: 33px;
 
        height: 6px;
 
        margin-bottom: 4px;
 
        position: relative;
 
        background: #999191;
 
        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 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 ~ span {
 
        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: 14px;
 
        color: inherit;
 
        background-color :inherit;
 
        padding: 8px 0px 8px 0px;
 
        border: none;
 
        outline: 0;
 
        cursor: pointer;
 
    }
 
    .bottom-selected { background-color: #f44336 !important }
 
    .area {
 
        color: black;
 
        padding: 5px 0px 5000px 3px;
 
        border: 0px solid #ccc !important;
 
    }
 
    .left  {float:  left;  width:100px; text-align: center;}
 
    .right  {float:  right;  width:100px; text-align: center;}
 
    .center {margin: 0 auto; width:100px; text-align: center;}
 
   
 
    </style>
 
   
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
 
 
    <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";
 
    }
 
    </script>
 
   
 
    <nav id="MySidebar" role="navigation" style="position: fixed;" 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.
 
            -->
 
           
 
            <span class="hamb"></span>
 
            <span class="hamb"></span>
 
            <span class="hamb"></span>
 
           
 
            <!--
 
            Too bad the menu has to be inside of the button
 
            but hey, it's pure CSS magic.
 
            -->
 
            <div id="menu">
 
               
 
                <!--Tap Menu -->
 
                <div style="padding: 10px 0px 0px 0px;">
 
                    <div style="color:#fff !important; background-color: #000 !important">
 
                        <button class="button left  tablink bottom-selected" onclick="openCity(event,'PE')">PE</button>
 
                        <button class="button center tablink"                onclick="openCity(event,'Tools')"> Tools </button>
 
                        <button class="button right  tablink"                onclick="openCity(event,'Others')"> Others </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 style="margin-bottom: 20px;  margin-top:10px" > {{#lst:Mis páginas|base}}</div>
 
                      <div style="margin-bottom: 42px;  margin-top: 2px" > {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 
                      <div style="margin-bottom: 50px;  margin-top: 2px" > {{#lst:Mis páginas|social_sciences0}}</div>
 
                      <div style="margin-bottom: 30px;  margin-top: 2px" > {{#lst:Mis páginas|musica0}}</div>
 
                      <div style="margin-bottom: 150px; margin-top:-5px" > {{#lst:Mis páginas|Carrera0}}</div>
 
                      </div>
 
                    </div>
 
                   
 
                    <div id="Tools"  class="area city" style="display:none">
 
                        <div>Tools</div>
 
                        <p> Tools is the capital of France.</p>
 
                    </div>
 
                   
 
                    <div id="Others"  class="area city" style="display:none">
 
                        <div>Others</div>
 
                        <p> Others is the capital of Japan.</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 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 moveSidebarToBody() {
 
        //    document.body.appendChild(document.getElementById('MySidebar'))
 
        // }
 
 
 
        function collapseAll() {
 
            $(".mw-collapsible").addClass("mw-collapsed");
 
        }
 
 
 
        $(document).ready( function() {
 
            $('#totalItems, #enteredItems').keyup(function(){
 
                checkUser()
 
                collapseAll()
 
                // moveSidebarToBody()
 
            }); 
 
            checkUser()
 
            collapseAll()
 
            // 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 {
+
   .titulo1-text {
    z-index: -1;
+
      font-size: 18px !important;
 
   }
 
   }
   .mediawiki {  
+
   .titulo2-text {
    padding-left: 40pt !important;
+
      font: 700 14px / 22.4px sans-serif !important;
    padding-right: 30pt !important;  
 
 
   }
 
   }
   #content {
+
   .titulo1-text-marco {
    border-top: 1px solid rgba(184, 134, 11, 0.5) !important;     <!-- This means the page contains hidden text #B8860B -->
+
      padding-left: 10px !important;
    border:    1px solid rgba(184, 134, 11, 0.5);                <!-- rgba(56, 139, 253, 0.4); -->
+
      padding-right: 40px !important;
  } 
 
  #right-navigation {
 
    visibility: collapse;
 
 
   }
 
   }
   #p-search {
+
   .titulo1-marco-oneline {
    visibility: visible;
+
      padding-right: 0px !important;
 +
      padding-left: 0px !important;
 +
      margin-right: -5px !important;
 +
      margin-left: 0px !important;
 +
      min-height: 35pt !important;
 +
      margin-top:-30pt !important;
 
   }
 
   }
   #simpleSearch {
+
   .titulo1-marco-twolines {
    <!-- border: 0.1px solid rgba(166, 44, 32, 0.5); -->
+
      padding-right: 0px !important;
  } 
+
      padding-left: 0px !important;
  #footer {
+
      margin-right: -5px !important;
    padding-left: 10pt;
+
      margin-left: 0px !important;
    margin-left: auto  !important;
+
      min-height: 50pt !important;
    margin-right: auto  !important;
+
      margin-top:-47pt !important;
    max-width:   1100pt;
 
 
   }
 
   }
   #footer-info {
+
   .titulo1-marco-color {
    margin-left: 0pt;
+
      background: #9595ab !important;
 
   }
 
   }
   div#toc.toc {
+
   .titulo1-color {
    font-size: 12pt;
+
      color: white !important;
    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 {
+
   .marco1-ext {
    overflow-y: scroll  !important;
+
      width: 100% !important;
    max-height: 500pt; <!-- max-height: 100vh; -->
+
      padding: 0px 0px 0px 0px !important;
 +
      background: #e3e3e8 !important;
 
   }
 
   }
   .tocUl {
+
   .marco1-int {
    overflow-y: scroll  !important;
+
      background: #e3e3e8 !important;
    max-height: 500pt;  <!-- max-height: 100vh; -->
 
 
   }
 
   }
   .tochidden {
+
   .marco1-ext .mw-editsection {
    height: 4pt !important;
+
      display: none !important;
 
   }
 
   }
   .rcorners {
+
   .divline1 {
    border-radius: 3px;
+
      padding: 0;
    padding: 2px;
+
      border: 0;
    border: 1.5px solid #B8860B;
+
      display: block;
 +
      margin-top:-10px;  
 +
      margin-right: 0px !important;
 +
      margin-left: 2px !important;  
 +
      background-color: white;
 +
      height:1.2pt
 
   }
 
   }
   .under {
+
    
    margin-right: 10px;
+
 
    <!-- display:inline-block;
+
  /* Sidebar (Pure CSS) */
    border-bottom:1px solid #A62C20;
+
  body {
    padding-bottom:-5px !important; -->
+
 
 
   }
 
   }
   .title {  
+
   #menuToggle {
    <!-- margin-top: 5px; -->
+
      display: block;
    margin-left: -10px !important;
+
      position: relative;
    margin-right: -5px !important;
+
      top: -145px;
    font-weight: normal;
+
      margin-left: -205px;
    font-family: 'Zapf Dingbats';  
+
      padding-left: 10px;
    font-size: 40px;  
+
      -webkit-user-select: none;
    font-family: 'Linux Libertine','Georgia','Times',serif;
+
      user-select: none;
    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 {
+
   #menuToggle a {
    object-fit: cover;  
+
      text-decoration: none;
    width: 100%;  
+
      color: #232323;  
    height: 250px;
+
      transition: color 0.3s ease;
    margin-bottom: 2000px;
 
    margin-top: -20px;
 
 
   }
 
   }
   .icon {
+
   #menuToggle a:hover { color: tomato; }
    color: #2d2e27;
+
  #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;
 
   }
 
   }
   .texticon {
+
   /* Just a quick hamburger */
    color: #2d2e27; <!-- #f0f2e4 -->
+
  #menuToggle .hamb {
    font-size: 20px !important;
+
      display: block;
 +
      width: 33px;
 +
      height: 6px;
 +
      margin-bottom: 4px;
 +
      position: relative;
 +
      background: #999191;
 +
      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;
 
   }
 
   }
   .textlink {
+
   #menuToggle span:first-child {
    color: #0854a6 !important;  <!-- #f0f2e4 #007bff -->
+
      transform-origin: 0% 0%;
    font-size: 20px !important;
 
 
   }
 
   }
   .container {
+
   #menuToggle span:nth-last-child(2) {
    width: 150px;
+
      transform-origin: 0% 100%;
    height: 150px;
 
    position: relative;
 
    margin: 0px;
 
 
   }
 
   }
   .box {
+
   /* Transform all the slices of hamburger into a crossmark */
    z-index: 10;
+
  #menuToggle input:checked ~ span {
    width: 100%;
+
      opacity: 1;
    height: 100%;
+
      transform: rotate(45deg) translate(-2px, -1px);
    position: absolute;
+
      background: #837e7e;
    top: 0;
 
    left: 0;
 
 
   }
 
   }
   .overlay {
+
   /* But let's hide the middle one */
    z-index: 1;
+
  #menuToggle input:checked ~ span:nth-last-child(3) {
    margin-left: -5px;
+
      opacity: 0;
    margin-top: -23px;
+
      transform: rotate(0deg) scale(0.2, 0.2);
 
   }
 
   }
   .titulo1-text {
+
   /* Ohyeah and the last one should go the other direction */
    font-size: 18px !important;
+
  #menuToggle input:checked ~ span:nth-last-child(2) {
 +
      transform: rotate(-45deg) translate(0, -1px);
 
   }
 
   }
   .titulo1-text-marco {
+
    
    padding-left: 10px !important;
+
  /* 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);
 
   }
 
   }
   .titulo1-marco-oneline {
+
   #menu li {
    padding-right: 0px !important;
+
      padding: 10px 0 0 0;
    padding-left: 0px !important;
+
      font-size: 22px;
    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 {
+
   /* And let's slide it in from the left */
    width: 100% !important;
+
  #menuToggle input:checked ~ #menu {
    padding: 0px 0px 0px 0px !important;
+
      <!-- transform: none; -->
    background: #e3e3e8 !important;
+
      display: block;
 
   }
 
   }
   .marco1-int {
+
 
    background: #e3e3e8 !important;
+
 
 +
  /* Tab Menu */
 +
   .button{
 +
      font-size: 14px;
 +
      color: inherit;
 +
      background-color :inherit;
 +
      padding: 8px 0px 8px 0px;
 +
      border: none;
 +
      outline: 0;
 +
      cursor: pointer;
 
   }
 
   }
   .marco1-ext .mw-editsection {
+
   .bottom-selected { background-color: #f44336 !important }
    display: none !important;
+
  .area {
 +
      color: black;
 +
      padding: 5px 0px 5000px 3px;
 +
      border: 0px solid #ccc !important;
 
   }
 
   }
   .divline1 {
+
   .izquierda {float:  left;  width:100px; text-align: center;}
    padding: 0;  
+
  .derecha  {float: right; width:100px; text-align: center;}
    border: 0;  
+
  .centro    {margin: 0 auto; width:100px; text-align: center;}
    display: block;  
+
 
    margin-top:-10px;  
+
  </style>
    margin-right: 0px !important;  
+
 
    margin-left: 2px  !important;  
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    background-color: white;  
+
 
    height:1.2pt
+
  <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";
 
   }
 
   }
 +
  </script>
 +
 
 +
  <nav id="MySidebar" role="navigation" style="position: fixed;" 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.
 +
          -->
 +
         
 +
          <span class="hamb"></span>
 +
          <span class="hamb"></span>
 +
          <span class="hamb"></span>
 +
         
 +
          <!--
 +
          Too bad the menu has to be inside of the button
 +
          but hey, it's pure CSS magic.
 +
          -->
 +
          <div id="menu">
 +
             
 +
              <!--Tap Menu -->
 +
              <div style="padding: 10px 0px 0px 0px;">
 +
                  <div style="color:#fff !important; background-color: #000 !important">
 +
                      <button class="button izquierda  tablink bottom-selected" onclick="openCity(event,'PE')"    > PE    </button>
 +
                      <button class="button centro  tablink"                    onclick="openCity(event,'Tools')" > Tools  </button>
 +
                      <button class="button derecha tablink"                    onclick="openCity(event,'Others')"> Others </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 style="margin-bottom: 20px;  margin-top:10px" > {{#lst:Mis páginas|base}}</div>
 +
                    <div style="margin-bottom: 42px;  margin-top: 2px" > {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 +
                    <div style="margin-bottom: 50px;  margin-top: 2px" > {{#lst:Mis páginas|social_sciences0}}</div>
 +
                    <div style="margin-bottom: 30px;  margin-top: 2px" > {{#lst:Mis páginas|musica0}}</div>
 +
                    <div style="margin-bottom: 150px; margin-top:-5px" > {{#lst:Mis páginas|Carrera0}}</div>
 +
                    </div>
 +
                  </div>
 +
                 
 +
                  <div id="Tools"  class="area city" style="display:none">
 +
                      <div>Tools</div>
 +
                      <p> Tools is the capital of France.</p>
 +
                  </div>
 +
                 
 +
                  <div id="Others"  class="area city" style="display:none">
 +
                      <div>Others</div>
 +
                      <p> Others is the capital of Japan.</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 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 moveSidebarToBody() {
 +
      //    document.body.appendChild(document.getElementById('MySidebar'))
 +
      // }
 +
 +
      function collapseAll() {
 +
          $(".mw-collapsible").addClass("mw-collapsed");
 +
      }
 +
 +
      $(document).ready( function() {
 +
          $('#totalItems, #enteredItems').keyup(function(){
 +
              checkUser()
 +
              collapseAll()
 +
              // moveSidebarToBody()
 +
          }); 
 +
          checkUser()
 +
          collapseAll()
 +
          // 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 --> }
+
.toggleNode { <!-- visibility: hidden --> }
 
}}
 
}}
 
<!-- some colors I have tried and liked: #dcd8ed  #3182f5  #D8BFD8  #E6E6FA  rgb(79.998779%,79.998779%,100%)-->
 
<!-- some colors I have tried and liked: #dcd8ed  #3182f5  #D8BFD8  #E6E6FA  rgb(79.998779%,79.998779%,100%)-->

Revision as of 22:49, 8 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"> <!-- oculto -->
<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>