style.qss

/*
 Copyright (c) 2021 Autodesk, Inc.

 CONFIDENTIAL AND PROPRIETARY

 This work is provided "AS IS" and subject to the ShotGrid 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 ShotGrid Pipeline Toolkit Source Code License. All rights
 not expressly granted therein are reserved by Autodesk, Inc.
*/

/*
Make sure standard dialogs and button boxes
Will have the "Do it" button on the far right
*/
QDialogButtonBox {
    button-layout: 3;
}
/*
Styling for the search widget: add a search icon and offset
the text so it does not overlap on the search and the clear icons
*/
SearchWidget {
    background-image: url(:/tk_multi_importcut/search.png);
    background-repeat: no-repeat;
    background-position: center left;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 0px;
    margin-right: 0px;
}

SearchWidget QPushButton {
    border: 0px solid;
    background-image: "";
    image: url(:/tk_multi_importcut/clear_search.png);
    width: 16;
    height: 16;
}

SearchWidget QPushButton::hover {
    image: url(:/tk_multi_importcut/clear_search_hover.png);
}

CutDiffCard #version_name_label {
    padding: 1px; /* Give a bit of margin so the lineedit and label can be aligned */
    margin: 0px;
}
/*
Make the line edit look like a QLabel
when not in edit mode
*/
EntityLineWidget {
    border: 0px solid #2C93E2;
    padding: 2px; /* Give a bit of margin so the lineedit and label can be aligned */
    margin: 0px;
    background: #525252;
    font-style: normal;
    font-weight: bold;
}
/*
But highlight it is editable ( if it is ) on mouse hover
*/
EntityLineWidget:hover:!read-only:!focus {
    background-image: url(:/tk_multi_importcut/pencil_24.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-origin: content;
    background-color: rgba(44, 147, 226, 25%);
}
/*
Highlight non editable fields by showing the crossed pencil
icon
*/
EntityLineWidget:hover:read-only:!focus {
    background-image: url(:/tk_multi_importcut/no_pencil_24.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-origin: content;
}
/*
In edit mode, show it is a QLineEdit if it is not read only
*/
EntityLineWidget:focus:!read-only {
    border: 2px solid #2C93E2;
    border-radius: 2px;
    background: none;
    font-style: normal;
    font-weight: normal;
    padding: 0px; /* suppress alignment padding */
}

/* Progress window */
#progress_page #progress_screen_title_label {
    font-size: 12px;
}

/*
When not in edit and the value is empty or not valid
Make it PTR red
*/
EntityLineWidget:!focus[valid="false"] {
    color: #FC6246;
    font-style: italic;
}


/* Thin progress bar on the main window

QProgressBar#progress_bar {
     border: 1px none grey;
     text-align: center;
 }

QProgressBar::chunk {
    background-color: #2C93E2;
}
*/
/*
Drop area style : big font, and a dashed outline
*/
DropAreaFrame {
    border: 2px dashed grey;
    border-radius: 4px;
    font-style: bold;
    background-color: #2B2B2B;
}
/* Font size for the label in the drop area */
DropAreaFrame QLabel {
    font-size: 30px;
}

/* We explicitly specify the normal font weight here, otherwise some text
defaults to bold when not enabled -- event though it should only be bold when
enabled */
* {
    font-family: "Open Sans";
    font-weight: normal;
    outline: 0;
}

/* Font size for mov and edl label on drop screen */
#file_added_label,
#instructions_label {
    font-size: 14px;
}
/* Instruction label on drop screen */
#instructions_label {
    color: #707070;
}


/* Settings buttons on different screens */
#drop_page_settings_button,
#project_page_settings_button,
#entities_page_settings_button,
#cut_list_page_settings_button,
#help_button,
#cut_summary_page_settings_button {
    border: 0px solid black;
}


/*
    Create Entity Dialog
*/
#create_entity_dialog #create_entity_line_1,
#create_entity_dialog #create_entity_line_2 {
    color: black;
    height: 1px;
}

#create_entity_dialog QLabel {
    color: #A8A8A8;
}

#create_entity_dialog #create_new_entity_label {
    font-size: 20px;
    color: #909090;
}
/* darkening the bg for selection widgets */
#create_entity_dialog QComboBox,
#create_entity_dialog QCheckBox,
#create_entity_dialog QLineEdit
{
    background-color: #2a2a2a;
}


/*
    Settings dialog
*/

/* styling the tab border */
#settings_dialog #general_timecode_frames_tab::pane {
    border-top: 0px solid #3c3e42;
    border-bottom: 0px solid #3c3e42;
}

/* getting fonts to be the right size */
#settings_dialog #settings_label {
    font-size: 22px;
    color: #909090;
}
/* general sizes for labels, combo boxes, line edits */
#settings_dialog QLabel,
#settings_dialog QComboBox,
#settings_dialog QLineEdit {
    font-size: 12px;
}

/* tab styling in settings dialog */
#settings_dialog QTabBar::tab {
    font-size: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-left: 0px;
    width: 117px;
    right: 30px;
    color: #A0A0A0;
    border: 2px solid #444444;
    border-bottom-color: #444444;
    border-bottom-width: 2px;
}

#settings_dialog QTabBar::tab:selected {
    color: #C8C8C8;
    border-bottom-color: #26beff;
}

/* darkening the bg for selection widgets */
#settings_dialog QComboBox,
#settings_dialog QLineEdit
{
    background-color: #2a2a2a;
}

#settings_dialog QCheckBox {
    background-color: transparent;
}

/* fading out widgets that aren't enabled */
#settings_dialog QComboBox:!enabled {
    background-color: #3c3e42;
    color: #3c3e42;
}

/* dimming certain text for dramatic effect */
#settings_dialog #send_cut_summary_note_to_label,
#settings_dialog #update_shot_statuses_label:enabled,
#settings_dialog #omit_status_label:enabled,
#settings_dialog #reinstate_shot_if_status_is_label:enabled,
#settings_dialog #reinstate_status_label:enabled,
#settings_dialog #use_smart_fields_label,
#settings_dialog #default_frame_rate_label,
#settings_dialog #timecode_to_frame_mapping_label,
#settings_dialog #default_head_in_label:enabled,
#settings_dialog #default_head_duration_label:enabled,
#settings_dialog #default_tail_duration_label:enabled,
#settings_dialog #timecode_mapping_label,
#settings_dialog #frame_mapping_label {
    color: #A8A8A8;
}

/* fading out text that isn't enabled */
#settings_dialog QLabel:!enabled,
#settings_dialog QLineEdit:!enabled {
    color: #606060;
}

/* making section headings bold */
#settings_dialog #note_addressing_label,
#settings_dialog #statuses_label,
#settings_dialog #cut_fields_on_shot_label,
#settings_dialog #timecode_label,
#settings_dialog #new_shots_label {
    font-weight: bold;
}

/* Font size on last screeen */
#success_page #success_label {
    font-size: 20px;
}

/* Highlight some buttons in PTR blue */
#success_page #shotgun_button,
#create_entity_dialog #create_entity_button,
#settings_dialog #apply_button:enabled,
#submit_dialog #import_cut_button,
#next_button:enabled,
QMessageBox QPushButton:default,
#select_button:enabled,
#submit_button:enabled {
    background-color: #12bbff;
    font-weight: bold;
    color: white;
}

/*
Highlight the drop area when something is dragged over
*/
DropAreaFrame[dragging="true"] {
    border: 2px dashed white;
}
/*
Red text on errors
*/
#progress_bar_label {
    font-size: 12px;
}
#feedback_label[level="error"], #progress_bar_label[level="error"] {
    color: #FC6246;
}

#entity_picker_frame {
    background-color: #2B2B2B;
}
#entity_types_frame {
    border: 1px none black;
}
/*
No visible border for cards, and set the background color otherwise they will
inherit the one from the scroll area they are in
*/

CardWidget, CutDiffCard {
    border: 1px none black;
    background-color: #525252;
    border-radius: 2px;
}

/* Highlight selected cards */
CardWidget[selected="true"] {
    border: 1px solid #2C93E2;
    background-color: rgba(44, 147, 226, 25%);
}
/* Labels on Project and Entity cards */
ProjectCard #title_label, EntityCard #title_label {
    font-weight: bold;
    font-size: 15px;
}
ProjectCard #status_label, EntityCard #status_label {
    font-weight: bold;
}

QPushButton#back_button {
    icon-size: 15px;
}

/* Screens titles */
QLabel#entity_picker_title_label_2,
QLabel#entity_picker_title_label,
QLabel#entities_title_label,
QLabel#cuts_title_label,
QLabel#select_project_label {
    font-size: 20px;
}
QLabel#cut_summary_title_label {
    font-size: 12px;
}
/*
No dashed outline when clicking on the sort button in cuts view
*/
#cuts_sort_button {
    outline: none;
}
/* Dark backround for all scroll area */
QScrollArea {
    background-color: #2B2B2B;
    border: none;
}
/*
Not sure why, but we need to define a background color for these
widgets so the QScrollArea background-color is used.
Not setting it or setting it to anything else than a real
color doesn't work ...
*/
#project_area, #entity_area, #cuts_area, #cut_summary_widgets {
    background-color: rgb(43, 43, 43);
}

/*
Couldn't find a way to have a nice bottom
border for this widget : added a line just under it
and removing any border here
*/
QFrame#cut_summary_selectors_frame {
    border: none;
}
/*
Selector buttons, they are regular QPushButtons
styled to look like tab selectors
*/
SelectorButton {
    outline: none;
    font-size: 14px;
}

/*
Add a blue underline when they are checked and make them blue
*/
SelectorButton:checked {
    border-top: 2px none #2C93E2;
    border-bottom: 2px solid #2C93E2;
    outline: none;
    color: #2C93E2;
}
/*
Cut summary view mode buttons, disable regular
press style
*/
SelectorButton:pressed {
    border-top: 2px none #2C93E2;
    border-bottom: 2px solid #2C93E2;
    outline: none;
}
/*
Cut summary view mode buttons, highlight they are clickable
*/
SelectorButton:!checked:hover {
    color: white;
}
QAbstractButton#only_vfx_check_box {
    font-size: 14px;
}
/*
Make the radio button blue when checked
*/
QAbstractButton#only_vfx_check_box:checked {
    color: #2C93E2;
}
/*
#horizontalLayout_3 {
    background-color: orange;
}
*/
/* Red outline for omitted cut items */
CutDiffCard[omitted="true"] #icon_label {
    border: 1px solid #FC6246;
    border-radius: 2px;
}

/* Titles in PTR blue for cut summary cards */
CutDiffCard #head_title_label,
CutDiffCard #cut_title_label,
CutDiffCard #tail_title_label {
    color: #2C93E2;
}
/* Some of them are blue and bold */
CutDiffCard #shot_title_label,
CutDiffCard #version_title_label {
    color: #2C93E2;
    font-weight: bold;
}

/* Set font size for some labels */
CutDiffCard #shot_title_label,
CutDiffCard #version_title_label,
CutDiffCard #version_name_label,
CutDiffCard #status_label,
CutDiffCard #shot_name_line,
CutDiffCard #shot_head_in_label,
CutDiffCard #cut_in_label,
CutDiffCard #cut_out_label,
CutDiffCard #shot_tail_out_label,
CutDiffCard #head_title_label,
CutDiffCard #cut_title_label,
CutDiffCard #tail_title_label,
CutDiffCard #head_duration_label,
CutDiffCard #cut_duration_label,
CutDiffCard #tail_duration_label {
    font-size: 12px;
}
/* But reduce the one for some */
CutDiffCard #icon_label {
    font-size: 12px;
    font-weight: bold;
}
/* Styling for the cut values :

- Make the center row darker
- Add some left / right / bottom border to display inner grid

| shot_head_in_label | cut_in_label | separator label | cut_out_label | shot_tail_out_label |
 -------------------------------------------------------------------------------------------
|    head_title_label        |       cut_title_label         |       tail_title_label       |
 -------------------------------------------------------------------------------------------
|    head_duration_label     |       cut_duration_label      |       tail_duration_label    |


*/
/* Top row */
CutDiffCard #shot_head_in_label {
    background-color : #646464;
    border-left: 1px solid black;
}
CutDiffCard #cut_in_label, CutDiffCard #separator_label, CutDiffCard #cut_out_label {
    background-color : #646464;
}
CutDiffCard #shot_tail_out_label {
    background-color : #646464;
    border-right: 1px solid black;
}
/* Central row */
CutDiffCard #head_title_label {
    background-color : #565656;
    border-top: 1px solid black;
    border-left: 1px solid black;
}
CutDiffCard #cut_title_label {
    background-color : #565656;
    border-top: 1px solid black;
    border-left: 1px solid black;
}
CutDiffCard #tail_title_label {
    background-color : #565656;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}
/* Bottom row */
CutDiffCard #head_duration_label {
    background-color : #646464;
    border-top: 1px solid black;
    border-left: 1px solid black;
}
CutDiffCard #cut_duration_label {
    background-color : #646464;
    border-top: 1px solid black;
    border-left: 1px solid black;
}
CutDiffCard #tail_duration_label {
    background-color : #646464;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}
/*
Style for tooltip on extended thumbnail
for some mysterious reasons the background
is desperately black and can't be changed
so ... make the font color white ...
*/
ExtendedThumbnail QToolTip {
    border: 1px solid #2C93E2;
    background-color: red; /* will be obvious it works when it will ... */
    background-image: none;
    border-image: none;
    color: white;
}
/*
These "states" of CutDiffCard exist and can be styled. We're keeping
these three "states" in here as example reference for future use.
CutDiffCard[repeated=true] #shot_name_line{
    color: #A1A51A;
}
CutDiffCard[cut_order_changed=true] ExtendedThumbnail {
    color: #A1A51A;
}
CutDiffCard[diff_type="reinstated"]  #status_label {
    color: #A1A51A;
}
*/

/*
 Styling depending on the cut difference type
*/
CutDiffCard ExtendedThumbnail {
    color: #A5A5A5;
}
CutDiffCard[diff_type="new"] #status_label,
CutDiffCard[diff_type="new"]  ExtendedThumbnail
{
    color: #57B510;
}
CutDiffCard[diff_type="omitted"]  #status_label,
CutDiffCard[diff_type="omitted"]  ExtendedThumbnail
{
    color: #FC6246;
}
CutDiffCard[diff_type="rescan_needed"]  #status_label ,
{
    color: #57B510;
}
CutDiffCard[diff_type="cut_change"]  #status_label ,
{
}
CutDiffCard[diff_type="no_change"]  #status_label ,
{
    color: #A5A5A5;
}
CutDiffCard[diff_type="no_link"]  #status_label ,
{
    color: #FC6246;
}

/* Success window */
#success_page #success_frame {
    color: #2C93E2;
    border: 1px none #555555;
}