Using relative paths in Qt stylesheet urls - python

I have trouble reading the images in a .qss file. The organizations is as following:
How can I fix this bug ?
Is there a proper way to append all folders/subfolder to the path of the main application main.py. I have tried sys.path.append('./images'), but it always requires the absolute path to any image or icon ?
Example Code (Note that No icons are appearing (no down_arrow for QCombobox, and no question icon for messagebox)):
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.hbox = QHBoxLayout()
self.setLayout(self.hbox)
self.combo = QComboBox()
self.combo.addItem('item_1')
self.combo.addItem('item_2')
self.combo.setCurrentText('item_1')
self.hbox.addWidget(self.combo)
self.bt = QPushButton('Question')
self.hbox.addWidget(self.bt)
self.bt.clicked.connect(self.openMess)
# style
file = QFile(r'./themes/DarkBlue.qss')
file.open(QFile.ReadOnly | QFile.Text)
stylesheet = file.readAll()
app.setStyleSheet(str(stylesheet, encoding='utf-8'))
def openMess(self):
buttonReply = QMessageBox.question(self, 'No Image', "Check icons", QMessageBox.Yes | QMessageBox.No, QMessageBox.No)
if buttonReply == QMessageBox.Yes:
print('Yup')
else:
print('Nup')
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
ex.show()
sys.exit(app.exec_())
This is a sample of the .qss file i use. The images folder is a subfolder at same location as the .qss file:
QMenuBar
{
background-color: #302F2F;
color: silver;
}
QMenuBar::item
{
background: transparent;
}
QMenuBar::item:selected
{
background: transparent;
border: 1px solid #3A3939;
}
QMenuBar::item:pressed
{
border: 1px solid #3A3939;
background-color: #3d8ec9;
color: black;
margin-bottom:-1px;
padding-bottom:1px;
}
QMenu
{
border: 1px solid #3A3939;
color: silver;
margin: 1px;
}
QMenu::icon
{
margin: 1px;
}
QMenu::item
{
padding: 2px 2px 2px 25px;
margin-left: 5px;
border: 1px solid transparent; /* reserve space for selection border */
}
QMenu::item:selected
{
color: black;
}
QMenu::separator {
height: 2px;
background: lightblue;
margin-left: 10px;
margin-right: 5px;
}
QMenu::indicator {
width: 16px;
height: 16px;
}
/* non-exclusive indicator = check box style indicator
(see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked {
image: url(images/checkbox_unchecked.png);
}
QMenu::indicator:non-exclusive:unchecked:selected {
image: url(images/checkbox_unchecked_disabled.png);
}
QMenu::indicator:non-exclusive:checked {
image: url(images/checkbox_checked.png);
}
QMenu::indicator:non-exclusive:checked:selected {
image: url(images/checkbox_checked_disabled.png);
}
/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked {
image: url(images/radio_unchecked.png);
}
QMenu::indicator:exclusive:unchecked:selected {
image: url(images/radio_unchecked_disabled.png);
}
QMenu::indicator:exclusive:checked {
image: url(images/radio_checked.png);
}
QMenu::indicator:exclusive:checked:selected {
image: url(images/radio_checked_disabled.png);
}
QMenu::right-arrow {
margin: 5px;
image: url(images/right_arrow.png)
}
QWidget:disabled
{
color: #808080;
background-color: #302F2F;
}
QAbstractItemView
{
alternate-background-color: #3A3939;
color: silver;
border: 1px solid 3A3939;
border-radius: 2px;
padding: 1px;
}
QWidget:focus, QMenuBar:focus
{
border: 1px solid #78879b;
}
QTabWidget:focus, QCheckBox:focus, QRadioButton:focus, QSlider:focus
{
border: none;
}
QLineEdit
{
background-color: #201F1F;
padding: 2px;
border-style: solid;
border: 1px solid #3A3939;
border-radius: 2px;
color: silver;
}
QGroupBox {
border:1px solid #3A3939;
border-radius: 2px;
margin-top: 20px;
background-color: #302F2F;
color: silver;
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top center;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
QAbstractScrollArea
{
border-radius: 2px;
border: 1px solid #3A3939;
background-color: transparent;
}
QScrollBar:horizontal
{
height: 15px;
margin: 3px 15px 3px 15px;
border: 1px transparent #2A2929;
border-radius: 4px;
background-color: #2A2929;
}
QScrollBar::handle:horizontal
{
background-color: #605F5F;
min-width: 5px;
border-radius: 4px;
}
QScrollBar::add-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(images/right_arrow_disabled.png);
width: 10px;
height: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(images/left_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:on
{
border-image: url(images/right_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on
{
border-image: url(images/left_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
{
background: none;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
{
background: none;
}
QScrollBar:vertical
{
background-color: #2A2929;
width: 15px;
margin: 15px 3px 15px 3px;
border: 1px transparent #2A2929;
border-radius: 4px;
}
QScrollBar::handle:vertical
{
background-color: #605F5F;
min-height: 5px;
border-radius: 4px;
}
QScrollBar::sub-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(images/up_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(images/down_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:on
{
border-image: url(images/up_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on
{
border-image: url(images/down_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
{
background: none;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
background: none;
}
QTextEdit
{
background-color: #201F1F;
color: silver;
border: 1px solid #3A3939;
}
QPlainTextEdit
{
background-color: #201F1F;;
color: silver;
border-radius: 2px;
border: 1px solid #3A3939;
}
QHeaderView::section
{
background-color: #3A3939;
color: silver;
padding-left: 4px;
border: 1px solid #6c6c6c;
}
QSizeGrip {
image: url(images/sizegrip.png);
width: 12px;
height: 12px;
}
QMainWindow
{
background-color: #302F2F;
}
QMainWindow::separator
{
background-color: #302F2F;
color: white;
padding-left: 4px;
spacing: 2px;
border: 1px dashed #3A3939;
}
QMainWindow::separator:hover
{
background-color: #787876;
color: white;
padding-left: 4px;
border: 1px solid #3A3939;
spacing: 2px;
}
QMenu::separator
{
height: 1px;
background-color: #3A3939;
color: white;
padding-left: 4px;
margin-left: 10px;
margin-right: 5px;
}
QFrame
{
border-radius: 2px;
border: 1px solid #444;
}
QFrame[frameShape="0"]
{
border-radius: 2px;
border: 1px transparent #444;
}
QStackedWidget
{
background-color: #302F2F;
border: 1px transparent black;
}
QToolBar {
border: 1px transparent #393838;
background: 1px solid #302F2F;
font-weight: bold;
}
QToolBar::handle:horizontal {
image: url(images/Hmovetoolbar.png);
}
QToolBar::handle:vertical {
image: url(images/Vmovetoolbar.png);
}
QToolBar::separator:horizontal {
image: url(images/Hsepartoolbar.png);
}
QToolBar::separator:vertical {
image: url(images/Vsepartoolbars.png);
}
QPushButton
{
color: silver;
background-color: #302F2F;
border-width: 2px;
border-color: #4A4949;
border-style: solid;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px;
/* outline: none; */
/* min-width: 40px; */
}
QPushButton:disabled
{
background-color: #302F2F;
border-width: 2px;
border-color: #3A3939;
border-style: solid;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
/*border-radius: 2px;*/
color: #808080;
}
QPushButton:focus {
background-color: #3d8ec9;
color: white;
}
QComboBox
{
selection-background-color: #3d8ec9;
background-color: #201F1F;
border-style: solid;
border: 1px solid #3A3939;
border-radius: 2px;
padding: 2px;
min-width: 75px;
}
QPushButton:checked{
background-color: #4A4949;
border-color: #6A6969;
}
QPushButton:hover {
border: 2px solid #78879b;
color: silver;
}
QComboBox:hover, QAbstractSpinBox:hover,QLineEdit:hover,QTextEdit:hover,QPlainTextEdit:hover,QAbstractView:hover,QTreeView:hover
{
border: 1px solid #78879b;
color: silver;
}
QComboBox:on
{
background-color: #626873;
padding-top: 3px;
padding-left: 4px;
selection-background-color: #4a4a4a;
}
QComboBox QAbstractItemView
{
background-color: #201F1F;
border-radius: 2px;
border: 1px solid #444;
selection-background-color: #3d8ec9;
color: silver;
}
QComboBox::drop-down
{
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 0px;
border-left-color: darkgray;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow
{
image: url(images/down_arrow_disabled.png);
}
QComboBox::down-arrow:on, QComboBox::down-arrow:hover,
QComboBox::down-arrow:focus
{
image: url(images/down_arrow.png);
}
QPushButton:pressed
{
background-color: #484846;
}
QAbstractSpinBox {
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #3A3939;
background-color: #201F1F;
color: silver;
border-radius: 2px;
min-width: 75px;
}
QAbstractSpinBox:up-button
{
background-color: transparent;
subcontrol-origin: border;
subcontrol-position: top right;
}
QAbstractSpinBox:down-button
{
background-color: transparent;
subcontrol-origin: border;
subcontrol-position: bottom right;
}
QAbstractSpinBox::up-arrow,QAbstractSpinBox::up-arrow:disabled,QAbstractSpinBox::up-arrow:off {
image: url(images/up_arrow_disabled.png);
width: 10px;
height: 10px;
}
QAbstractSpinBox::up-arrow:hover
{
image: url(images/up_arrow.png);
}
QAbstractSpinBox::down-arrow,QAbstractSpinBox::down-arrow:disabled,QAbstractSpinBox::down-arrow:off
{
image: url(images/down_arrow_disabled.png);
width: 10px;
height: 10px;
}
QAbstractSpinBox::down-arrow:hover
{
image: url(images/down_arrow.png);
}
QLabel
{
border: 0px solid black;
}
QTabWidget{
border: 1px transparent black;
}
QTabWidget::pane {
border: 1px solid #444;
border-radius: 3px;
padding: 3px;
}
QTabBar
{
qproperty-drawBase: 0;
left: 5px; /* move to the right by 5px */
}
QTabBar:focus
{
border: 0px transparent black;
}
QTabBar::close-button {
image: url(images/close.png);
background: transparent;
}
QTabBar::close-button:hover
{
image: url(images/close-hover.png);
background: transparent;
}
QTabBar::close-button:pressed {
image: url(images/close-pressed.png);
background: transparent;
}
/* TOP TABS */
QTabBar::tab:top {
color: #b1b1b1;
border: 1px solid #4A4949;
border-bottom: 1px transparent black;
background-color: #302F2F;
padding: 5px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
QTabBar::tab:top:!selected
{
color: #b1b1b1;
background-color: #201F1F;
border: 1px transparent #4A4949;
border-bottom: 1px transparent #4A4949;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
QTabBar::tab:top:!selected:hover {
background-color: #48576b;
}
/* BOTTOM TABS */
QTabBar::tab:bottom {
color: #b1b1b1;
border: 1px solid #4A4949;
border-top: 1px transparent black;
background-color: #302F2F;
padding: 5px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
QTabBar::tab:bottom:!selected
{
color: #b1b1b1;
background-color: #201F1F;
border: 1px transparent #4A4949;
border-top: 1px transparent #4A4949;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
QTabBar::tab:bottom:!selected:hover {
background-color: #78879b;
}
/* LEFT TABS */
QTabBar::tab:left {
color: #b1b1b1;
border: 1px solid #4A4949;
border-left: 1px transparent black;
background-color: #302F2F;
padding: 5px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
QTabBar::tab:left:!selected
{
color: #b1b1b1;
background-color: #201F1F;
border: 1px transparent #4A4949;
border-right: 1px transparent #4A4949;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
QTabBar::tab:left:!selected:hover {
background-color: #48576b;
}
/* RIGHT TABS */
QTabBar::tab:right {
color: #b1b1b1;
border: 1px solid #4A4949;
border-right: 1px transparent black;
background-color: #302F2F;
padding: 5px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
QTabBar::tab:right:!selected
{
color: #b1b1b1;
background-color: #201F1F;
border: 1px transparent #4A4949;
border-right: 1px transparent #4A4949;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
QTabBar::tab:right:!selected:hover {
background-color: #48576b;
}
QTabBar QToolButton::right-arrow:enabled {
image: url(images/right_arrow.png);
}
QTabBar QToolButton::left-arrow:enabled {
image: url(images/left_arrow.png);
}
QTabBar QToolButton::right-arrow:disabled {
image: url(images/right_arrow_disabled.png);
}
QTabBar QToolButton::left-arrow:disabled {
image: url(images/left_arrow_disabled.png);
}
QDockWidget {
border: 1px solid #403F3F;
titlebar-close-icon: url(images/close.png);
titlebar-normal-icon: url(images/undock.png);
}
QDockWidget::close-button, QDockWidget::float-button {
border: 1px solid transparent;
border-radius: 2px;
background: transparent;
}
QDockWidget::close-button:hover, QDockWidget::float-button:hover {
background: rgba(255, 255, 255, 10);
}
QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
padding: 1px -1px -1px 1px;
background: rgba(255, 255, 255, 10);
}
QTreeView, QListView, QTextBrowser, AtLineEdit, AtLineEdit::hover {
border: 1px solid #444;
background-color: silver;
border-radius: 3px;
margin-left: 3px;
color: black;
}
QTreeView:branch:selected, QTreeView:branch:hover {
background: url(images/transparent.png);
}
QTreeView::branch:has-siblings:!adjoins-item {
border-image: url(images/transparent.png);
}
QTreeView::branch:has-siblings:adjoins-item {
border-image: url(images/transparent.png);
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
border-image: url(images/transparent.png);
}
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
image: url(images/branch_closed.png);
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings {
image: url(images/branch_open.png);
}
QTreeView::branch:has-children:!has-siblings:closed:hover,
QTreeView::branch:closed:has-children:has-siblings:hover {
image: url(images/branch_closed-on.png);
}
QTreeView::branch:open:has-children:!has-siblings:hover,
QTreeView::branch:open:has-children:has-siblings:hover {
image: url(images/branch_open-on.png);
}
QListView::item:!selected:hover, QListView::item:!selected:hover, QTreeView::item:!selected:hover {
background: rgba(0, 0, 0, 0);
outline: 0;
color: #FFFFFF
}
QListView::item:selected:hover, QListView::item:selected:hover, QTreeView::item:selected:hover {
background: #3d8ec9;
color: #FFFFFF;
}
QSlider::groove:horizontal {
border: 1px solid #3A3939;
height: 8px;
background: #201F1F;
margin: 2px 0;
border-radius: 2px;
}
QSlider::handle:horizontal {
background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0.0 silver, stop: 0.2 #a8a8a8, stop: 1 #727272);
border: 1px solid #3A3939;
width: 14px;
height: 14px;
margin: -4px 0;
border-radius: 2px;
}
QSlider::groove:vertical {
border: 1px solid #3A3939;
width: 8px;
background: #201F1F;
margin: 0 0px;
border-radius: 2px;
}
QSlider::handle:vertical {
background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.0 silver,
stop: 0.2 #a8a8a8, stop: 1 #727272);
border: 1px solid #3A3939;
width: 14px;
height: 14px;
margin: 0 -4px;
border-radius: 2px;
}
QToolButton {
/* background-color: transparent; */
border: 2px transparent #4A4949;
border-radius: 4px;
background-color: dimgray;
margin: 2px;
padding: 2px;
}
QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
padding-right: 20px; /* make way for the popup button */
border: 2px transparent #4A4949;
border-radius: 4px;
}
QToolButton[popupMode="2"] { /* only for InstantPopup */
padding-right: 10px; /* make way for the popup button */
border: 2px transparent #4A4949;
}
QToolButton:hover, QToolButton::menu-button:hover {
border: 2px solid #78879b;
}
QToolButton:checked, QToolButton:pressed,
QToolButton::menu-button:pressed {
background-color: #4A4949;
border: 2px solid #78879b;
}
/* the subcontrol below is used only in the InstantPopup or DelayedPopup mode */
QToolButton::menu-indicator {
image: url(images/down_arrow.png);
top: -7px; left: -2px; /* shift it a bit */
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
border: 1px transparent #4A4949;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/* 16px width + 4px for border = 20px allocated above */
width: 16px;
outline: none;
}
QToolButton::menu-arrow {
image: url(images/down_arrow.png);
}
QToolButton::menu-arrow:open {
top: 1px; left: 1px; /* shift it a bit */
border: 1px solid #3A3939;
}
QPushButton::menu-indicator {
subcontrol-origin: padding;
subcontrol-position: bottom right;
left: 4px;
}
QTableView
{
border: 1px solid #444;
gridline-color: #6c6c6c;
background-color: #201F1F;
}
QTableView, QHeaderView
{
border-radius: 0px;
}
QTableView::item:pressed, QListView::item:pressed, QTreeView::item:pressed {
background: #78879b;
color: #FFFFFF;
}
QTableView::item:selected:active, QTreeView::item:selected:active, QListView::item:selected:active {
background: #3d8ec9;
color: #FFFFFF;
}
QHeaderView
{
border: 1px transparent;
border-radius: 2px;
margin: 0px;
padding: 0px;
}
QHeaderView::section {
background-color: #3A3939;
color: silver;
padding: 4px;
border: 1px solid #6c6c6c;
border-radius: 0px;
text-align: center;
}
QHeaderView::section::vertical::first, QHeaderView::section::vertical::only-one
{
border-top: 1px solid #6c6c6c;
}
QHeaderView::section::vertical
{
border-top: transparent;
}
QHeaderView::section::horizontal::first, QHeaderView::section::horizontal::only-one
{
border-left: 1px solid #6c6c6c;
}
QHeaderView::section::horizontal
{
border-left: transparent;
}
QHeaderView::section:checked
{
color: white;
background-color: #5A5959;
}
/* style the sort indicator */
QHeaderView::down-arrow {
image: url(images/down_arrow.png);
}
QHeaderView::up-arrow {
image: url(images/up_arrow.png);
}
QTableCornerButton::section {
background-color: #3A3939;
border: 1px solid #3A3939;
border-radius: 2px;
}
QToolBox {
padding: 3px;
border: 1px transparent black;
}
QToolBox::tab {
color: #b1b1b1;
background-color: #302F2F;
border: 1px solid #4A4949;
border-bottom: 1px transparent #302F2F;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
QToolBox::tab:selected { /* italicize selected tabs */
font: italic;
background-color: #302F2F;
border-color: #3d8ec9;
}
QStatusBar::item {
border: 1px solid #3A3939;
border-radius: 2px;
}
QFrame[height="3"], QFrame[width="3"] {
background-color: #AAA;
}
QSplitter::handle {
border: 1px dashed #3A3939;
}
QSplitter::handle:hover {
background-color: #787876;
border: 1px solid #3A3939;
}
QSplitter::handle:horizontal {
width: 1px;
}
QSplitter::handle:vertical {
height: 1px;
}
QListWidget {
background-color: silver;
border-radius: 5px;
margin-left: 5px;
}
QListWidget::item {
color: black;
}
QMessageBox {
messagebox-critical-icon : url(images/critical.png);
messagebox-information-icon : url(images/information.png);
messagebox-question-icon : url(question.png);
messagebox-warning-icon: : url(images/warning.png);
}
ColorButton::enabled {
border-radius: 0px;
border: 1px solid #444444;
}
ColorButton::disabled {
border-radius: 0px;
border: 1px solid #AAAAAA;
}


Probably the best way to do this is to use QDir.addSearchPath, which would allow you to use a simple alias in your stylesheet like this:
QComboBox::down-arrow
{
image: url(images:down_arrow_disabled.png);
}
The alias needs to be created at the beginning of the script, like this:
if __name__ == '__main__':
import os
# use script directory as root
root = os.path.dirname(os.path.abspath(__file__))
QDir.addSearchPath('themes', os.path.join(root, 'themes'))
QDir.addSearchPath('images', os.path.join(root, 'themes/images'))
app = QApplication(sys.argv)
file = QFile('themes:DarkBlue.qss')
file.open(QFile.ReadOnly | QFile.Text)
app.setStyleSheet(str(file.readAll(), 'utf-8'))
...
Note that this mechanism is also used to load the stylesheet itself (although it's not strictly necessary). It's best to avoid using normal relative paths, because they depend on the current working directory which can be changed independently. It's very unlikely to be the same every time your application is run, so you should never rely on it.

Related

Addition of header changes layout in dash

I'm sure this is something super simple, but I'm trying to create a dashboard in python's dash. I have no prior experience in dash or html. I've managed to create div boxes in the layout I want, but when I add in a header to one of the div's, it completely destroys my layout (See attached screenshots). Can someone please help me understand where I've gone wrong?
Dashboard before div
import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State
app = dash.Dash()
app.layout = html.Div(
[
html.H1(
children="ML Dashboard",
className="main_title",
style={
"color": "black",
"text-align": "center"
},
),
html.Div(
[
html.Div(
[
],
style={
"background-color": "#096484",
"height": "5vh",
"width": "20vw",
"margin-left": "9vw",
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "39vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "3vh"
}
),
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "1.5vh"
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
],
style={
"background-color": "#52ACCC",
"height": "95vh",
"width": "95vw",
"margin-left": "2vw"
}
)
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=8080, debug=True)
Dashboard after div
import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State
app = dash.Dash()
app.layout = html.Div(
[
html.H1(
children="ML Dashboard",
className="main_title",
style={
"color": "black",
"text-align": "center"
},
),
html.Div(
[
html.Div(
[
html.H1(
children="PIPELINE",
className="title_1",
style={
"color": "white",
"text-align": "center"
},
),
],
style={
"background-color": "#096484",
"height": "5vh",
"width": "20vw",
"margin-left": "9vw",
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "39vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "3vh"
}
),
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "1.5vh"
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
],
style={
"background-color": "#52ACCC",
"height": "95vh",
"width": "95vw",
"margin-left": "2vw"
}
)
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=8080, debug=True)

Exciting that you're getting started with Dash — it's an awesome web framework and the fact that it's all Python is a win-win; great way to get started.
Couple things though I'd point out:
I think you're going a little overboard with the nested div's, unless you're absolutely attached to the exact style you have shared in your example, I'd recommend just using one main Div for the most part
It's a particular Dash-specific quirk that all CSS style keywords must be written in "camel case" (e.g. camelCase); so, actually none of your margin or any other style settings containing hyphens were actually being implemented/rendered
I've provided an example template you're free to use, which I've basically copy pasted and simplified down rather hastily from a work in progress open source github repo I'm working on called "dash-webapp-template"!
It looks like this, maybe this makes sense to you and you could use it as a jumping off point?
#import url('https://fonts.googleapis.com/css?family=Cinzel:300,400,500,600,700|Muli:200,300,400,500,600|Open+Sans:200,300,400,500,600|Oswald:200,300,400,500,600&subset=latin-ext');
#import url('https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i');
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800&subset=latin-ext');
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:200,300,400,500');
a { color: rgb(146, 146, 146); cursor: pointer; text-decoration: none; -o-transition: color 2.0s ease-out, background .1s ease-in; -ms-transition: color 2.0s ease-out, background .1s ease-in; -moz-transition: color 2.0s ease-out, background .1s ease-in; -webkit-transition: color 2.0s ease-out, background .1s ease-in; transition: all 1.67s ease-out; padding: 10px 10px 10px 10px }
a.fails { color: rgb(146, 146, 146); }
a.success { box-shadow: inset 0px 0px 20px 2px #96ffa2ab, 0px 0px 0px 4px rgb(165, 255, 200); border-radius: 18px; padding: 4px 50px 4px 10px; color: #147b01 !important; }
a.tool-ref { background: #dcdcdc4f; padding: 1px 3px 2px 3px; font-weight: 600; vertical-align: bottom; border-radius: 5px; color: rgb(35, 84, 148); border: 1px inset transparent }
a.tool-ref:hover { background: #fff; border: 1px outset #00ffc8; color: #3df5b4; text-decoration: underline }
a:hover, a:focus { color: #00efb8 !important; transition-duration: 2.75 s !important; transition-property: transform !important }
a:hover:before, a:focus:before, span:hover:before { pointer-events: none; position: absolute; z-index: -1; content: ''; opacity: .75; color: radial-gradient(ellipse at center, rgba(0, 0, 0, .11) 50 %, rgba(0, 0, 0, 0.30) 90 %) !important; transition-duration: 1.5 s; transition-property: transform opacity 0.95 }
blockquote { border-left: 4px lightgrey solid; padding-left: 1rem; margin-top: 2rem; margin-bottom: 2rem; margin-left: 0rem }
body { font-size: 1.15rem; line-height: 1.1; font-weight: 400; font-family: "Oswald", "Muli", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(50, 50, 50) }
body { margin: 0; overflow-x: hidden; text-align: center }
button#clear-pipeline { background-color: #cccccc24 !important; color: #000000bd !important; border: 2px outset; border-color: #d4d4d4a3; }
button#initiate-pipeline { font-size: 90%; padding: .67% 6% .67% 6%; border-width: 1px; margin: 2%; mix-blend-mode: color; letter-spacing: 8px; text-transform: uppercase; border-radius: 200px }
button#initiate-pipeline:hover { border-color: #00ffb54a; border-width: 0.5px; box-shadow: inset 0px -30px 0px -5px #efefef4a; background-blend-mode: exclusion; background: #ffffff5e; animation: pact-gradient-text-flow 5s infinite linear; }
button#refresh-downloads-links:hover { border: 2px inset #d9d9d921 }
button#sign-on-submit, button#log-out-submit, button#refresh-downloads-links, button.submit-buttons { background: rgb(65, 0, 255); mix-blend-mode: luminosity; margin-top: 1px; border: 2px outset #aaa; font-size: 60%; border-radius: 100px; letter-spacing: .5rem; display: inline-flex; }
button#sign-on-submit:hover, button#log-out-submit:hover, button.submit-buttons:hover { background-color: rgba(117, 117, 117, 0.5) !important; filter: invert(1) brightness(0.75) contrast(1.5) saturate(2) }
button, .button { margin-bottom: 0rem }
button, .button, button:focus { outline: none !important }
code { font-family: 'Roboto Mono', monospace; font-size: 0.85rem !important }
div.dash-spreadsheet, .dash-freeze-left, .dash-spreadsheet, .dash-spreadsheet-container, .dash-freeze-left, .dash-grow { max-width: 100% !important }
h1 { font-size: 3.5rem; font-family: 'Montserrat'; text-rendering: optimizeLegibility; color: #0d04a5; font-weight: 500; text-decoration: none; border-bottom: 0.0px solid gray; line-height: 4rem; text-decoration: underline }
h2 { font-family: 'Oswald', serif; color: var(--pph-color-8); cursor: default; font-weight: 300; font-size: 2rem; }
h3 { font-size: 2.0rem; font-family: 'Montserrat', sans-serif; font-weight: 300; color: rgb(32, 92, 188); cursor: default }
h4 { font-size: 1.5rem; font-family: 'Oswald', sans-serif; color: var(--pph-color-57); font-weight: 400; cursor: default }
h5 { font-size: 1.2rem; font-family: 'Muli', sans-serif; cursor: default }
h6 { font-size: 1.1rem; color: #333; font-weight: 400 }
header.a:link { color: rgb(18, 116, 165) }
hr { margin-top: 2%; justify-content: center; margin-bottom: 3% }
hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1 }
input, textarea, select, fieldset { margin-bottom: 0rem }
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected { background-color: #ffffff00 !important }
label, legend { display: block; margin-bottom: 0px }
label>.label-body { display: inline-block }
p { margin-top: 0 }
p, h2, h4, h5, h6 { margin-top: .5%; margin-bottom: 1% }
p, ul, ol { margin-bottom: 0.75rem }
pre, dl, figure, table, form { margin-bottom: 0rem }
section.wrapper { padding: 10px 0 }
span.menubar-title:hover { color: rgb(13, 4, 145) !important }
.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; padding: 0 25px; color: #000000; text-align: center; font-size: 14px; font-weight: 500; font-family: "Cinzel", serif !important; line-height: 32px; text-decoration: none; white-space: nowrap; background-color: #ffffffcc !important; border-radius: 30px; border: 1px ridge #00000050; cursor: pointer; box-sizing: border-box }
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #00000075 !important; background-color: #33C3F050; border-color: #33C3F0 }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #00000075 !important; background-color: transparent; border-color: #1EAEDB }
.button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #5C5D86; border-color: #00000075 !important }
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { border-color: #00FFC050; background: #00000075 }
.fader-line-long { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 650, from(rgba(200, 210, 220, 0.5)), to(#fff0)); }
.fader-line-short { display: flex; border: none; color: #fff0; height: 1px; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(rgba(120, 120, 150, 0.5)), to(#fff0)) }
.hr-style-2 { border-top: 3px double #8c8b8b; margin: 10px 10px 10px 10px; width: 67% }
.hvr-float-shadow, .workflow-css label { display: inline-block; vertical-align: middle; position: relative; -webkit-transition-duration: 1.0s; transition-duration: 1.0s; -webkit-transition-property: transform; transition-property: transform; text-rendering: optimizeLegibility }
.hvr-float-shadow:before, .workflow-css label:before { pointer-events: none; position: absolute; z-index: 99; content: ''; top: 180%; left: -10%; height: 6px; width: 120%; opacity: 0.05; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity }
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active, .workflow-css label:hover, .workflow-css label:focus, .workflow-css label:active { -webkit-transform: translateY(-1px)translateY(-1px); color: rgba(0, 215, 198, 1.0); opacity: 0.99; animation-name: anim-rainbow-flow-keys; animation-duration: 1s; animation-iteration-count: infinite; mix-blend-mode: hard-light }
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before, .workflow-css label:hover:before, .workflow-css label:focus:before, .workflow-css label:active:before { opacity: 0.9; -webkit-transform: translateY(-1px); transform: translateY(1px) }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h1>ML Dashboard</h1>
<h2>PIPELINE</h2>
<hr style="margin-left: 25%; width: 50%;">
<h3 style="margin-top: -10px; text-align: center;">Step One: Upload [e.g., insert expected data input files].</h3>
<h2 style="margin-top: -0.75%;">Then, click “Launch Pipeline” to launch analysis.</h2>
<hr style="margin-left: 25%; width: 50%;">
<div id="upload-data">
<div class="" aria-disabled="false" style="position: relative;">
<div style="background-color: rgba(255, 255, 255, 0.5); border-color: transparent; border-radius: 100px; border-style: solid; border-width: 1px; box-shadow: rgba(0, 0, 50, 0.16) 0px 1px 5px 2px; margin: 2% 15%; padding: 0.5%; text-align: center;">Drag/Drop ⤓ file(s) here —or—<a class="hvr-float-shadow" style="font-weight: 400; margin-bottom: 5px;">📂 Select from your computer</a>
<h6 style="font-family: Cinzel, serif; font-size: 70%; letter-spacing: 1px; text-align: center;">(Other Info/Note)</h6>
<h6 style="font-family: Cinzel, serif; letter-spacing: 4px; margin-top: -8px; text-align: center;">(...Note details / description...)</h6><span><h5 style="font-size: 80%; margin-left: 27.5%; width: 45%;">(Optional supplementary message...)</h5></span></div><input type="file" multiple="" autocomplete="off" style="position: absolute; inset: 0px; opacity: 1e-05; pointer-events: none;"></div>
</div><br><br>
<div style="position: relative; text-align: center;"><button class="hvr-float-shadow" id="initiate-pipeline">—Launch Pipeline—</button><br></div>
<h5 id="pipeline-progress-disclaimer" style="color: rgba(0, 0, 0, 0.5); font-size: 0.85rem; margin-left: 22.5%; text-align: justify; width: 55%;">
<div>
<blockquote> ⚠ Cautionary notes / hints / advice / warnings - #1</blockquote>
</div>
</h5><br><button id="clear-pipeline">—Clear Current QC Results Output—</button><br></div>
</body>
</html>
import dash
import pandas as pd
from dash import dcc
from dash import html
from dash.dependencies import Input
from dash.dependencies import Output
from dash.dependencies import State
app = dash.Dash()
app.layout = html.Div(
[
html.H1("ML Dashboard"),
html.H2("PIPELINE"),
html.Hr(style={"width": "50%", "marginLeft": "25%"}),
html.H3(
"Step One: Upload [e.g., insert expected data input files].",
style={"textAlign": "center", "marginTop": "-10px"},
),
html.H2(
"Then, click “Launch Pipeline” to launch analysis.",
style={"marginTop": "-0.75%"},
),
html.Hr(style={"width": "50%", "marginLeft": "25%"}),
dcc.Upload(
id="upload-data",
children=html.Div(
[
"Drag/Drop ⤓ file(s) here —or—",
html.A(
"📂 Select from your computer",
className="hvr-float-shadow",
style={"fontWeight": "400", "marginBottom": "5px"},
),
html.H6(
"(Other Info/Note)",
style={
"textAlign": "center",
"letterSpacing": "1px",
"fontFamily": "'Cinzel', serif",
"fontSize": "70%",
},
),
html.H6(
"(...Note details / description...)",
style={
"textAlign": "center",
"letterSpacing": "4px",
"fontFamily": "'Cinzel', serif",
"marginTop": "-8px",
},
),
html.Span(
html.H5(
"(Optional supplementary message...)",
style={
"width": "45%",
"marginLeft": "27.5%",
"fontSize": "80%",
},
)
),
],
style={
"borderWidth": "1px",
"borderStyle": "solid",
"borderRadius": "100px",
"textAlign": "center",
"margin": "2% 15%",
"boxShadow": "0px 1px 5px 2px rgba(0, 0, 50, 0.16)",
"borderColor": "transparent",
"padding": "0.5%",
"backgroundColor": "rgba(255,255,255,0.5)",
},
),
multiple=True, # (Allow multiple files to be uploaded)
),
html.Br(),
html.Br(),
html.Div(
[
html.Button(
"—Launch Pipeline—",
id="initiate-pipeline",
n_clicks=0,
className="hvr-float-shadow",
),
html.Br(),
],
style={"textAlign": "center", "position": "relative"},
),
html.H5(
html.Div(
[
html.Blockquote(
" ⚠ Cautionary notes / hints / advice / warnings - #1"
),
]
),
style={
"fontSize": "0.85rem",
"color": "#00000080",
"width": "55%",
"marginLeft": "22.5%",
"textAlign": "justify",
},
id="pipeline-progress-disclaimer",
),
html.Br(),
html.Button(
"—Clear Current QC Results Output—",
id="clear-pipeline",
n_clicks=0,
),
html.Br(),
]
)
if __name__ == "__main__":
app.run_server(
host="0.0.0.0", port=8080, debug=True, dev_tools_hot_reload=True
)
Here's the file structure following Dash docs recommended convention, and which I used here:
.
|-- [1.9K Nov 19 10:42] app.py
`-- [ 96 Nov 19 10:48] assets
`-- [ 24K Nov 19 11:02] custom.css
1 directory, 3 files
where all the CSS in the SO in-answer HTML/CSS snippet CSS simply goes cutcopy into the custom.css file, specifically under a subdir called "assets" (which Dash is programmed to lookout for).

Getting incorrect response from Flask using requests

I have an endpoint which works fine. In the browser, I just get a json response when I visit the api, which has no authentication currently.
When I do this:
headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36'}
products = requests.get('http://myserver.mycompany.net:5000/api/read/products', headers=headers)
app.app.logger.info("PRODUCTS")
app.app.logger.info(products.text)
My response looks like it is just serving back a html page?!
[2020-10-21 17:12:46,760] INFO in api: PRODUCTS
[2020-10-21 17:12:46,761] INFO in api: <!--samlchecks_get.html --><!DOCTYPE html><html><head><title>Welcome To Zscaler Directory Authentication</title><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">body { background-color: #FFF; font-family: Arial, sans-serif; font-size: 12px; text-align: center; color: #4B4F54; overflow: hidden; margin: 0;}a { color: #009dd0; cursor: pointer; text-decoration: none;}form { width: 100%; height: 100%; margin: 0; padding: 0;}input { font-family: Arial; font-size: 100%; margin: 0; width: 100%; vertical-align: top; color: #424242; display: inline-block; border: none; padding: 0; text-align: left; height: 100%; width: calc(100% -35px);}table { margin-top: 10px; text-align: center; background-color: white;}table.table-company-logo { background-color: #e3e3e3;}table.table-upper { border-radius: 10px;}table.table-lower { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #f3f3f3;}table.table-field-label { margin-bottom: 2px;}table.table-field-input div.input-wrapper { display: block; border-color: #2a2c30;; width: inherit; padding-left: 10px;}table.table-field-input .input-wrapper.disabled { border-color: #cfd0d1;}table.zsc-company { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #f3f3f3;}table.zsc-company td { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; font-size: 11px; color: #939393;}.table-hal
When I visit the endpoint directly in the browser, I get a json response.

How to remove specific section/snippet from a string in Python

I have a PyQt stylesheet given as a str type where I insert it into app.setStyleSheet() to change CSS properties. I want to remove a specific section of code within this string, specifically this section:
QSlider::groove:horizontal {
background: #32414B;
border: 1px solid #32414B;
height: 4px;
margin: 0px;
border-radius: 4px;
}
This is the entire stylesheet string
stylesheet = '''
/* QWidget ---------------------------------------------------------------- */
QWidget {
background-color: #19232D;
border: 0px solid #32414B;
padding: 0px;
color: #F0F0F0;
selection-background-color: #1464A0;
selection-color: #F0F0F0;
}
QWidget:disabled {
background-color: #19232D;
color: #787878;
selection-background-color: #14506E;
selection-color: #787878;
}
QWidget:item:selected {
background-color: #1464A0;
}
QWidget:item:hover {
background-color: #148CD2;
color: #32414B;
}
/* QMainWindow ------------------------------------------------------------ */
/* This adjusts the splitter in the dock widget, not qsplitter */
QMainWindow::separator {
background-color: #32414B;
border: 0 solid #19232D;
spacing: 0;
padding: 2px;
}
QMainWindow::separator:hover {
background-color: #505F69;
border: 0px solid #148CD2;
}
QMainWindow::separator:horizontal {
width: 5px;
margin-top: 2px;
margin-bottom: 2px;
image: url(:/qss_icons/rc/Vsepartoolbar.png);
}
QMainWindow::separator:vertical {
height: 5px;
margin-left: 2px;
margin-right: 2px;
image: url(:/qss_icons/rc/Hsepartoolbar.png);
}
/* QToolTip --------------------------------------------------------------- */
QToolTip {
background-color: #148CD2;
border: 1px solid #19232D;
color: #19232D;
padding: 0; /*remove padding, for fix combo box tooltip*/
opacity: 230; /*reducing transparency to read better*/
}
/* QStatusBar ------------------------------------------------------------- */
QStatusBar {
border: 1px solid #32414B;
background: #32414B; /*fixes spyder #9120,#9121*/
}
QStatusBar QToolTip {
background-color: #148CD2;
border: 1px solid #19232D;
color: #19232D;
padding: 0; /*remove padding, for fix combo box tooltip*/
opacity: 230; /*reducing transparency to read better*/
}
QStatusBar QLabel {
background-color: transparent; /*fixes spyder #9120,#9121*/
}
/* QCheckBox -------------------------------------------------------------- */
QCheckBox {
background-color: #19232D;
color: #F0F0F0;
spacing: 4px;
outline: none;
padding-top: 4px;
padding-bottom: 4px;
}
QCheckBox:focus {
border: none;
}
QCheckBox QWidget:disabled {
background-color: #19232D;
color: #787878;
}
QCheckBox::indicator {
margin-left: 4px;
width: 16px;
height: 16px;
}
QCheckBox::indicator:unchecked {
image: url(:/qss_icons/rc/checkbox_unchecked.png);
}
QCheckBox::indicator:unchecked:hover,
QCheckBox::indicator:unchecked:focus,
QCheckBox::indicator:unchecked:pressed {
border: none;
image: url(:/qss_icons/rc/checkbox_unchecked_focus.png);
}
QCheckBox::indicator:unchecked:disabled {
image: url(:/qss_icons/rc/checkbox_unchecked_disabled.png);
}
QCheckBox::indicator:checked {
image: url(:/qss_icons/rc/checkbox_checked.png);
}
QCheckBox::indicator:checked:hover,
QCheckBox::indicator:checked:focus,
QCheckBox::indicator:checked:pressed {
border: none;
image: url(:/qss_icons/rc/checkbox_checked_focus.png);
}
QCheckBox::indicator:checked:disabled{
image: url(:/qss_icons/rc/checkbox_checked_disabled.png);
}
QCheckBox::indicator:indeterminate {
image: url(:/qss_icons/rc/checkbox_indeterminate.png);
}
QCheckBox::indicator:indeterminate:disabled {
image: url(:/qss_icons/rc/checkbox_indeterminate_disabled.png);
}
QCheckBox::indicator:indeterminate:focus,
QCheckBox::indicator:indeterminate:hover,
QCheckBox::indicator:indeterminate:pressed {
image: url(:/qss_icons/rc/checkbox_indeterminate_focus.png);
}
/* QGroupBox -------------------------------------------------------------- */
QGroupBox {
font-weight: bold;
border: 1px solid #32414B;
border-radius: 4px;
padding: 4px;
margin-top: 16px;
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top left;
left: 3px;
padding-left: 3px;
padding-right: 5px;
padding-top: 8px;
padding-bottom: 16px;
}
QGroupBox::indicator {
margin-left: 4px;
width: 16px;
height: 16px;
}
QGroupBox::indicator {
margin-left: 2px;
}
QGroupBox::indicator:unchecked:hover,
QGroupBox::indicator:unchecked:focus,
QGroupBox::indicator:unchecked:pressed {
border: none;
image: url(:/qss_icons/rc/checkbox_unchecked_focus.png);
}
QGroupBox::indicator:checked:hover,
QGroupBox::indicator:checked:focus,
QGroupBox::indicator:checked:pressed {
border: none;
image: url(:/qss_icons/rc/checkbox_checked_focus.png);
}
QGroupBox::indicator:checked:disabled {
image: url(:/qss_icons/rc/checkbox_checked_disabled.png);
}
QGroupBox::indicator:unchecked:disabled {
image: url(:/qss_icons/rc/checkbox_unchecked_disabled.png);
}
/* QRadioButton ----------------------------------------------------------- */
QRadioButton {
background-color: #19232D;
color: #F0F0F0;
spacing: 0;
padding: 0;
border: none;
outline: none;
}
QRadioButton:focus {
border: none;
}
QRadioButton:disabled {
background-color: #19232D;
color: #787878;
border: none;
outline: none;
}
QRadioButton QWidget {
background-color: #19232D;
color: #F0F0F0;
spacing: 0px;
padding: 0px;
outline: none;
border: none;
}
QRadioButton::indicator {
border: none;
outline: none;
margin-bottom: 2px;
width: 25px;
height: 25px;
}
QRadioButton::indicator:unchecked {
image: url(:/qss_icons/rc/radio_unchecked.png);
}
QRadioButton::indicator:unchecked:hover,
QRadioButton::indicator:unchecked:focus,
QRadioButton::indicator:unchecked:pressed {
border: none;
outline: none;
image: url(:/qss_icons/rc/radio_unchecked_focus.png);
}
QRadioButton::indicator:checked {
border: none;
outline: none;
image: url(:/qss_icons/rc/radio_checked.png);
}
QRadioButton::indicator:checked:hover,
QRadioButton::indicator:checked:focus,
QRadioButton::indicator:checked:pressed {
border: none;
outline: none;
image: url(:/qss_icons/rc/radio_checked_focus.png);
}
QRadioButton::indicator:checked:disabled {
outline: none;
image: url(:/qss_icons/rc/radio_checked_disabled.png);
}
QRadioButton::indicator:unchecked:disabled {
image: url(:/qss_icons/rc/radio_unchecked_disabled.png);
}
/* QMenuBar --------------------------------------------------------------- */
QMenuBar {
background-color: #32414B;
padding: 2px;
border: 1px solid #19232D;
color: #F0F0F0;
}
QMenuBar:focus {
border: 1px solid #148CD2;
}
QMenuBar::item {
background: transparent;
padding: 4px;
}
QMenuBar::item:selected {
padding: 4px;
background: transparent;
border: 0px solid #32414B;
}
QMenuBar::item:pressed {
padding: 4px;
border: 0px solid #32414B;
background-color: #148CD2;
color: #F0F0F0;
margin-bottom: 0px;
padding-bottom: 0px;
}
/* QMenu ------------------------------------------------------------------ */
QMenu {
border: 0px solid #32414B;
color: #F0F0F0;
margin: 0px;
}
QMenu::separator {
height: 2px;
background-color: #505F69;
color: #F0F0F0;
padding-left: 4px;
margin-left: 2px;
margin-right: 2px;
}
QMenu::icon {
margin: 0px;
padding-left:4px;
}
QMenu::item {
padding: 4px 24px 4px 24px;
border: 1px transparent #32414B; /* reserve space for selection border */
}
QMenu::item:selected {
color: #F0F0F0;
}
QMenu::indicator {
width: 12px;
height: 12px;
padding-left:6px;
}
/* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked {
image: url(:/qss_icons/rc/checkbox_unchecked.png);
}
QMenu::indicator:non-exclusive:unchecked:selected {
image: url(:/qss_icons/rc/checkbox_unchecked_disabled.png);
}
QMenu::indicator:non-exclusive:checked {
image: url(:/qss_icons/rc/checkbox_checked.png);
}
QMenu::indicator:non-exclusive:checked:selected {
image: url(:/qss_icons/rc/checkbox_checked_disabled.png);
}
/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked {
image: url(:/qss_icons/rc/radio_unchecked.png);
}
QMenu::indicator:exclusive:unchecked:selected {
image: url(:/qss_icons/rc/radio_unchecked_disabled.png);
}
QMenu::indicator:exclusive:checked {
image: url(:/qss_icons/rc/radio_checked.png);
}
QMenu::indicator:exclusive:checked:selected {
image: url(:/qss_icons/rc/radio_checked_disabled.png);
}
QMenu::right-arrow {
margin: 5px;
image: url(:/qss_icons/rc/right_arrow.png)
}
/* QAbstractItemView ------------------------------------------------------ */
QAbstractItemView {
alternate-background-color: #19232D;
color: #F0F0F0;
border: 1px solid #32414B;
border-radius: 4px;
}
QAbstractItemView QLineEdit {
padding: 2px;
}
/* QAbstractScrollArea ---------------------------------------------------- */
QAbstractScrollArea {
background-color: #19232D;
border: 1px solid #32414B;
border-radius: 4px;
padding: 4px;
color: #F0F0F0;
}
QAbstractScrollArea:disabled {
color: #787878;
}
/* QScrollArea ------------------------------------------------------------ */
QScrollArea QWidget QWidget:disabled {
background-color: #19232D;
}
/* QScrollBar ------------------------------------------------------------- */
QScrollBar:horizontal {
height: 16px;
margin: 2px 16px 2px 16px;
border: 1px solid #32414B;
border-radius: 4px;
background-color: #19232D;
}
QScrollBar::handle:horizontal {
background-color: #787878;
border: 1px solid #32414B;
border-radius: 4px;
min-width: 8px;
}
QScrollBar::handle:horizontal:hover {
background-color: #148CD2;
border: 1px solid #148CD2;
border-radius: 4px;
min-width: 8px;
}
QScrollBar::add-line:horizontal {
margin: 0px 0px 0px 0px;
border-image: url(:/qss_icons/rc/right_arrow_disabled.png);
width: 10px;
height: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
margin: 0px 3px 0px 3px;
border-image: url(:/qss_icons/rc/left_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal:hover,
QScrollBar::add-line:horizontal:on {
border-image: url(:/qss_icons/rc/right_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal:hover,
QScrollBar::sub-line:horizontal:on {
border-image: url(:/qss_icons/rc/left_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:horizontal,
QScrollBar::down-arrow:horizontal {
background: none;
}
QScrollBar::add-page:horizontal,
QScrollBar::sub-page:horizontal {
background: none;
}
QScrollBar:vertical {
background-color: #19232D;
width: 16px;
margin: 16px 2px 16px 2px;
border: 1px solid #32414B;
border-radius: 4px;
}
QScrollBar::handle:vertical {
background-color: #787878;
border: 1px solid #32414B;
min-height: 8px;
border-radius: 4px;
}
QScrollBar::handle:vertical:hover {
background-color: #148CD2;
border: 1px solid #148CD2;
border-radius: 4px;
min-height: 8px;
}
QScrollBar::sub-line:vertical {
margin: 3px 0px 3px 0px;
border-image: url(:/qss_icons/rc/up_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical {
margin: 3px 0px 3px 0px;
border-image: url(:/qss_icons/rc/down_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:hover,
QScrollBar::sub-line:vertical:on {
border-image: url(:/qss_icons/rc/up_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:hover,
QScrollBar::add-line:vertical:on {
border-image: url(:/qss_icons/rc/down_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical,
QScrollBar::down-arrow:vertical {
background: none;
}
QScrollBar::add-page:vertical,
QScrollBar::sub-page:vertical {
background: none;
}
/* QTextEdit--------------------------------------------------------------- */
QTextEdit {
background-color: #19232D;
color: #F0F0F0;
border: 1px solid #32414B;
}
QTextEdit:hover {
border: 1px solid #148CD2;
color: #F0F0F0;
}
QTextEdit:selected {
background: #1464A0;
color: #32414B;
}
/* QPlainTextEdit --------------------------------------------------------- */
QPlainTextEdit {
background-color: #19232D;
color: #F0F0F0;
border-radius: 4px;
border: 1px solid #32414B;
}
QPlainTextEdit:hover {
border: 1px solid #148CD2;
color: #F0F0F0;
}
QPlainTextEdit:selected {
background: #1464A0;
color: #32414B;
}
/* QSizeGrip --------------------------------------------------------------- */
QSizeGrip {
image: url(:/qss_icons/rc/sizegrip.png);
width: 12px;
height: 12px;
}
/* QStackedWidget --------------------------------------------------------- */
QStackedWidget {
padding: 4px;
border: 1px solid #32414B;
border: 1px solid #19232D;
}
/* QToolBar --------------------------------------------------------------- */
QToolBar {
background-color: #32414B;
border-bottom: 1px solid #19232D;
padding: 2px;
font-weight: bold;
}
QToolBar QToolButton{
background-color: #32414B;
}
QToolBar::handle:horizontal {
width: 6px;
image: url(:/qss_icons/rc/Hmovetoolbar.png);
}
QToolBar::handle:vertical {
height: 6px;
image: url(:/qss_icons/rc/Vmovetoolbar.png);
}
QToolBar::separator:horizontal {
width: 3px;
image: url(:/qss_icons/rc/Hsepartoolbar.png);
}
QToolBar::separator:vertical {
height: 3px;
image: url(:/qss_icons/rc/Vsepartoolbar.png);
}
QToolButton#qt_toolbar_ext_button {
background: #32414B;
border: 0px;
color: #F0F0F0;
image: url(:/qss_icons/rc/right_arrow.png);
}
/* QAbstractSpinBox ------------------------------------------------------- */
QAbstractSpinBox {
background-color: #19232D;
border: 1px solid #32414B;
color: #F0F0F0;
padding-top: 2px; /* This fix 103, 111*/
padding-bottom: 2px; /* This fix 103, 111*/
padding-left: 4px;
padding-right: 4px;
border-radius: 4px;
/* min-width: 5px; removed to fix 109 */
}
QAbstractSpinBox:up-button {
background-color: transparent #19232D;
subcontrol-origin: border;
subcontrol-position: top right;
border-left: 1px solid #32414B;
margin: 1px;
}
QAbstractSpinBox::up-arrow,
QAbstractSpinBox::up-arrow:disabled,
QAbstractSpinBox::up-arrow:off {
image: url(:/qss_icons/rc/up_arrow_disabled.png);
width: 9px;
height: 9px;
}
QAbstractSpinBox::up-arrow:hover {
image: url(:/qss_icons/rc/up_arrow.png);
}
QAbstractSpinBox:down-button {
background-color: transparent #19232D;
subcontrol-origin: border;
subcontrol-position: bottom right;
border-left: 1px solid #32414B;
margin: 1px;
}
QAbstractSpinBox::down-arrow,
QAbstractSpinBox::down-arrow:disabled,
QAbstractSpinBox::down-arrow:off {
image: url(:/qss_icons/rc/down_arrow_disabled.png);
width: 9px;
height: 9px;
}
QAbstractSpinBox::down-arrow:hover {
image: url(:/qss_icons/rc/down_arrow.png);
}
QAbstractSpinBox:hover{
border: 1px solid #148CD2;
color: #F0F0F0;
}
QAbstractSpinBox:selected {
background: #1464A0;
color: #32414B;
}
/* ------------------------------------------------------------------------ */
/* DISPLAYS --------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */
/* QLabel ----------------------------------------------------------------- */
QLabel {
background-color: #19232D;
border: 0px solid #32414B;
padding: 2px;
margin: 0px;
color: #F0F0F0
}
QLabel::disabled {
background-color: #19232D;
border: 0px solid #32414B;
color: #787878;
}
/* QTextBrowser ----------------------------------------------------------- */
QTextBrowser {
background-color: #19232D;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
}
QTextBrowser:disabled {
background-color: #19232D;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
}
QTextBrowser:hover,
QTextBrowser:!hover,
QTextBrowser::selected,
QTextBrowser::pressed {
border: 1px solid #32414B;
}
/* QGraphicsView --------------------------------------------------------- */
QGraphicsView {
background-color: #19232D;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
}
QGraphicsView:disabled {
background-color: #19232D;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
}
QGraphicsView:hover,
QGraphicsView:!hover,
QGraphicsView::selected,
QGraphicsView::pressed {
border: 1px solid #32414B;
}
/* QCalendarWidget -------------------------------------------------------- */
QCalendarWidget {
border: 1px solid #32414B;
border-radius: 4px;
}
QCalendarWidget:disabled {
background-color: #19232D;
color: #787878;
}
/* QLCDNumber ------------------------------------------------------------- */
QLCDNumber {
background-color: #19232D;
color: #F0F0F0;
}
QLCDNumber:disabled {
background-color: #19232D;
color: #787878;
}
/* QProgressBar ----------------------------------------------------------- */
QProgressBar {
background-color: #19232D;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
text-align: center;
}
QProgressBar:disabled {
background-color: #19232D;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
text-align: center;
}
QProgressBar::chunk {
background-color: #1464A0;
color: #19232D;
border-radius: 4px;
}
QProgressBar::chunk:disabled {
background-color: #14506E;
color: #787878;
border-radius: 4px;
}
/* ------------------------------------------------------------------------ */
/* BUTTONS ---------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */
/* QPushButton ------------------------------------------------------------ */
QPushButton {
background-color: #505F69 ;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
padding: 3px;
outline: none;
}
QPushButton:disabled {
background-color: #32414B;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
padding: 3px;
}
QPushButton:checked {
background-color: #32414B;
border: 1px solid #32414B;
border-radius: 4px;
padding: 3px;
outline: none;
}
QPushButton:checked:disabled {
background-color: #19232D;
border: 1px solid #32414B;
color: #787878;
border-radius: 4px;
padding: 3px;
outline: none;
}
QPushButton::menu-indicator {
subcontrol-origin: padding;
subcontrol-position: bottom right;
bottom: 4px;
}
QPushButton:pressed {
background-color: #19232D;
border: 1px solid #19232D;
}
QPushButton:hover,
QPushButton:checked:hover{
border: 1px solid #148CD2;
color: #F0F0F0;
}
QPushButton:pressed:hover{
border: 1px solid #1464A0;
}
QPushButton:selected,
QPushButton:checked:selected{
background: #1464A0;
color: #32414B;
}
/* QToolButton ------------------------------------------------------------ */
QToolButton {
background-color: transparent;
border: 1px solid #32414B;
border-radius: 4px;
margin: 0px;
padding: 2px;
}
QToolButton:checked {
background-color: #19232D;
border: 1px solid #19232D;
}
QToolButton:pressed {
background-color: #19232D;
border: 1px solid #19232D;
}
QToolButton:disabled {
border: 1px solid #32414B;
}
QToolButton:hover,
QToolButton:checked:hover{
border: 1px solid #148CD2;
}
QToolButton:pressed:hover{
border: 1px solid #1464A0;
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton[popupMode="1"] {
padding: 2px;
padding-right: 12px; /* only for MenuButtonPopup */
border: 1px solid #32414B; /* make way for the popup button */
border-radius: 4px;
}
/* The subcontrol below is used only in the InstantPopup or DelayedPopup mode */
QToolButton[popupMode="2"] {
padding: 2px;
padding-right: 12px; /* only for InstantPopup */
border: 1px solid #32414B; /* make way for the popup button */
}
QToolButton::menu-button {
padding: 2px;
border-radius: 4px;
border: 1px solid #32414B;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
/* 16px width + 4px for border = 20px allocated above */
width: 16px;
outline: none;
}
QToolButton::menu-button:hover,
QToolButton::menu-button:checked:hover {
border: 1px solid #148CD2;
}
QToolButton::menu-indicator {
image: url(:/qss_icons/rc/down_arrow.png);
top: -8px; /* shift it a bit */
left: -4px; /* shift it a bit */
}
QToolButton::menu-arrow {
image: url(:/qss_icons/rc/down_arrow.png);
}
QToolButton::menu-arrow:open {
border: 1px solid #32414B;
}
/* QCommandLinkButton ----------------------------------------------------- */
QCommandLinkButton {
background-color: transparent;
border: 1px solid #32414B;
color: #F0F0F0;
border-radius: 4px;
padding: 0px;
margin: 0px;
}
QCommandLinkButton:disabled {
background-color: transparent;
color: #787878;
}
/* ------------------------------------------------------------------------ */
/* INPUTS - NO FIELDS ----------------------------------------------------- */
/* ------------------------------------------------------------------------ */
/* QCombobox -------------------------------------------------------------- */
QComboBox {
border: 1px solid #32414B;
border-radius: 4px;
selection-background-color: #1464A0;
padding-top: 2px; /* This fix #103, #111*/
padding-bottom: 2px; /* This fix #103, #111*/
padding-left: 4px;
padding-right: 4px;
/* min-width: 75px; removed to fix 109 */
}
QComboBox:disabled {
background-color: #19232D;
color: #787878;
}
QComboBox:hover{
border: 1px solid #148CD2;
}
QComboBox:on {
selection-background-color: #19232D;
}
QComboBox QAbstractItemView {
background-color: #19232D;
border-radius: 4px;
border: 1px solid #32414B;
selection-color: #148CD2;
selection-background-color: #32414B;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 20px;
border-left-width: 0px;
border-left-color: #32414B;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow {
image: url(:/qss_icons/rc/down_arrow_disabled.png);
}
QComboBox::down-arrow:on,
QComboBox::down-arrow:hover,
QComboBox::down-arrow:focus {
image: url(:/qss_icons/rc/down_arrow.png);
}
/* QSlider ---------------------------------------------------------------- */
QSlider:disabled {
background: #19232D;
}
QSlider:focus {
border: none;
}
QSlider::groove:horizontal {
background: #32414B;
border: 1px solid #32414B;
height: 4px;
margin: 0px;
border-radius: 4px;
}
QSlider::sub-page:horizontal {
background: #1464A0;
border: 1px solid #32414B;
height: 4px;
margin: 0px;
border-radius: 4px;
}
QSlider::sub-page:horizontal:disabled {
background: #14506E;
}
QSlider::handle:horizontal {
background: #787878;
border: 1px solid #32414B;
width: 8px;
height: 8px;
margin: -8px 0;
border-radius: 4px;
}
QSlider::handle:horizontal:hover {
background: #148CD2;
border: 1px solid #148CD2;
}
QSlider::groove:vertical {
background: #32414B;
border: 1px solid #32414B;
width: 4px;
margin: 0px;
border-radius: 4px;
}
QSlider::sub-page:vertical {
background: #1464A0;
border: 1px solid #32414B;
width: 4px;
margin: 0px;
border-radius: 4px;
}
QSlider::sub-page:vertical:disabled {
background: #14506E;
}
QSlider::handle:vertical {
background: #787878;
border: 1px solid #32414B;
width: 8px;
height: 8px;
margin: 0 -8px;
border-radius: 4px;
}
QSlider::handle:vertical:hover {
background: #148CD2;
border: 1px solid #148CD2;
}
/* QLine ------------------------------------------------------------------ */
QLineEdit {
background-color: #19232D;
padding-top: 2px; /* This QLineEdit fix 103, 111 */
padding-bottom: 2px; /* This QLineEdit fix 103, 111 */
padding-left: 4px;
padding-right: 4px;
border-style: solid;
border: 1px solid #32414B;
border-radius: 4px;
color: #F0F0F0;
}
QLineEdit:disabled {
background-color: #19232D;
color: #787878;
}
QLineEdit:hover{
border: 1px solid #148CD2;
color: #F0F0F0;
}
QLineEdit:selected{
background: #1464A0;
color: #32414B;
}
/* QTabWiget -------------------------------------------------------------- */
QTabWidget {
padding: 2px;
selection-background-color: #32414B;
}
QTabWidget QFrame{
border: 1px solid #32414B;
}
QTabWidget::pane {
border: 1px solid #32414B;
border-radius: 4px;
padding: 2px;
margin: 0px;
}
QTabWidget::pane:selected {
background-color: #32414B;
border: 1px solid #1464A0;
}
/* QTabBar ---------------------------------------------------------------- */
QTabBar {
qproperty-drawBase: 0;
border-radius: 4px;
margin: 0px;
padding: 2px;
border: 0;
/* left: 5px; move to the right by 5px - removed for fix */
}
QTabBar::close-button {
border: 0;
margin: 2px;
padding: 0;
image: url(:/qss_icons/rc/close.png);
}
QTabBar::close-button:hover {
image: url(:/qss_icons/rc/close-hover.png);
}
QTabBar::close-button:pressed {
image: url(:/qss_icons/rc/close-pressed.png);
}
/* QTabBar::tab - selected ----------------------------------------------- */
QTabBar::tab:top:selected:disabled {
border-bottom: 3px solid #14506E;
color: #787878;
background-color: #32414B;
}
QTabBar::tab:bottom:selected:disabled {
border-top: 3px solid #14506E;
color: #787878;
background-color: #32414B;
}
QTabBar::tab:left:selected:disabled {
border-left: 3px solid #14506E;
color: #787878;
background-color: #32414B;
}
QTabBar::tab:right:selected:disabled {
border-right: 3px solid #14506E;
color: #787878;
background-color: #32414B;
}
/* QTabBar::tab - !selected and disabled ---------------------------------- */
QTabBar::tab:top:!selected:disabled {
border-bottom: 3px solid #19232D;
color: #787878;
background-color: #19232D;
}
QTabBar::tab:bottom:!selected:disabled {
border-top: 3px solid #19232D;
color: #787878;
background-color: #19232D;
}
QTabBar::tab:left:!selected:disabled {
border-right: 3px solid #19232D;
color: #787878;
background-color: #19232D;
}
QTabBar::tab:right:!selected:disabled {
border-left: 3px solid #19232D;
color: #787878;
background-color: #19232D;
}
'''
Since I'm not reading from a file, I can't use readline(). I already tried to use a for loop to iterate through and check if QSlider::groove:horizontal is inside but I can't figure out how to remove the remaining lines. How can I remove this snippet of CSS and return the other untouched CSS as a str?
stylesheet = 'the really big CSS stylesheet string'
def remove_qslider_tick_bug():
# Remove snippet
return filtered_stylesheet

You can use .find to get the location of your substring, then Python allow string slicing the same as slicing lists. So if you want to do this all yourself you could do something like:
def snip_outside_str(text,start_text,end_text):
start = text.find(start_text)
end = text[start:].find(end_text) #fails if start_text=end_text
end = end + start + len(end_text)
return text[:start]+ text[end:]
stylesheet = 'the really big /*CSS*/ stylesheet string'
def remove_qslider_tick_bug(my_str, start_str='/*', end_str='*/'):
while my_str.find(start_str) != -1:
my_str = snip_outside_str(my_str, start_str, end_str)
return my_str
WARNING: This code is just an example of how to tackle the problem, it's going to produce some weird results when start_str=end_str or when end_str doesn't exist. So if you want to work with CSS there are libraries that can do that for you. For example: https://tinycss.readthedocs.io/en/latest/
(Disclaimer, I'm not a web guy and I've never used tinycss in anger)

flask project- css not pulling in colors

I'm new to web development in python. I'm working on converting a project from php over to flask. I followed the instructions in this post (Application not picking up .css file (flask/python)), and now my text is centered, so I know that I'm linked to my stylesheet. But I'm not getting any colors on my pages. Not sure what I did wrong. Here is my css file:
body {
background-color: #003300;
text-align: center;
}
.greenones{
color: #003300;
text-align: center;
}
.redones{
color: #dd164e;
text-align: center;
}
.yellowones{
color: #CA9800;
text-align: center;
}
.orangeones{
color: #ff6600;
text-align: center;
}
.centerMe{
text-align: center;
}
.dropdown-toggle{
color: #CA9800;
}
.yellowleft{
color: #CA9800;
text-align: left;
}
.leagueguide{
color: #CA9800;
text-align: left;
list-style-type: upper-roman;
}
.leagueguide-indent{
color: #CA9800;
text-align: left;
list-style-type: upper-alpha;
}
.leagueguide-decimal{
color: #CA9800;
text-align: left;
list-style-type: decimal;
}
div.well {
font-weight: bold;
}
a {
font-weight: bold;
}
img.align-left {
float: left;
margin-right: 10 px;
text-align: left;
}
label.yellow, div.yellow{
color: #CA9800;
}
label.logs{
color: #CA9800;
text-align: right;
padding: 10px 10px 10px 10px;
}
table.statsTable{
text-align: center;
color: #003300;
padding: 3px;
}
td.cen {
text-align: center;
}
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
#media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
editing my question: my css file is not being found. I'm getting this error:
"GET /static/ibc.css HTTP/1.1" 304 -
In my layout.html file, I have this line:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='ibc.css') }}">
I created a static folder underneath the app folder (where app.py lives), and placed the .css file in there. This obviously is not the correct location...

I can answer my own question. I needed to include the link to the stylesheet in each .html file, not just the layout.html. Once I did that, the css started working.

htmlparse doesn't clear <style>

i have a problem with my html parser. I convert emails filled with html code into nice clean text, except for the "< style > content < /style >" part, which it completely ignores and i have no clue as to what i did wrong:
# Remove any HTML code from our raw content
htmlparse = re.sub(r'<.*?>', '', clean) \
.replace(" ", '') \
.replace("é", 'é') \
.replace("è", 'è') \
clean_email = htmlparse
what it actually should delete is:
<style> .MailHeader { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; } .DataHeader { font-family: Tahoma; font-size: 8pt; color: #666666; text-decoration: none; padding-left: 15px; padding-right: 15px; border: solid 1px #E0E0E0; vertical-align: text-top; } .Data { font: normal 8pt Tahoma,Verdana; padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; background: #F9F9F9; font-size: 8pt; color: #666666; height: 20px !important; } .GridHeader { font: normal 8pt Tahoma,Verdana; padding-left: 6px; background: #DAEBFF; height: 20px; } .DataRow { padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; font-size: 8pt; color: #003399; } .GridRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: transparent; height: 20px !important; min-height: 1%; } .GridAltRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: #F9F9F9; height: 20px !important; min-height: 1%; } .li { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-left: 5px; } .TableHeader { font-family: Tahoma,calibri,verdana; font-size: 8pt; font-weight: bold; height: 22px; color: #003399; border: solid 1px #E0E0E0; border-collapse: collapse; padding-left: 5px; padding-right: 5px; background-color: #BBD8FF; } .TableSubHeader { font: normal 8pt Tahoma, Verdana, Sans-Serif; vertical-align: middle; padding-left: 3px; font-weight: bold; color: #666666; } .Separator { background-repeat: repeat-x; background-position: center; background: #666666; } .tableDetail { padding: 0 0 0 0; spacing: 0 0 0 0; border-collapse: collapse; width: 750px; margin-left: 5px; border: solid 1px #E0E0E0; } .style1 { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; height: 18px; } </style>
What it actually does is delete style and /style but leaves the whole garbage of the stylesheet in the parsed file...
.MailHeader { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; } .DataHeader { font-family: Tahoma; font-size: 8pt; color: #666666; text-decoration: none; padding-left: 15px; padding-right: 15px; border: solid 1px #E0E0E0; vertical-align: text-top; } .Data { font: normal 8pt Tahoma,Verdana; padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; background: #F9F9F9; font-size: 8pt; color: #666666; height: 20px !important; } .GridHeader { font: normal 8pt Tahoma,Verdana; padding-left: 6px; background: #DAEBFF; height: 20px; } .DataRow { padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; font-size: 8pt; color: #003399; } .GridRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: transparent; height: 20px !important; min-height: 1%; } .GridAltRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: #F9F9F9; height: 20px !important; min-height: 1%; } .li { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-left: 5px; } .TableHeader { font-family: Tahoma,calibri,verdana; font-size: 8pt; font-weight: bold; height: 22px; color: #003399; border: solid 1px #E0E0E0; border-collapse: collapse; padding-left: 5px; padding-right: 5px; background-color: #BBD8FF; } .TableSubHeader { font: normal 8pt Tahoma, Verdana, Sans-Serif; vertical-align: middle; padding-left: 3px; font-weight: bold; color: #666666; } .Separator { background-repeat: repeat-x; background-position: center; background: #666666; } .tableDetail { padding: 0 0 0 0; spacing: 0 0 0 0; border-collapse: collapse; width: 750px; margin-left: 5px; border: solid 1px #E0E0E0; } .style1 { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; height: 18px; } Hello, this is a test mail.
Can anyone help me?
thank you guys in advance,
regards

First remove the style itself, and then in second pass, do what you want to do.
import re
some = """
<style>.MailHeader { font: normal 10pt Tahoma, Verdana, Sans-Serif;
vertical-align: top; padding-bottom: 0px; padding-top: 0px; spacing: 0px 0px 0px 0px; }
.DataHeader { font-family: Tahoma; font-size: 8pt; color: #666666; text-decoration: none;
padding-left: 15px; padding-right: 15px; border: solid 1px #E0E0E0; vertical-align: text-top; }
.Data { font: normal 8pt Tahoma,Verdana; padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0;
\ background: #F9F9F9; font-size: 8pt; color: #666666; height: 20px !important; }
.GridHeader { font: normal 8pt Tahoma,Verdana; padding-left: 6px; background: #DAEBFF; height: 20px; }
.DataRow { padding-left: 3px; padding-right: 15px; border: solid 1px #E0E0E0; font-size: 8pt; color: #003399; }
.GridRow { font: normal 8pt Tahoma, Verdana, Sans-serif; padding-left: 6px; background: transparent;
height: 20px !important; min-height: 1%; } .GridAltRow { font: normal 8pt Tahoma, Verdana, Sans-serif;
padding-left: 6px; background: #F9F9F9; height: 20px !important; min-height: 1%; }
.li { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-left: 5px; }
.TableHeader { font-family: Tahoma,calibri,verdana; font-size: 8pt; font-weight: bold; height: 22px;
color: #003399; border: solid 1px #E0E0E0; border-collapse: collapse; padding-left: 5px;
padding-right: 5px; background-color: #BBD8FF; }
.TableSubHeader { font: normal 8pt Tahoma, Verdana, Sans-Serif;
vertical-align: middle; padding-left: 3px; font-weight: bold; color: #666666; }
.Separator { background-repeat: repeat-x; background-position: center; background: #666666; }
.tableDetail { padding: 0 0 0 0;
spacing: 0 0 0 0; border-collapse: collapse; width: 750px; margin-left: 5px; border: solid 1px #E0E0E0; }
.style1 { font: normal 10pt Tahoma, Verdana, Sans-Serif; vertical-align: top; padding-bottom:
0px; padding-top: 0px; spacing: 0px 0px 0px 0px; height: 18px; }
</style>
<h1>Hello, this is a test mail.</h1>
"""
some1 = re.sub(r'<style>.*</style>', '', some, flags=re.DOTALL)
print some1
Result :
I have no name!#sla-334:~/stack_o$ python stack_o_html.py
<h1>Hello, this is a test mail.</h1>
Now, do what you want to do with this html.

I kinda fixed it myself by reparsing trough the parsed text and using this as parameters
cleaner = re.sub(r'{.*}', '', clean_email)\
.replace(".MailHeader", '') \
Ill try out your solutions

Categories