Diferencia entre revisiones de «Plantilla:Wowxii/styles.css Ver historial

 
Sin resumen de edición
 
(No se muestran 13 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
/*
        /*
Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
*/
*/
@media
@media
  only screen  
  only screen  
     and (max-width: 760px), (min-device-width: 768px)  
     and (max-width: 1000px), (min-device-width: 1008px)  
     and (max-device-width: 1024px)  {
     and (max-device-width: 1024px)  {


Línea 11: Línea 11:
display: block;
display: block;
}
}
      table.wikitable  {
          width:100%;
      }


/* Hide table headers (but not display: none;, for accessibility) */
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
table.wikitable tr.thead {
position: absolute;
position: absolute;
top: -9999px;
top: -9999px;
Línea 19: Línea 22:
}
}


     tr {
     table.wikitable tr {
       margin: 0 0 1rem 0;
       margin: 0 0 1rem 0;
     }
     }
        
        
     tr:nth-child(odd) {
     table.wikitable tr:nth-child(odd) {
       background: #ccc;
       background: #ccc;
     }
     }
      
      
td {
table.wikitable td {
/* Behave  like a "row" */
/* Behave  like a "row" */
border: none;
border: none;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #eee;
position: relative;
position: relative;
padding-left: 50%;
padding-left: 25%;
}
}


td:before {
table.wikitable td:before {
/* Now like a table header */
/* Now like a table header */
position: absolute;
position: absolute;
Línea 41: Línea 44:
top: 0;
top: 0;
left: 6px;
left: 6px;
width: 45%;
width: 20%;
padding-right: 10px;
padding-right: 10px;
white-space: nowrap;
white-space: nowrap;
Línea 50: Línea 53:
     You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
     You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
*/
td:nth-of-type(1):before { content: "First Name"; }
table.wikitable td:nth-of-type(1):before { content: ""; }
td:nth-of-type(2):before { content: "Last Name"; }
table.wikitable td:nth-of-type(2):before { content: "EDITOR"; }
td:nth-of-type(3):before { content: "Job Title"; }
table.wikitable td:nth-of-type(3):before { content: "FIXED"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
table.wikitable td:nth-of-type(4):before { content: "SEEMSOK"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
table.wikitable td:nth-of-type(5):before { content: "NOTENOUGHT"; }
td:nth-of-type(6):before { content: "Secret Alias"; }
table.wikitable td:nth-of-type(6):before { content: "SPLIT R"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
table.wikitable td:nth-of-type(7):before { content: "POINTS"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
}

Revisión actual - 17:33 5 may 2021

        /*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 1000px), (min-device-width: 1008px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}
       table.wikitable  {
           width:100%;
       }

		/* Hide table headers (but not display: none;, for accessibility) */
		table.wikitable tr.thead {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    table.wikitable tr {
      margin: 0 0 1rem 0;
    }
      
    table.wikitable tr:nth-child(odd) {
      background: #ccc;
    }
    
		table.wikitable td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 25%;
		}

		table.wikitable td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 20%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		table.wikitable td:nth-of-type(1):before { content: "Nº"; }
		table.wikitable td:nth-of-type(2):before { content: "EDITOR"; }
		table.wikitable td:nth-of-type(3):before { content: "FIXED"; }
		table.wikitable td:nth-of-type(4):before { content: "SEEMSOK"; }
		table.wikitable td:nth-of-type(5):before { content: "NOTENOUGHT"; }
		table.wikitable td:nth-of-type(6):before { content: "SPLIT R"; }
		table.wikitable td:nth-of-type(7):before { content: "POINTS"; }
	}