De Whack a Hack Wiki!

(Página creada con «Los estilos CSS colocados aquí se aplicarán a todas las apariencias: .column { float: left; margin-top: .75em; width: 50%; } .column:not(:last-child) { padd…»)
 
Línea 67: Línea 67:
 
   float: right;
 
   float: right;
 
   margin-left: 14px;
 
   margin-left: 14px;
   width: 290px;
+
   width: 320px;
 +
}
 +
 
 +
.box--info img {
 +
  height: auto;
 +
  max-width: 100%;
 +
}
 +
 
 +
.box--info tr td {
 +
  vertical-align: baseline;
 +
}
 +
 
 +
.box--info tr td:first-child {
 +
  color: var(--text-color-light);
 +
}
 +
 
 +
.box--info tr td:not(:first-child) {
 +
  padding-left: 14px !important;
 
}
 
}
  
Línea 85: Línea 102:
 
     width: 100%;
 
     width: 100%;
 
   }
 
   }
 +
}
 +
 +
.button-wrapper > a {
 +
  background: var(--color) !important;
 +
  border-radius: 20px;
 +
  color: #FFF !important;
 +
  display: block;
 +
  font-weight: 600;
 +
  height: 40px;
 +
  line-height: 40px;
 +
  padding: 0 20px;
 +
  padding-right: 20px !important;
 +
  text-align: center;
 +
  width: 100%;
 
}
 
}
  
Línea 108: Línea 139:
 
.table--nostyle td {
 
.table--nostyle td {
 
   padding: 8px 0 !important;
 
   padding: 8px 0 !important;
 +
}
 +
 +
.inline-icon {
 +
  background-position: left center;
 +
  background-repeat: no-repeat;
 +
  background-size: 18px;
 +
  padding-left: 24px;
 +
}
 +
 +
.inline-icon--spanish {
 +
  background-image: url('https://image.flaticon.com/icons/svg/197/197593.svg');
 +
}
 +
 +
.inline-icon--english {
 +
  background-image: url('https://image.flaticon.com/icons/svg/197/197374.svg');
 +
}
 +
 +
.inline-icon--github {
 +
  background-image: url('https://image.flaticon.com/icons/svg/25/25231.svg');
 
}
 
}

Revisión del 20:07 16 abr 2019

/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
.column {
  float: left;
  margin-top: .75em;
  width: 50%;
}

.column:not(:last-child) {
  padding-right: 14px;
}

.column--wide {
  width: 70%;
}

.column--small {
  width: 30%;
}

@media screen and (max-width: 768px) {
  .column:not(:last-child) {
    padding: 0;
  }
  .column--wide,
  .column--small {
    width: 100%;
  }
}

.alert {
  border: 1px solid #EDEDED;
  border-radius: var(--border-radius);
  padding: 8px 14px;
}

.alert img {
  float: left;
  margin-right: 14px;
}

.alert p {
  margin: 0;
}

.alert--dev {
  background-color: #D8DFE3;
  border-color: #BAC2C6;
}

.alert--warn {
  background-color: #FFD7DB;
  border-color: #E4B7BB;
}

.alert--notice {
  background-color: #FFFACF;
  border-color: #E4DEAF;
}

.box {
  border-radius: var(--border-radius);
  border: 1px solid #EDEDED;
  margin-bottom: .75rem;
}

.box--info {
  float: right;
  margin-left: 14px;
  width: 320px;
}

.box--info img {
  height: auto;
  max-width: 100%;
}

.box--info tr td {
  vertical-align: baseline;
}

.box--info tr td:first-child {
  color: var(--text-color-light);
}

.box--info tr td:not(:first-child) {
  padding-left: 14px !important;
}

.box__header,
.box__content {
  padding: 12px 14px;
}

.box__header {
  background-color: #F3F3F3;
  color: var(--text-color-light);
}

@media screen and (max-width: 768px) {
  .box--info {
    margin-left: 0;
    width: 100%;
  }
}

.button-wrapper > a {
  background: var(--color) !important;
  border-radius: 20px;
  color: #FFF !important;
  display: block;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  padding-right: 20px !important;
  text-align: center;
  width: 100%;
}

.help,
.help li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.help li:not(:last-child) {
  margin-bottom: .35em !important;
}

.table--nostyle {
  margin: 0 !important;
}

.table--nostyle tr {
  border: none !important;
}

.table--nostyle td {
  padding: 8px 0 !important;
}

.inline-icon {
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 18px;
  padding-left: 24px;
}

.inline-icon--spanish {
  background-image: url('https://image.flaticon.com/icons/svg/197/197593.svg');
}

.inline-icon--english {
  background-image: url('https://image.flaticon.com/icons/svg/197/197374.svg');
}

.inline-icon--github {
  background-image: url('https://image.flaticon.com/icons/svg/25/25231.svg');
}