Add custom css for AutoHideExample.

examples/autohide/autohide.qrc

@@ -1,5 +1,6 @@
 <RCC>
     <qresource prefix="adsautohide">
         <file>images/minimize-button.svg</file>
+        <file>res/autohide.css</file>
     </qresource>
 </RCC>

examples/autohide/mainwindow.cpp

@@ -34,6 +34,13 @@ CMainWindow::CMainWindow(QWidget *parent)
 
     DockManager = new CDockManager(this);
 
+    QFile StyleSheetFile(":/adsautohide/res/autohide.css");
+    StyleSheetFile.open(QIODevice::ReadOnly);
+    QTextStream StyleSheetStream(&StyleSheetFile);
+    auto Stylesheet = StyleSheetStream.readAll();
+    StyleSheetFile.close();
+    DockManager->setStyleSheet(Stylesheet);
+
     // Set central widget
     QPlainTextEdit* w = new QPlainTextEdit();
 	w->setPlaceholderText("This is the central editor. Enter your text here.");

examples/autohide/res/autohide.css

@@ -0,0 +1,368 @@
+/*
+ * Default style sheet on Windows Platforms with focus highlighting flag enabled
+ */
+
+
+/*****************************************************************************
+ * CDockContainerWidget
+ *****************************************************************************/
+ads--CDockContainerWidget {
+    background: palette(window);
+}
+
+
+    /*****************************************************************************
+ * CDockSplitter
+ *****************************************************************************/
+    ads--CDockContainerWidget > QSplitter {
+        padding: 1 0 1 0;
+    }
+
+
+ads--CDockSplitter::handle {
+    background-color: palette(dark);
+    /* uncomment the following line if you would like to change the size of
+       the splitter handles */
+    /* height: 1px; */
+}
+
+
+/*****************************************************************************
+ * CDockAreaWidget
+ *****************************************************************************/
+ads--CDockAreaWidget {
+    background: palette(window);
+}
+
+
+ads--CDockAreaTitleBar {
+    background: transparent;
+    border-bottom: 2px solid palette(light);
+    padding-bottom: 0px;
+}
+
+ads--CDockAreaWidget[focused="true"] ads--CDockAreaTitleBar {
+    border-bottom: 2px solid palette(highlight);
+}
+
+ads--CTitleBarButton {
+    padding: 0px 0px;
+}
+
+
+#tabsMenuButton::menu-indicator {
+    image: none;
+}
+
+
+#dockAreaCloseButton {
+    qproperty-iconSize: 16px;
+}
+
+#detachGroupButton {
+    qproperty-icon: url(:/ads/images/detach-button.svg), url(:/ads/images/detach-button-disabled.svg) disabled;
+    qproperty-iconSize: 16px;
+}
+
+
+
+/*****************************************************************************
+ * CDockWidgetTab
+ *****************************************************************************/
+ads--CDockWidgetTab {
+    background: palette(window);
+    border-color: palette(light);
+    border-style: solid;
+    border-width: 0 1px 0 0;
+    padding: 0 0px;
+    qproperty-iconSize: 16px 16px; /* this is optional in case you would like to change icon size*/
+}
+
+    ads--CDockWidgetTab[activeTab="true"] {
+        background: qlineargradient(spread : pad, x1 : 0, y1 : 0, x2 : 0, y2 : 0.5, stop : 0 palette(window), stop:1 palette(light));
+        /*background: palette(highlight);*/
+    }
+
+    ads--CDockWidgetTab QLabel {
+        color: palette(dark);
+    }
+
+    ads--CDockWidgetTab[activeTab="true"] QLabel {
+        color: palette(foreground);
+    }
+
+
+#tabCloseButton {
+    margin-top: 2px;
+    background: none;
+    border: none;
+    padding: 0px -2px;
+    qproperty-icon: url(:/ads/images/close-button.svg), url(:/ads/images/close-button-disabled.svg) disabled;
+    qproperty-iconSize: 16px;
+}
+
+    #tabCloseButton:hover {
+        /*border: 1px solid rgba(0, 0, 0, 32);*/
+        background: rgba(0, 0, 0, 24);
+    }
+
+    #tabCloseButton:pressed {
+        background: rgba(0, 0, 0, 48);
+    }
+
+/* Focus related styling */
+ads--CDockWidgetTab[focused="true"] {
+    background: palette(highlight);
+    border-color: palette(highlight);
+}
+
+    ads--CDockWidgetTab[focused="true"] > #tabCloseButton {
+        qproperty-icon: url(:/ads/images/close-button-focused.svg)
+    }
+
+        ads--CDockWidgetTab[focused="true"] > #tabCloseButton:hover {
+            background: rgba(255, 255, 255, 48);
+        }
+
+        ads--CDockWidgetTab[focused="true"] > #tabCloseButton:pressed {
+            background: rgba(255, 255, 255, 92);
+        }
+
+    ads--CDockWidgetTab[focused="true"] QLabel {
+        color: palette(light);
+    }
+
+
+
+/*****************************************************************************
+ * CDockWidget
+ *****************************************************************************/
+ads--CDockWidget {
+    background: palette(light);
+    border-color: palette(light);
+    border-style: solid;
+    border-width: 1px 0 0 0;
+}
+
+
+QScrollArea#dockWidgetScrollArea {
+    padding: 0px;
+    border: none;
+}
+
+
+
+/*****************************************************************************
+ *
+ * Styling of auto hide functionality
+ *
+ *****************************************************************************/
+
+
+/*****************************************************************************
+ * CAutoHideTab
+ *****************************************************************************/
+ads--CAutoHideTab {
+    qproperty-iconSize: 16px 16px; /* this is optional in case you would like to change icon size*/
+    background: none;
+    border: none;
+    padding-left: 2px;
+    padding-right: 0px;
+    text-align: center;
+    min-height: 20px;
+    padding-bottom: 2px;
+}
+
+
+    ads--CAutoHideTab:hover {
+        color: palette(highlight);
+    }
+
+
+    ads--CAutoHideTab[iconOnly="false"][sideBarLocation="0"],
+    ads--CAutoHideTab[iconOnly="false"][sideBarLocation="2"] {
+        border-top: 6px solid rgba(0, 0, 0, 48);
+    }
+
+
+    ads--CAutoHideTab[iconOnly="false"][sideBarLocation="1"],
+    ads--CAutoHideTab[iconOnly="false"][sideBarLocation="3"] {
+        border-bottom: 6px solid rgba(0, 0, 0, 48);
+    }
+
+
+
+    ads--CAutoHideTab:hover[iconOnly="false"][sideBarLocation="0"],
+    ads--CAutoHideTab:hover[iconOnly="false"][sideBarLocation="2"],
+    ads--CAutoHideTab[iconOnly="false"][sideBarLocation="0"][activeTab="true"],
+    ads--CAutoHideTab[iconOnly="false"][sideBarLocation="2"][activeTab="true"] {
+        border-top: 6px solid palette(highlight);
+    }
+
+
+    ads--CAutoHideTab:hover[iconOnly="false"][sideBarLocation="1"],
+    ads--CAutoHideTab:hover[iconOnly="false"][sideBarLocation="3"],
+    ads--CAutoHideTab[iconOnly="false"][sideBarLocation="1"][activeTab="true"],
+    ads--CAutoHideTab[iconOnly="false"][sideBarLocation="3"][activeTab="true"] {
+        border-bottom: 6px solid palette(highlight);
+    }
+
+
+    /**
+ * Auto hide tabs with icon only
+ */
+    ads--CAutoHideTab[iconOnly="true"][sideBarLocation="0"] {
+        border-top: 6px solid rgba(0, 0, 0, 48);
+    }
+
+    ads--CAutoHideTab[iconOnly="true"][sideBarLocation="1"] {
+        border-left: 6px solid rgba(0, 0, 0, 48);
+    }
+
+    ads--CAutoHideTab[iconOnly="true"][sideBarLocation="2"] {
+        border-right: 6px solid rgba(0, 0, 0, 48);
+    }
+
+    ads--CAutoHideTab[iconOnly="true"][sideBarLocation="3"] {
+        border-bottom: 6px solid rgba(0, 0, 0, 48);
+    }
+
+
+    /**
+ * Auto hide tabs with icon only hover
+ */
+    ads--CAutoHideTab:hover[iconOnly="true"][sideBarLocation="0"],
+    ads--CAutoHideTab[iconOnly="true"][sideBarLocation="0"][activeTab="true"] {
+        border-top: 6px solid palette(highlight);
+    }
+
+    ads--CAutoHideTab:hover[iconOnly="true"][sideBarLocation="1"],
+    ads--CAutoHideTab[iconOnly="true"][sideBarLocation="1"][activeTab="true"] {
+        border-left: 6px solid palette(highlight);
+    }
+
+    ads--CAutoHideTab:hover[iconOnly="true"][sideBarLocation="2"],
+    ads--CAutoHideTab[iconOnly="true"][sideBarLocation="2"][activeTab="true"] {
+        border-right: 6px solid palette(highlight);
+    }
+
+    ads--CAutoHideTab:hover[iconOnly="true"][sideBarLocation="3"],
+    ads--CAutoHideTab[iconOnly="true"][sideBarLocation="3"][activeTab="true"] {
+        border-bottom: 6px solid palette(highlight);
+    }
+
+
+
+/*****************************************************************************
+ * CAutoHideSideBar
+ *****************************************************************************/
+ads--CAutoHideSideBar {
+    background: palette(window);
+    border: none;
+    qproperty-spacing: 12;
+}
+
+#sideTabsContainerWidget {
+    background: transparent;
+}
+
+
+ads--CAutoHideSideBar[sideBarLocation="0"] {
+    border-bottom: 1px solid palette(dark);
+}
+
+ads--CAutoHideSideBar[sideBarLocation="1"] {
+    border-right: 1px solid palette(dark);
+}
+
+ads--CAutoHideSideBar[sideBarLocation="2"] {
+    border-left: 1px solid palette(dark);
+}
+
+ads--CAutoHideSideBar[sideBarLocation="3"] {
+    border-top: 1px solid palette(dark);
+}
+
+
+/*****************************************************************************
+ * CAutoHideDockContainer
+ *****************************************************************************/
+ads--CAutoHideDockContainer {
+    background: palette(window);
+}
+
+
+    ads--CAutoHideDockContainer ads--CDockAreaTitleBar {
+        background: palette(highlight);
+        padding: 0px;
+        border: none;
+    }
+
+
+    /*
+ * This is required because the ads--CDockAreaWidget[focused="true"] will 
+ * overwrite the ads--CAutoHideDockContainer ads--CDockAreaTitleBar rule
+ */
+    ads--CAutoHideDockContainer ads--CDockAreaWidget[focused="true"] ads--CDockAreaTitleBar {
+        background: palette(highlight);
+        padding: 0px;
+        border: none;
+    }
+
+
+#autoHideTitleLabel {
+    padding-left: 4px;
+    color: palette(light);
+}
+
+
+/*****************************************************************************
+ * CAutoHideDockContainer titlebar buttons
+ *****************************************************************************/
+#dockAreaAutoHideButton {
+    qproperty-icon: url(:/ads/images/vs-pin-button.svg);
+    qproperty-iconSize: 16px;
+}
+
+ads--CAutoHideDockContainer #dockAreaAutoHideButton {
+    qproperty-icon: url(:/ads/images/vs-pin-button-pinned-focused.svg);
+    qproperty-iconSize: 16px;
+}
+
+
+ads--CAutoHideDockContainer ads--CTitleBarButton:hover {
+    background: rgba(255, 255, 255, 48);
+}
+
+ads--CAutoHideDockContainer ads--CTitleBarButton:pressed {
+    background: rgba(255, 255, 255, 96);
+}
+
+/*****************************************************************************
+ * CAutoHideDockContainer Titlebar and Buttons
+ *****************************************************************************/
+
+
+/*****************************************************************************
+ * CResizeHandle
+ *****************************************************************************/
+ads--CResizeHandle {
+    background: palette(window);
+}
+
+
+ads--CAutoHideDockContainer[sideBarLocation="0"] ads--CResizeHandle {
+    border-top: 1px solid palette(dark);
+}
+
+ads--CAutoHideDockContainer[sideBarLocation="1"] ads--CResizeHandle {
+    border-left: 1px solid palette(dark);
+}
+
+ads--CAutoHideDockContainer[sideBarLocation="2"] ads--CResizeHandle {
+    border-right: 1px solid palette(dark);
+}
+
+ads--CAutoHideDockContainer[sideBarLocation="3"] ads--CResizeHandle {
+    border-top: 1px solid palette(dark);
+}