CSS Velneo Open Apps Oficiales

Transcripción

1 CSS Velneo Open Apps Oficiales Objetivo Este documento te guiará en el proceso de edición de las hojas de estilo para las Velneo Open Apps Oficiales. Índice Introducción Hoja de estilos Velneo Open Apps versión 1.1 Objeto Marco Barra de menu Menu contextual Barra de estado Pestañas Frame Scroll vertical y horizontal Menu arbolado Dock menu izquierda Spliter Botón Botón llamada a la acción Botonera barra de herramientas Botón check y radio button Tool tip Etiqueta caja de edición Caja de edición (Texto, fecha, etc ) Caja grupo Rejilla Calendario Deslizador Ventanas emergentes Identificadores selector Barra de progreso Identificadores Velneo vbase Identificadores Velneo vcrm

2 Introducción Un widget se considera como una jerarquía (árbol) de subcontroles dibujado en la parte superior de uno al otro. Los widgets se modifican mediante la hoja de estilos a través de los selectores. Por ejemplo, el QComboBox (Selector) dibuja el desplegable de control secundario seguido de la flecha hacia abajo (sub control). A QComboBox se lo representa como sigue: Renderizar la regla QComboBox { Renderizar la regla QComboBox::drop down { Renderizar la regla QComboBox::down arrow { Sub controles comparten una relación padre hijo. En el caso de QComboBox, el widget en sí es el padre de la flecha hacia abajo que está en la lista desplegable. Los sub controles están posicionados dentro de su padre con el subcontrol posición y propiedades subcontrol de origen. Una vez colocados, los sub controles pueden ser personalizados con el modelo de caja (box model). Algunos selectores disponen de pseudo estados que enriquecen el diseño de interacción. Por ejemplo QPushButton tiene varios pseudo estados que se representan como sigue: QPushButton:hover { Efecto Focus altera el aspecto del botón cuando el puntero se sitúa sobre el botón. QPushButton:focus { Efecto Focus altera el aspecto del botón cuando este está con foco, es decir seleccionado mediante tab. Los sub controles también pueden incluir pseudo estados. La forma de representarlo es la que sigue: QSpinBox::up arrow:hover. Donde QSpinBox es el selector de un widget con dos botones arriba y abajo en una caja de edición, up arrow es el sub control de la flecha de arriba y hover el pseudo estado de esa flecha. Por último indicar que los widget s pueden tener su propio identificador, que podremos referenciar desde la hoja de estilos. Esto nos permitirá, por ejemplo, tener dos botones (QPushButton) con estilos completamente diferentes. La forma de representarlo es la que sigue: QPushButton#BTN_ACE. Donde #BTN_ACE es el identificador de ese botón. Este identificador debe ser el mismo del widget que queramos personalizar. Se indica en el Panel de propiedades > Identificador de Velneo vdevelop con el mismo nombre BTN_ACE.

3 Hoja de estilos Velneo Open Apps Objeto QObject { El selector QObject es base de todos los objetos de Qt (la biblioteca multiplataforma que usa Velneo para generar las interfaces gráficas de usuario). Se usa la propiedad de background con el valor transparent para que no exista conflicto de solapamiento entre objetos.

4 Ventana principal QMainWindow { min width:1px; min height:1px; border: 0px; QMainWindow::separator { border left: 1px solid #CECECE; border right: 1px solid #CECECE; width: 5px; /* cuando es el separador vertical */ height: 5px; /* cuando es el separador horizontal */ QMainWindow::separator:hover { En este selector se define el color de fondo base de la interfaz, en este caso blanco #FFF y también se definen las líneas horizontales y verticales en gris #CECECE; que delimitan algunas partes como son los separadores.

5 Barra de menu /* NOTA: SOLO AFECTA A WINDOWS */ QMenuBar { min height:20px; border bottom: 1px solid #CECECE; QMenuBar::item:selected { color: #000; QMenuBar::item:hover { background: #333333; color: #FFF; Define fondos de color y líneas de la barra de menu de windows. En el resto de SO la barra se integra en la interfaz del sistema, como es el caso de Macosx, y no es posible editarla.

6 Menu contextual QMenu { margin: 0px; /* NOTA: ESPACIO ALREDEDOR DEL MENU */ padding: 5px; border:1px solid #CECECE; color:#333333; QMenu::item { padding: 5px 30px 5px 20px; margin:1px; border: 1px solid transparent; QMenu::item:selected { color:#000; QMenu::separator { height: 1px; margin: 0px; Del menu de contexto se podrá editar bordes, márgenes y fondos. Así como los estados de los items del menu contextual.

7 Barra de estado QStatusBar { border top: 1px solid #CECECE; Se edita el color de fondo y el borde superior de la barra de estado.

8 Pestañas QTabWidget::pane { margin:0px; top: 10px; border top: 1px solid #CECECE; QTabWidget::tab bar { left: 20px; right:10px; top: 11px; min width: 10px; QTabBar::tab { border left: 1px solid #CECECE; border top: 1px solid #CECECE; border right: 1px solid #CECECE; border bottom: 1px solid #FFF; margin left: 5px; padding left: 5px; padding top: 5px; padding bottom: 3px; padding right: 5px; QTabBar::tab:!selected { border bottom: 1px solid #CECECE; color:#727272; QTabBar::close button { margin right: 10px; QTabBar::tear { background:#727272; width:1px; margin top:0px; QTabBar::scroller { width: 30px; padding top: 10px; QTabBar QToolButton { /* the scroll buttons are tool buttons */ border top:1px solid #727272; border left:1px solid #727272; background:#fff; Modifica las propiedades de todas las pestañas de la interfaz.

9 Frame QFrame { border: 0px; QFrame modifica el color de fondo del marco principal de cada pantalla.

10 Scroll vertical y horizontal QScrollBar:vertical { width: 15px; margin: 20px 0 20px 0; QScrollBar:horizontal { width: 15px; margin: 0px 20px 0px 20px; QScrollBar::handle:vertical, QScrollBar::handle:horizontal { min height: 20px; QScrollBar::handle:hover { background: #727272; border: 1px solid #727272; QScrollBar::add line:vertical { height: 20px; subcontrol position: bottom; subcontrol origin: margin; QScrollBar::add line:horizontal { width: 20px; subcontrol position: right; subcontrol origin: margin; QScrollBar::sub line:vertical { height: 20px; subcontrol position: top; subcontrol origin: margin;

11 QScrollBar::sub line:horizontal { width: 20px; subcontrol position: left; subcontrol origin: margin; QScrollBar::up arrow:vertical, QScrollBar::down arrow:vertical { width: 5px; height: 3px; QScrollBar::up arrow:vertical:hover, QScrollBar::down arrow:vertical:hover { background color: #727272; QScrollBar:left arrow:horizontal, QScrollBar::right arrow:horizontal { width: 3px; height: 5px; QScrollBar::add page:vertical, QScrollBar::sub page:vertical, QScrollBar::add page:horizontal, QScrollBar::sub page:horizontal { background: none; En el scroll se recomienda modificar sólo el color pues es un widget con bastante complejidad.

12 Menu arbolado QTreeView#MEN_APP { show decoration selected: 1; selection background color: transparent; outline: 0; QTreeView::item#MEN_APP { color: #727272; border right: 0; margin bottom:2px; padding bottom:2px; padding top:1px; margin top: 1px; margin right:10px; QTreeView::item:hover#MEN_APP { color:#000000; border color: transparent; QTreeView::item:selected#MEN_APP { color: #000000; border color: transparent; QTreeView::item:selected:hover#MEN_APP { color: #000000; QTreeView::item:selected:active#MEN_APP { color: #000000; QTreeView::branch#MEN_APP { QTreeView::branch:has siblings:!adjoins item#men_app { QTreeView::branch:has siblings:adjoins item#men_app { QTreeView::branch:!has children:!has siblings:adjoins item#men_app { Este selector con identificador propio MEN_APP modifica el menu de la izquierda. En él podemos editar colores de tipografías.

13 Dock menu izquierda QDockWidget { width: 210px; min width:10px; font size: 10px; color: #727272; QDockWidget::title { margin: 0px; padding: 0px; text align: center; QDockWidget::close button { image:none; subcontrol position: top right; subcontrol origin: margin; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 0px; QDockWidget::float button { image:none; subcontrol position: top right; subcontrol origin: margin; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 0px; Este selector actua sobre la pastilla de cabecera del menu izquierda. Esta cabecera es draggable y permite ubicar el menu donde el usuario necesite.

14 Splitter QSplitter { El spliter es un elemento que permite al usuario redimensionar determinados objetos de la interfaz, como cajas de texto, rejillas, etc

15 Botón QPushButton{ padding: 8px; border radius: 2px; background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); color: #727272; QPushButton::menu indicator { color: transparent; QPushButton:flat { padding: 8px; border radius: 2px; background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #EEEEEE); color: red; QPushButton:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); border: 1px solid #727272; color: #333333; QPushButton:focus { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); border: 1px solid #67A8FF; color: #333333; outline: 0; QPushButton:disabled { border: 1px solid #727272; color: #727272; Del selector QPushButton podremos modificar varios valores referentes al color.

16 Botón llamada a la acción QPushButton#BTN_ACE, VPushButton#BTN_BUS_1, VPushButton#BTN_BUS_2 { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #66C285, stop:1 #009933); border: 1px solid #009933; color: #FFF; QPushButton:hover#BTN_ACE, VPushButton:hover#BTN_BUS_1, VPushButton:hover#BTN_BUS_2 { background: #009933; color: #FFF; VPushButton:focus#BTN_ACE, VPushButton:focus#BTN_BUS_1, VPushButton:focus#BTN_BUS_2 { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #C9FFD0, stop:1 #009933); border: 1px solid #67A8FF; color: #FFF; outline: 0; QPushButton:disabled#BTN_ACE, VPushButton:disabled#BTN_BUS_1, VPushButton:disabled#BTN_BUS_2 { border: 1px solid #727272; color: #727272; QPushButton:pressed#BTN_ACE, VPushButton:pressed#BTN_BUS_1, VPushButton:pressed#BTN_BUS_2 { background: #009933; color: #FFF; Mediante el identificador BTN_ACE (botón de aceptar) y BTN_BUS_1, BTN_BUS_2 (botones de localizar). Podremos tener un botón principal. Los botones llamada a la acción o CTA sirven para ayudar al usuario a saber cual es la interacción a realizar. Priorizan las acción con respecto a otros botones de la interfaz.

17 Botonera de barra de herramientas QToolBar { spacing: 5px; padding:3px; border: 0px; QToolButton { min width: 24px; min height: 24px; padding: 1px; margin right: 1px; border radius: 2px; background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #EEEEEE); color: #727272; QToolButton:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); border: 1px solid #727272; color: #333333; QToolButton:focus { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); border: 2px solid #A7C6EE; color: #333333; QToolButton:disabled { border: 1px solid #727272; color: #727272; QToolButton:pressed { background: #727272; QToolButton::menu indicator { color: transparent; Las propiedades del la barra de herramientas afectan a las barras draggeables y a las fijas.

18 Botón check y radio button QCheckBox, QRadioButton { padding: 4px; color: #000; QCheckBox:focus, QRadioButton:focus { padding: 2px; background: #F0F7FF; border width: 2px; border style: solid; border color: #A7C6EE; QCheckBox:disabled, QRadioButton:disabled { color: #999999; En los botones de check list y radio button podremos modificar propiedades como color y tamaños de grosor de bordes para homogeneizarlos con el resto de botones y controles.

19 Tool Tip QToolTip { color:#333333; vertical align:center; align:center; background: #FFFFFF; border:1px solid #727272; Podremos personalizar alineaciones y color de fondo, tipografía y borde de caja.

20 Etiqueta caja de edición QLabel { color: #727272; Las etiquetas de caja de edición se podrá editar color de tipografía.

21 Cajas de edición (Texto, fecha, etc ) QLineEdit, QTextEdit { padding: 5px; border width: 1px; border style: solid; border color: #CECECE; color: #333333; selection background color: #A7C6EE; selection color: #333333; QLineEdit:hover, QTextEdit:hover { border width: 1px; border style: solid; border color: #999999; QLineEdit:focus, QTextEdit:focus { padding: 4px; border width: 2px; border color: #A7C6EE; background: #F0F7FF; QLineEdit:disabled, QTextEdit:disabled { background: #CCCCCC; border width: 1px; border style: solid; border color: #999999; VBoundFieldEdit, QDoubleSpinBox, QSpinBox, QTimeEdit, QNumberSpinBox, QListBox, QDateEdit, QDateTime, QDateTimeEdit, QComboBox { padding: 5px; border width: 1px; border style: solid; border color: #CECECE; color: #333333; selection background color: #B5D5FF; selection color: #333333; VBoundFieldEdit:hover, QDoubleSpinBox:hover, QSpinBox:hover, QTimeEdit:hover, QNumberSpinBox:hover, QListBox:hover, QDateEdit:hover, QDateTime:hover, QDateTimeEdit:hover, QComboBox:hover { border color: #999999; VBoundFieldEdit:focus, QDoubleSpinBox:focus, QSpinBox:focus, QTimeEdit:focus, QNumberSpinBox:focus, QListBox:focus, QDateEdit:focus, QDateTime:focus, QDateTimeEdit:focus, QComboBox:focus { padding: 4px; border width: 2px; border color: #A7C6EE; background: #F0F7FF;

22 VBoundFieldEdit:disabled, QDoubleSpinBox:disabled, QSpinBox:disabled, QTimeEdit:disabled, QNumberSpinBox:disabled, QListBox:disabled, QDateEdit:disabled, QDateTime:disabled, QDateTimeEdit:disabled, QComboBox:disabled { background: #CCCCCC; border width: 1px; border style: solid; border color: #999999; VBoundFieldEdit::up button, QDoubleSpinBox::up button, QSpinBox::up button, QTimeEdit::up button, QNumberSpinBox::up button, QListBox::up button, QDateEdit::up button, QDateTime::up button, QDateTimeEdit::up button, QComboBox::up button { width: 15px; border bottom: 1px solid #FFF; VBoundFieldEdit::up arrow, QDoubleSpinBox::up arrow, QSpinBox::up arrow, QTimeEdit::up arrow, QNumberSpinBox::up arrow, QListBox::up arrow, QDateEdit::up arrow, QDateTime::up arrow, QDateTimeEdit::up arrow, QComboBox::up arrow { height: 3px; width: 5px; VBoundFieldEdit::up arrow:hover, QDoubleSpinBox::up arrow:hover, QSpinBox::up arrow:hover, QTimeEdit::up arrow:hover, QNumberSpinBox::up arrow:hover, QListBox::up arrow:hover, QDateEdit::up arrow:hover, QDateTime::up arrow:hover, QDateTimeEdit::up arrow:hover, QComboBox::up arrow:hover { background color: #727272; VBoundFieldEdit::down button, QDoubleSpinBox::down button, QSpinBox::down button, QTimeEdit::down button, QNumberSpinBox::down button, QListBox::down button, QDateEdit::down button, QDateTime::down button, QDateTimeEdit::down button, QComboBox::down button { width: 15px; background color: #CECECE; VBoundFieldEdit::down arrow, QDoubleSpinBox::down arrow, QSpinBox::down arrow, QTimeEdit::down arrow, QNumberSpinBox::down arrow, QListBox::down arrow, QDateEdit::down arrow, QDateTime::down arrow, QDateTimeEdit::down arrow, QComboBox::down arrow { height: 3px; width: 5px; VBoundFieldEdit::down arrow:hover, QDoubleSpinBox::down arrow:hover, QSpinBox::down arrow:hover, QTimeEdit::down arrow:hover, QNumberSpinBox::down arrow:hover, QListBox::down arrow:hover, QDateEdit::downarrow:hover, QDateTime::down arrow:hover, QDateTimeEdit::down arrow:hover, QComboBox::down arrow:hover { background: #727272; QComboBox QAbstractItemView { selection background color: #CECECE; selection color: #000; QDateTime:disabled { background color: red; /* NOTA: SOLO CON FLECHA HACIA ABAJO */

23 VBoundFieldEdit::drop down, QDateTime::drop down, QDateTimeEdit::drop down, QComboBox::drop down { width: 15px; En este bloque de selectores se incluyen todos los tipos de campos como son las cajas de texto, los combo box, las cajas de fecha, cajas de fecha y hora, etc Se han agrupado los los selectores para que modificar sea algo mucho más sencillo, alcanzando una coherencia entre elementos.

24 Caja de grupo QGroupBox { border radius: 5px; margin top: 1ex; QGroupBox::title { subcontrol origin: margin; subcontrol position: top center; margin top: 1ex; padding: 5px 0px 0px 0px; color: #727272; En la caja de grupo se podrá editar el color de texto y del borde de la caja de grupo.

25 Rejilla QTableView { selection background color: #A6C7EE; selection color: #000; column background color: #FFF; column color: #757575; alternate background color: #EEEEEE; padding: 5px; border width: 1px; border style: solid; border color: #CECECE; QTableView:focus { border width: 2px; border style: solid; border color: #A7C6EE; QTableView QHeaderView::section:horizontal{ border style: none; font weight: bold; border:1px solid #FFFFFF; border bottom:1px solid #CECECE; padding: 3px; margin top:2px; min height: 18px; color: #000; background: #FFFFFF; QTableView QTableCornerButton::section { border: 0px; QHeaderView::section:active{ QHeaderView::down arrow{ margin:0; padding:2px 0 0 0; QHeaderView::up arrow{ margin:0; padding:2px ; QTableView::item { color:transparent;

26 /* PIE DE REJILLA */ VCFootView { min height:20px; background: #FFFFFF; border:1px solid #FFFFFF; VCFootView::section:active { border right: 1px solid #FFFFFF; margin right:2px; border top:1px solid #CECECE; padding:5px 2px 2px 2px; font weight: bold; VCFootView::section:!active { background: #FFFFFF; border right: 1px solid #FFFFFF; margin right:2px; border top:1px solid #CECECE; padding:5px 2px 2px 2px; font weight: bold; En la rejilla se podrá editar todo lo referente al color (Fondo, cabecera y pie de rejilla, tipografía, etc...)

27 Calendario QWidget#qt_calendar_navigationbar { QWidget#qt_calendar_monthbutton, QWidget#qt_calendar_nextmonth, QWidget#qt_calendar_prevmonth, QWidget#qt_calendar_yearbutton { El selector de calendario permite modificar fondos de color de la cabecera del calendario, así como bordes.

28 Deslizador QSlider { Ventanas emergentes QMessageBox, QDialog { Barra de progreso QProgressBar { height:25px; border radius: 2px; border width: 1px; border style: solid; border color: #FFF; background:#cecece; text align: center; color: #FFF; QProgressBar::chunk { padding right: 1px; background: #A7C6EE; width: 20px; Código hoja de estilos Velneo Open Apps Correspondiente a la última versión 1.0 modificada el 23 de enero de 2014 /* VELNEO OPEN APPS OFICIALES */ /* NOTAS */ /* */ /* VERSION: 1.0 */ /* AUTOR: VELNEO */ /* ULTIMA MODIFICACION: 20 marzo 2014 */

29 /* */ /* OBJETO */ QObject { /* VENTANA PRINCIPAL */ QMainWindow { min width:1px; min height:1px; border: 0px; QMainWindow::separator { border left: 1px solid #CECECE; border right: 1px solid #CECECE; width: 5px; /* cuando es el separador vertical */ height: 5px; /* cuando es el separador horizontal */ QMainWindow::separator:hover { /* BARRA DE MENU */ /* NOTA: SOLO AFECTA A WINDOWS */ QMenuBar { min height:20px; border bottom: 1px solid #CECECE; QMenuBar::item:selected { color: #000; QMenuBar::item:hover { background: #333333; color: #FFF; /* MENU CONTEXTUAL */ QMenu { margin: 0px; /* NOTA: ESPACIO ALREDEDOR DEL MENU */ padding: 5px; background:#fff; border:1px solid #CECECE; color:#333333;

30 QMenu::item { padding: 5px 30px 5px 20px; margin:1px; border: 1px solid transparent; QMenu::item:selected { color:#000; QMenu::separator { height: 1px; margin: 0px; /* BARRA DE ESTADO */ QStatusBar { border top: 1px solid #CECECE; /* PESTAÑAS */ QTabWidget::pane { margin:0px; top: 10px; border top: 1px solid #CECECE; QTabWidget::tab bar { left: 20px; right:10px; top: 11px; min width: 10px; QTabBar::tab { border left: 1px solid #CECECE; border top: 1px solid #CECECE; border right: 1px solid #CECECE; border bottom: 1px solid #FFF; margin left: 5px; padding left: 5px; padding top: 5px; padding bottom: 3px; padding right: 5px; QTabBar::tab:!selected { border bottom: 1px solid #CECECE; color:#727272;

31 QTabBar::close button { margin right: 10px; QTabBar::tear { background:#727272; width:1px; margin top:0px; QTabBar::scroller { width: 30px; padding top: 10px; QTabBar QToolButton { /* the scroll buttons are tool buttons */ border top:1px solid #727272; border left:1px solid #727272; background:#fff; /* FRAME */ QFrame { border: 0px; /* SCROLL VERTICAL Y HORIZONTAL */ QScrollBar:vertical { width: 15px; margin: 20px 0 20px 0; QScrollBar:horizontal { width: 15px; margin: 0px 20px 0px 20px; QScrollBar::handle:vertical, QScrollBar::handle:horizontal { min height: 20px; QScrollBar::handle:hover { background: #727272; border: 1px solid #727272; QScrollBar::add line:vertical { height: 20px; subcontrol position: bottom;

32 subcontrol origin: margin; QScrollBar::add line:horizontal { width: 20px; subcontrol position: right; subcontrol origin: margin; QScrollBar::sub line:vertical { height: 20px; subcontrol position: top; subcontrol origin: margin; QScrollBar::sub line:horizontal { width: 20px; subcontrol position: left; subcontrol origin: margin; QScrollBar::up arrow:vertical, QScrollBar::down arrow:vertical { width: 5px; height: 3px; QScrollBar::up arrow:vertical:hover, QScrollBar::down arrow:vertical:hover { background color: #727272; QScrollBar:left arrow:horizontal, QScrollBar::right arrow:horizontal { width: 3px; height: 5px; QScrollBar::add page:vertical, QScrollBar::sub page:vertical, QScrollBar::add page:horizontal, QScrollBar::sub page:horizontal { background: none; /* MENU ARBOLADO */ QTreeView#MEN_APP { show decoration selected: 1; selection background color: transparent; outline: 0; QTreeView::item#MEN_APP { color: #727272; border right: 0; margin bottom:2px; padding bottom:2px; padding top:1px; margin top: 1px;

33 margin right:10px; QTreeView::item:hover#MEN_APP { color:#000000; border color: transparent; QTreeView::item:selected#MEN_APP { color: #000000; border color: transparent; QTreeView::item:selected:hover#MEN_APP { color: #000000; QTreeView::item:selected:active#MEN_APP { color: #000000; QTreeView::branch#MEN_APP { QTreeView::branch:has siblings:!adjoins item#men_app { QTreeView::branch:has siblings:adjoins item#men_app { QTreeView::branch:!has children:!has siblings:adjoins item#men_app { /* DOCK MENU IZQUIERDA */ QDockWidget { width: 210px; min width:10px; font size: 10px; color: #727272; QDockWidget::title { margin: 0px; padding: 0px; text align: center; QDockWidget::close button { image:none; subcontrol position: top right; subcontrol origin: margin; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 0px; QDockWidget::float button { image:none; subcontrol position: top right;

34 subcontrol origin: margin; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 0px; /* SPLITTER */ QSplitter { /* BOTON */ QPushButton{ padding: 8px; border radius: 2px; background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); color: #727272; QPushButton::menu indicator { color: transparent; QPushButton:flat { padding: 8px; border radius: 2px; background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #EEEEEE); color: red; QPushButton:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); border: 1px solid #727272; color: #333333; QPushButton:focus { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); border: 1px solid #67A8FF; color: #333333; outline: 0; QPushButton:disabled { border: 1px solid #727272; color: #727272; /* BOTON LLAMADA A LA ACCION */ QPushButton#BTN_ACE, VPushButton#BTN_BUS_1, VPushButton#BTN_BUS_2 {

35 background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #66C285, stop:1 #009933); border: 1px solid #009933; color: #FFF; QPushButton:hover#BTN_ACE, VPushButton:hover#BTN_BUS_1, VPushButton:hover#BTN_BUS_2 { background: #009933; color: #FFF; VPushButton:focus#BTN_ACE, VPushButton:focus#BTN_BUS_1, VPushButton:focus#BTN_BUS_2 { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #C9FFD0, stop:1 #009933); border: 1px solid #67A8FF; color: #FFF; outline: 0; QPushButton:disabled#BTN_ACE, VPushButton:disabled#BTN_BUS_1, VPushButton:disabled#BTN_BUS_2 { border: 1px solid #727272; color: #727272; QPushButton:pressed#BTN_ACE, VPushButton:pressed#BTN_BUS_1, VPushButton:pressed#BTN_BUS_2 { background: #009933; color: #FFF; /* BOTONERA BARRA DE HERRAMIENTAS */ QToolBar { spacing: 5px; padding:3px; border: 0px; QToolButton { min width: 24px; min height: 24px; padding: 1px; margin right: 1px; border radius: 2px; background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #EEEEEE); color: #727272; QToolButton:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); border: 1px solid #727272; color: #333333; QToolButton:focus { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #CECECE); border: 2px solid #A7C6EE; color: #333333; QToolButton:disabled {

36 border: 1px solid #727272; color: #727272; QToolButton:pressed { background: #727272; QToolButton::menu indicator { color: transparent; /* BOTON CHECK Y RADIO BUTTON */ QCheckBox, QRadioButton { padding: 4px; color: #000; QCheckBox:focus, QRadioButton:focus { padding: 2px; background: #F0F7FF; border width: 2px; border style: solid; border color: #A7C6EE; QCheckBox:disabled, QRadioButton:disabled { color: #999999; /* TOOL TIP */ QToolTip { color:#333333; vertical align:center; align:center; background: #FFFFFF; border:1px solid #727272; /* ETIQUETA CAJA DE EDICION */ QLabel { color: #727272; /* CAJA DE EDICION (TEXTO, FECHA, ETC...) */

37 QLineEdit, QTextEdit { padding: 5px; border width: 1px; border style: solid; border color: #CECECE; color: #333333; selection background color: #A7C6EE; selection color: #333333; QLineEdit:hover, QTextEdit:hover { border width: 1px; border style: solid; border color: #999999; QLineEdit:focus, QTextEdit:focus { padding: 4px; border width: 2px; border color: #A7C6EE; background: #F0F7FF; QLineEdit:disabled, QTextEdit:disabled { background: #CCCCCC; border width: 1px; border style: solid; border color: #999999; VBoundFieldEdit, QDoubleSpinBox, QSpinBox, QTimeEdit, QNumberSpinBox, QListBox, QDateEdit, QDateTime, QDateTimeEdit, QComboBox { padding: 5px; border width: 1px; border style: solid; border color: #CECECE; color: #333333; selection background color: #B5D5FF; selection color: #333333; VBoundFieldEdit:hover, QDoubleSpinBox:hover, QSpinBox:hover, QTimeEdit:hover, QNumberSpinBox:hover, QListBox:hover, QDateEdit:hover, QDateTime:hover, QDateTimeEdit:hover, QComboBox:hover { border color: #999999; VBoundFieldEdit:focus, QDoubleSpinBox:focus, QSpinBox:focus, QTimeEdit:focus, QNumberSpinBox:focus, QListBox:focus, QDateEdit:focus, QDateTime:focus, QDateTimeEdit:focus, QComboBox:focus { padding: 4px; border width: 2px; border color: #A7C6EE; background: #F0F7FF; VBoundFieldEdit:disabled, QDoubleSpinBox:disabled, QSpinBox:disabled, QTimeEdit:disabled, QNumberSpinBox:disabled, QListBox:disabled, QDateEdit:disabled, QDateTime:disabled, QDateTimeEdit:disabled, QComboBox:disabled { background: #CCCCCC; border width: 1px; border style: solid;

38 border color: #999999; VBoundFieldEdit::up button, QDoubleSpinBox::up button, QSpinBox::up button, QTimeEdit::up button, QNumberSpinBox::up button, QListBox::up button, QDateEdit::up button, QDateTime::up button, QDateTimeEdit::up button, QComboBox::up button { width: 15px; border bottom: 1px solid #FFF; VBoundFieldEdit::up arrow, QDoubleSpinBox::up arrow, QSpinBox::up arrow, QTimeEdit::up arrow, QNumberSpinBox::up arrow, QListBox::up arrow, QDateEdit::up arrow, QDateTime::up arrow, QDateTimeEdit::up arrow, QComboBox::up arrow { height: 3px; width: 5px; VBoundFieldEdit::up arrow:hover, QDoubleSpinBox::up arrow:hover, QSpinBox::up arrow:hover, QTimeEdit::up arrow:hover, QNumberSpinBox::up arrow:hover, QListBox::up arrow:hover, QDateEdit::up arrow:hover, QDateTime::up arrow:hover, QDateTimeEdit::up arrow:hover, QComboBox::up arrow:hover { background color: #727272; VBoundFieldEdit::down button, QDoubleSpinBox::down button, QSpinBox::down button, QTimeEdit::down button, QNumberSpinBox::down button, QListBox::down button, QDateEdit::down button, QDateTime::down button, QDateTimeEdit::down button, QComboBox::down button { width: 15px; background color: #CECECE; VBoundFieldEdit::down arrow, QDoubleSpinBox::down arrow, QSpinBox::down arrow, QTimeEdit::down arrow, QNumberSpinBox::down arrow, QListBox::down arrow, QDateEdit::down arrow, QDateTime::down arrow, QDateTimeEdit::down arrow, QComboBox::down arrow { height: 3px; width: 5px; VBoundFieldEdit::down arrow:hover, QDoubleSpinBox::down arrow:hover, QSpinBox::down arrow:hover, QTimeEdit::down arrow:hover, QNumberSpinBox::down arrow:hover, QListBox::down arrow:hover, QDateEdit::downarrow:hover, QDateTime::down arrow:hover, QDateTimeEdit::down arrow:hover, QComboBox::down arrow:hover { background: #727272; QComboBox QAbstractItemView { selection background color: #CECECE; selection color: #000; QDateTime:disabled { background color: red; /* NOTA: SOLO CON FLECHA HACIA ABAJO */ VBoundFieldEdit::drop down, QDateTime::drop down, QDateTimeEdit::drop down, QComboBox::drop down { width: 15px;

39 /* CAJA GRUPO */ QGroupBox { border radius: 5px; margin top: 1ex; QGroupBox::title { subcontrol origin: margin; subcontrol position: top center; margin top: 1ex; padding: 5px 0px 0px 0px; color: #727272; /* REJILLA */ QTableView { selection background color: #A6C7EE; selection color: #000; column background color: #FFF; column color: #757575; alternate background color: #EEEEEE; padding: 5px; border width: 1px; border style: solid; border color: #CECECE; QTableView:focus { border width: 2px; border style: solid; border color: #A7C6EE; QTableView QHeaderView::section:horizontal{ border style: none; font weight: bold; border:1px solid #FFFFFF; border bottom:1px solid #CECECE; padding: 3px; margin top:2px; min height: 18px; color: #000; background: #FFFFFF; QTableView QTableCornerButton::section { border: 0px; QHeaderView::section:active{

40 QHeaderView::down arrow{ margin:0; padding:2px 0 0 0; QHeaderView::up arrow{ margin:0; padding:2px ; QTableView::item { color:transparent; /* PIE DE REJILLA */ VCFootView { min height:20px; background: #FFFFFF; border:1px solid #FFFFFF; VCFootView::section:active { border right: 1px solid #FFFFFF; margin right:2px; border top:1px solid #CECECE; padding:5px 2px 2px 2px; font weight: bold; VCFootView::section:!active { background: #FFFFFF; border right: 1px solid #FFFFFF; margin right:2px; border top:1px solid #CECECE; padding:5px 2px 2px 2px; font weight: bold; /* CALENDARIO */ QWidget#qt_calendar_navigationbar { QWidget#qt_calendar_monthbutton, QWidget#qt_calendar_nextmonth, QWidget#qt_calendar_prevmonth, QWidget#qt_calendar_yearbutton { /* DESLIZADOR */ QSlider { /* VENTANAS EMERGENTES */

41 QMessageBox, QDialog { /* BARRA DE PROGRESO */ QProgressBar { height:25px; border radius: 2px; border width: 1px; border style: solid; border color: #FFF; background:#cecece; text align: center; color: #FFF; QProgressBar::chunk { padding right: 1px; background: #A7C6EE; width: 20px; /* IDENTIFICADORES VARIOS */ /* IDENTIFICAR MENU */ QFrame#NOM_USR { color: #FFF; /* FORMULARIO ALTA > ESPACIOS */ QFrame#ENT_ALT_NEW { max height:260px; min width:1px; min height:1px; margin top: 50px; margin right:30px; margin bottom:45px; margin left: 30px; /* FORMULARIO ALTA > TEXTO EDIT NOMBRE */ QLineEdit#NAME_CON { qproperty placeholdertext: 'Nombre contacto'; qproperty text: 'Nombre contacto'; /* FORMULARIO ALTA AMPLIADO > ESPACIOS */ QFrame#ENT { margin top: 10px; margin right:10px; margin bottom:5px; margin left: 10px; QLineEdit#NOM_COM {

42 margin left: 9px; /* MENSAJE ERROR */ QLabel#NAME_VAC, QLabel#EML_ERR { alignement: right; text transform:uppercase; font size: 10px; color: #E27249; padding top: 1px; padding left: 1px; /* MENSAJE DUPLICADO*/ QLabel#NAME_DUP, QLabel#EML_DUP { alignement: right; text transform:uppercase; font size: 10px; color: #6388C1; padding top: 1px; /* BOTON AVISOS */ VPushButton#BTN_AVI1, VPushButton#BTN_AVI2, PushButton#BTN_AVI3, PushButton#BTN_AVI4, PushButton#BTN_AVI5, PushButton#BTN_AVI6, PushButton#BTN_AVI7, PushButton#BTN_AVI8, PushButton#BTN_AVI9, PushButton#BTN_AVI10 { padding: 5px 10px 5px 10px; border radius: 2px; font size:12px; background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #FFFFFF); border: 0px solid #CECECE; color: #FF0000; VPushButton:hover#BTN_AVI1, VPushButton:focus#BTN_AVI1, VPushButton:hover#BTN_AVI2, VPushButton:focus#BTN_AVI2, VPushButton:hover#BTN_AVI3, VPushButton:focus#BTN_AVI3, VPushButton:hover#BTN_AVI4, VPushButton:focus#BTN_AVI4, VPushButton:hover#BTN_AVI5, VPushButton:focus#BTN_AVI5, VPushButton:hover#BTN_AVI6, VPushButton:focus#BTN_AVI6, VPushButton:hover#BTN_AVI7, VPushButton:focus#BTN_AVI7, VPushButton:hover#BTN_AVI8, VPushButton:focus#BTN_AVI8, VPushButton:hover#BTN_AVI9, VPushButton:focus#BTN_AVI9, VPushButton:hover#BTN_AVI10, VPushButton:focus#BTN_AVI10 { border: 1px solid #727272; color: #FF0000; VPushButton:pressed#BTN_AVI1, VPushButton:pressed#BTN_AVI2, VPushButton:focus#BTN_AVI3, VPushButton:focus#BTN_AVI4, VPushButton:focus#BTN_AVI5, VPushButton:focus#BTN_AVI6, VPushButton:focus#BTN_AVI7, VPushButton:focus#BTN_AVI8, VPushButton:focus#BTN_AVI9, VPushButton:focus#BTN_AVI10 { border: 1px solid #727272; color: #FF0000;

43 /* BOTON NOTIFICACIONES */ VPushButton#BTN_NOT1, VPushButton#BTN_NOT2, VPushButton#BTN_NOT3, VPushButton#BTN_NOT4, VPushButton#BTN_NOT5, VPushButton#BTN_NOT6, VPushButton#BTN_NOT7, VPushButton#BTN_NOT8, VPushButton#BTN_NOT9, VPushButton#BTN_NOT10 { padding: 5px 10px 5px 10px; border radius: 2px; font size:12px; background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #FFFFFF); border: 0px solid #CECECE; color: #0000FF; VPushButton:hover#BTN_NOT1, VPushButton:focus#BTN_NOT1, VPushButton:hover#BTN_NOT2, VPushButton:focus#BTN_NOT2, VPushButton:hover#BTN_NOT3, VPushButton:focus#BTN_NOT3, VPushButton:hover#BTN_NOT4, VPushButton:focus#BTN_NOT4, VPushButton:hover#BTN_NOT5, VPushButton:focus#BTN_NOT5, VPushButton:hover#BTN_NOT6, VPushButton:focus#BTN_NOT6, VPushButton:hover#BTN_NOT7, VPushButton:focus#BTN_NOT7, VPushButton:hover#BTN_NOT8, VPushButton:focus#BTN_NOT8, VPushButton:hover#BTN_NOT9, VPushButton:focus#BTN_NOT9, VPushButton:hover#BTN_NOT10, VPushButton:focus#BTN_NOT10 { border: 1px solid #727272; color: #0000FF; VPushButton:pressed#BTN_NOT1, VPushButton:pressed#BTN_NOT2, VPushButton:focus#BTN_NOT3, VPushButton:focus#BTN_NOT4, VPushButton:focus#BTN_NOT5, VPushButton:focus#BTN_NOT6, VPushButton:focus#BTN_NOT7, VPushButton:focus#BTN_NOT8, VPushButton:focus#BTN_NOT9, VPushButton:focus#BTN_NOT10 { border: 1px solid #727272; color: #0000FF;