codage.css.css

À propos du fichier

Type de fichier: Fichier CSS de 31 Ko (text/plain)
Confidentialité: Fichier public, envoyé le 29 novembre 2023 à 12:36, depuis l'adresse IP 109.222.x.x (France)
Sécurité: Ne contient aucun Virus ou Malware connus - Dernière vérification: 29 minutes
Statistiques: La présente page de téléchargement a été vue 209 fois depuis l'envoi du fichier
Page de téléchargement: https://www.petit-fichier.fr/2023/11/29/codagecss-1/ Copier
Aperçu du fichier

.tablilla, .tablilla *, .tablilla *:before, .tablilla *:after, .baul, .baul *, .baul *:before, .baul *:after, .busqueda, .busqueda *, .busqueda *:before, .busqueda *:after, .ficha, .ficha *, .ficha *:before, .ficha *:after, .rol, .rol *, .rol *:before, .rol *:after, .phone, .phone *, .phone *:before, .phone *:after, .tienda, .tienda *, .tienda *:before, .tienda *:after {
/*Acentos*/
--accent1:#873e3e;
--accent2:#733131;
/*Fondos transparentes*/
--scroll:rgba(255,255,255,0.1);
--logo:rgba(100,100,100,0.05);
--logo-border:rgba(255,255,255,0.15);
--tbckg0:rgba(0,0,0,0.4);
/*Fondos opacos*/
--fondo:#3a3a3a;
--scroll-bckg:#060606;
--scroll-thumb:#333;
--scroll-track:#1c1c1c;
--dbckg0:#0a0a0a;
--dbckg1:#0c0c0c;
--dbckg2:#0e0e0e;
--dbckg3:#101010;
/*Bordes*/
--border0:1px solid var(--border0-c);
--border1:1px solid var(--border1-c);
--border2:1px solid var(--border2-c);
--border0-c:rgba(255,255,255,0.1);
--border1-c:#131313;
--border2-c:#1c1c1c;
/*Tamaño de fuentes*/
--fs-body:14px;
--fs-h0:clamp(100px, 40vw, 180px);
--fs-h1:50px;
--fs-h2:40px;
--fs-h3:30px;
--fs-h4:20px;
--fs-h5:16px;
--fs-small:13px;
--fs-smaller:11px;
--fs-tiny:10px;
--fs-mini:9px;
/*Familias de fuentes*/
--f-body:'Work Sans', sans-serif;
--f-titles: 'Abril Fatface', serif;
--f-mono: 'Space Mono', monospace;
/*Colores de fuente*/
--text:#777;
--subtitle:#bbb;
--title:#fff;
--subtitle-img:#ccc;
--title-img:#fff;
/*Filtros y efectos*/
--shadow-d: 1px 1px rgba(0,0,0,0.1),-1px 1px rgba(0,0,0,0.1),1px -1px rgba(0,0,0,0.1),-1px -1px rgba(0,0,0,0.1), 1px 0px rgba(0,0,0,0.1),-1px 0px rgba(0,0,0,0.1),0px 1px rgba(0,0,0,0.1),0px -1px rgba(0,0,0,0.1);
--shadow-l:1px 1px rgba(255,255,255,0.3), -1px 1px rgba(255,255,255,0.3), 1px -1px rgba(255,255,255,0.3), -1px -1px rgba(255,255,255,0.3), 1px 0px rgba(255,255,255,0.3), -1px 0px rgba(255,255,255,0.3), 0px -1px rgba(255,255,255,0.3), 0px 1px rgba(255,255,255,0.3);
--shadow-b:1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black, 1px 0px black, -1px 0px black, 0px -1px black, 0px 1px black;
--frow:#2a2a2a;
--gm-color1:#3a3a3a;
--gm-color2:#000;
--gm-effect1:multiply;
--gm-effect2:color;
--gm-filter:contrast(0.7);
--ft-blur:blur(5px);
--ft-blur-min:blur(3px);
--fondo-blend:multiply;
/*Grupos, debes poner acentos con variante de opacidad en los que quieras que salgan con decoración en la tablilla de grupos*/
--staff:#807140;
--angeles:#b0a796;
--angeles-50:#b0a79680;
--angeles-25:#b0a79640;
--angeles-15:#b0a79626;
--demonios:#63496e;
--demonios-50:#63496e80;
--demonios-25:#63496e40;
--demonios-15:#63496e26;
--vampiros:#692d39;
--vampiros-50:#692d3980;
--vampiros-25:#692d3940;
--vampiros-15:#692d3926;
--licantropos:#825f39;
--licantropos-50:#825f3980;
--licantropos-25:#825f3940;
--licantropos-15:#825f3926;
--cambiantes:#486b66;
--cambiantes-50:#486b6680;
--cambiantes-25:#486b6640;
--cambiantes-15:#486b6626;
--brujasyhechiceros:#575b82;
--brujasyhechiceros-50:#575b8280;
--brujasyhechiceros-25:#575b8240;
--brujasyhechiceros-15:#575b8226;
--cazadores:#456146;
--cazadores-50:#45614680;
--cazadores-25:#45614640;
--cazadores-15:#45614626;
--nephalem:#8f728a;
--nephalem-50:#8f728a80;
--nephalem-25:#8f728a25;
--nephalem-15:#8f728a26;
--humanos:#7a5843;
--humanos-50:#7a584380;
--humanos-25:#7a584340;
--humanos-15:#7a584326;
--usuarios:#555555;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-col {
  flex-direction: column;
}

.gradientact { position:relative;isolation:isolate; }
.gradientact:before, .gradientact:after {
content: '';
position:absolute;
inset:0;
}
.gradientact:before {
background: var(--gm-color1);
z-index:-1;
mix-blend-mode:var(--gm-effect1);
}
.gradientact:after {
background: var(--gm-color2);
z-index:-1;
mix-blend-mode:var(--gm-effect2);
}
.gradientact img {
position:relative;
z-index:-3;
filter:var(--gm-filter);
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}


.ficha br {
  display: none;
}

.ficha {
  width: 500px;
  border: var(--border1);
  margin: 0 auto;
}

.fchead {
  width: 500px;
  height:250px;
  text-transform: uppercase;
  text-align: center;
  border-bottom: var(--border1);
}

.fchead img {
  position: absolute;
}

.fchead b {
  font: var(--fs-h2) var(--f-titles);
  position: absolute;
  opacity: .5;
  line-height: var(--fs-h2);
}

.fchead i {
  position: relative;
  font-size: var(--fs-smaller);
  font-weight: 700;
  font-style: normal;
  margin-top: 2px;
}

.fcdata {
  border-bottom: var(--border1);
  background: var(--border1-c);
  gap: 1px;
}

.fcdata span {
  width: 100%;
  text-align: center;
  font: var(--fs-tiny) var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px;
  background: var(--dbckg2);
  color: var(--group);
}

.fchistoria br, .fcotros br {
  display: inline;
}

.fchistoria {
  background: var(--dbckg1);
  height: 350px;
  overflow: auto;
  border: 20px solid transparent;
  counter-reset: number;
  border-right-width: 10px;
  padding-right: 10px;
  font-size: calc(var(--fs-body) - 1px);
  line-height: calc(var(--fs-body) + 3px);
}

.fchistoria h i {
  color: var(--group)!important;
  font-size: calc(var(--fs-h1) + 10px);
  line-height: calc(var(--fs-h1) + 10px);
  margin: 0 auto;
  display: block;
}

.fchistoria h {
  text-align: center;
  margin: 0 auto;
}

.fchistoria h p {
  text-align: justify;
  text-align-last: center;
  font: calc(var(--fs-mini) - 1px) var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  width: 30%;
  margin: 0 auto;
  line-height: var(--fs-tiny);
}

.fchistoria h.fcdeco-number i {
  counter-increment: number;
}

.fchistoria h.fcdeco-number i:before {
  content: '0'counter(number, decimal-leading-zero)'.';
  font: var(--fs-h1) var(--f-titles);
  color: var(--group-50);
  line-height: var(--fs-h1);
}

.fcenv {
  height: 200px;
  border-top: var(--border1);
}

.fcstats, .fcstats span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fcstats {
  background: var(--dbckg3);
  flex-wrap: wrap;
  width: 200px;
  flex-shrink: 0;
  border-right: var(--border1);
  height: 200px;
}

.fcstats span {
  flex-direction: column;
  width: 50%;
}

.fcstats span i {
  font: var(--fs-mini) var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--group)!important;
}

.fcstats span b {
  color: var(--subtitle)!important;
  font: calc(var(--fs-h4) + 3px) var(--f-titles);
  line-height: calc(var(--fs-h4) + 3px);
}

.fcotros {
  width: 299px;
  height: 200px;
  overflow: auto;
  box-sizing: border-box;
  border: 15px solid transparent;
  border-right-width: 8px;
  padding-right: 7px;
  font-size: calc(var(--fs-body) - 1px);
  line-height: calc(var(--fs-body) + 3px);
  background: var(--dbckg2);
}

.fcotros u {
  display: inline-block;
  vertical-align: middle;
  font: var(--fs-mini) var(--f-mono);
  line-height: var(--fs-mini);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--group-50);
  padding: 3px;
  text-decoration: none;
  color: var(--subtitle);
}

.tablilla {
  margin: 0 auto;
  border: var(--border1);
  padding: 30px;
  outline: var(--border1);
  outline-offset: -15px;
  width: 502px;
  box-sizing: border-box;
  background: var(--dbckg1);
  overflow: hidden;
}

.tablilla br {
  display: none;
}

.tabhead>b {
  position: absolute;
  z-index: -1;
  font: calc(var(--fs-h3) + 15px) var(--f-titles);
  text-transform: uppercase;
  word-break: keep-all;
  white-space: pre;
  color: var(--title)!important;
  opacity: .05;
  letter-spacing: -3px;
  top: -9px;
}

.tabhead {
  position: relative;
  isolation: isolate;
  height: calc(var(--fs-h3) + 15px);
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
}

.tabhead span b {
  display: block;
  font-size: var(--fs-small);
  line-height: var(--fs-small);
  text-transform: uppercase;
}

.tabhead span i {
  display: block;
  font: var(--fs-mini) var(--f-mono);
  line-height: var(--fs-mini);
  text-transform: uppercase;
  color: var(--text)!important;
}

.tabhead span {
  margin-left: 10px;
}

.tabtext {
  font-size: calc(var(--fs-body) - 1px);
  line-height: calc(var(--fs-body) + 3px);
}

.tabtext br {
  display: inline;
}

.tabtext h, .tabregistro>h {
  font: var(--fs-h4) var(--f-titles);
  text-transform: uppercase;
  color: var(--subtitle);
  border-bottom: 1px solid var(--group);
  line-height: var(--fs-h4);
  display: block;
  width: fit-content;
  padding-right: 10px;
  margin-bottom: 5px;
}

.tabtext h+br {
  display: none;
}

.tabtext ul>br, .tabtext ol>br {
  display: none;
}

.tabtabla>br {
  display: none;
}

.tabtabla>span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabtabla {
  border: var(--border1);
}

.tabtabla>span:not(:last-of-type) {
  border-bottom: var(--border1);
}

.tabtabla>span>b:not(:last-of-type) {
  border-right: var(--border1);
}

.tabtabla>span>b {
  width: 100%;
  box-sizing: border-box;
  font-weight: normal;
  color: var(--text)!important;
  padding: 5px;
  background: var(--dbckg2);
}

.tabtabla>span.tabthead>b {
  text-align: center;
  font: var(--fs-smaller) var(--f-mono);
  font-weight: 700;
  padding: 10px;
  text-transform: uppercase;
  color: var(--group)!important;
  background: var(--dbckg3);
}

.postbody .content ol+br+.tabtabla, .postbody .content ol+br+br+.tabtabla {
  margin-top: 30px;
}

.tablilla>dl.codebox {
  margin-top: 20px;
}

.tabregistro>h {
  margin-top: 20px;
}

.tabregistro .tabtext {
  max-height: 150px;
  overflow: auto;
  margin-right: -5px;
  padding-right: 5px;
}

.tabregistro .tabtext strong {
  text-transform: uppercase;
}

.tabregistro .tabtext ul, .tabregistro .tabtext ol {
  margin-left: 15px;
  margin-bottom: 0;
}

.tabregistro .tabtext ul *::marker, .tabregistro .tabtext ol *::marker {
  color: var(--text);
}

.tablilla.tabgrupos {
  padding: 14px;
  width: 590px;
}

.tabgrupos .tabhead {
  height: 100px;
  justify-content: center;
  margin: 0;
}

.tabgrupos .tabhead>b {
  top: unset;
}

.tabgrupos .tabhead:before {
  content: '';
  background: var(--group-15);
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .3;
}

.tgimagen {
  flex-shrink: 0;
  width: 200px;
  padding: 10px;
  border-right: var(--border1);
  background: var(--dbckg1);
  height: 400px;
}

.tgtexto {
  height: 410px;
  box-sizing: border-box;
  overflow: auto;
  border: 15px solid transparent;
  border-right-width: 8px;
  padding-right: 7px;
  font-size: calc(var(--fs-body) - 1px);
  line-height: calc(var(--fs-body) + 3px);
}

.tgtexto br {
  display: inline;
}

.tgimagen span.gradientact {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 10px;
}

.tgimagen img {
  position: absolute;
}

.tgimagen em {
  font-size: var(--fs-h1);
  color: var(--group)!important;
  line-height: var(--fs-h1);
}

.tgimagen span {
  font: var(--fs-mini) var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  width: 45%;
  text-align: justify;
  text-align-last: center;
  line-height: var(--fs-smaller);
}

.tabgrupos[grupo="angeles"] {
--group:var(--angeles);
--group-50:var(--angeles-50);
--group-25:var(--angeles-25);
--group-15:var(--angeles-15);
}

.tabgrupos[grupo="demonios"] {
--group:var(--demonios);
--group-50:var(--demonios-50);
--group-25:var(--demonios-25);
--group-15:var(--demonios-15);
}

.tabgrupos[grupo="vampiros"] {
--group:var(--vampiros);
--group-50:var(--vampiros-50);
--group-25:var(--vampiros-25);
--group-15:var(--vampiros-15);
}

.tabgrupos[grupo="licantropos"] {
--group:var(--licantropos);
--group-50:var(--licantropos-50);
--group-25:var(--licantropos-25);
--group-15:var(--licantropos-15);
}

.tabgrupos[grupo="cambiantes"] {
--group:var(--cambiantes);
--group-50:var(--cambiantes-50);
--group-25:var(--cambiantes-25);
--group-15:var(--cambiantes-15);
}

.tabgrupos[grupo="brujasyhechiceros"] {
--group:var(--brujasyhechiceros);
--group-50:var(--brujasyhechiceros-50);
--group-25:var(--brujasyhechiceros-25);
--group-15:var(--brujasyhechiceros-15);
}

.tabgrupos[grupo="cazadores"] {
--group:var(--cazadores);
--group-50:var(--cazadores-50);
--group-25:var(--cazadores-25);
--group-15:var(--cazadores-15);
}

.tabgrupos[grupo="nephalem"] {
--group:var(--nephalem);
--group-50:var(--nephalem-50);
--group-25:var(--nephalem-25);
--group-15:var(--nephalem-15);
}

.tabgrupos[grupo="humanos"] {
--group:var(--humanos);
--group-50:var(--humanos-50);
--group-25:var(--humanos-25);
--group-15:var(--humanos-15);
}

.tienda br {
  display: none;
}

.tienda {
  border: var(--border1);
  padding: 15px;
  outline: var(--border1);
  outline-offset: -16px;
  overflow: hidden;
  background: var(--tbckg0);
}

.tdhead {
  border-bottom: var(--border1);
  position: relative;
  isolation: isolate;
  height: var(--fs-h1);
  padding: calc((var(--fs-h1) / 2.5) + 20px) 20px 20px;
  background: var(--dbckg1);
}

.tdhead>b {
  font: var(--fs-h1) var(--f-titles);
  position: absolute;
  z-index: -1;
  color: var(--scroll)!important;
  border-bottom: 2px solid var(--accent1);
  line-height: var(--fs-h1);
  opacity: .5;
  margin-top: calc(var(--fs-h1) / -1.25);
}

.tienda {--group:var(--accent1);--group-50: #873e3e80;--group-25: #873e3e40;--group-15: #873e3e26;}

.tienda u {text-decoration: none;}

.tienda u b {
  height: calc(var(--fs-h1) / 1.25);
}

.tdhead span {
  gap: 15px;
  font: var(--fs-tiny) var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 1px;
}

.tdhead i {
  font-style: normal;
  color: var(--text)!important;
  border-bottom: 1px solid transparent;
  transition: ease .5s;
  cursor: pointer;
}

.tdhead i.active, .tdhead i:hover {
  color: var(--subtitle)!important;
  border-bottom: 1px solid var(--group);
}

.tdtext {
  border: 20px solid transparent;
  border-right-width: 10px;
  padding-right: 10px;
  font-size: calc(var(--fs-body) - 1px);
  line-height: calc(var(--fs-body) + 3px);
  max-height: 150px;
  overflow: auto;
  outline: var(--border1);
  outline-offset: 0px;
  margin-top: 0px;
  background: var(--dbckg0);
}

.tdtext br {
  display: inline;
}

.tienda>dl.codebox {border-width: 0 0 1px 0;}

.tdbody {
  display: none;
}

.tdflex {
  flex-wrap: wrap;
  gap: 1px;
  background: var(--border1-c);
  margin-right: -1px;
}

.tditem {
  width: 33%;
  background: var(--dbckg0);
  height: 200px;
  flex-grow: 1;
  display: block;
  overflow: hidden;
  position: relative;
}

.tditop {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: ease 1s;
  cursor: pointer;
  z-index: 1;
  gap: 5px;
}

.tditem p {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  transition: ease 1s;
  box-sizing: border-box;
  border: 15px solid transparent;
  border-right-width: 8px;
  padding-right: 7px;
  text-align: justify;
  margin: 0;
  overflow: auto;
  font-size: calc(var(--fs-body) - 1px);
  line-height: calc(var(--fs-body) + 3px);
}

.tditem.active .tditop {
  top: -100%;
}

.tditem.active p {
  top: 0;
}

.tdflex p br {
  display: inline;
}

.tditop i {
  font-size: var(--fs-h1);
  line-height: var(--fs-h1);
}

.tditop b {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
}

.tditop span {
  background: var(--group-50);
  border-radius: 10px;
  padding: 5px 10px;
  font: var(--fs-mini) var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--title);
  text-shadow: var(--shadow-d);
}

.tditem[agotado] .tditop span {
  background: var(--scroll);
  text-decoration: line-through;
  color: var(--text);
}

.tditem[agotado] .tditop b {
  color: var(--scroll);
  text-decoration: line-through;
}

.tditem[agotado] .tditop i {
  color: var(--scroll);
}

.baul {
  height: 420px;
  border: var(--border1);
  background: var(--dbckg1);
}

.blimg {
  background: var(--dbckg2);
  padding: 10px;
  border-right: var(--border1);
  width: 250px;
  flex-shrink: 0;
  height: 400px;
}

.baul br {
  display: none;
}

.blimg span {
  width: 100%;
  height: 100%;
  outline: var(--border2);
  outline-offset: -1px;
  display: block;
}

.blhide {
  height: 420px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.blbotones {
  width: 70px;
  border-left: var(--border1);
  background: var(--dbckg3);
  align-self: stretch;
  justify-content: space-around;
  font-size: var(--fs-h5);
}

.blbotones em {
  color: var(--text)!important;
}

.blbotones .active em {
  color: var(--group)!important;
}

.blbotones span {
  cursor: pointer;
}

.blhide>div {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: ease 1s;
  overflow: hidden;
  background: var(--dbckg1);
}

.blmain {
  top: -100%;
  display: grid;
  grid-template-columns: calc(60% - 1px) 40%;
  grid-template-rows: 90px 45% 70px calc(55% - 163px);
  grid-template-areas:
    'head head'
    'datos song'
    'stats stats'
    'quote quote';
  gap: 1px;
  background: var(--border1-c)!important;
}

.blrelas {
  left: 100%;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  overflow: auto!important;
  box-sizing: border-box;
  border: 20px solid transparent;
  border-right-width: 10px;
  padding-right: 10px;
  align-content: flex-start;
}

.blinventario {
  top: 100%;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  overflow: auto!important;
  box-sizing: border-box;
  border: 20px solid transparent;
  border-right-width: 10px;
  padding-right: 10px;
  align-content: flex-start;
}

.blcrono {
  left: -100%;
  overflow: auto!important;
  box-sizing: border-box;
  border: 20px solid transparent;
  border-right-width: 10px;
  padding-right: 10px;
}

.blmain.active, .blinventario.active {
  top: 0;
}

.blcrono.active, .blrelas.active {
  left: 0;
}

.blhead {
  grid-area: head;
  position: relative;
  isolation: isolate;
}

.bldatos {
  grid-area: datos;
  overflow: auto;
  border: 15px solid transparent;
  border-right-width: 8px;
  padding-right: 7px;
  background: var(--dbckg2);
  font-size: var(--fs-small);
  line-height: calc(var(--fs-small) + 4px);
}

.blsong {
  grid-area: song;
  background: var(--dbckg1);
}

.blstats {
  grid-area: stats;
  background: var(--dbckg0);
}

.blquote {
  grid-area: quote;
  background: var(--dbckg2);
  border: 10px solid transparent;
  border-right-width: 5px;
  padding-right: 5px;
  font-size: var(--fs-small);
  line-height: calc(var(--fs-small) + 3px);
  overflow: auto;
  font-style: italic;
}

.blhead i {
  position: absolute;
  z-index: -1;
  font: calc(var(--fs-h2) + 10px) var(--f-titles);
  text-transform: uppercase;
  color: var(--group-25)!important;
  letter-spacing: -2px;
}

.blhead b {
  text-transform: uppercase;
  color: var(--subtitle)!important;
  font: var(--fs-smaller) var(--f-mono);
  font-weight: 700;
}

.bldatos u {
  background: var(--group-50);
  font: var(--fs-mini) var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--subtitle);
  line-height: var(--fs-mini);
  padding: 3px;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
}

.bldatos br {
  display: inline;
}

.blsong span, .blsong span img {
  width: 90px;
  height: 90px;
}

.blsong span {
  border: var(--border2);
  outline: var(--border2);
  outline-offset: -10px;
  overflow: hidden;
  margin-bottom: 10px;
}
Partager le fichier codage.css.css sur le Web et les réseaux sociaux:

Télécharger le fichier codage.css.css

Télécharger codage.css.css

Télécharger le fichier (31 Ko)