|
|
| Line 7: |
Line 7: |
| | | | |
| | }()); | | }()); |
| − |
| |
| − |
| |
| − | {{#tag:html|
| |
| − | <style>
| |
| − | /* MediaWiki page configurations */
| |
| − | #content { margin: -1px 0px 0px 180px; }
| |
| − | #left-navigation { margin-left:180px }
| |
| − | <!-- #p-namespaces { margin-left: 124px !important; } -->
| |
| − | #footer { margin: 0 0 0 308px }
| |
| − | #bodyContent { z-index: 10 }
| |
| − | .mw-wiki-logo { margin: 20px 0px 0px 0.5px }
| |
| − |
| |
| − | #menuToggle a, li {
| |
| − | font: 14px / 22.4px sans-serif;
| |
| − | }
| |
| − | #menuToggle li {
| |
| − | font: 14px / 22.4px sans-serif;
| |
| − | margin-top: 0px !important;
| |
| − | margin-bottom: 10px !important;
| |
| − | }
| |
| − | #menuToggle ul {
| |
| − | margin-top: 20px !important;
| |
| − | margin-bottom: 35px !important;
| |
| − | }
| |
| − | .desplaza {
| |
| − | margin-top: -12px !important;
| |
| − | padding-right: 30px !important;
| |
| − | }
| |
| − | div#toc.toc {
| |
| − | font-size: 12pt;
| |
| − | margin-top: -4.5pt;
| |
| − | background: rgba(255, 255, 255, 1);
| |
| − | margin-right: 12pt;
| |
| − | }
| |
| − | .tocUl {
| |
| − | overflow-y: scroll !important;
| |
| − | overflow-x: scroll !important;
| |
| − | max-height: calc(100vh - 150px);
| |
| − | width: 350px !important;
| |
| − | padding-bottom: 30px !important;
| |
| − | white-space: nowrap !important;
| |
| − | }
| |
| − | .tocUl a {
| |
| − | padding-right: 25px !important;
| |
| − | }
| |
| − | .tochidden {
| |
| − | height: 4pt !important;
| |
| − | }
| |
| − | .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;
| |
| − | padding-left: 10px;
| |
| − | margin-left: -205px;
| |
| − | -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 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: 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 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')
| |
| − | } else {
| |
| − | $('#content').css('margin-left', '180px')
| |
| − | $('#left-navigation').css({'cssText':'margin-left:180px'})
| |
| − | $('#menuToggle').css('margin-left', '-205px')
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function checkUser(){
| |
| − | if ( document.getElementById('pt-userpage') != null ) {
| |
| − | if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){
| |
| − | $('.oculto').css('display','block')
| |
| − | // $('body').css('background','red');
| |
| − | }else{
| |
| − | // $('body').css('background','blue');
| |
| − | }
| |
| − | }else{
| |
| − | // $('body').css('background','blue');
| |
| − | // $('#hideThis').show();
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | $(document).ready( function() {
| |
| − | $('#totalItems, #enteredItems').keyup(function(){
| |
| − | checkUser();
| |
| − | });
| |
| − | checkUser();
| |
| − | });
| |
| − | </script>
| |
| − | }}
| |
