Se implementa tema WordPress personalizado para Análisis de Precios Unitarios con funcionalidades avanzadas: - Sistema de templates (front-page, single, archive, page, 404, search) - Integración de Bootstrap 5.3.8 con estructura modular de assets - Panel de opciones del tema con Customizer API - Optimizaciones de rendimiento (Critical CSS, Image Optimization, Performance) - Funcionalidades SEO y compatibilidad con Rank Math - Sistema de posts relacionados y tabla de contenidos - Badge de categorías y manejo de AdSense diferido - Tipografías Google Fonts configurables - Documentación completa del tema y guías de uso 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
528 lines
7.1 KiB
CSS
528 lines
7.1 KiB
CSS
/**
|
|
* Utility Classes
|
|
*
|
|
* Common utility classes for spacing, sizing, and layout
|
|
* @package Apus_Theme
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* Display utilities */
|
|
.d-none {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.d-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.d-block {
|
|
display: block !important;
|
|
}
|
|
|
|
.d-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.d-grid {
|
|
display: grid !important;
|
|
}
|
|
|
|
.d-table {
|
|
display: table !important;
|
|
}
|
|
|
|
.d-table-row {
|
|
display: table-row !important;
|
|
}
|
|
|
|
.d-table-cell {
|
|
display: table-cell !important;
|
|
}
|
|
|
|
.d-contents {
|
|
display: contents !important;
|
|
}
|
|
|
|
/* Visibility utilities */
|
|
.visibility-hidden {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
.visibility-visible {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
/* Overflow utilities */
|
|
.overflow-auto {
|
|
overflow: auto !important;
|
|
}
|
|
|
|
.overflow-hidden {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.overflow-visible {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.overflow-scroll {
|
|
overflow: scroll !important;
|
|
}
|
|
|
|
.overflow-x-auto {
|
|
overflow-x: auto !important;
|
|
}
|
|
|
|
.overflow-y-auto {
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
/* Position utilities */
|
|
.position-static {
|
|
position: static !important;
|
|
}
|
|
|
|
.position-relative {
|
|
position: relative !important;
|
|
}
|
|
|
|
.position-absolute {
|
|
position: absolute !important;
|
|
}
|
|
|
|
.position-fixed {
|
|
position: fixed !important;
|
|
}
|
|
|
|
.position-sticky {
|
|
position: sticky !important;
|
|
}
|
|
|
|
/* Floating utilities */
|
|
.float-start {
|
|
float: left !important;
|
|
}
|
|
|
|
.float-end {
|
|
float: right !important;
|
|
}
|
|
|
|
.float-none {
|
|
float: none !important;
|
|
}
|
|
|
|
/* Flex utilities */
|
|
.flex-row {
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.flex-wrap {
|
|
flex-wrap: wrap !important;
|
|
}
|
|
|
|
.flex-nowrap {
|
|
flex-wrap: nowrap !important;
|
|
}
|
|
|
|
.flex-grow-1 {
|
|
flex-grow: 1 !important;
|
|
}
|
|
|
|
.flex-shrink-1 {
|
|
flex-shrink: 1 !important;
|
|
}
|
|
|
|
.justify-content-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.justify-content-end {
|
|
justify-content: flex-end !important;
|
|
}
|
|
|
|
.justify-content-center {
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.justify-content-between {
|
|
justify-content: space-between !important;
|
|
}
|
|
|
|
.justify-content-around {
|
|
justify-content: space-around !important;
|
|
}
|
|
|
|
.align-items-start {
|
|
align-items: flex-start !important;
|
|
}
|
|
|
|
.align-items-end {
|
|
align-items: flex-end !important;
|
|
}
|
|
|
|
.align-items-center {
|
|
align-items: center !important;
|
|
}
|
|
|
|
.align-items-baseline {
|
|
align-items: baseline !important;
|
|
}
|
|
|
|
.align-items-stretch {
|
|
align-items: stretch !important;
|
|
}
|
|
|
|
.align-content-start {
|
|
align-content: flex-start !important;
|
|
}
|
|
|
|
.align-content-end {
|
|
align-content: flex-end !important;
|
|
}
|
|
|
|
.align-content-center {
|
|
align-content: center !important;
|
|
}
|
|
|
|
.align-content-between {
|
|
align-content: space-between !important;
|
|
}
|
|
|
|
/* Gap utilities */
|
|
.gap-0 {
|
|
gap: 0 !important;
|
|
}
|
|
|
|
.gap-1 {
|
|
gap: 0.25rem !important;
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: 0.5rem !important;
|
|
}
|
|
|
|
.gap-3 {
|
|
gap: 1rem !important;
|
|
}
|
|
|
|
.gap-4 {
|
|
gap: 1.5rem !important;
|
|
}
|
|
|
|
.gap-5 {
|
|
gap: 3rem !important;
|
|
}
|
|
|
|
/* Text alignment */
|
|
.text-start {
|
|
text-align: left !important;
|
|
}
|
|
|
|
.text-end {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.text-justify {
|
|
text-align: justify !important;
|
|
}
|
|
|
|
/* Text transform */
|
|
.text-lowercase {
|
|
text-transform: lowercase !important;
|
|
}
|
|
|
|
.text-uppercase {
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
.text-capitalize {
|
|
text-transform: capitalize !important;
|
|
}
|
|
|
|
/* Text wrapping */
|
|
.text-wrap {
|
|
word-wrap: break-word !important;
|
|
}
|
|
|
|
.text-nowrap {
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.text-truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Font weight */
|
|
.fw-light {
|
|
font-weight: 300 !important;
|
|
}
|
|
|
|
.fw-normal {
|
|
font-weight: 400 !important;
|
|
}
|
|
|
|
.fw-bold {
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.fw-bolder {
|
|
font-weight: 900 !important;
|
|
}
|
|
|
|
/* Font style */
|
|
.fst-italic {
|
|
font-style: italic !important;
|
|
}
|
|
|
|
.fst-normal {
|
|
font-style: normal !important;
|
|
}
|
|
|
|
/* Line height */
|
|
.lh-1 {
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.lh-sm {
|
|
line-height: 1.25 !important;
|
|
}
|
|
|
|
.lh-base {
|
|
line-height: 1.5 !important;
|
|
}
|
|
|
|
.lh-lg {
|
|
line-height: 2 !important;
|
|
}
|
|
|
|
/* Border utilities */
|
|
.border {
|
|
border: 1px solid #dee2e6 !important;
|
|
}
|
|
|
|
.border-0 {
|
|
border: 0 !important;
|
|
}
|
|
|
|
.border-top {
|
|
border-top: 1px solid #dee2e6 !important;
|
|
}
|
|
|
|
.border-end {
|
|
border-right: 1px solid #dee2e6 !important;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom: 1px solid #dee2e6 !important;
|
|
}
|
|
|
|
.border-start {
|
|
border-left: 1px solid #dee2e6 !important;
|
|
}
|
|
|
|
.border-rounded {
|
|
border-radius: 0.25rem !important;
|
|
}
|
|
|
|
.border-rounded-1 {
|
|
border-radius: 0.25rem !important;
|
|
}
|
|
|
|
.border-rounded-2 {
|
|
border-radius: 0.5rem !important;
|
|
}
|
|
|
|
.border-rounded-3 {
|
|
border-radius: 1rem !important;
|
|
}
|
|
|
|
.border-rounded-circle {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
/* Width and Height */
|
|
.w-auto {
|
|
width: auto !important;
|
|
}
|
|
|
|
.w-25 {
|
|
width: 25% !important;
|
|
}
|
|
|
|
.w-50 {
|
|
width: 50% !important;
|
|
}
|
|
|
|
.w-75 {
|
|
width: 75% !important;
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.h-auto {
|
|
height: auto !important;
|
|
}
|
|
|
|
.h-25 {
|
|
height: 25% !important;
|
|
}
|
|
|
|
.h-50 {
|
|
height: 50% !important;
|
|
}
|
|
|
|
.h-75 {
|
|
height: 75% !important;
|
|
}
|
|
|
|
.h-100 {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.min-vh-100 {
|
|
min-height: 100vh !important;
|
|
}
|
|
|
|
/* Opacity */
|
|
.opacity-0 {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.opacity-25 {
|
|
opacity: 0.25 !important;
|
|
}
|
|
|
|
.opacity-50 {
|
|
opacity: 0.5 !important;
|
|
}
|
|
|
|
.opacity-75 {
|
|
opacity: 0.75 !important;
|
|
}
|
|
|
|
.opacity-100 {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Shadow */
|
|
.shadow-none {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
|
|
}
|
|
|
|
.shadow-sm {
|
|
box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.075) !important;
|
|
}
|
|
|
|
.shadow-lg {
|
|
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
|
|
}
|
|
|
|
/* Clearfix */
|
|
.clearfix::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/* Cursor utilities */
|
|
.cursor-pointer {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.cursor-default {
|
|
cursor: default !important;
|
|
}
|
|
|
|
.cursor-not-allowed {
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
.cursor-auto {
|
|
cursor: auto !important;
|
|
}
|
|
|
|
/* User select */
|
|
.user-select-auto {
|
|
user-select: auto !important;
|
|
}
|
|
|
|
.user-select-none {
|
|
user-select: none !important;
|
|
}
|
|
|
|
.user-select-all {
|
|
user-select: all !important;
|
|
}
|
|
|
|
/* Pointer events */
|
|
.pointer-events-none {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.pointer-events-auto {
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Object fit */
|
|
.object-fit-contain {
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
.object-fit-cover {
|
|
object-fit: cover !important;
|
|
}
|
|
|
|
.object-fit-fill {
|
|
object-fit: fill !important;
|
|
}
|
|
|
|
.object-fit-scale {
|
|
object-fit: scale-down !important;
|
|
}
|
|
|
|
/* Z-index */
|
|
.z-1 {
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
.z-2 {
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
.z-3 {
|
|
z-index: 3 !important;
|
|
}
|
|
|
|
.z-auto {
|
|
z-index: auto !important;
|
|
}
|
|
|
|
/* Transition */
|
|
.transition-all {
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
.transition-none {
|
|
transition: none !important;
|
|
}
|