style.qss

/*
Copyright (c) 2017 Shotgun Software Inc

CONFIDENTIAL AND PROPRIETARY

This work is provided "AS IS" and subject to the Shotgun Pipeline Toolkit
Source Code License included in this distribution package. See LICENSE.
By accessing, using, copying or modifying this work you indicate your
agreement to the Shotgun Pipeline Toolkit Source Code License. All rights
not expressly granted therein are reserved by Shotgun Software Inc.
*/

/* --------------------------------------------------------------------- */
/* Global styling */
/* --------------------------------------------------------------------- */



/* Get rid of borders for main Listing Views */
QListView, QTableView, QScrollArea, QFrame {
    border: none;
}

/* Use open sans font across the app if core supports it */
QWidget {
    font-family: Open Sans;
    font-style: Regular;
}

/* Need this to kick QT into 'style mode' for labels otherwise things are not formatted correctly */
QLabel {
    margin-top: 1px;
}

/* general styling of QTreeView */
QTreeView::branch {
    background: none;
}


/* consistent default look for all tool buttons */

QToolButton {
    border: none;
}

QToolButton:hover {
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 18%);
}

QToolButton:pressed {
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 35%);
}

QToolButton::menu-indicator#browse {
    image: none;
}

/* --------------------------------------------------------------------- */
/* Full screen drop area */
/* --------------------------------------------------------------------- */

#large_drop_area_label {
    font-size: 16px;
    font-weight: 100;
}



/* --------------------------------------------------------------------- */
/* Right hand side details area */
/* --------------------------------------------------------------------- */


/* fonts for various headers */
#plugin_name, #task_name, #item_name, #summary_header {
    font-size: 22px;
    font-weight: 100;
}


#item_settings_label, #item_summary_label, #task_settings_label{
    font-size: 16px;
    font-weight: 100;
    padding-top: 18px;
}

/* subheading under the item name in the details */
#item_type, #please_select_an_item {
    font-size: 12px;
    font-weight: 75;
}

/* the item name is somehow offset right. not sure why. account for that here.*/
#item_type {
    padding-left: 4px;
}

/* divider lines in the details UI */
#item_divider_1, #item_divider_2, #item_divider_3, #task_divider {
    border-top: 1px solid rgba(255, 255, 255, 20%);
}

/* thumbnail background */
#item_thumbnail {
    background-color: #292929;
}

/* --------------------------------------------------------------------- */
/* Settings widgets, used in details section */
/* --------------------------------------------------------------------- */


FieldNameLabel {

    padding: 8px;
    /* there seems to be an odd bug where border-bottom isn't evaluated
       unless there is a border top, so add a transparent line... */
    border-top: 1px dotted rgba(0,0,0,0%);
    color: rgba(200, 200, 200, 40%);
    border-bottom: 1px dotted rgba(200, 200, 200, 18%);
}

FieldValueLabel {
    padding: 8px;
    /* there seems to be an odd bug where border-bottom isn't evaluated
       unless there is a border top, so add a transparent line... */
    border-top: 1px dotted rgba(0,0,0,0%);
    border-bottom: 1px dotted rgba(200, 200, 200, 18%);
}


/* --------------------------------------------------------------------- */
/* Left hand side tree view */
/* --------------------------------------------------------------------- */

DropAreaFrame#large_drop_area {
    border: 2px dashed rgba(200, 200, 200, 75%);
}
DropAreaFrame#large_drop_area[dragging="true"] {
    border: 2px solid {{SG_HIGHLIGHT_COLOR}};
}

#drag_progress_message {
    border: none;
}

#drag_progress_message:hover {
    text-decoration: underline;
}

/* left hand side frame when someone drag something in */
DropAreaFrame[dragging="true"] {
    border: 2px solid {{SG_HIGHLIGHT_COLOR}};
}

/* properties for the main tree widget */
#items_tree {
    padding: 2px;
    background-color: #292929;
    alternate-background-color: #292929;
    border: none;
    margin: 0px;
}

/* disable all the 'tree handles' */
#items_tree::branch {
    border-image: none;
    image: none;
    background: palette(base); /* don't highlight the branch area on selection */
}

/* selection of tree items */
#items_tree::item:selected {
    background-color: {{SG_HIGHLIGHT_COLOR}};
}

#items_tree::item {
    background-color: none;
    /* Shift all items sideways to cover up the branch area.
    This is because we are hiding the standard expand collapse icons in the branch area,
    and we don't want a area of blank indentation.*/
    margin-left: -28px;
}

/* Tree view items */
CustomTreeWidgetItem #frame {
    padding: 4px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #343434;

}

/* Tree view items */
CustomTreeWidgetSummary #frame {
    padding: 4px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #343434;

    /* make sure we push it all the way in to compensate for the -28px margin of the widget see #items_tree::item*/
    margin-left: 28px;
}

/* Tree view items */
CustomTreeWidgetTask #frame {
    padding: 4px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #303030;
}

/* the widget that displays the contexts */
CustomTreeWidgetContext {
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-top: 10px;
    border-bottom: 1px solid #494C4F;

    /*This is set to the same color as the tree widget background
    so that the default item text gets blocked out.*/
    background-color: #292929;

    /* make sure we push it all the way in to compensate for the -28px margin of the widget, see #items_tree::item*/
    margin-left: 28px;
}

CustomTreeWidgetContext QLabel {
    font-size: 12px;
    font-weight: 100;
    text-transform: uppercase;
}

#text_below_item_tree {
    font-size: 10px;
    font-weight: 100;
    font-style: italic;
    border: none;
    background-color: #292929;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 4px;
    margin: 0px;
}

/* --------------------------------------------------------------------- */
/* Progress widget */
/* --------------------------------------------------------------------- */



/* Logging popup widget */

ProgressDetailsWidget #progress_frame {
    background-color: #292929;
    border-radius: 4px;
}

ProgressDetailsWidget #progress_label {
    font-size: 18px;
    font-weight: 100;
}

ProgressDetailsWidget #log_tree {
    font-size: 12px;
    font-weight: 100;
    background-color: #292929;
    alternate-background-color: #292929;
}

ProgressDetailsWidget #log_tree::item {
    margin: 4px;
}

#log_action_button {
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 18%);
}

#log_action_button:hover {
    color: {{SG_HIGHLIGHT_COLOR}};
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 18%);
}

#log_action_button:pressed {
    color: {{SG_HIGHLIGHT_COLOR}};
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 35%);
}

#copy_log_button {
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 18%);
}

#copy_log_button:hover {
    color: {{SG_HIGHLIGHT_COLOR}};
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 18%);
}

#copy_log_button:pressed {
    color: {{SG_HIGHLIGHT_COLOR}};
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 35%);
}

/* Small progress widget */

#progress_message:hover {

}

#progress_bar {
    border: none;
    margin: 3px;
}

#progress_bar::chunk {
    background-color: {{SG_HIGHLIGHT_COLOR}};
}

#bottom_frame #stop_processing {
    border: none;
    background-color: none;
}

#bottom_frame #stop_processing:hover {
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 18%);
}

#bottom_frame #stop_processing:pressed {
    border: none;
    border-radius: 2px;
    background-color: rgba(200, 200, 200, 35%);
}


/* --------------------------------------------------------------------- */
/* Bottom toolbar */
/* --------------------------------------------------------------------- */

#bottom_frame {
    padding-bottom: 4px;
}

#bottom_frame QToolButton {
    border: none;
    padding: 4px;
    border-radius: 2px;
    background-color: rgba(20, 20, 20, 18%);
}

#bottom_frame QToolButton:hover {
    border: none;
    border-radius: 2px;
    background-color: rgba(20, 20, 20, 30%);
}

#bottom_frame QToolButton:pressed {
    border: none;
    border-radius: 2px;
    background-color: rgba(20, 20, 20, 50%);
}

#drop_area_browse_file, #drop_area_browse_seq {
    border: none;
    border-radius: 2px;
    background-color: {{SG_HIGHLIGHT_COLOR}};
    color: #FFFFFF;
    padding-top: 8px;
    padding-bottom: 8px;
}


/* --------------------------------------------------------------------- */
/* Summary Overlay */
/* --------------------------------------------------------------------- */


#summary_frame #label {
    font-size: 26px;
    font-weight: 100;
}

#summary_frame #details {
    font-size: 12px;
    font-weight: 100;
    font-style: italic;
}

#summary_frame {
    background-color: rgba(20, 20, 20, 95%);
}

/* --------------------------------------------------------------------- */
/* Group Boxes                                                           */
/* --------------------------------------------------------------------- */

QGroupBox {
    border: 1px solid #333333;
    border-radius: 4px;
    background-color: #3A3A3A;
    margin-top: 18px;
}

QGroupBox::title {
    top: -18px;
    font-weight: bold;
    font-size: 18px;
}