Ejemplos de CSS

En este capítulo vamos a explicar de forma práctica cómo personalizar la interfaz de nuestras aplicaciones usando hojas de estilo dinámicas (CSS).

Ejemplo documentado de personalización de objetos visuales y controles

En el ejemplo siguiente podemos ver documentados y personalizados los objetos visuales y controles de una aplicación Velneo. Esta CSS es un buen recurso formativo sobre la personalización de objetos y controles de aplicaciones Velneo.

Este y el resto de los ejemplos de este capítulo son aplicables a los comandos de instrucción de proceso interfaz: establecer hoja de estilo CSS, interfaz: establecer hoja de estilo CSS filescript y a la creación de CSS para aplicar a objetos en edición.

/*  --------------------------------------------------------------------------------
    INDICE
        - QCalendarWidget       CALENDARIO
        - QCheckBox             BOTON CHECK
        - QComboBox             COMBOBOX
        - QDateEdit             CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN FECHA
        - QDateTime             CAJA DE VISUALIZACIÓN CAMPO FECHA Y HORA
        - QDateTimeEdit         CAJA DE EDICIÓN DE CAMPO FECHA Y HORA
        - QDialog               VENTANA EN CUADRO DE DIÁLOGO
        - QDockWidget           DOCK
        - QDoubleSpinBox        CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
        - QFrame                MARCO
        - QGroupBox             CAJA DE GRUPO
        - QHeaderView           CABECERA DE REJILLAS Y ÁRBOLES
        - QLabel                ETIQUETA DE TEXTO
        - QLineEdit             CAJA DE EDICIÓN DE TEXTO EN UNA LINEA
        - QMainWindow           VENTANA PRINCIPAL
        - QMenu                 MENU CONTEXTUAL
        - QMenuBar              BARRA DE MENU (Solo afecta a Windows)
        - QMessageBox           VENTANA DE MENSAJE
        - QNumberSpinBox        CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
        - QProgressBar          BARRA DE PROGRESO
        - QPushButton           BOTÓN
        - QRadioButton          BOTÓN DE RADIO
        - QScrollBar            BARRA DE SCROLL VERTICAL Y HORIZONTAL
        - QSlider               DESLIZADOR
        - QSpinBox              CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON UN BOTÓN
        - QSplitter             SPLITTER
        - QStatusBar            BARRA DE ESTADO
        - QTabWidget            SEPARADOR DE FORMULARIOS (PESTAÑAS)
        - QTableView            REJILLA
        - QTextEdit             CAJA DE EDICIÓN DE TEXTO MULTI-LINEA
        - QTimeEdit             CAJA DE EDICIÓN DE HORA
        - QTitanGrid            REJILLA AVANZADA
        - QToolBar              BARRA DE HERRAMIENTAS
        - QTooltip              TOOLTIP
        - QTreeView             QTREEVIEW - ARBOL VISOR Y MENU ARBOLADO
        - QWidget#qt_calendar   CALENDARIO
        - VBoundFieldEdit       CAJA DE EDICIÓN DE CAMPO PUNTERO A MAESTRO
        - VDateLineEdit         CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN ALFANUMÉRICO
        - VCFootView            PIE DE REJILLA
        - VListBox              LISTBOX
        - VCPVControlCasillero  CASILLERO
        - VCOverlayShadow       OVERLAY
    -------------------------------------------------------------------------------- */

/*  --------------------------------------------------------------------------------
    QCheckBox - BOTÓN CHECK
    QRadioButton - BOTÓN DE RADIO
    -------------------------------------------------------------------------------- */

QCheckBox, QRadioButton {
    color: #212121; }

QCheckBox:hover, QRadioButton:hover {
    color: #039BE5; }

QCheckBox:focus, QRadioButton:focus {
    color: #039BE5; }

QCheckBox:disabled, QRadioButton:disabled {
    color: #808080; }
        
/*  --------------------------------------------------------------------------------
    QComboBox - COMBOBOX
    QDateEdit - CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN FECHA
    QDateTime - CAJA DE VISUALIZACIÓN CAMPO FECHA Y HORA
    QDateTimeEdit - CAJA DE EDICIÓN DE CAMPO FECHA Y HORA
    QDoubleSpinBox - CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
    QNumberSpinBox - CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
    QSpinBox - CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON UN BOTÓN
    QTimeEdit - CAJA DE EDICIÓN DE HORA
    VBoundFieldEdit - CAJA DE EDICION DE CAMPO PUNTERO A MAESTRO
    VDateLineEdit - CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN ALFANUMÉRICO
    VListBox - LISTBOX
    -------------------------------------------------------------------------------- */
    
VDataCatcherEdit, QComboBox, QDateEdit, VDateLineEdit, QDateTime, QDateTimeEdit, QDoubleSpinBox, QNumberSpinBox, QSpinBox, QTimeEdit, VBoundFieldEdit, vBoundFieldEditBrowser, VDateLineEdit,VListBox {
    background-color: #F1F3F2;
    border: 0px solid #F1F3F2;
    border-radius: 0px;
    color: #212121;
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
    selection-background-color: #01579B;
    selection-color: #FFFFFF; }

VDataCatcherEdit:hover, QComboBox:hover, QDateEdit:hover, VDateLineEdit:hover, QDateTime:hover, QDateTimeEdit:hover, QDoubleSpinBox:hover, QNumberSpinBox:hover, QSpinBox:hover, QTimeEdit:hover, VBoundFieldEditBrowser:hover,VBoundFieldEdit:hover, VListBox:hover {
    background-color: #E0E0E0;
    border: 0px 1px 0px 0px solid #01579B; }

VDataCatcherEdit:focus, QComboBox:focus, QDateEdit:focus, VDateLineEdit:focus, QDateTime:focus, QDateTimeEdit:focus, QDoubleSpinBox:focus, QNumberSpinBox:focus, QSpinBox:focus, QTimeEdit:focus, VBoundFieldEditBrowser:focus, VBoundFieldEdit:focus, VListBox:focus {
    border-bottom: 1px solid #01579B; }

VDataCatcherEdit:disabled, QComboBox:disabled, QDateEdit:disabled, VDateLineEdit:disabled, QDateTime:disabled, QDateTimeEdit:disabled, QDoubleSpinBox:disabled, QNumberSpinBox:disabled, QSpinBox:disabled, QTimeEdit:disabled, VBoundFieldEditBrowser:disabled,VBoundFieldEdit:disabled, VListBox:disabled {
    background-color: #FAFAFA;
    color: #808080; }

QDateEdit::up-button, VDateLineEdit::up-button, QDateTime::up-button, QDateTimeEdit::up-button, QTimeEdit::up-button, VBoundFieldEditBrowser::up-button, VBoundFieldEdit::up-button {
    border: none;
    image: url(":/Resources/tg_moverarriba.png");
    width: 16px;	}

QDateEdit::down-button, VDateLineEdit::down-button, QDateTime::down-button, QDateTimeEdit::down-button, QTimeEdit::down-button, VBoundFieldEditBrowser::down-button, VBoundFieldEdit::down-button {
    border: none;
    image: url(":/Resources/tg_moverabajo.png");
    width: 16px;	}

VDataCatcherEdit::drop-down, QComboBox::drop-down, QDateEdit::drop-down, VDateLineEdit::drop-down, QDateTime::drop-down, QDateTimeEdit::drop-down, VBoundFieldEditBrowser::drop-down, VBoundFieldEdit::drop-down, QTimeEdit::drop-down {
    border: none;
    image: url(":/Resources/tg_moverabajo.png");
    width: 16px; }

/* EN PRINCIPIO NO AFECTAN */

QNumberSpinBox:up-button, QDoubleSpinBox:up-button, QSpinBox:up-button {
    border: none;
    image: url(":/Resources/tg_moverarriba.png"); }

QNumberSpinBox:down-button, QDoubleSpinBox:down-button, QSpinBox:down-button {
    border: none;
    image: url(":/Resources/tg_moverabajo.png"); }

VBoundFieldEditBrowser QToolButton {
    background-color: #F5F5F5; }

VBoundFieldEditBrowser QToolButton:hover {
    background-color: #E0E0E0; }

/*  --------------------------------------------------------------------------------
    QDialog - Cuadro de diálogo
    -------------------------------------------------------------------------------- */

QDialog QPushButton {
    min-width: 120;
    text-transform: none;
    }

/*  --------------------------------------------------------------------------------
    QDockWidget - DOCK
    -------------------------------------------------------------------------------- */
    
QDockWidget {
    color: transparent;
    font-size: 10px;
    min-width:10px;
    width: 210px; }

QDockWidget::title {
    background: #FFFFFF;
    color: #212121;
    margin: 0px;
    padding: 0px;
    text-align: center; }

QDockWidget::close-button {
    image: none;
    position: absolute;
    subcontrol-origin: margin;
    subcontrol-position: top right;
    top: 0px; left: 0px; bottom: 0px;
    width: 0px; }

QDockWidget::float-button {
    image: none;
    position: absolute;
    subcontrol-origin: margin;
    subcontrol-position: top right;
    top: 0px; left: 0px; bottom: 0px;
    width: 0px; }
        
/*  --------------------------------------------------------------------------------
    QFrame - MARCO
    -------------------------------------------------------------------------------- */
        
QFrame {
    background: rgba(255, 255, 255, 100%);
    border: 0px; }
        
/*  --------------------------------------------------------------------------------
    QGroupBox - CAJA DE GRUPO
    -------------------------------------------------------------------------------- */

QGroupBox {
    background: #FAFAFA;
    border: 0px solid #212121;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    margin-top: 20px;
    padding: 5px; }

QGroupBox::title {
    color: #212121;
    padding-top: -5px;
    padding-left: 5px;
    subcontrol-origin: margin; }
        
/*  --------------------------------------------------------------------------------
    QHeaderView - CABECERA DE REJILLAS Y ARBOLES
    -------------------------------------------------------------------------------- */
    
QHeaderView::section:horizontal {
    background: #FFFFFF;
    border: none;
    border-bottom: 1px solid #E0E0E0;
    border-right: 5px solid transparent;
    color: #01579B;
    font-weight: bold;
    margin-top: 10px;
    min-height: 20px; }

QHeaderView::section:vertical {
    background: #FFFFFF;
    border: none;
    border-bottom: 1px solid #E0E0E0;
    border-right: 5px solid transparent;
    color: #01579B;
    font-weight: bold;
    margin-top: 10px;
    min-height: 20px; }
    
/*  --------------------------------------------------------------------------------
    La clase siguiente hace que no se destaquen las cabeceras horizontal y vertical al ganar el foco
    -------------------------------------------------------------------------------- */
QHeaderView{
    qproperty-highlightSections: false;
}
    
/*  --------------------------------------------------------------------------------
    QLabel - ETIQUETA DE TEXTO
    -------------------------------------------------------------------------------- */

QLabel {
    background-color: transparent;
    color: #808080;
    font-size: 12px;
    text-transform: uppercase; }

/* TITULOS DE LOS FORMULARIOS Y MENUS */

QLabel#TXT_TIT {
    color: #01579B;
    font-size: 32px;
    text-transform: none; }

QLabel#TXT_SUB_TIT, QLabel#TXT_SUB_TIT_2 {
    color: #01579B;
    font-size: 16px;
    text-transform: none; }

QLabel#TXT_CAS {
    font-size: 10px;
    text-transform: none; }
    
QLabel#EMP {
    font-size: 16px; }

QLabel#USR {
    font-size: 12px; }

/* MENSAJE ERROR */

QLabel#NAME_VAC, QLabel#EML_ERR {
    alignement: right;
    background: transparent;
    color: #E27249;
    font-size: 10px;
    text-transform: uppercase;
    padding-left: -1px;
    padding-top: 1px; }

/* MENSAJE DUPLICADO*/

QLabel#NAME_DUP, QLabel#EML_DUP {
    alignement: right;
    background: transparent;
    color: #6388C1;
    font-size: 10px;
    padding-top: 1px;
    text-transform: uppercase; }

/*  --------------------------------------------------------------------------------
    QLineEdit - CAJA DE EDICIÓN DE TEXTO EN UNA LINEA
    QTextEdit - CAJA DE EDICIÓN DE TEXTO MULTI-LINEA
    -------------------------------------------------------------------------------- */

QLineEdit, QTextEdit {
    background-color: #F1F3F2;
    border: 0px solid #212121;
    border-radius: 0px;
    color: #212121;
    height: 36px;
    padding-left: 12px;
    padding-right: 12px;
    selection-background-color: #01579B;
    selection-color: #FFFFFF; }

QLineEdit:hover, QTextEdit:hover {
    background-color: #F1F3F2;
    border: 0px solid #01579B; }

QLineEdit:focus, QTextEdit:focus {
    background-color: #F1F3F2;
    border-bottom: 1px solid #01579B; }

QLineEdit:disabled, QTextEdit:disabled {
    background-color: #FAFAFA;
    color: #808080; }

/* CONTROL DE EDICIÓN DE TEXTOS A BUSCAR EN MENUS */

QLineEdit#TXT_BUS {
        qproperty-placeholderText: 'Texto a buscar'; }
        
/* FORMULARIO ALTA CONTACTO > TEXTO EDIT NOMBRE Y NOMBRE COMERCIAL */

QLineEdit#NAME_CON  {
        qproperty-placeholderText: 'Nombre contacto';
        qproperty-text: 'Nombre contacto'; }

QLineEdit#NOM_COM {
        margin-left: 10px; }

QTextEdit#MOTIVO {
        height: 36px; }
        
/*  --------------------------------------------------------------------------------
    QMainWindow - VENTANA PRINCIPAL
    -------------------------------------------------------------------------------- */

QMainWindow {
    background: #FFFFFF;
    border