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

Sin resumen de edición
Sin resumen de edición
 
(No se muestran 11 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;
Línea 35: Línea 38:
}
}


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: "Nº"; }
table.wikitable td:nth-of-type(1):before { content: "Nº"; }
td:nth-of-type(2):before { content: "EDITOR"; }
table.wikitable td:nth-of-type(2):before { content: "EDITOR"; }
td:nth-of-type(3):before { content: "FIXED"; }
table.wikitable td:nth-of-type(3):before { content: "FIXED"; }
td:nth-of-type(4):before { content: "SEEMSOK"; }
table.wikitable td:nth-of-type(4):before { content: "SEEMSOK"; }
td:nth-of-type(5):before { content: "NOTENOUGHT"; }
table.wikitable td:nth-of-type(5):before { content: "NOTENOUGHT"; }
td:nth-of-type(6):before { content: "SPLIT R"; }
table.wikitable td:nth-of-type(6):before { content: "SPLIT R"; }
td:nth-of-type(7):before { content: "POINTS"; }
table.wikitable td:nth-of-type(7):before { content: "POINTS"; }
}
}

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"; }
	}