2016-01-06 00:25:06 +00:00
/* GTK NAMED COLORS */
@ define-color theme_fg_color # 000 ;
@ define-color theme_bg_color # fff ;
@ define-color theme_base_color # fff ;
@ define-color theme_selected_bg_color # 000 ;
@ define-color theme_selected_fg_color # fff ;
@ define-color insensitive_bg_color white ;
2016-03-15 12:21:15 +00:00
@ define-color insensitive_fg_color gray ;
2016-01-06 00:25:06 +00:00
@ define-color insensitive_base_color # fff ;
@ define-color theme_unfocused_fg_color # 000 ;
@ define-color theme_unfocused_bg_color # fff ;
@ define-color theme_unfocused_base_color # fff ;
@ define-color theme_unfocused_selected_bg_color # 000 ;
@ define-color theme_unfocused_selected_fg_color # fff ;
2016-07-24 16:58:45 +00:00
@ define-color unfocused_insensitive_color gray ;
2016-03-15 12:21:15 +00:00
@ define-color borders gray ;
@ define-color unfocused_borders # 8d8d8d ;
2016-01-06 00:25:06 +00:00
@ define-color warning_color # f57900 ;
@ define-color error_color # cc0000 ;
@ define-color success_color # 73d216 ;
@ define-color wm_title shade ( # 000 , 1 . 8 ) ;
@ define-color wm_unfocused_title # 000 ;
@ define-color wm_highlight # fff ;
@ define-color wm_borders_edge # fff ;
@ define-color wm_bg_a shade ( # fff , 1 . 2 ) ;
@ define-color wm_bg_b # fff ;
@ define-color wm_shadow alpha ( black , 0 . 35 ) ;
@ define-color wm_border alpha ( black , 0 . 18 ) ;
@ define-color wm_button_hover_color_a shade ( # fff , 1 . 3 ) ;
@ define-color wm_button_hover_color_b # fff ;
@ define-color wm_button_active_color_a shade ( # fff , 0 . 85 ) ;
@ define-color wm_button_active_color_b shade ( # fff , 0 . 89 ) ;
@ define-color wm_button_active_color_c shade ( # fff , 0 . 9 ) ;
@ define-color content_view_bg # fff ;
2018-01-01 19:53:43 +00:00
* { padding : 0 ; - gtk-icon-style : symbolic ; outline-style : none ; }
* : focus ( visible ) { outline-color : currentColor ; outline-style : dashed ; outline-offset : -4 px ; outline-width : 2 px ; - gtk-outline-radius : 2 px ; }
2017-05-31 17:47:57 +00:00
/*************** Base States * */
. background { color : #000 ; background-color : #fff ; }
. background : backdrop { text-shadow : none ; - gtk-icon-shadow : none ; color : #1a1a1a ; background-color : #fff ; }
/* These wildcard seems unavoidable, need to investigate. Wildcards are bad and troublesome, use them with care, or better, just don't. Everytime a wildcard is used a kitten dies, painfully. */
* : disabled { - gtk-icon-filter : opacity ( 0.5 ) ; }
. gtkstyle-fallback { background-color : #fff ; color : #000 ; }
. gtkstyle-fallback : hover { background-color : white ; color : #000 ; }
. gtkstyle-fallback : active { background-color : #e6e6e6 ; color : #000 ; }
. gtkstyle-fallback : disabled { background-color : white ; color : gray ; }
. gtkstyle-fallback : selected { background-color : #000 ; color : #fff ; }
2018-01-01 19:53:43 +00:00
. normal-icons { - gtk-icon-size : 16 px ; }
. large-icons { - gtk-icon-size : 32 px ; }
2017-05-31 17:47:57 +00:00
. view , textview text , iconview { color : #000 ; background-color : #fff ; }
. view : backdrop , textview text : backdrop , iconview : backdrop { color : #000 ; background-color : #fff ; }
. view : disabled , textview text : disabled , iconview : disabled { color : gray ; background-color : white ; }
. rubberband , rubberband , flowbox rubberband , treeview . view rubberband { border : 1 px solid #000 ; background-color : rgba ( 0 , 0 , 0 , 0.2 ) ; }
flowbox flowboxchild { padding : 3 px ; border-radius : 3 px ; }
flowbox flowboxchild : selected { outline-offset : -2 px ; }
label : disabled , label : backdrop : disabled { color : gray ; }
popover . background . touch-selection , popover . background . magnifier , . csd popover . background . touch-selection , . csd popover . background . magnifier , popover . background . osd , . csd popover . background . osd , . osd { color : #fff ; border : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-clip : padding-box ; }
popover . background . touch-selection : backdrop , popover . background . magnifier : backdrop , popover . background . osd : backdrop , . osd : backdrop { text-shadow : none ; - gtk-icon-shadow : none ; }
/********************* Spinner Animation * */
@ keyframes spin { to { - gtk-icon-transform : rotate ( 1 turn ) ; } }
spinner { background-image : none ; opacity : 0 ; - gtk-icon-source : - gtk-icontheme ( "process-working-symbolic" ) ; }
spinner : checked { opacity : 1 ; animation : spin 1 s linear infinite ; }
spinner : checked : disabled { opacity : 0.5 ; }
/**************** Text Entries * */
spinbutton : not ( . vertical ) , entry { min-height : 32 px ; padding-left : 8 px ; padding-right : 8 px ; border : 1 px solid ; border-radius : 3 px ; transition : all 200 ms cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) ; background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; border-color : gray ; box-shadow : inset 0 2 px 2 px -2 px gray ; }
spinbutton : not ( . vertical ) image . left , entry image . left { padding-left : 0 ; padding-right : 6 px ; }
spinbutton : not ( . vertical ) image . right , entry image . right { padding-left : 6 px ; padding-right : 0 ; }
spinbutton : not ( . vertical ) undershoot . left , entry undershoot . left { background-color : transparent ; background-image : linear-gradient ( to top , rgba ( 255 , 255 , 255 , 0.2 ) 50 % , rgba ( 0 , 0 , 0 , 0.2 ) 50 % ) ; padding-left : 1 px ; background-size : 1 px 10 px ; background-repeat : repeat-y ; background-origin : content-box ; background-position : left center ; border : none ; box-shadow : none ; }
spinbutton : not ( . vertical ) undershoot . right , entry undershoot . right { background-color : transparent ; background-image : linear-gradient ( to top , rgba ( 255 , 255 , 255 , 0.2 ) 50 % , rgba ( 0 , 0 , 0 , 0.2 ) 50 % ) ; padding-right : 1 px ; background-size : 1 px 10 px ; background-repeat : repeat-y ; background-origin : content-box ; background-position : right center ; border : none ; box-shadow : none ; }
2017-10-31 19:57:45 +00:00
spinbutton . flat : focus : not ( . vertical ) , spinbutton . flat : backdrop : not ( . vertical ) , spinbutton . flat : disabled : not ( . vertical ) , spinbutton . flat : not ( . vertical ) , entry . flat : focus , entry . flat : backdrop , entry . flat : disabled , entry . flat { min-height : 0 ; padding : 2 px ; background-image : none ; border-color : transparent ; border-radius : 0 ; box-shadow : none ; }
2017-05-31 17:47:57 +00:00
spinbutton : focus : not ( . vertical ) , entry : focus { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; border-color : #000 ; box-shadow : inset 0 2 px 2 px -2 px gray , inset 0 0 0 1 px #000 ; }
spinbutton : disabled : not ( . vertical ) , entry : disabled { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; color : gray ; border-color : gray ; background-image : linear-gradient ( to bottom , white , white ) ; box-shadow : none ; }
spinbutton : backdrop : not ( . vertical ) , entry : backdrop { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; color : #000 ; background-image : linear-gradient ( to bottom , #fff , #fff ) ; box-shadow : 0 1 px rgba ( 255 , 255 , 255 , 0 ) ; }
spinbutton : backdrop : disabled : not ( . vertical ) , entry : backdrop : disabled { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; color : gray ; background-image : linear-gradient ( to bottom , #fff , #fff ) ; box-shadow : 0 1 px rgba ( 255 , 255 , 255 , 0 ) ; }
spinbutton . error : not ( . vertical ) , entry . error { color : #cc0000 ; border-color : #cc0000 ; }
spinbutton . error : focus : not ( . vertical ) , entry . error : focus { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; border-color : #cc0000 ; box-shadow : inset 0 2 px 2 px -2 px gray , inset 0 0 0 1 px #cc0000 ; }
spinbutton . error : selected : focus : not ( . vertical ) , spinbutton . error : selected : not ( . vertical ) , entry . error : selected : focus , entry . error : selected { background-color : #cc0000 ; }
spinbutton . warning : not ( . vertical ) , entry . warning { color : #f57900 ; border-color : #f57900 ; }
spinbutton . warning : focus : not ( . vertical ) , entry . warning : focus { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; border-color : #f57900 ; box-shadow : inset 0 2 px 2 px -2 px gray , inset 0 0 0 1 px #f57900 ; }
spinbutton . warning : selected : focus : not ( . vertical ) , spinbutton . warning : selected : not ( . vertical ) , entry . warning : selected : focus , entry . warning : selected { background-color : #f57900 ; }
spinbutton : not ( . vertical ) image , entry image { color : #333333 ; }
spinbutton : not ( . vertical ) image : hover , entry image : hover { color : #000 ; }
spinbutton : not ( . vertical ) image : active , entry image : active { color : #000 ; }
spinbutton : not ( . vertical ) image : backdrop , entry image : backdrop { color : #333333 ; }
spinbutton : drop ( active ) : focus : not ( . vertical ) , spinbutton : drop ( active ) : not ( . vertical ) , entry : drop ( active ) : focus , entry : drop ( active ) { border-color : #000 ; box-shadow : inset 0 0 0 1 px #000 ; }
. osd spinbutton : not ( . vertical ) , . osd entry { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; }
. osd spinbutton : focus : not ( . vertical ) , . osd entry : focus { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; }
. osd spinbutton : backdrop : not ( . vertical ) , . osd entry : backdrop { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; }
. osd spinbutton : disabled : not ( . vertical ) , . osd entry : disabled { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; }
spinbutton : not ( . vertical ) progress , entry progress { margin : 2 px -6 px ; background-color : transparent ; background-image : none ; border-radius : 0 ; border-width : 0 0 2 px ; border-color : #000 ; border-style : solid ; box-shadow : none ; }
spinbutton : not ( . vertical ) progress : backdrop , entry progress : backdrop { background-color : transparent ; }
. linked : not ( . vertical ) > spinbutton : focus : not ( . vertical ) + spinbutton : not ( . vertical ) , . linked : not ( . vertical ) > spinbutton : focus : not ( . vertical ) + button , . linked : not ( . vertical ) > spinbutton : focus : not ( . vertical ) + combobox > box > button . combo , . linked : not ( . vertical ) > entry : focus + spinbutton : not ( . vertical ) , . linked : not ( . vertical ) > entry : focus + button , . linked : not ( . vertical ) > entry : focus + combobox > box > button . combo , . linked : not ( . vertical ) > spinbutton : focus : not ( . vertical ) + entry , . linked : not ( . vertical ) > entry : focus + entry { border-left-color : #000 ; }
. linked : not ( . vertical ) > spinbutton : drop ( active ) : not ( . vertical ) + spinbutton : not ( . vertical ) , . linked : not ( . vertical ) > spinbutton : drop ( active ) : not ( . vertical ) + button , . linked : not ( . vertical ) > spinbutton : drop ( active ) : not ( . vertical ) + combobox > box > button . combo , . linked : not ( . vertical ) > entry : drop ( active ) + spinbutton : not ( . vertical ) , . linked : not ( . vertical ) > entry : drop ( active ) + button , . linked : not ( . vertical ) > entry : drop ( active ) + combobox > box > button . combo , . linked : not ( . vertical ) > spinbutton : drop ( active ) : not ( . vertical ) + entry , . linked : not ( . vertical ) > entry : drop ( active ) + entry { border-left-color : #000 ; }
. linked . vertical > spinbutton : not ( : disabled ) : not ( . vertical ) + entry : not ( : disabled ) , . linked . vertical > spinbutton : not ( : disabled ) : not ( . vertical ) + spinbutton : not ( : disabled ) : not ( . vertical ) , . linked . vertical > entry : not ( : disabled ) + entry : not ( : disabled ) , . linked . vertical > entry : not ( : disabled ) + spinbutton : not ( : disabled ) : not ( . vertical ) { border-top-color : #d9d9d9 ; background-image : linear-gradient ( to bottom , #fff , #fff ) ; }
. linked . vertical > spinbutton : not ( : disabled ) : not ( . vertical ) + entry : not ( : disabled ) : backdrop , . linked . vertical > spinbutton : not ( : disabled ) : not ( . vertical ) + spinbutton : not ( : disabled ) : backdrop : not ( . vertical ) , . linked . vertical > entry : not ( : disabled ) + entry : not ( : disabled ) : backdrop , . linked . vertical > entry : not ( : disabled ) + spinbutton : not ( : disabled ) : backdrop : not ( . vertical ) { border-top-color : #dddddd ; background-image : linear-gradient ( to bottom , #fff , #fff ) ; }
. linked . vertical > spinbutton : disabled : not ( . vertical ) + spinbutton : disabled : not ( . vertical ) , . linked . vertical > spinbutton : disabled : not ( . vertical ) + entry : disabled , . linked . vertical > entry : disabled + spinbutton : disabled : not ( . vertical ) , . linked . vertical > entry : disabled + entry : disabled { border-top-color : #d9d9d9 ; }
. linked . vertical > spinbutton : not ( . vertical ) + spinbutton : focus : not ( : only-child ) : not ( . vertical ) , . linked . vertical > spinbutton : not ( . vertical ) + entry : focus : not ( : only-child ) , . linked . vertical > entry + spinbutton : focus : not ( : only-child ) : not ( . vertical ) , . linked . vertical > entry + entry : focus : not ( : only-child ) { border-top-color : #000 ; }
. linked . vertical > spinbutton : not ( . vertical ) + spinbutton : drop ( active ) : not ( : only-child ) : not ( . vertical ) , . linked . vertical > spinbutton : not ( . vertical ) + entry : drop ( active ) : not ( : only-child ) , . linked . vertical > entry + spinbutton : drop ( active ) : not ( : only-child ) : not ( . vertical ) , . linked . vertical > entry + entry : drop ( active ) : not ( : only-child ) { border-top-color : #000 ; }
. linked . vertical > spinbutton : focus : not ( : only-child ) : not ( . vertical ) + spinbutton : not ( . vertical ) , . linked . vertical > spinbutton : focus : not ( : only-child ) : not ( . vertical ) + entry , . linked . vertical > spinbutton : focus : not ( : only-child ) : not ( . vertical ) + button , . linked . vertical > spinbutton : focus : not ( : only-child ) : not ( . vertical ) + combobox > box > button . combo , . linked . vertical > entry : focus : not ( : only-child ) + spinbutton : not ( . vertical ) , . linked . vertical > entry : focus : not ( : only-child ) + entry , . linked . vertical > entry : focus : not ( : only-child ) + button , . linked . vertical > entry : focus : not ( : only-child ) + combobox > box > button . combo { border-top-color : #000 ; }
. linked . vertical > spinbutton : drop ( active ) : not ( : only-child ) : not ( . vertical ) + spinbutton : not ( . vertical ) , . linked . vertical > spinbutton : drop ( active ) : not ( : only-child ) : not ( . vertical ) + entry , . linked . vertical > spinbutton : drop ( active ) : not ( : only-child ) : not ( . vertical ) + button , . linked . vertical > spinbutton : drop ( active ) : not ( : only-child ) : not ( . vertical ) + combobox > box > button . combo , . linked . vertical > entry : drop ( active ) : not ( : only-child ) + spinbutton : not ( . vertical ) , . linked . vertical > entry : drop ( active ) : not ( : only-child ) + entry , . linked . vertical > entry : drop ( active ) : not ( : only-child ) + button , . linked . vertical > entry : drop ( active ) : not ( : only-child ) + combobox > box > button . combo { border-top-color : #000 ; }
/*********** Buttons * */
@ keyframes needs_attention { from { background-image : radial-gradient ( #000 0 % , transparent 0 % ) ; }
to { background-image : radial-gradient ( #000 68 % , transparent 70 % ) ; } }
button . titlebutton , button { min-height : 24 px ; min-width : 16 px ; padding : 4 px 8 px ; border : 1 px solid ; border-radius : 3 px ; transition : all 200 ms cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) ; border-width : 2 px ; border-style : solid ; color : #000 ; background-image : none ; background-color : #fff ; border-color : gray ; }
2017-10-06 01:15:59 +00:00
button . titlebutton : disabled , button : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2017-10-06 01:15:59 +00:00
button . titlebutton : disabled : active , button . titlebutton : disabled : checked , button : disabled : active , button : disabled : checked { border-width : 2 px ; border-style : solid ; color : gray ; border-color : silver ; background-image : none ; background-color : white ; }
2017-05-31 17:47:57 +00:00
2018-01-01 19:53:43 +00:00
button . titlebutton : backdrop , button : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : #8d8d8d ; background-image : none ; - gtk-icon-filter : none ; }
2017-05-31 17:47:57 +00:00
2017-10-06 01:15:59 +00:00
button . titlebutton : backdrop : active , button . titlebutton : backdrop : checked , button : backdrop : active , button : backdrop : checked { border-width : 2 px ; border-style : solid ; color : white ; background-color : #8d8d8d ; border-color : #8d8d8d ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2018-01-01 19:53:43 +00:00
button . titlebutton : backdrop : disabled , button : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2017-10-06 01:15:59 +00:00
button . titlebutton : backdrop : disabled : active , button . titlebutton : backdrop : disabled : checked , button : backdrop : disabled : active , button : backdrop : disabled : checked { border-width : 2 px ; border-style : solid ; color : gray ; border-color : silver ; background-image : none ; background-color : #f6f6f6 ; }
2017-05-31 17:47:57 +00:00
2017-10-06 01:15:59 +00:00
button . sidebar-button , button . titlebutton , button . flat { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; transition : none ; }
2017-05-31 17:47:57 +00:00
2017-10-06 01:15:59 +00:00
button . sidebar-button : hover , button . titlebutton : hover , button . flat : hover { transition : all 200 ms cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) ; transition-duration : 500 ms ; }
2017-05-31 17:47:57 +00:00
2017-10-06 01:15:59 +00:00
button . sidebar-button : hover : active , button . titlebutton : hover : active , button . flat : hover : active { transition : all 200 ms cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) ; }
2017-05-31 17:47:57 +00:00
2017-10-06 01:15:59 +00:00
button . sidebar-button : backdrop , button . titlebutton : backdrop , button . sidebar-button : disabled , button . titlebutton : disabled , button . sidebar-button : backdrop : disabled , button . titlebutton : backdrop : disabled , button . flat : backdrop , button . flat : disabled , button . flat : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : transparent ; background-image : none ; border-color : transparent ; }
2017-05-31 17:47:57 +00:00
2017-10-06 01:32:37 +00:00
button . titlebutton : hover , button . sidebar-button : hover , button . titlebutton : hover , button : hover , button . flat : hover { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : gray ; background-image : none ; - gtk-icon-filter : brightness ( 1.2 ) ; }
2017-05-31 17:47:57 +00:00
2017-10-06 01:15:59 +00:00
button . titlebutton : active , button . titlebutton : checked , button : active , button : checked { border-width : 2 px ; border-style : solid ; background-image : none ; color : white ; background-color : black ; border-color : gray ; transition-duration : 50 ms ; }
2017-05-31 17:47:57 +00:00
button . image-button . titlebutton , button . image-button { min-width : 24 px ; padding-left : 4 px ; padding-right : 4 px ; }
button . text-button . titlebutton , button . text-button { padding-left : 16 px ; padding-right : 16 px ; }
button . text-button . image-button . titlebutton , button . text-button . image-button { padding-left : 8 px ; padding-right : 8 px ; }
button . text-button . image-button . titlebutton label , button . text-button . image-button label { padding-left : 8 px ; padding-right : 8 px ; }
combobox : drop ( active ) button . combo , button . titlebutton : drop ( active ) , button : drop ( active ) { color : #000 ; border-color : #000 ; box-shadow : inset 0 0 0 1 px #000 ; }
row : selected button { border-color : #000 ; }
row : selected button . sidebar-button : not ( : active ) : not ( : checked ) : not ( : hover ) : not ( disabled ) , row : selected button . flat : not ( : active ) : not ( : checked ) : not ( : hover ) : not ( disabled ) { color : #fff ; border-color : transparent ; }
row : selected button . sidebar-button : not ( : active ) : not ( : checked ) : not ( : hover ) : not ( disabled ) : backdrop , row : selected button . flat : not ( : active ) : not ( : checked ) : not ( : hover ) : not ( disabled ) : backdrop { color : #fff ; }
button . osd { color : #fff ; border-radius : 5 px ; border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; border : none ; box-shadow : none ; }
button . osd . image-button { min-height : 48 px ; min-width : 48 px ; }
button . osd : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : rgba ( 77 , 77 , 77 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; border : none ; box-shadow : none ; }
button . osd : active , button . osd : checked { border-width : 2 px ; border-style : solid ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-color : #fff ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; box-shadow : none ; border : none ; box-shadow : none ; }
button . osd : disabled : backdrop , button . osd : disabled { border-width : 2 px ; border-style : solid ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : gray ; border : none ; }
button . osd : backdrop { border-width : 2 px ; border-style : solid ; border : none ; }
popover . background . touch-selection button , popover . background . magnifier button , . csd popover . background . touch-selection button , . csd popover . background . magnifier button , . osd button { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
popover . background . touch-selection button : hover , popover . background . magnifier button : hover , . osd button : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : rgba ( 77 , 77 , 77 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
popover . background . touch-selection button : active : backdrop , popover . background . magnifier button : active : backdrop , popover . background . touch-selection button : active , popover . background . magnifier button : active , popover . background . touch-selection button : checked : backdrop , popover . background . magnifier button : checked : backdrop , popover . background . touch-selection button : checked , popover . background . magnifier button : checked , . osd button : active : backdrop , . osd button : active , . osd button : checked : backdrop , . osd button : checked { border-width : 2 px ; border-style : solid ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-color : #fff ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; box-shadow : none ; }
popover . background . touch-selection button : disabled : backdrop , popover . background . magnifier button : disabled : backdrop , popover . background . touch-selection button : disabled , popover . background . magnifier button : disabled , . osd button : disabled : backdrop , . osd button : disabled { border-width : 2 px ; border-style : solid ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : gray ; }
popover . background . touch-selection button : backdrop , popover . background . magnifier button : backdrop , . osd button : backdrop { border-width : 2 px ; border-style : solid ; }
popover . background . touch-selection button . flat , popover . background . magnifier button . flat , . osd button . flat { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; box-shadow : none ; text-shadow : 0 1 px black ; - gtk-icon-shadow : 0 1 px black ; }
popover . background . touch-selection button . flat : hover , popover . background . magnifier button . flat : hover , . osd button . flat : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : rgba ( 77 , 77 , 77 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
popover . background . touch-selection button . flat : disabled , popover . background . magnifier button . flat : disabled , . osd button . flat : disabled { border-width : 2 px ; border-style : solid ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : gray ; background-image : none ; border-color : transparent ; box-shadow : none ; }
popover . background . touch-selection button . flat : backdrop , popover . background . magnifier button . flat : backdrop , . osd button . flat : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; }
popover . background . touch-selection button . flat : active , popover . background . magnifier button . flat : active , popover . background . touch-selection button . flat : checked , popover . background . magnifier button . flat : checked , . osd button . flat : active , . osd button . flat : checked { border-width : 2 px ; border-style : solid ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-color : #fff ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; box-shadow : none ; }
button . suggested-action { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : #000 ; border-color : black ; }
button . suggested-action . flat { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : #000 ; }
button . suggested-action : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : #000 ; border-color : black ; background-image : none ; }
button . suggested-action : active , button . suggested-action : checked { border-width : 2 px ; border-style : solid ; background-image : none ; color : black ; background-color : white ; border-color : black ; }
button . suggested-action : backdrop , button . suggested-action . flat : backdrop { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : #000 ; border-color : #000 ; background-image : none ; }
button . suggested-action : backdrop : active , button . suggested-action : backdrop : checked , button . suggested-action . flat : backdrop : active , button . suggested-action . flat : backdrop : checked { border-width : 2 px ; border-style : solid ; color : white ; background-color : #8d8d8d ; border-color : #8d8d8d ; background-image : none ; }
button . suggested-action : backdrop : disabled , button . suggested-action . flat : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
button . suggested-action : backdrop : disabled : active , button . suggested-action : backdrop : disabled : checked , button . suggested-action . flat : backdrop : disabled : active , button . suggested-action . flat : backdrop : disabled : checked { border-width : 2 px ; border-style : solid ; color : gray ; border-color : silver ; background-image : none ; background-color : #f6f6f6 ; }
button . suggested-action . flat : backdrop , button . suggested-action . flat : disabled , button . suggested-action . flat : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; }
button . suggested-action : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
button . suggested-action : disabled : active , button . suggested-action : disabled : checked { border-width : 2 px ; border-style : solid ; color : gray ; border-color : silver ; background-image : none ; background-color : white ; }
. osd button . suggested-action { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd button . suggested-action : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : rgba ( 77 , 77 , 77 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd button . suggested-action : active : backdrop , . osd button . suggested-action : active , . osd button . suggested-action : checked : backdrop , . osd button . suggested-action : checked { border-width : 2 px ; border-style : solid ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-color : #fff ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; box-shadow : none ; }
. osd button . suggested-action : disabled : backdrop , . osd button . suggested-action : disabled { border-width : 2 px ; border-style : solid ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : gray ; }
. osd button . suggested-action : backdrop { border-width : 2 px ; border-style : solid ; }
button . destructive-action { border-width : 2 px ; border-style : solid ; color : white ; background-image : none ; background-color : #ef2929 ; border-color : #8e0b0b ; }
button . destructive-action . flat { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : #ef2929 ; }
button . destructive-action : hover { border-width : 2 px ; border-style : solid ; color : white ; background-color : #ef2929 ; border-color : #8e0b0b ; background-image : none ; }
button . destructive-action : active , button . destructive-action : checked { border-width : 2 px ; border-style : solid ; background-image : none ; color : black ; background-color : #10d6d6 ; border-color : #8e0b0b ; }
button . destructive-action : backdrop , button . destructive-action . flat : backdrop { border-width : 2 px ; border-style : solid ; color : white ; background-color : #ef2929 ; border-color : #ef2929 ; background-image : none ; }
button . destructive-action : backdrop : active , button . destructive-action : backdrop : checked , button . destructive-action . flat : backdrop : active , button . destructive-action . flat : backdrop : checked { border-width : 2 px ; border-style : solid ; color : white ; background-color : #8d8d8d ; border-color : #8d8d8d ; background-image : none ; }
button . destructive-action : backdrop : disabled , button . destructive-action . flat : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
button . destructive-action : backdrop : disabled : active , button . destructive-action : backdrop : disabled : checked , button . destructive-action . flat : backdrop : disabled : active , button . destructive-action . flat : backdrop : disabled : checked { border-width : 2 px ; border-style : solid ; color : gray ; border-color : silver ; background-image : none ; background-color : #f6f6f6 ; }
button . destructive-action . flat : backdrop , button . destructive-action . flat : disabled , button . destructive-action . flat : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : rgba ( 239 , 41 , 41 , 0.8 ) ; }
button . destructive-action : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
button . destructive-action : disabled : active , button . destructive-action : disabled : checked { border-width : 2 px ; border-style : solid ; color : gray ; border-color : silver ; background-image : none ; background-color : white ; }
. osd button . destructive-action { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd button . destructive-action : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : rgba ( 77 , 77 , 77 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd button . destructive-action : active : backdrop , . osd button . destructive-action : active , . osd button . destructive-action : checked : backdrop , . osd button . destructive-action : checked { border-width : 2 px ; border-style : solid ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-color : #fff ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; box-shadow : none ; }
. osd button . destructive-action : disabled : backdrop , . osd button . destructive-action : disabled { border-width : 2 px ; border-style : solid ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : gray ; }
. osd button . destructive-action : backdrop { border-width : 2 px ; border-style : solid ; }
. stack-switcher > button { outline-offset : -3 px ; }
. stack-switcher > button > label { padding-left : 6 px ; padding-right : 6 px ; }
. stack-switcher > button > image { padding-left : 6 px ; padding-right : 6 px ; padding-top : 3 px ; padding-bottom : 3 px ; }
. stack-switcher > button . text-button { padding-left : 10 px ; padding-right : 10 px ; }
. stack-switcher > button . image-button { padding-left : 2 px ; padding-right : 2 px ; }
. stack-switcher > button . needs-attention : active > label , . stack-switcher > button . needs-attention : active > image , . stack-switcher > button . needs-attention : checked > label , . stack-switcher > button . needs-attention : checked > image { animation : none ; background-image : none ; }
. inline-toolbar button , . inline-toolbar button : backdrop { border-radius : 2 px ; border-width : 1 px ; }
. primary-toolbar button { - gtk-icon-shadow : none ; }
. stack-switcher > button . needs-attention > label , . stack-switcher > button . needs-attention > image , stacksidebar row . needs-attention > label { animation : needs_attention 150 ms ease-in ; background-image : radial-gradient ( #000 68 % , transparent 70 % ) ; background-size : 6 px 6 px ; background-repeat : no-repeat ; background-position : right 3 px ; }
. stack-switcher > button . needs-attention > label : backdrop , . stack-switcher > button . needs-attention > image : backdrop , stacksidebar row . needs-attention > label : backdrop { background-size : 6 px 6 px ; }
. stack-switcher > button . needs-attention > label : dir ( rtl ) , . stack-switcher > button . needs-attention > image : dir ( rtl ) , stacksidebar row . needs-attention > label : dir ( rtl ) { background-position : left 3 px ; }
. inline-toolbar toolbutton > button { border-width : 2 px ; border-style : solid ; color : #000 ; background-image : none ; background-color : #fff ; border-color : gray ; }
. inline-toolbar toolbutton > button : hover { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : gray ; background-image : none ; }
. inline-toolbar toolbutton > button : active , . inline-toolbar toolbutton > button : checked { border-width : 2 px ; border-style : solid ; background-image : none ; color : white ; background-color : black ; border-color : gray ; }
. inline-toolbar toolbutton > button : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
. inline-toolbar toolbutton > button : disabled : active , . inline-toolbar toolbutton > button : disabled : checked { border-width : 2 px ; border-style : solid ; color : gray ; border-color : silver ; background-image : none ; background-color : white ; }
. inline-toolbar toolbutton > button : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : #8d8d8d ; background-image : none ; }
. inline-toolbar toolbutton > button : backdrop : active , . inline-toolbar toolbutton > button : backdrop : checked { border-width : 2 px ; border-style : solid ; color : white ; background-color : #8d8d8d ; border-color : #8d8d8d ; background-image : none ; }
. inline-toolbar toolbutton > button : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
. inline-toolbar toolbutton > button : backdrop : disabled : active , . inline-toolbar toolbutton > button : backdrop : disabled : checked { border-width : 2 px ; border-style : solid ; color : gray ; border-color : silver ; background-image : none ; background-color : #f6f6f6 ; }
themes: Fix swapped borders on RTL PathBar buttons
.linked assumes the container is a GtkBox, which is documented as never
flipping children in RTL, so :first-child is always the left child, etc.
GtkBox does that by reordering its CSS nodes when the direction changes.
But most widgets don’t do that, so :first|last-child are 1st/last ADDED
and swap sides in RTL. GtkPathBar is so, and ignoring that in our themes
meant that in RTL, its left/right buttons got each other’s borders. Yuk!
This patch adds the groundwork for supporting widgets like that, via the
%linked_flippable placeholder, and applies that to override buttons in
filechooser .path-bar.linked > button
so that the correct borders get applied to those buttons when using RTL.
Note that I select only PathBars within a FileChooser because we also
have NautilusPathBar, which also uses widget.path-bar – but *does* flip
its nodes for RTL already, so letting that get affected broke it again!
https://bugzilla.gnome.org/show_bug.cgi?id=772817
2018-04-22 20:45:18 +00:00
toolbar . inline-toolbar toolbutton > button . flat , searchbar . inline-toolbar toolbutton > button . flat , toolbar . inline-toolbar toolbutton : backdrop > button . flat , searchbar . inline-toolbar toolbutton : backdrop > button . flat , . linked : not ( . vertical ) > spinbutton : not ( . vertical ) , . linked : not ( . vertical ) > entry , . inline-toolbar button , . inline-toolbar button : backdrop , . linked > button , . linked > button : hover , . linked > button : active , . linked > button : checked , . linked > button : backdrop , filechooser . path-bar . linked > button , . linked > combobox > box > button . combo : dir ( ltr ) , . linked > combobox > box > button . combo : dir ( rtl ) { border-radius : 0 ; border-right-style : none ; }
2017-05-31 17:47:57 +00:00
themes: Fix swapped borders on RTL PathBar buttons
.linked assumes the container is a GtkBox, which is documented as never
flipping children in RTL, so :first-child is always the left child, etc.
GtkBox does that by reordering its CSS nodes when the direction changes.
But most widgets don’t do that, so :first|last-child are 1st/last ADDED
and swap sides in RTL. GtkPathBar is so, and ignoring that in our themes
meant that in RTL, its left/right buttons got each other’s borders. Yuk!
This patch adds the groundwork for supporting widgets like that, via the
%linked_flippable placeholder, and applies that to override buttons in
filechooser .path-bar.linked > button
so that the correct borders get applied to those buttons when using RTL.
Note that I select only PathBars within a FileChooser because we also
have NautilusPathBar, which also uses widget.path-bar – but *does* flip
its nodes for RTL already, so letting that get affected broke it again!
https://bugzilla.gnome.org/show_bug.cgi?id=772817
2018-04-22 20:45:18 +00:00
. linked : not ( . vertical ) > spinbutton : first-child : not ( . vertical ) , . linked : not ( . vertical ) > entry : first-child , . inline-toolbar button : first-child , . linked > button : first-child , toolbar . inline-toolbar toolbutton : first-child > button . flat , searchbar . inline-toolbar toolbutton : first-child > button . flat , toolbar . inline-toolbar toolbutton : backdrop : first-child > button . flat , searchbar . inline-toolbar toolbutton : backdrop : first-child > button . flat , combobox . linked button : nth-child ( 2 ) : dir ( rtl ) , . linked : not ( . vertical ) > combobox : first-child > box > button . combo , filechooser . path-bar . linked > button : dir ( ltr ) : first-child , filechooser . path-bar . linked > button : dir ( rtl ) : last-child { border-top-left-radius : 3 px ; border-bottom-left-radius : 3 px ; border-top-right-radius : 0 ; border-bottom-right-radius : 0 ; border-right-style : none ; }
2017-05-31 17:47:57 +00:00
themes: Fix swapped borders on RTL PathBar buttons
.linked assumes the container is a GtkBox, which is documented as never
flipping children in RTL, so :first-child is always the left child, etc.
GtkBox does that by reordering its CSS nodes when the direction changes.
But most widgets don’t do that, so :first|last-child are 1st/last ADDED
and swap sides in RTL. GtkPathBar is so, and ignoring that in our themes
meant that in RTL, its left/right buttons got each other’s borders. Yuk!
This patch adds the groundwork for supporting widgets like that, via the
%linked_flippable placeholder, and applies that to override buttons in
filechooser .path-bar.linked > button
so that the correct borders get applied to those buttons when using RTL.
Note that I select only PathBars within a FileChooser because we also
have NautilusPathBar, which also uses widget.path-bar – but *does* flip
its nodes for RTL already, so letting that get affected broke it again!
https://bugzilla.gnome.org/show_bug.cgi?id=772817
2018-04-22 20:45:18 +00:00
. linked : not ( . vertical ) > spinbutton : last-child : not ( . vertical ) , . linked : not ( . vertical ) > entry : last-child , . inline-toolbar button : last-child , . linked > button : last-child , toolbar . inline-toolbar toolbutton : last-child > button . flat , searchbar . inline-toolbar toolbutton : last-child > button . flat , toolbar . inline-toolbar toolbutton : backdrop : last-child > button . flat , searchbar . inline-toolbar toolbutton : backdrop : last-child > button . flat , combobox . linked button : nth-child ( 2 ) : dir ( ltr ) , . linked : not ( . vertical ) > combobox : last-child > box > button . combo , filechooser . path-bar . linked > button : dir ( ltr ) : last-child , filechooser . path-bar . linked > button : dir ( rtl ) : first-child { border-top-left-radius : 0 ; border-bottom-left-radius : 0 ; border-top-right-radius : 3 px ; border-bottom-right-radius : 3 px ; border-right-style : solid ; }
2017-05-31 17:47:57 +00:00
. linked : not ( . vertical ) > spinbutton : only-child : not ( . vertical ) , . linked : not ( . vertical ) > entry : only-child , . inline-toolbar button : only-child , . linked > button : only-child , toolbar . inline-toolbar toolbutton : only-child > button . flat , searchbar . inline-toolbar toolbutton : only-child > button . flat , toolbar . inline-toolbar toolbutton : backdrop : only-child > button . flat , searchbar . inline-toolbar toolbutton : backdrop : only-child > button . flat , . linked : not ( . vertical ) > combobox : only-child > box > button . combo { border-radius : 3 px ; border-style : solid ; }
themes: Fix swapped borders on RTL PathBar buttons
.linked assumes the container is a GtkBox, which is documented as never
flipping children in RTL, so :first-child is always the left child, etc.
GtkBox does that by reordering its CSS nodes when the direction changes.
But most widgets don’t do that, so :first|last-child are 1st/last ADDED
and swap sides in RTL. GtkPathBar is so, and ignoring that in our themes
meant that in RTL, its left/right buttons got each other’s borders. Yuk!
This patch adds the groundwork for supporting widgets like that, via the
%linked_flippable placeholder, and applies that to override buttons in
filechooser .path-bar.linked > button
so that the correct borders get applied to those buttons when using RTL.
Note that I select only PathBars within a FileChooser because we also
have NautilusPathBar, which also uses widget.path-bar – but *does* flip
its nodes for RTL already, so letting that get affected broke it again!
https://bugzilla.gnome.org/show_bug.cgi?id=772817
2018-04-22 20:45:18 +00:00
filechooser . path-bar . linked > button : only-child { border-radius : 3 px ; border-style : solid ; }
2017-05-31 17:47:57 +00:00
. linked . vertical > spinbutton : not ( . vertical ) , . linked . vertical > entry , . linked . vertical > button , . linked . vertical > button : hover , . linked . vertical > button : active , . linked . vertical > button : checked , . linked . vertical > button : backdrop , . linked . vertical > combobox > box > button . combo { border-style : solid solid none solid ; border-radius : 0 ; }
. linked . vertical > spinbutton : first-child : not ( . vertical ) , . linked . vertical > entry : first-child , . linked . vertical > button : first-child , . linked . vertical > combobox : first-child > box > button . combo { border-top-left-radius : 3 px ; border-top-right-radius : 3 px ; }
. linked . vertical > spinbutton : last-child : not ( . vertical ) , . linked . vertical > entry : last-child , . linked . vertical > button : last-child , . linked . vertical > combobox : last-child > box > button . combo { border-bottom-left-radius : 3 px ; border-bottom-right-radius : 3 px ; border-style : solid ; }
. linked . vertical > spinbutton : only-child : not ( . vertical ) , . linked . vertical > entry : only-child , . linked . vertical > button : only-child , . linked . vertical > combobox : only-child > box > button . combo { border-radius : 3 px ; border-style : solid ; }
modelbutton . flat , popover . background checkbutton , popover . background radiobutton , . menuitem . button . flat , modelbutton . flat : backdrop , popover . background checkbutton : backdrop , popover . background radiobutton : backdrop , modelbutton . flat : backdrop : hover , popover . background checkbutton : backdrop : hover , popover . background radiobutton : backdrop : hover , . menuitem . button . flat : backdrop , . menuitem . button . flat : backdrop : hover , button : link , button : visited , button : link : hover , button : link : active , button : visited : hover , button : visited : active , button : link : backdrop , button : visited : backdrop , notebook tab button , row . activatable , row . activatable : backdrop , row . activatable : backdrop : active , row . activatable : backdrop : checked , row . activatable : backdrop : disabled , row . activatable : backdrop : disabled : active , row . activatable : backdrop : disabled : checked , row . activatable : disabled : active , row . activatable : disabled : checked , calendar . button , calendar . button : hover , calendar . button : backdrop , calendar . button : backdrop : hover { background-color : transparent ; background-image : none ; border-color : transparent ; box-shadow : inset 0 1 px rgba ( 255 , 255 , 255 , 0 ) , 0 1 px rgba ( 255 , 255 , 255 , 0 ) ; text-shadow : none ; - gtk-icon-shadow : none ; }
2016-01-06 00:25:06 +00:00
/* menu buttons */
2017-05-31 17:47:57 +00:00
modelbutton . flat , popover . background checkbutton , popover . background radiobutton , . menuitem . button . flat { min-height : 26 px ; padding-left : 5 px ; padding-right : 5 px ; border-radius : 3 px ; outline-offset : -2 px ; }
modelbutton . flat : hover , popover . background checkbutton : hover , popover . background radiobutton : hover , . menuitem . button . flat : hover { background-color : white ; }
modelbutton . flat check : last-child , popover . background checkbutton check : last-child , popover . background radiobutton check : last-child , modelbutton . flat radio : last-child , popover . background checkbutton radio : last-child , popover . background radiobutton radio : last-child , . menuitem . button . flat check : last-child , . menuitem . button . flat radio : last-child { margin-left : 8 px ; }
modelbutton . flat check : first-child , popover . background checkbutton check : first-child , popover . background radiobutton check : first-child , modelbutton . flat radio : first-child , popover . background checkbutton radio : first-child , popover . background radiobutton radio : first-child , . menuitem . button . flat check : first-child , . menuitem . button . flat radio : first-child { margin-right : 8 px ; }
modelbutton . flat arrow , popover . background checkbutton arrow , popover . background radiobutton arrow { background : none ; }
modelbutton . flat arrow : hover , popover . background checkbutton arrow : hover , popover . background radiobutton arrow : hover { background : none ; }
modelbutton . flat arrow . left , popover . background checkbutton arrow . left , popover . background radiobutton arrow . left { - gtk-icon-source : - gtk-icontheme ( "pan-start-symbolic" ) ; }
modelbutton . flat arrow . right , popover . background checkbutton arrow . right , popover . background radiobutton arrow . right { - gtk-icon-source : - gtk-icontheme ( "pan-end-symbolic" ) ; }
button . color { padding : 4 px ; }
button . color colorswatch : only-child , button . color colorswatch : only-child overlay { border-radius : 0 ; }
button . color colorswatch : only-child : disabled , button . color colorswatch : only-child : backdrop { box-shadow : none ; }
/********* Links * */
* : link { color : #000 ; }
* : link : hover , * : link : active , * : link : visited { color : black ; }
* : link : backdrop , * : link : backdrop : hover { color : #000 ; }
button : link , button : visited { color : #4a90d9 ; font-weight : bold ; text-shadow : none ; }
button : link : hover , button : link : active , button : visited : hover , button : visited : active { color : black ; text-shadow : none ; }
button : link : backdrop , button : visited : backdrop { color : #000 ; }
/***************** GtkSpinButton * */
spinbutton : not ( . vertical ) { border-width : 2 px ; border-color : gray ; box-shadow : none ; padding : 0 ; }
spinbutton : not ( . vertical ) entry { min-width : 28 px ; margin : 0 ; background : none ; border : none ; box-shadow : none ; }
spinbutton : not ( . vertical ) button { min-height : 16 px ; margin : 0 ; padding-bottom : 0 ; padding-top : 0 ; color : #1a1a1a ; background-image : none ; border-style : none none none solid ; border-radius : 0 ; }
spinbutton : not ( . vertical ) button : dir ( rtl ) { border-style : none solid none none ; }
spinbutton : not ( . vertical ) button : hover { color : #000 ; background-color : #fff ; }
spinbutton : not ( . vertical ) button : disabled { color : rgba ( 128 , 128 , 128 , 0.3 ) ; }
spinbutton : not ( . vertical ) button : active { background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; color : #fff ; }
spinbutton : not ( . vertical ) button : backdrop { color : #000 ; background-color : transparent ; border-color : rgba ( 141 , 141 , 141 , 0.3 ) ; }
spinbutton : not ( . vertical ) button : backdrop : disabled { color : white ; background-image : none ; border-style : none none none solid ; }
spinbutton : not ( . vertical ) button : backdrop : disabled : dir ( rtl ) { border-style : none solid none none ; }
. osd spinbutton : not ( . vertical ) { border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : #000 ; box-shadow : none ; }
. osd spinbutton : not ( . vertical ) : focus , . osd spinbutton : not ( . vertical ) : active { border-color : rgba ( 255 , 255 , 255 , 0.7 ) ; box-shadow : inset 0 2 px 3 px -1 px rgba ( 0 , 0 , 0 , 0.2 ) ; }
. osd spinbutton : not ( . vertical ) entry { box-shadow : none ; color : #000 ; text-shadow : none ; }
. osd spinbutton : not ( . vertical ) entry : focus , . osd spinbutton : not ( . vertical ) entry : active { box-shadow : inset 0 2 px 3 px -1 px rgba ( 0 , 0 , 0 , 0.2 ) ; }
. osd spinbutton : not ( . vertical ) button { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : #000 ; border-style : none none none solid ; border-color : rgba ( 128 , 128 , 128 , 0.2 ) ; border-radius : 0 ; box-shadow : none ; }
. osd spinbutton : not ( . vertical ) button : dir ( rtl ) { border-style : none solid none none ; }
. osd spinbutton : not ( . vertical ) button : active { background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; color : #fff ; }
. osd spinbutton : not ( . vertical ) button : hover { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; border-style : none none none solid ; border-color : rgba ( 128 , 128 , 128 , 0.2 ) ; background-color : rgba ( 255 , 255 , 255 , 0.1 ) ; box-shadow : none ; }
. osd spinbutton : not ( . vertical ) button : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : gray ; border-color : rgba ( 128 , 128 , 128 , 0.1 ) ; box-shadow : none ; border-style : none none none solid ; }
. osd spinbutton : not ( . vertical ) button : disabled { color : gray ; border-color : rgba ( 128 , 128 , 128 , 0.1 ) ; border-style : none none none solid ; box-shadow : none ; }
. osd spinbutton : not ( . vertical ) button : last-child { border-radius : 0 3 px 3 px 0 ; }
. osd spinbutton : not ( . vertical ) button : dir ( rtl ) : first-child { border-radius : 3 px 0 0 3 px ; }
spinbutton . vertical { border-width : 2 px ; border-color : gray ; }
spinbutton . vertical : disabled { color : gray ; }
spinbutton . vertical : backdrop : disabled { color : gray ; }
spinbutton . vertical : drop ( active ) { border-color : transparent ; box-shadow : none ; }
spinbutton . vertical entry { min-height : 32 px ; min-width : 32 px ; padding : 0 ; border-radius : 0 ; border-color : gray ; }
spinbutton . vertical button { min-height : 32 px ; min-width : 32 px ; padding : 0 ; }
spinbutton . vertical button . up { border-radius : 3 px 3 px 0 0 ; border-style : solid solid none solid ; }
spinbutton . vertical button . down { border-radius : 0 0 3 px 3 px ; border-style : none solid solid solid ; }
. osd spinbutton . vertical button : first-child { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd spinbutton . vertical button : first-child : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : rgba ( 77 , 77 , 77 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd spinbutton . vertical button : first-child : active { border-width : 2 px ; border-style : solid ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-color : #fff ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; box-shadow : none ; }
. osd spinbutton . vertical button : first-child : disabled { border-width : 2 px ; border-style : solid ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : gray ; }
. osd spinbutton . vertical button : first-child : backdrop { border-width : 2 px ; border-style : solid ; }
treeview spinbutton entry , treeview spinbutton entry : focus { padding : 1 px ; border-width : 1 px 0 ; border-color : #000 ; border-radius : 0 ; box-shadow : none ; }
/************** ComboBoxes * */
combobox arrow { - gtk-icon-source : - gtk-icontheme ( "pan-down-symbolic" ) ; min-height : 16 px ; min-width : 16 px ; }
combobox : drop ( active ) { box-shadow : none ; }
/************ Toolbars * */
toolbar , searchbar { padding : 6 px ; background-color : #fff ; }
toolbar . osd , searchbar . osd { background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-radius : 6 px ; padding : 12 px ; }
toolbar . osd label , searchbar . osd label { color : #fff ; }
toolbar . inline-toolbar , searchbar . inline-toolbar { border-width : 0 1 px 1 px ; padding : 3 px ; border-radius : 0 0 4 px 4 px ; }
toolbar . vertical , searchbar . vertical { border-right : 1 px solid gray ; }
toolbar . vertical : dir ( rtl ) , searchbar . vertical : dir ( rtl ) { border-right : none ; border-left : 1 px solid gray ; }
searchbar { border-width : 0 0 1 px ; border-color : gray ; border-style : none none solid none ; padding : 3 px ; }
toolbar . inline-toolbar , searchbar . inline-toolbar { border-style : solid ; border-color : gray ; background-color : #d9d9d9 ; box-shadow : inset 0 2 px 3 px -1 px #a4a4a4 ; }
toolbar . inline-toolbar : backdrop , searchbar . inline-toolbar : backdrop { border-color : #8d8d8d ; background-color : #d7d7d7 ; box-shadow : none ; }
/*************** Header bars * */
2017-09-11 20:51:57 +00:00
. titlebar : not ( headerbar ) , headerbar { min-height : 46 px ; border-width : 0 0 1 px ; border-style : solid ; border-color : gray ; border-radius : 7 px 7 px 0 0 ; background-color : transparent ; background-image : linear-gradient ( to bottom , white , #fff ) ; box-shadow : inset 0 -1 px #d9d9d9 , inset 0 1 px #fff ; padding : 6 px ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. titlebar : backdrop : not ( headerbar ) , headerbar : backdrop { border-color : #8d8d8d ; background-color : #fff ; background-image : none ; box-shadow : none ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. titlebar : not ( headerbar ) . title , headerbar . title { font-weight : bold ; padding : 0 px 12 px ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. titlebar : not ( headerbar ) . subtitle , headerbar . subtitle { font-size : 80 % ; padding : 0 12 px ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) , headerbar . selection-mode { color : black ; text-shadow : 0 1 px rgba ( 0 , 0 , 0 , 0.5 ) ; background-image : linear-gradient ( to bottom , #0d0d0d , #050505 ) ; box-shadow : inset 0 -1 px #d9d9d9 , inset 0 1 px gray ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button , headerbar . selection-mode button { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : #000 ; border-color : black ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button : hover , headerbar . selection-mode button : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : #000 ; border-color : black ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button : active , headerbar . selection-mode button : active { border-width : 2 px ; border-style : solid ; background-image : none ; color : black ; background-color : white ; border-color : black ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button : disabled , headerbar . selection-mode button : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button : backdrop , headerbar . selection-mode button : backdrop { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : #000 ; border-color : #000 ; background-image : none ; border-color : black ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button : backdrop : disabled , headerbar . selection-mode button : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button . suggested-action , headerbar . selection-mode button . suggested-action { border-width : 2 px ; border-style : solid ; color : #000 ; background-image : none ; background-color : #fff ; border-color : gray ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button . suggested-action : hover , headerbar . selection-mode button . suggested-action : hover { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : gray ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button . suggested-action : active , headerbar . selection-mode button . suggested-action : active { border-width : 2 px ; border-style : solid ; background-image : none ; color : white ; background-color : black ; border-color : gray ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button . suggested-action : disabled , headerbar . selection-mode button . suggested-action : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button . suggested-action : backdrop , headerbar . selection-mode button . suggested-action : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : #8d8d8d ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) button . suggested-action : backdrop : disabled , headerbar . selection-mode button . suggested-action : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. selection-mode . titlebar : not ( headerbar ) . selection-menu , headerbar . selection-mode . selection-menu { border-width : 0 ; background-image : none ; box-shadow : none ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. tiled . titlebar : not ( headerbar ) , . maximized . titlebar : not ( headerbar ) , . fullscreen . titlebar : not ( headerbar ) , . tiled headerbar , . maximized headerbar , . fullscreen headerbar { border-radius : 0 ; }
2017-05-31 17:47:57 +00:00
2017-09-11 20:51:57 +00:00
. default-decoration . titlebar : not ( headerbar ) , headerbar . default-decoration { min-height : 28 px ; padding : 4 px ; }
2017-09-22 14:52:23 +00:00
2017-09-11 20:51:57 +00:00
. default-decoration . titlebar : not ( headerbar ) button . titlebutton , headerbar . default-decoration button . titlebutton { min-height : 26 px ; min-width : 26 px ; margin : 0 ; padding : 0 ; }
window . csd > . titlebar : not ( headerbar ) { padding : 0 ; background-color : transparent ; background-image : none ; border-style : none ; border-color : transparent ; box-shadow : none ; }
2017-09-22 14:52:23 +00:00
2017-05-31 17:47:57 +00:00
/************ Pathbars * */
. path-bar button { padding : 5 px 6 px 6 px ; }
. path-bar button : first-child { padding-left : 8 px ; }
. path-bar button : last-child { padding-right : 8 px ; }
. path-bar button : only-child { padding-left : 12 px ; padding-right : 12 px ; }
. path-bar button label : last-child { padding-left : 2 px ; }
. path-bar button label : first-child { padding-right : 2 px ; }
. path-bar button label : only-child { padding-right : 0 ; padding-left : 0 ; }
. path-bar button image { padding-top : 1 px ; }
/************** Tree Views * */
2018-01-01 19:53:43 +00:00
treeview . view { border-left-color : gray ; border-top-color : #fff ; }
2017-05-31 17:47:57 +00:00
treeview . view : selected { border-radius : 0 ; }
treeview . view : selected , treeview . view : backdrop : selected { border-left-color : gray ; border-top-color : rgba ( 0 , 0 , 0 , 0.1 ) ; }
treeview . view : disabled { color : gray ; }
treeview . view : disabled : selected { color : #666666 ; }
treeview . view : disabled : selected : backdrop { color : gray ; }
treeview . view : disabled : backdrop { color : gray ; }
treeview . view . separator : backdrop { min-height : 2 px ; color : rgba ( 0 , 0 , 0 , 0.1 ) ; }
treeview . view : backdrop { color : #000 ; border-left-color : gray ; border-top : #fff ; }
treeview . view . dnd { border-style : solid none ; border-width : 1 px ; border-color : black ; }
treeview . view . expander { - gtk-icon-source : - gtk-icontheme ( "pan-end-symbolic" ) ; color : #4d4d4d ; }
treeview . view . expander : dir ( rtl ) { - gtk-icon-source : - gtk-icontheme ( "pan-end-symbolic-rtl" ) ; }
treeview . view . expander : hover { color : #000 ; }
treeview . view . expander : selected { color : #b3b3b3 ; }
treeview . view . expander : selected : hover { color : #fff ; }
treeview . view . expander : selected : backdrop { color : #b3b3b3 ; }
treeview . view . expander : checked { - gtk-icon-source : - gtk-icontheme ( "pan-down-symbolic" ) ; }
treeview . view . expander : backdrop { color : #4d4d4d ; }
treeview . view . progressbar { color : #fff ; border : 1 px solid #000 ; border-radius : 4 px ; background-color : #000 ; }
treeview . view . progressbar : selected { color : #000 ; }
treeview . view . progressbar : backdrop { color : #000 ; border-color : #000 ; background-color : #fff ; }
treeview . view . trough { background-color : rgba ( 0 , 0 , 0 , 0.1 ) ; border-radius : 4 px ; }
treeview . view . trough : selected { background-color : rgba ( 255 , 255 , 255 , 0.3 ) ; border-width : 1 px 0 ; border-style : solid ; border-color : #000 ; }
treeview . view header button { color : gray ; font-weight : bold ; text-shadow : none ; box-shadow : none ; }
treeview . view header button : hover { color : #404040 ; box-shadow : none ; }
treeview . view header button : active { color : #fff ; }
treeview . view header button : last-child , treeview . view header button : last-child : hover , treeview . view header button : last-child : backdrop { border-right-style : none ; }
treeview . view header button , treeview . view header button : hover , treeview . view header button : active { padding : 3 px 6 px ; border-style : none solid solid none ; border-radius : 0 ; border-width : 1 px ; background-image : none ; border-color : gray ; text-shadow : none ; }
treeview . view header button : disabled { border-color : #fff ; background-image : none ; }
treeview . view header button : backdrop { border-color : gray ; border-style : none solid solid none ; color : gray ; background-image : none ; background-color : #fff ; }
treeview . view header button : backdrop : disabled { border-color : #fff ; background-image : none ; }
treeview . view . progressbar { color : #fff ; border-radius : 4 px ; background-image : linear-gradient ( to bottom , #000 , black ) ; }
treeview . view . progressbar : selected { color : #000 ; background-image : linear-gradient ( to bottom , #fff , #e6e6e6 ) ; }
treeview . view . progressbar : selected : backdrop { color : #000 ; background-image : none ; background-color : #fff ; }
treeview . view . progressbar : backdrop { color : #fff ; background-image : none ; }
/********* Menus * */
menubar , . menubar { padding : 0 px ; box-shadow : inset 0 -1 px gray ; }
menubar > menuitem , . menubar > menuitem { padding : 4 px 8 px ; }
menubar > menuitem : hover , . menubar > menuitem : hover { box-shadow : inset 0 -3 px #000 ; color : #000 ; }
menubar > menuitem : disabled , . menubar > menuitem : disabled { color : gray ; box-shadow : none ; }
menu , . menu { margin : 4 px ; padding : 0 px ; background-color : #fff ; border : 1 px solid gray ; }
menu menuitem , . menu menuitem { text-shadow : none ; padding : 4 px ; min-width : 40 px ; }
menu menuitem : hover , . menu menuitem : hover { color : #fff ; background-color : #000 ; }
menu menuitem : disabled , . menu menuitem : disabled { color : gray ; }
menu menuitem : disabled : backdrop , . menu menuitem : disabled : backdrop { color : gray ; }
menu menuitem : backdrop , menu menuitem : backdrop : hover , . menu menuitem : backdrop , . menu menuitem : backdrop : hover { color : #000 ; background-color : #fff ; }
menu menuitem arrow , . menu menuitem arrow { min-height : 16 px ; min-width : 16 px ; }
menu menuitem arrow : dir ( ltr ) , . menu menuitem arrow : dir ( ltr ) { - gtk-icon-source : - gtk-icontheme ( "pan-end-symbolic" ) ; margin-left : 10 px ; }
menu menuitem arrow : dir ( rtl ) , . menu menuitem arrow : dir ( rtl ) { - gtk-icon-source : - gtk-icontheme ( "pan-end-symbolic-rtl" ) ; margin-right : 10 px ; }
menuitem check , menuitem radio { min-height : 16 px ; min-width : 16 px ; }
menuitem check : dir ( ltr ) , menuitem radio : dir ( ltr ) { margin-right : 7 px ; }
menuitem check : dir ( rtl ) , menuitem radio : dir ( rtl ) { margin-left : 7 px ; }
/*************** Popovers * */
popover . background { padding : 2 px ; border-radius : 5 px ; background-color : #fff ; box-shadow : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.3 ) ; }
popover . background , . csd popover . background { border : 1 px solid gray ; }
popover . background : backdrop { background-color : #fff ; box-shadow : none ; }
popover . background > list , popover . background > . view , textview popover . background > text , popover . background > iconview , popover . background > toolbar , popover . background > searchbar { border-style : none ; background-color : transparent ; }
popover . background . touch-selection , popover . background . magnifier , . csd popover . background . touch-selection , . csd popover . background . magnifier { border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) ; }
popover . background separator { margin : 3 px ; }
popover . background list separator { margin : 0 px ; }
/***************** Notebooks and * Tabs * */
notebook { padding : 0 ; background-color : #fff ; transition : all 200 ms ease-out ; }
notebook : backdrop { background-color : #fff ; }
notebook . frame { border : 1 px solid gray ; }
notebook . frame : backdrop { border-color : #8d8d8d ; }
notebook header { background-color : #d9d9d9 ; }
. frame notebook header { border : 1 px solid gray ; }
. frame notebook header . top { border-bottom-width : 0 ; }
. frame notebook header . bottom { border-top-width : 0 ; }
. frame notebook header . right { border-left-width : 0 ; }
. frame notebook header . left { border-right-width : 0 ; }
. frame notebook header : backdrop { border-color : #8d8d8d ; }
notebook header . top { box-shadow : inset 0 2 px 3 px -1 px rgba ( 0 , 0 , 0 , 0.15 ) , inset 0 -1 px gray ; }
notebook header . top : backdrop { box-shadow : inset 0 -1 px #8d8d8d ; }
notebook header . bottom { box-shadow : inset 0 2 px 3 px -1 px rgba ( 0 , 0 , 0 , 0.15 ) , inset 0 1 px gray ; }
notebook header . bottom : backdrop { box-shadow : inset 0 1 px #8d8d8d ; }
notebook header . right { box-shadow : inset 0 2 px 3 px -1 px rgba ( 0 , 0 , 0 , 0.15 ) , inset 1 px 0 gray ; }
notebook header . right : backdrop { box-shadow : inset 1 px 0 #8d8d8d ; }
notebook header . left { box-shadow : inset 0 2 px 3 px -1 px rgba ( 0 , 0 , 0 , 0.15 ) , inset -1 px 0 gray ; }
notebook header . left : backdrop { box-shadow : inset -1 px 0 #8d8d8d ; }
notebook header : backdrop { background-color : #d7d7d7 ; box-shadow : none ; }
notebook header tabs arrow { color : gray ; }
notebook header tabs arrow : hover { color : #404040 ; }
notebook header tabs arrow : checked { color : #000 ; }
notebook header tabs arrow : disabled { color : rgba ( 128 , 128 , 128 , 0.3 ) ; }
notebook header tabs arrow : backdrop { color : rgba ( 0 , 0 , 0 , 0.4 ) ; }
notebook header . top tab { padding : 8 px 20 px ; border-bottom-width : 3 px ; }
notebook header . top tab . reorderable-page { padding-left : 12 px ; padding-right : 12 px ; border-left-width : 1 px ; border-right-width : 1 px ; }
notebook header . bottom tab { padding : 8 px 20 px ; border-top-width : 3 px ; }
notebook header . bottom tab . reorderable-page { padding-left : 12 px ; padding-right : 12 px ; border-left-width : 1 px ; border-right-width : 1 px ; }
notebook header . left tab { padding : 5 px 20 px ; border-right-width : 3 px ; }
notebook header . left tab . reorderable-page { border-bottom-width : 1 px ; border-top-width : 1 px ; }
notebook header . right tab { padding : 5 px 20 px ; border-left-width : 3 px ; }
notebook header . right tab . reorderable-page { border-bottom-width : 1 px ; border-top-width : 1 px ; }
notebook tab { border-width : 0 ; border-style : solid ; border-color : transparent ; background-color : transparent ; outline-offset : 0 ; }
notebook tab : hover { border-color : gray ; }
notebook tab : checked , notebook tab : backdrop : checked { border-color : #000 ; }
notebook tab : backdrop { background-color : transparent ; border-color : transparent ; }
. top notebook tab . reorderable-page { border-color : transparent ; }
. top notebook tab . reorderable-page : hover { border-color : rgba ( 128 , 128 , 128 , 0.3 ) ; border-bottom-color : gray ; background-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. top notebook tab . reorderable-page : checked { background-color : rgba ( 255 , 255 , 255 , 0.5 ) ; border-color : rgba ( 128 , 128 , 128 , 0.5 ) ; border-bottom-color : #000 ; }
. top notebook tab . reorderable-page : checked : hover { background-color : rgba ( 255 , 255 , 255 , 0.7 ) ; }
. top notebook tab . reorderable-page : checked : backdrop { border-color : #8d8d8d ; background-color : #fff ; border-bottom-color : #000 ; }
. top notebook tab . reorderable-page : backdrop { border-color : transparent ; background-color : transparent ; }
. bottom notebook tab . reorderable-page { border-color : transparent ; }
. bottom notebook tab . reorderable-page : hover { border-color : rgba ( 128 , 128 , 128 , 0.3 ) ; border-top-color : gray ; background-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. bottom notebook tab . reorderable-page : checked { background-color : rgba ( 255 , 255 , 255 , 0.5 ) ; border-color : rgba ( 128 , 128 , 128 , 0.5 ) ; border-top-color : #000 ; }
. bottom notebook tab . reorderable-page : checked : hover { background-color : rgba ( 255 , 255 , 255 , 0.7 ) ; }
. bottom notebook tab . reorderable-page : checked : backdrop { border-color : #8d8d8d ; background-color : #fff ; border-top-color : #000 ; }
. bottom notebook tab . reorderable-page : backdrop { border-color : transparent ; background-color : transparent ; }
. left notebook tab . reorderable-page { border-color : transparent ; }
. left notebook tab . reorderable-page : hover { border-color : rgba ( 128 , 128 , 128 , 0.3 ) ; border-right-color : gray ; background-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. left notebook tab . reorderable-page : checked { background-color : rgba ( 255 , 255 , 255 , 0.5 ) ; border-color : rgba ( 128 , 128 , 128 , 0.5 ) ; border-right-color : #000 ; }
. left notebook tab . reorderable-page : checked : hover { background-color : rgba ( 255 , 255 , 255 , 0.7 ) ; }
. left notebook tab . reorderable-page : checked : backdrop { border-color : #8d8d8d ; background-color : #fff ; border-right-color : #000 ; }
. left notebook tab . reorderable-page : backdrop { border-color : transparent ; background-color : transparent ; }
. right notebook tab . reorderable-page { border-color : transparent ; }
. right notebook tab . reorderable-page : hover { border-color : rgba ( 128 , 128 , 128 , 0.3 ) ; border-left-color : gray ; background-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. right notebook tab . reorderable-page : checked { background-color : rgba ( 255 , 255 , 255 , 0.5 ) ; border-color : rgba ( 128 , 128 , 128 , 0.5 ) ; border-left-color : #000 ; }
. right notebook tab . reorderable-page : checked : hover { background-color : rgba ( 255 , 255 , 255 , 0.7 ) ; }
. right notebook tab . reorderable-page : checked : backdrop { border-color : #8d8d8d ; background-color : #fff ; border-left-color : #000 ; }
. right notebook tab . reorderable-page : backdrop { border-color : transparent ; background-color : transparent ; }
notebook tab label { padding : 0 2 px ; font-weight : bold ; color : gray ; /* color: inherit doesn't work here */ }
notebook tab label : backdrop { color : gray ; }
notebook tab : hover label { color : #404040 ; }
notebook tab : checked label { color : #000 ; }
notebook tab : checked label : backdrop { color : #000 ; }
notebook tab button { border : 2 px solid transparent ; - gtk-icon-shadow : none ; transition : none ; color : rgba ( 0 , 0 , 0 , 0.3 ) ; }
notebook tab button : hover { color : #000 ; border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : gray ; background-image : none ; border-width : 2 px ; background-image : none ; box-shadow : none ; }
notebook tab button : checked { border-width : 2 px ; border-style : solid ; background-image : none ; color : white ; background-color : black ; border-color : gray ; border-width : 2 px ; }
notebook tab button : backdrop , notebook tab button : backdrop : hover { color : rgba ( 0 , 0 , 0 , 0.3 ) ; border-color : transparent ; border-width : 2 px ; }
notebook tab button > image { padding : 2 px ; }
/************** Scrollbars * */
scrollbar { background-color : #f2f2f2 ; transition : 300 ms cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) ; }
scrollbar . top { border-bottom : 1 px solid gray ; }
scrollbar . bottom { border-top : 1 px solid gray ; }
scrollbar . left { border-right : 1 px solid gray ; }
scrollbar . right { border-left : 1 px solid gray ; }
scrollbar : backdrop { background-color : #f7f7f7 ; border-color : #8d8d8d ; }
scrollbar slider { min-width : 14 px ; min-height : 14 px ; margin : -1 px ; border : 4 px solid transparent ; border-radius : 12 px ; background-clip : padding-box ; background-color : #666666 ; }
scrollbar slider : hover { background-color : #333333 ; }
scrollbar slider : hover : active { background-color : black ; }
scrollbar slider : backdrop { background-color : #999999 ; }
scrollbar slider : disabled { background-color : transparent ; }
scrollbar . fine-tune slider { min-width : 4 px ; min-height : 4 px ; }
scrollbar . fine-tune . horizontal slider { border-width : 5 px 4 px ; }
scrollbar . fine-tune . vertical slider { border-width : 4 px 5 px ; }
scrollbar . overlay-indicator : not ( . dragging ) : not ( . hovering ) { border-color : transparent ; opacity : 0.4 ; background-color : transparent ; }
scrollbar . overlay-indicator : not ( . dragging ) : not ( . hovering ) slider { margin : 0 ; min-width : 3 px ; min-height : 3 px ; background-color : #000 ; border : 1 px solid white ; }
scrollbar . overlay-indicator : not ( . dragging ) : not ( . hovering ) button { min-width : 5 px ; min-height : 5 px ; background-color : #000 ; background-clip : padding-box ; border-radius : 100 % ; border : 1 px solid white ; - gtk-icon-source : none ; }
scrollbar . overlay-indicator : not ( . dragging ) : not ( . hovering ) . horizontal slider { margin : 0 2 px ; min-width : 40 px ; }
scrollbar . overlay-indicator : not ( . dragging ) : not ( . hovering ) . horizontal button { margin : 1 px 2 px ; min-width : 5 px ; }
scrollbar . overlay-indicator : not ( . dragging ) : not ( . hovering ) . vertical slider { margin : 2 px 0 ; min-height : 40 px ; }
scrollbar . overlay-indicator : not ( . dragging ) : not ( . hovering ) . vertical button { margin : 2 px 1 px ; min-height : 5 px ; }
scrollbar . overlay-indicator . dragging , scrollbar . overlay-indicator . hovering { opacity : 0.8 ; }
scrollbar . horizontal slider { min-width : 40 px ; }
scrollbar . vertical slider { min-height : 40 px ; }
scrollbar button { padding : 0 ; min-width : 12 px ; min-height : 12 px ; border-style : none ; border-radius : 0 ; transition-property : min-height , min-width , color ; border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : #666666 ; }
scrollbar button : hover { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : #333333 ; }
scrollbar button : active , scrollbar button : checked { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : black ; }
scrollbar button : disabled { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : rgba ( 102 , 102 , 102 , 0.2 ) ; }
scrollbar button : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : #999999 ; }
scrollbar button : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : transparent ; background-image : none ; border-color : transparent ; color : rgba ( 153 , 153 , 153 , 0.2 ) ; }
scrollbar . vertical button . down { - gtk-icon-source : - gtk-icontheme ( "pan-down-symbolic" ) ; }
scrollbar . vertical button . up { - gtk-icon-source : - gtk-icontheme ( "pan-up-symbolic" ) ; }
scrollbar . horizontal button . down { - gtk-icon-source : - gtk-icontheme ( "pan-end-symbolic" ) ; }
scrollbar . horizontal button . up { - gtk-icon-source : - gtk-icontheme ( "pan-start-symbolic" ) ; }
treeview ~ scrollbar . vertical { border-top : 1 px solid gray ; margin-top : -1 px ; }
/********** Switch * */
switch { font-size : smaller ; font-stretch : condensed ; font-weight : bold ; outline-offset : -4 px ; border-width : 1 px ; border-style : solid ; border-radius : 3 px ; border-color : gray ; background-color : gray ; box-shadow : inset 0 1 px rgba ( 0 , 0 , 0 , 0.1 ) ; /*outset not working*/ text-shadow : 0 1 px rgba ( 0 , 0 , 0 , 0.1 ) ; }
switch : active { color : #fff ; border-color : #000 ; background-color : #000 ; text-shadow : 0 0 2 px white ; }
switch : disabled { color : gray ; border-color : gray ; background-color : white ; text-shadow : none ; }
switch : backdrop { color : #000 ; border-color : #8d8d8d ; background-color : #fff ; box-shadow : none ; text-shadow : none ; }
switch : backdrop : checked { color : #fff ; border-color : #8d8d8d ; background-color : #8d8d8d ; box-shadow : none ; }
switch : backdrop : disabled , switch : backdrop : disabled : checked { background-color : white ; color : gray ; border-color : gray ; }
switch slider { margin : -1 px ; min-width : 45 px ; min-height : 27 px ; border : 2 px solid ; border-radius : 3 px ; border-width : 2 px ; border-style : solid ; color : #000 ; background-image : none ; background-color : #fff ; border-color : gray ; }
switch : hover slider { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : gray ; background-image : none ; }
switch : checked slider { border : 2 px solid #000 ; }
switch : disabled slider { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
switch : backdrop slider { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : #8d8d8d ; background-image : none ; }
switch : backdrop : checked slider { border-color : #000 ; }
switch : backdrop : disabled slider { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
/************************* Check and Radio items * */
checkbutton . text-button , radiobutton . text-button { padding : 2 px 0 ; outline-offset : 0 ; }
checkbutton . text-button label : not ( : only-child ) : first-child , radiobutton . text-button label : not ( : only-child ) : first-child { margin-left : 4 px ; }
checkbutton . text-button label : not ( : only-child ) : last-child , radiobutton . text-button label : not ( : only-child ) : last-child { margin-right : 4 px ; }
checkbutton . text-button : disabled : active , checkbutton . text-button : disabled : indeterminate , checkbutton . text-button : disabled , radiobutton . text-button : disabled : active , radiobutton . text-button : disabled : indeterminate , radiobutton . text-button : disabled { color : gray ; }
checkbutton . text-button : disabled : active : backdrop , checkbutton . text-button : disabled : indeterminate : backdrop , checkbutton . text-button : disabled : backdrop , radiobutton . text-button : disabled : active : backdrop , radiobutton . text-button : disabled : indeterminate : backdrop , radiobutton . text-button : disabled : backdrop { color : gray ; }
2018-01-01 19:53:43 +00:00
check , radio { margin : 0 4 px ; min-height : 14 px ; min-width : 14 px ; border : 1 px solid ; - gtk-icon-source : none ; - gtk-icon-size : 14 px ; border-width : 2 px ; border-style : solid ; color : #000 ; background-image : none ; background-color : #fff ; border-color : gray ; }
2017-05-31 17:47:57 +00:00
check : only-child , radio : only-child { margin : 0 ; }
check : hover , radio : hover { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : gray ; background-image : none ; }
check : active , radio : active { border-width : 2 px ; border-style : solid ; background-image : none ; color : white ; background-color : black ; border-color : gray ; }
check : disabled , radio : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
check : backdrop , radio : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : #8d8d8d ; background-image : none ; }
check : backdrop : disabled , radio : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
row : selected check , row : selected radio { border-color : #000 ; }
. osd check , . osd radio { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd check : hover , . osd radio : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd check : active , . osd radio : active { border-width : 2 px ; border-style : solid ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-color : #fff ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; box-shadow : none ; }
. osd check : backdrop , . osd radio : backdrop { border-width : 2 px ; border-style : solid ; }
. osd check : disabled , . osd radio : disabled { border-width : 2 px ; border-style : solid ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : gray ; }
menu menuitem check , menu menuitem radio { margin : 0 ; }
menu menuitem check , menu menuitem check : hover , menu menuitem check : disabled , menu menuitem radio , menu menuitem radio : hover , menu menuitem radio : disabled { min-height : 14 px ; min-width : 14 px ; background-image : none ; background-color : transparent ; box-shadow : none ; - gtk-icon-shadow : none ; color : inherit ; border-color : currentColor ; animation : none ; }
treeview . view check : selected : focus : disabled , treeview . view check : selected : focus , treeview . view check : selected : backdrop : disabled , treeview . view check : selected : backdrop , treeview . view check : selected : disabled , treeview . view check : selected , check { border-radius : 3 px ; }
treeview . view check : checked : selected , check : checked { - gtk-icon-source : image ( - gtk-recolor ( url ( "assets/check-symbolic.svg" ) ) , - gtk-recolor ( url ( "assets/check-symbolic.symbolic.png" ) ) ) ; }
treeview . view check : indeterminate : selected , check : indeterminate { - gtk-icon-source : image ( - gtk-recolor ( url ( "assets/dash-symbolic.svg" ) ) , - gtk-recolor ( url ( "assets/dash-symbolic.symbolic.png" ) ) ) ; }
treeview . view radio : selected : focus : disabled , treeview . view radio : selected : focus , treeview . view radio : selected : backdrop : disabled , treeview . view radio : selected : backdrop , treeview . view radio : selected : disabled , treeview . view radio : selected , radio { border-radius : 100 % ; }
treeview . view radio : checked : selected , radio : checked { - gtk-icon-source : image ( - gtk-recolor ( url ( "assets/bullet-symbolic.svg" ) ) , - gtk-recolor ( url ( "assets/bullet-symbolic.symbolic.png" ) ) ) ; }
treeview . view radio : indeterminate : selected , radio : indeterminate { - gtk-icon-source : image ( - gtk-recolor ( url ( "assets/dash-symbolic.svg" ) ) , - gtk-recolor ( url ( "assets/dash-symbolic.symbolic.png" ) ) ) ; }
@ keyframes check_check { from { - gtk-icon-transform : translate ( 6 px , -3 px ) rotate ( -45 deg ) scaleY ( 0.2 ) rotate ( 45 deg ) scaleX ( 0 ) ; }
to { - gtk-icon-transform : unset ; } }
@ keyframes check_radio { from { - gtk-icon-transform : scale ( 0 ) ; }
to { - gtk-icon-transform : unset ; } }
@ keyframes check_indeterminate { from { - gtk-icon-transform : scale ( 0 , 1 ) ; }
to { - gtk-icon-transform : unset ; } }
check : not ( : indeterminate ) : checked { animation : check_check 400 ms ; }
radio : not ( : indeterminate ) : checked { animation : check_radio 400 ms ; }
check : indeterminate : checked , radio : indeterminate : checked { animation : check_indeterminate 400 ms ; }
menu menuitem check : not ( : indeterminate ) : checked , menu menuitem radio : not ( : indeterminate ) : checked , menu menuitem check : indeterminate : checked : active , menu menuitem radio : indeterminate : checked { animation : none ; }
treeview . view check : selected : focus , treeview . view check : selected : hover , treeview . view check : selected , treeview . view radio : selected : focus , treeview . view radio : selected : hover , treeview . view radio : selected { color : #fff ; }
treeview . view check : selected : backdrop : hover , treeview . view check : selected : backdrop , treeview . view radio : selected : backdrop : hover , treeview . view radio : selected : backdrop { color : #fff ; border-color : #fff ; }
treeview . view check : selected : backdrop : disabled , treeview . view radio : selected : backdrop : disabled { color : gray ; border-color : gray ; }
treeview . view check : selected : disabled , treeview . view radio : selected : disabled { color : gray ; }
/************ GtkScale * */
scale trough , scale fill { border : 2 px solid gray ; border-radius : 4 px ; background-color : gray ; box-shadow : none ; }
scale trough : disabled , scale fill : disabled { border-color : silver ; background-color : white ; }
scale trough : backdrop , scale fill : backdrop { background-color : #b3b3b3 ; border-color : #8d8d8d ; }
scale trough : backdrop : disabled , scale fill : backdrop : disabled { background-color : white ; border-color : silver ; }
row : selected scale trough , scale row : selected trough , row : selected scale fill , scale row : selected fill , row : selected scale trough : disabled , scale row : selected trough : disabled , row : selected scale fill : disabled , scale row : selected fill : disabled { border-color : #000 ; }
. osd scale trough , scale . osd trough , . osd scale fill , scale . osd fill { border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; background-color : rgba ( 255 , 255 , 255 , 0 ) ; box-shadow : none ; }
. osd scale trough : disabled , scale . osd trough : disabled , . osd scale fill : disabled , scale . osd fill : disabled { background-color : white ; }
scale highlight { border : 2 px solid #000 ; border-radius : 4 px ; background-color : #000 ; }
scale highlight : disabled { background-color : transparent ; border-color : transparent ; }
scale highlight : backdrop { border-color : #b3b3b3 ; }
scale highlight : backdrop : disabled { background-color : transparent ; border-color : transparent ; }
row : selected scale highlight , scale row : selected highlight , row : selected scale highlight : disabled , scale row : selected highlight : disabled { border-color : #000 ; }
. osd scale highlight , scale . osd highlight { border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd scale highlight : disabled , scale . osd highlight : disabled { border-color : transparent ; }
scale { min-height : 10 px ; min-width : 10 px ; padding : 12 px ; }
scale fill , scale highlight { margin : -1 px ; }
scale slider { min-height : 18 px ; min-width : 18 px ; margin : -9 px ; }
scale . fine-tune . horizontal { padding-top : 9 px ; padding-bottom : 9 px ; min-height : 16 px ; }
scale . fine-tune . vertical { padding-left : 9 px ; padding-right : 9 px ; min-width : 16 px ; }
scale . fine-tune slider { margin : -6 px ; }
scale . fine-tune fill , scale . fine-tune highlight , scale . fine-tune trough { border-radius : 5 px ; - gtk-outline-radius : 7 px ; }
scale trough { outline-offset : 2 px ; - gtk-outline-radius : 5 px ; }
scale fill , scale fill : backdrop { background-color : gray ; box-shadow : none ; }
scale fill : disabled , scale fill : disabled : backdrop { border-color : transparent ; background-color : transparent ; }
. osd scale fill { background-color : rgba ( 255 , 255 , 255 , 0.4 ) ; }
. osd scale fill : disabled , . osd scale fill : disabled : backdrop { border-color : transparent ; background-color : transparent ; }
scale slider { border-width : 2 px ; border-style : solid ; color : #000 ; background-image : none ; background-color : #fff ; border-color : gray ; border : 2 px solid gray ; border-radius : 100 % ; }
scale slider : hover { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : gray ; background-image : none ; }
scale slider : active { border-color : #000 ; }
scale slider : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
scale slider : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : #8d8d8d ; background-image : none ; }
scale slider : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
row : selected scale slider , row : selected scale slider : disabled { border-color : #000 ; }
. osd scale slider { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; background-color : black ; }
. osd scale slider : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : rgba ( 77 , 77 , 77 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. osd scale slider : active { border-width : 2 px ; border-style : solid ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-color : #fff ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; box-shadow : none ; }
. osd scale slider : disabled { border-width : 2 px ; border-style : solid ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : gray ; }
. osd scale slider : backdrop { border-width : 2 px ; border-style : solid ; }
. osd scale slider : backdrop : disabled { border-width : 2 px ; border-style : solid ; }
scale value { color : alpha ( currentColor , 0.4 ) ; }
scale marks { color : alpha ( currentColor , 0.4 ) ; }
scale marks . top { margin-bottom : 6 px ; margin-top : -12 px ; }
scale marks . bottom { margin-top : 6 px ; margin-bottom : -12 px ; }
scale marks . top { margin-right : 6 px ; margin-left : -12 px ; }
scale marks . bottom { margin-left : 6 px ; margin-right : -12 px ; }
scale . fine-tune marks . top { margin-bottom : 6 px ; margin-top : -9 px ; }
scale . fine-tune marks . bottom { margin-top : 6 px ; margin-bottom : -9 px ; }
scale . fine-tune marks . top { margin-right : 6 px ; margin-left : -9 px ; }
scale . fine-tune marks . bottom { margin-left : 6 px ; margin-right : -9 px ; }
scale . horizontal indicator { min-height : 6 px ; min-width : 1 px ; }
scale . horizontal . fine-tune indicator { min-height : 3 px ; }
scale . vertical indicator { min-height : 1 px ; min-width : 6 px ; }
scale . vertical . fine-tune indicator { min-width : 3 px ; }
/***************** Progress bars * */
progressbar { padding : 0 ; font-size : 83 % ; color : #000 ; }
progressbar : backdrop { color : gray ; }
progressbar trough { border-width : 1 px ; border-style : solid ; border-radius : 3 px ; border-color : gray ; background-color : lightgray ; box-shadow : inset 1 px 1 px rgba ( 0 , 0 , 0 , 0.1 ) ; }
progressbar trough : backdrop { border-color : #8d8d8d ; background-color : #d7d7d7 ; box-shadow : 0 1 px rgba ( 255 , 255 , 255 , 0 ) ; }
progressbar . osd trough { background-color : transparent ; box-shadow : none ; border-width : 0 ; }
progressbar . horizontal trough , progressbar . horizontal progress { min-height : 2 px ; }
progressbar . vertical trough , progressbar . vertical progress { min-width : 2 px ; }
progressbar progress { border-width : 1 px ; border-style : solid ; border-radius : 3 px ; border-color : #000 ; background-color : #000 ; box-shadow : inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.2 ) ; }
progressbar progress . vertical { box-shadow : inset 1 px 0 0 rgba ( 255 , 255 , 255 , 0.2 ) ; }
progressbar progress : backdrop { border-color : #000 ; background-color : #000 ; box-shadow : none ; }
progressbar progress . osd { border-width : 0 ; border-radius : 0 ; }
progressbar trough . empty progress { all : unset ; }
/************* Level Bar * */
levelbar trough { padding : 2 px ; border-radius : 3 px ; background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; border-color : gray ; box-shadow : inset 0 2 px 2 px -2 px gray ; }
levelbar trough : backdrop { background-color : transparent ; border-style : solid ; background-image : linear-gradient ( to bottom , #f7f7f7 , #fff 90 % ) ; color : #000 ; background-image : linear-gradient ( to bottom , #fff , #fff ) ; box-shadow : 0 1 px rgba ( 255 , 255 , 255 , 0 ) ; }
2017-08-12 15:13:11 +00:00
levelbar . horizontal block { min-height : 1 px ; }
2017-05-31 17:47:57 +00:00
2017-08-12 15:13:11 +00:00
levelbar . horizontal . discrete block { margin : 0 1 px ; min-width : 32 px ; }
2017-05-31 17:47:57 +00:00
2017-08-12 15:13:11 +00:00
levelbar . vertical block { min-width : 1 px ; }
2017-05-31 17:47:57 +00:00
2017-08-12 15:13:11 +00:00
levelbar . vertical . discrete block { margin : 1 px 0 ; min-height : 32 px ; }
2017-05-31 17:47:57 +00:00
levelbar block . filled . low { border-color : #c26000 ; background-color : #f57900 ; }
levelbar block . filled . low : backdrop { border-color : #f57900 ; }
levelbar block . filled . high { border-width : 1 px ; border-style : solid ; border-color : black ; background-color : #000 ; box-shadow : 0 1 px rgba ( 0 , 0 , 0 , 0.1 ) ; border-radius : 1 px ; }
levelbar block . filled . high : backdrop { border-color : #000 ; box-shadow : none ; }
levelbar block . filled . full { border-color : #5aa411 ; background-color : #73d216 ; }
levelbar block . filled . full : backdrop { border-color : #73d216 ; }
levelbar block . empty { border-width : 1 px ; border-style : solid ; background-color : transparent ; border-color : rgba ( 0 , 0 , 0 , 0.2 ) ; border-radius : 1 px ; box-shadow : none ; }
levelbar block . empty : backdrop { border-color : rgba ( 0 , 0 , 0 , 0.15 ) ; }
. view : selected , textview text : selected , iconview : selected , calendar : selected , . view : selected : focus , textview text : selected : focus , iconview : selected : focus , calendar : focus : selected , . view : selected : hover , textview text : selected : hover , iconview : selected : hover , calendar : hover : selected , textview text selection , textview text selection : focus , textview text selection : hover , flowbox flowboxchild : selected , label selection , label selection : focus , label selection : hover , label selection : backdrop , spinbutton : not ( . vertical ) selection : focus , spinbutton : not ( . vertical ) selection , entry selection : focus , entry selection , modelbutton . flat : selected , popover . background checkbutton : selected , popover . background radiobutton : selected , . menuitem . button . flat : selected , treeview . view : selected , row . activatable : selected , . sidebar : selected { background-color : #000 ; color : #fff ; }
. view : backdrop : selected , textview text : backdrop : selected , iconview : backdrop : selected , calendar : backdrop : selected , textview text : backdrop : selected : focus , iconview : backdrop : selected : focus , calendar : backdrop : focus : selected , textview text : backdrop : selected : hover , iconview : backdrop : selected : hover , calendar : backdrop : hover : selected , textview text selection : backdrop , flowbox flowboxchild : backdrop : selected , label selection : backdrop , spinbutton : not ( . vertical ) selection : backdrop , entry selection : backdrop , modelbutton . flat : backdrop : selected , popover . background checkbutton : backdrop : selected , popover . background radiobutton : backdrop : selected , . menuitem . button . flat : backdrop : selected , row . activatable : backdrop : selected , . sidebar : backdrop : selected { background-color : gray ; color : #fff ; }
2018-03-29 17:16:57 +00:00
. monospace { font-family : monospace ; }
2017-05-31 17:47:57 +00:00
/********** frames * */
frame , . frame { border : 1 px solid gray ; padding : 0 ; }
frame . flat , . frame . flat { border-style : none ; }
frame : backdrop , . frame : backdrop { border-color : #8d8d8d ; }
actionbar > revealer > box { padding : 6 px ; border-width : 1 px 0 0 ; border-color : gray ; border-style : solid none none ; }
placessidebar . frame , scrolledwindow . frame { border-radius : 2 px ; }
placessidebar viewport . frame , scrolledwindow viewport . frame { border-style : none ; }
placessidebar overshoot . top , scrolledwindow overshoot . top { background-image : radial-gradient ( ellipse farthest - side at top , #010101 85 % , rgba ( 1 , 1 , 1 , 0 ) ) , radial-gradient ( ellipse farthest - side at top , rgba ( 0 , 0 , 0 , 0.07 ) , transparent ) ; background-size : 100 % 5 % , 100 % 100 % ; background-repeat : no-repeat ; background-position : top ; background-color : transparent ; border : none ; box-shadow : none ; }
placessidebar overshoot . top : backdrop , scrolledwindow overshoot . top : backdrop { background-image : radial-gradient ( ellipse farthest - side at top , #8d8d8d 85 % , rgba ( 141 , 141 , 141 , 0 ) ) ; background-size : 100 % 5 % ; background-repeat : no-repeat ; background-position : top ; background-color : transparent ; border : none ; box-shadow : none ; }
placessidebar overshoot . bottom , scrolledwindow overshoot . bottom { background-image : radial-gradient ( ellipse farthest - side at bottom , #010101 85 % , rgba ( 1 , 1 , 1 , 0 ) ) , radial-gradient ( ellipse farthest - side at bottom , rgba ( 0 , 0 , 0 , 0.07 ) , transparent ) ; background-size : 100 % 5 % , 100 % 100 % ; background-repeat : no-repeat ; background-position : bottom ; background-color : transparent ; border : none ; box-shadow : none ; }
placessidebar overshoot . bottom : backdrop , scrolledwindow overshoot . bottom : backdrop { background-image : radial-gradient ( ellipse farthest - side at bottom , #8d8d8d 85 % , rgba ( 141 , 141 , 141 , 0 ) ) ; background-size : 100 % 5 % ; background-repeat : no-repeat ; background-position : bottom ; background-color : transparent ; border : none ; box-shadow : none ; }
placessidebar overshoot . left , scrolledwindow overshoot . left { background-image : radial-gradient ( ellipse farthest - side at left , #010101 85 % , rgba ( 1 , 1 , 1 , 0 ) ) , radial-gradient ( ellipse farthest - side at left , rgba ( 0 , 0 , 0 , 0.07 ) , transparent ) ; background-size : 5 % 100 % , 100 % 100 % ; background-repeat : no-repeat ; background-position : left ; background-color : transparent ; border : none ; box-shadow : none ; }
placessidebar overshoot . left : backdrop , scrolledwindow overshoot . left : backdrop { background-image : radial-gradient ( ellipse farthest - side at left , #8d8d8d 85 % , rgba ( 141 , 141 , 141 , 0 ) ) ; background-size : 5 % 100 % ; background-repeat : no-repeat ; background-position : left ; background-color : transparent ; border : none ; box-shadow : none ; }
placessidebar overshoot . right , scrolledwindow overshoot . right { background-image : radial-gradient ( ellipse farthest - side at right , #010101 85 % , rgba ( 1 , 1 , 1 , 0 ) ) , radial-gradient ( ellipse farthest - side at right , rgba ( 0 , 0 , 0 , 0.07 ) , transparent ) ; background-size : 5 % 100 % , 100 % 100 % ; background-repeat : no-repeat ; background-position : right ; background-color : transparent ; border : none ; box-shadow : none ; }
placessidebar overshoot . right : backdrop , scrolledwindow overshoot . right : backdrop { background-image : radial-gradient ( ellipse farthest - side at right , #8d8d8d 85 % , rgba ( 141 , 141 , 141 , 0 ) ) ; background-size : 5 % 100 % ; background-repeat : no-repeat ; background-position : right ; background-color : transparent ; border : none ; box-shadow : none ; }
placessidebar undershoot . top , scrolledwindow undershoot . top { background-color : transparent ; background-image : linear-gradient ( to left , rgba ( 255 , 255 , 255 , 0.2 ) 50 % , rgba ( 0 , 0 , 0 , 0.2 ) 50 % ) ; padding-top : 1 px ; background-size : 10 px 1 px ; background-repeat : repeat-x ; background-origin : content-box ; background-position : center top ; border : none ; box-shadow : none ; }
placessidebar undershoot . bottom , scrolledwindow undershoot . bottom { background-color : transparent ; background-image : linear-gradient ( to left , rgba ( 255 , 255 , 255 , 0.2 ) 50 % , rgba ( 0 , 0 , 0 , 0.2 ) 50 % ) ; padding-bottom : 1 px ; background-size : 10 px 1 px ; background-repeat : repeat-x ; background-origin : content-box ; background-position : center bottom ; border : none ; box-shadow : none ; }
placessidebar undershoot . left , scrolledwindow undershoot . left { background-color : transparent ; background-image : linear-gradient ( to top , rgba ( 255 , 255 , 255 , 0.2 ) 50 % , rgba ( 0 , 0 , 0 , 0.2 ) 50 % ) ; padding-left : 1 px ; background-size : 1 px 10 px ; background-repeat : repeat-y ; background-origin : content-box ; background-position : left center ; border : none ; box-shadow : none ; }
placessidebar undershoot . right , scrolledwindow undershoot . right { background-color : transparent ; background-image : linear-gradient ( to top , rgba ( 255 , 255 , 255 , 0.2 ) 50 % , rgba ( 0 , 0 , 0 , 0.2 ) 50 % ) ; padding-right : 1 px ; background-size : 1 px 10 px ; background-repeat : repeat-y ; background-origin : content-box ; background-position : right center ; border : none ; box-shadow : none ; }
placessidebar junction , scrolledwindow junction { border-color : transparent ; background-color : #f2f2f2 ; }
placessidebar junction : backdrop , scrolledwindow junction : backdrop { background-color : transparent ; }
separator { background : gray ; min-width : 1 px ; min-height : 1 px ; }
/********* Lists * */
list { background-color : #fff ; border-color : gray ; }
list : backdrop { background-color : #fff ; border-color : #8d8d8d ; }
list row { padding : 2 px ; }
row . activatable , row . activatable : backdrop , row . activatable : backdrop : active , row . activatable : backdrop : checked , row . activatable : backdrop : disabled , row . activatable : backdrop : disabled : active , row . activatable : backdrop : disabled : checked , row . activatable : disabled : active , row . activatable : disabled : checked { background-color : rgba ( 255 , 255 , 255 , 0 ) ; border-style : none ; border-radius : 0 ; box-shadow : none ; }
row . activatable { color : #000 ; }
row . activatable : hover { background-color : #f2f2f2 ; }
row . activatable : active { box-shadow : inset 0 2 px 2 px -2 px rgba ( 0 , 0 , 0 , 0.2 ) ; }
row . activatable : selected { background-color : #000 ; color : #fff ; }
row . activatable : selected : active { box-shadow : inset 0 2 px 3 px -1 px rgba ( 0 , 0 , 0 , 0.5 ) ; }
row . activatable : selected : hover { background-color : black ; }
row . activatable : selected : backdrop { background-color : gray ; }
row . activatable : selected . button . flat { color : #fff ; }
row . activatable : selected . button . flat : hover { color : #000 ; }
row . activatable : selected . button . flat : active { color : #fff ; }
row . button . flat { color : #000 ; }
row . button . flat : active { color : #fff ; }
row , row . activatable { transition : all 300 ms cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) ; }
row : hover , row . activatable : hover { transition : none ; }
/********************* App Notifications * */
. app-notification , . app-notification . frame { padding : 10 px ; border-width : 0 1 px 1 px ; border-style : solid ; border-color : gray ; border-radius : 0 0 6 px 6 px ; background-image : linear-gradient ( to bottom , #f0f0f0 5 % , whitesmoke ) ; }
. app-notification . button , . app-notification . frame . button { padding : 6 px ; }
. app-notification border , . app-notification . frame border { border-width : 0 ; }
/************* Expanders * */
2018-01-01 19:53:43 +00:00
expander title > arrow { min-width : 16 px ; min-height : 16 px ; - gtk-icon-source : - gtk-icontheme ( "pan-end-symbolic" ) ; }
2017-05-31 17:47:57 +00:00
2018-01-01 19:53:43 +00:00
expander title > arrow : dir ( rtl ) { - gtk-icon-source : - gtk-icontheme ( "pan-end-symbolic-rtl" ) ; }
2017-05-31 17:47:57 +00:00
2018-03-29 20:23:50 +00:00
expander title > arrow : disabled { color : gray ; }
2018-01-01 19:53:43 +00:00
expander title > arrow : checked { - gtk-icon-source : - gtk-icontheme ( "pan-down-symbolic" ) ; }
2017-05-31 17:47:57 +00:00
2018-01-01 21:21:52 +00:00
expander title : hover > arrow { color : #4d4d4d ; }
2017-11-05 04:08:18 +00:00
2017-05-31 17:47:57 +00:00
/************ Calendar * */
calendar { border : 1 px solid gray ; }
calendar . button { padding : 0 4 px ; color : #999999 ; }
calendar . button : hover { color : #000 ; }
calendar . button : backdrop , calendar . button : backdrop : hover { color : gray ; }
calendar . view { border-radius : 2 px ; }
calendar . header { background : linear-gradient ( to bottom , white , #fafafa ) ; border-bottom-color : silver ; }
calendar . header : backdrop { background-image : linear-gradient ( to bottom , #fff , #fff ) ; border-bottom-color : #c6c6c6 ; }
calendar : indeterminate , calendar : indeterminate : backdrop { color : alpha ( currentColor , 0.55 ) ; }
calendar . highlight , calendar . highlight : backdrop { color : #000 ; }
/*********** Dialogs * */
messagedialog . dialog-action-area button { padding : 8 px ; }
messagedialog . titlebar { border-style : none ; box-shadow : inset 0 1 px #fff ; }
2017-10-05 23:20:25 +00:00
messagedialog . csd . background { border-bottom-left-radius : 9 px ; border-bottom-right-radius : 9 px ; }
2017-05-31 17:47:57 +00:00
messagedialog . csd . dialog-action-area button { padding : 12 px ; border-radius : 0 ; border-width : 2 px ; border-style : solid ; color : #000 ; background-image : none ; background-color : #fff ; border-color : gray ; }
messagedialog . csd . dialog-action-area button : hover { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : gray ; background-image : none ; }
messagedialog . csd . dialog-action-area button : active { border-width : 2 px ; border-style : solid ; background-image : none ; color : white ; background-color : black ; border-color : gray ; }
messagedialog . csd . dialog-action-area button : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
messagedialog . csd . dialog-action-area button : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : #8d8d8d ; background-image : none ; }
messagedialog . csd . dialog-action-area button : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
messagedialog . csd . dialog-action-area button . suggested-action { border-width : 2 px ; border-style : solid ; color : white ; background-image : none ; background-color : #4a90d9 ; border-color : #1c5187 ; }
messagedialog . csd . dialog-action-area button . suggested-action : hover { border-width : 2 px ; border-style : solid ; color : white ; background-color : #4a90d9 ; border-color : #1c5187 ; background-image : none ; }
messagedialog . csd . dialog-action-area button . suggested-action : active { border-width : 2 px ; border-style : solid ; background-image : none ; color : black ; background-color : #b56f26 ; border-color : #1c5187 ; }
messagedialog . csd . dialog-action-area button . suggested-action : backdrop { border-width : 2 px ; border-style : solid ; color : white ; background-color : #4a90d9 ; border-color : #4a90d9 ; background-image : none ; }
messagedialog . csd . dialog-action-area button . suggested-action : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
messagedialog . csd . dialog-action-area button . suggested-action : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
messagedialog . csd . dialog-action-area button . destructive-action { border-width : 2 px ; border-style : solid ; color : white ; background-image : none ; background-color : #ef2929 ; border-color : #8e0b0b ; }
messagedialog . csd . dialog-action-area button . destructive-action : hover { border-width : 2 px ; border-style : solid ; color : white ; background-color : #ef2929 ; border-color : #8e0b0b ; background-image : none ; }
messagedialog . csd . dialog-action-area button . destructive-action : active { border-width : 2 px ; border-style : solid ; background-image : none ; color : black ; background-color : #10d6d6 ; border-color : #8e0b0b ; }
messagedialog . csd . dialog-action-area button . destructive-action : backdrop { border-width : 2 px ; border-style : solid ; color : white ; background-color : #ef2929 ; border-color : #ef2929 ; background-image : none ; }
messagedialog . csd . dialog-action-area button . destructive-action : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
messagedialog . csd . dialog-action-area button . destructive-action : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
messagedialog . csd . dialog-action-area button , messagedialog . csd . dialog-action-area button : hover , messagedialog . csd . dialog-action-area button : active , messagedialog . csd . dialog-action-area button : disabled , messagedialog . csd . dialog-action-area button : backdrop , messagedialog . csd . dialog-action-area button : backdrop : disabled , messagedialog . csd . dialog-action-area button . suggested-action , messagedialog . csd . dialog-action-area button . suggested-action : hover , messagedialog . csd . dialog-action-area button . suggested-action : active , messagedialog . csd . dialog-action-area button . suggested-action : backdrop , messagedialog . csd . dialog-action-area button . suggested-action : backdrop : disabled , messagedialog . csd . dialog-action-area button . suggested-action : disabled , messagedialog . csd . dialog-action-area button . destructive-action , messagedialog . csd . dialog-action-area button . destructive-action : hover , messagedialog . csd . dialog-action-area button . destructive-action : active , messagedialog . csd . dialog-action-area button . destructive-action : backdrop , messagedialog . csd . dialog-action-area button . destructive-action : backdrop : disabled , messagedialog . csd . dialog-action-area button . destructive-action : disabled { border-right-style : none ; border-bottom-style : none ; }
2017-10-05 23:20:25 +00:00
messagedialog . csd . dialog-action-area button : last-child { border-bottom-right-radius : 7 px ; - gtk-outline-bottom-right-radius : 5 px ; }
2017-05-31 17:47:57 +00:00
2017-10-05 23:20:25 +00:00
messagedialog . csd . dialog-action-area button : first-child { border-left-style : none ; border-bottom-left-radius : 7 px ; - gtk-outline-bottom-left-radius : 5 px ; }
2017-05-31 17:47:57 +00:00
filechooser . dialog-action-box { border-top : 1 px solid gray ; }
filechooser . dialog-action-box : backdrop { border-top-color : #8d8d8d ; }
filechooser # pathbarbox { border-bottom : 1 px solid #fff ; }
filechooserbutton : drop ( active ) { box-shadow : none ; border-color : transparent ; }
/*********** Sidebar * */
. sidebar { border : none ; }
. sidebar : backdrop { background-color : #fff ; }
. sidebar > scrolledwindow > . frame { border-right : 1 px solid gray ; }
. sidebar > scrolledwindow > . frame : dir ( rtl ) { border-right : none ; border-left : 1 px solid gray ; }
stacksidebar row { padding : 10 px 4 px ; }
stacksidebar row > label { padding-left : 6 px ; padding-right : 6 px ; }
stacksidebar row . needs-attention > label { background-size : 6 px 6 px , 0 0 ; }
/**************** File chooser * */
placessidebar > viewport . frame { border-style : none ; }
placessidebar row { min-height : 36 px ; padding : 0 px ; }
placessidebar row > revealer { padding : 0 14 px ; }
placessidebar row image . sidebar-icon { opacity : 0.7 ; }
placessidebar row image . sidebar-icon : dir ( ltr ) { padding-right : 8 px ; }
placessidebar row image . sidebar-icon : dir ( rtl ) { padding-left : 8 px ; }
placessidebar row label . sidebar-label : dir ( ltr ) { padding-right : 2 px ; }
placessidebar row label . sidebar-label : dir ( rtl ) { padding-left : 2 px ; }
button . sidebar-button { min-height : 26 px ; min-width : 26 px ; margin-top : 3 px ; margin-bottom : 3 px ; padding : 0 ; border-radius : 100 % ; - gtk-outline-radius : 100 % ; }
button . sidebar-button : not ( : hover ) : not ( : active ) > image , button . sidebar-button : backdrop > image { opacity : 0.7 ; }
placessidebar row : selected : active { box-shadow : none ; }
placessidebar row . sidebar-placeholder-row { padding : 0 8 px ; min-height : 2 px ; background-image : linear-gradient ( to bottom , #000 , #000 ) ; background-clip : content-box ; }
placessidebar row . sidebar-new-bookmark-row { color : #000 ; }
placessidebar row : drop ( active ) : not ( : disabled ) { color : #000 ; box-shadow : inset 0 1 px #000 , inset 0 -1 px #000 ; }
placessidebar row : drop ( active ) : not ( : disabled ) : selected { color : #fff ; background-color : #000 ; }
placesview . server-list-button > image { transition : 200 ms cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) ; - gtk-icon-transform : rotate ( 0 turn ) ; }
placesview . server-list-button : checked > image { transition : 200 ms cubic-bezier ( 0.25 , 0.46 , 0.45 , 0.94 ) ; - gtk-icon-transform : rotate ( -0.5 turn ) ; }
placesview row . activatable : hover { background-color : transparent ; }
/********* Paned * */
2017-10-07 00:27:05 +00:00
paned > separator { min-width : 1 px ; min-height : 1 px ; background-image : linear-gradient ( to bottom , gray , gray ) ; }
2017-05-31 17:47:57 +00:00
2017-10-07 00:27:05 +00:00
paned > separator : backdrop { background-image : linear-gradient ( to bottom , #8d8d8d , #8d8d8d ) ; }
2017-05-31 17:47:57 +00:00
2017-10-07 00:27:05 +00:00
paned : dir ( ltr ) . horizontal > separator { margin : 0 -8 px 0 0 ; padding : 0 8 px 0 0 ; }
2017-05-31 17:47:57 +00:00
2017-10-07 00:27:05 +00:00
paned : dir ( rtl ) . horizontal > separator { margin : 0 0 0 -8 px ; padding : 0 0 0 8 px ; }
2017-05-31 17:47:57 +00:00
2017-10-07 00:27:05 +00:00
paned . vertical > separator { margin : 0 0 -8 px 0 ; padding : 0 0 8 px 0 ; }
2017-05-31 17:47:57 +00:00
2017-10-07 00:27:05 +00:00
paned > separator : selected { background-color : #000 ; }
2017-05-31 17:47:57 +00:00
2017-10-07 00:27:05 +00:00
paned > separator . wide { min-width : 5 px ; min-height : 5 px ; background-color : transparent ; border-style : none solid ; border-color : gray ; border-width : 1 px ; }
2017-05-31 17:47:57 +00:00
/************** GtkInfoBar * */
infobar { border-width : 0 ; border-style : none ; }
. info , . question , . warning , . error { background-color : #000 ; color : #fff ; text-shadow : 0 1 px black ; border-color : black ; }
. info button , . question button , . warning button , . error button { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : #000 ; border-color : black ; }
. info button : hover , . question button : hover , . warning button : hover , . error button : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : #000 ; border-color : black ; background-image : none ; }
. info button : active , . question button : active , . warning button : active , . error button : active { border-width : 2 px ; border-style : solid ; background-image : none ; color : black ; background-color : white ; border-color : black ; }
. info button : disabled , . question button : disabled , . warning button : disabled , . error button : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
. info button : backdrop , . question button : backdrop , . warning button : backdrop , . error button : backdrop { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : #000 ; border-color : #000 ; background-image : none ; }
. info button : backdrop : disabled , . question button : backdrop : disabled , . warning button : backdrop : disabled , . error button : backdrop : disabled { border-width : 2 px ; border-style : solid ; color : gray ; background-color : white ; border-color : silver ; background-image : none ; }
. info label : selected , . info label : selected : focus , . info label : selected : hover , . question label : selected , . question label : selected : focus , . question label : selected : hover , . warning label : selected , . warning label : selected : focus , . warning label : selected : hover , . error label : selected , . error label : selected : focus , . error label : selected : hover { background-color : #333333 ; }
/************ Tooltips * */
HC: Copy working tooltip code from Adwaita & tweak
There were various problems, like only selecting on .tooltip and not the
widget node tooltip, not being specific enough for tooltip.csd, etc. So,
specific theming was absent, and default popup window styles got applied
This commit copies in the better working tooltip CSS from Adwaita, but
applies a couple of changes to make it work better in the HC themes:
• Reduce the transparency of the tooltip, so we achieve higher contrast
• Drop the black text-shadow, as it is not useful on this more black bg
Note: we may then need to re-add some of this to the .tooltip class. But
it is unclear what needs done there. While Adwaita is not doing it, we
are better not to confuse by keeping it in HC only; we should try to be
as close as possible, to make it easier for HC to keep up with Adwaita.
https://bugzilla.gnome.org/show_bug.cgi?id=769879
2017-10-05 18:09:19 +00:00
tooltip { padding : 4 px ; /* not working */ border-radius : 5 px ; box-shadow : none ; }
2017-05-31 17:47:57 +00:00
HC: Copy working tooltip code from Adwaita & tweak
There were various problems, like only selecting on .tooltip and not the
widget node tooltip, not being specific enough for tooltip.csd, etc. So,
specific theming was absent, and default popup window styles got applied
This commit copies in the better working tooltip CSS from Adwaita, but
applies a couple of changes to make it work better in the HC themes:
• Reduce the transparency of the tooltip, so we achieve higher contrast
• Drop the black text-shadow, as it is not useful on this more black bg
Note: we may then need to re-add some of this to the .tooltip class. But
it is unclear what needs done there. While Adwaita is not doing it, we
are better not to confuse by keeping it in HC only; we should try to be
as close as possible, to make it easier for HC to keep up with Adwaita.
https://bugzilla.gnome.org/show_bug.cgi?id=769879
2017-10-05 18:09:19 +00:00
tooltip . background { background-color : rgba ( 0 , 0 , 0 , 0.9 ) ; background-clip : padding-box ; border : 1 px solid gray ; }
tooltip decoration { background-color : transparent ; }
tooltip * { padding : 4 px ; background-color : transparent ; color : white ; }
2017-05-31 17:47:57 +00:00
/***************** Color Chooser * */
colorswatch { box-shadow : inset 0 1 px rgba ( 0 , 0 , 0 , 0.1 ) , 0 1 px #fff ; }
: selected colorswatch { box-shadow : none ; }
: selected colorswatch overlay , : selected colorswatch overlay : hover { border-color : #fff ; }
colorswatch : selected { box-shadow : inset 0 1 px rgba ( 0 , 0 , 0 , 0.1 ) , 0 1 px #fff ; }
colorswatch . top { border-top-left-radius : 6 px ; border-top-right-radius : 6 px ; }
colorswatch . bottom { border-bottom-left-radius : 6 px ; border-bottom-right-radius : 6 px ; }
colorswatch . left , colorswatch : first-child : not ( overlay ) : not ( . top ) { border-top-left-radius : 6 px ; border-bottom-left-radius : 6 px ; }
colorswatch . right , colorswatch : last-child : not ( overlay ) : not ( . bottom ) { border-top-right-radius : 6 px ; border-bottom-right-radius : 6 px ; }
colorswatch : only-child : not ( overlay ) { border-radius : 6 px ; }
colorswatch . top > overlay { border-top-left-radius : 5 px ; border-top-right-radius : 5 px ; }
colorswatch . bottom > overlay { border-bottom-left-radius : 5 px ; border-bottom-right-radius : 5 px ; }
colorswatch : first-child : not ( . top ) > overlay { border-top-left-radius : 5 px ; border-bottom-left-radius : 5 px ; }
colorswatch : last-child : not ( . bottom ) > overlay { border-top-right-radius : 5 px ; border-bottom-right-radius : 5 px ; }
colorswatch : only-child > overlay { border-radius : 5 px ; }
colorswatch . activatable : hover , colorswatch . activatable : hover : selected { background-image : linear-gradient ( 135 deg , rgba ( 255 , 255 , 255 , 0.7 ) , rgba ( 255 , 255 , 255 , 0 ) 50 % ) ; box-shadow : inset 0 1 px rgba ( 255 , 255 , 255 , 0.4 ) , inset 0 -1 px rgba ( 0 , 0 , 0 , 0.4 ) ; }
colorswatch : backdrop , colorswatch : backdrop : selectedi , colorswatch . dark : backdrop , colorswatch . dark : backdrop : selected { background-image : none ; box-shadow : none ; }
colorswatch . dark { color : white ; border : 1 px solid rgba ( 0 , 0 , 0 , 0.3 ) ; }
colorswatch . dark : hover { border-color : rgba ( 0 , 0 , 0 , 0.5 ) ; }
colorswatch . dark : backdrop { color : rgba ( 255 , 255 , 255 , 0.3 ) ; }
colorswatch . light { color : black ; border : 1 px solid rgba ( 0 , 0 , 0 , 0.3 ) ; }
colorswatch . light : hover { border-color : rgba ( 0 , 0 , 0 , 0.5 ) ; }
colorswatch . light : backdrop { color : rgba ( 0 , 0 , 0 , 0.3 ) ; }
colorswatch overlay , colorswatch overlay : selected { background : none ; border : none ; }
colorswatch # add-color-button { border-width : 2 px ; border-style : solid ; color : #000 ; background-image : none ; background-color : #fff ; border-color : gray ; }
colorswatch # add-color-button : hover { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : gray ; background-image : none ; }
colorswatch # add-color-button : backdrop { border-width : 2 px ; border-style : solid ; color : #000 ; background-color : #fff ; border-color : #8d8d8d ; background-image : none ; }
colorswatch # add-color-button overlay { border-width : 0 ; background : none ; }
/********************** Window Decorations * */
decoration { border-radius : 7 px 7 px 0 0 ; border-width : 0 px ; box-shadow : 0 3 px 9 px 1 px rgba ( 0 , 0 , 0 , 0.5 ) , 0 0 0 1 px rgba ( 0 , 0 , 0 , 0.23 ) ; /* this is used for the resize cursor area */ margin : 10 px ; }
decoration : backdrop { box-shadow : 0 2 px 6 px 2 px rgba ( 0 , 0 , 0 , 0.2 ) , 0 3 px 9 px 1 px transparent , 0 0 0 1 px rgba ( 0 , 0 , 0 , 0.18 ) ; }
2017-10-05 00:39:39 +00:00
. tiled decoration { border-radius : 0 ; }
2017-05-31 17:47:57 +00:00
2017-10-05 00:39:39 +00:00
. csd . popup decoration { border-radius : 0 ; box-shadow : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.2 ) , 0 0 0 1 px rgba ( 0 , 0 , 0 , 0.13 ) ; }
2017-05-31 17:47:57 +00:00
HC: Copy working tooltip code from Adwaita & tweak
There were various problems, like only selecting on .tooltip and not the
widget node tooltip, not being specific enough for tooltip.csd, etc. So,
specific theming was absent, and default popup window styles got applied
This commit copies in the better working tooltip CSS from Adwaita, but
applies a couple of changes to make it work better in the HC themes:
• Reduce the transparency of the tooltip, so we achieve higher contrast
• Drop the black text-shadow, as it is not useful on this more black bg
Note: we may then need to re-add some of this to the .tooltip class. But
it is unclear what needs done there. While Adwaita is not doing it, we
are better not to confuse by keeping it in HC only; we should try to be
as close as possible, to make it easier for HC to keep up with Adwaita.
https://bugzilla.gnome.org/show_bug.cgi?id=769879
2017-10-05 18:09:19 +00:00
tooltip . csd decoration { border-radius : 5 px ; box-shadow : none ; }
2017-05-31 17:47:57 +00:00
2017-10-05 23:20:25 +00:00
messagedialog . csd decoration { border-radius : 7 px ; box-shadow : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.2 ) , 0 0 0 1 px rgba ( 0 , 0 , 0 , 0.13 ) ; }
2017-10-05 00:39:39 +00:00
. solid-csd decoration { border-radius : 0 ; margin : 4 px ; background-color : #fff ; border : solid 1 px #8d8d8d ; box-shadow : none ; }
2017-05-31 17:47:57 +00:00
/********************** Touch Copy & Paste * */
cursor-handle { background-color : #fff ; background-image : none ; - gtk-icon-source : none ; box-shadow : none ; outline-style : none ; outline-color : transparent ; border : 2 px solid #000 ; }
cursor-handle . top : dir ( ltr ) , cursor-handle . bottom : dir ( rtl ) { border-radius : 10 px 0 0 0 ; padding-left : 10 px ; }
cursor-handle . bottom : dir ( ltr ) , cursor-handle . top : dir ( rtl ) { border-radius : 0 10 px 0 0 ; padding-right : 10 px ; }
cursor-handle . insertion-cursor : dir ( ltr ) , cursor-handle . insertion-cursor : dir ( rtl ) { border-radius : 10 px 10 px 0 0 ; }
cursor-handle . top : hover : dir ( ltr ) , cursor-handle . bottom : hover : dir ( rtl ) { border-radius : 10 px 0 0 0 ; padding-left : 10 px ; }
cursor-handle . bottom : hover : dir ( ltr ) , cursor-handle . top : hover : dir ( rtl ) { border-radius : 0 10 px 0 0 ; padding-right : 10 px ; }
cursor-handle . insertion-cursor : hover : dir ( ltr ) , cursor-handle . insertion-cursor : hover : dir ( rtl ) { border-radius : 10 px 10 px 0 0 ; }
cursor-handle . top : active : dir ( ltr ) , cursor-handle . bottom : active : dir ( rtl ) { border-radius : 10 px 0 0 0 ; padding-left : 10 px ; }
cursor-handle . bottom : active : dir ( ltr ) , cursor-handle . top : active : dir ( rtl ) { border-radius : 0 10 px 0 0 ; padding-right : 10 px ; }
cursor-handle . insertion-cursor : active : dir ( ltr ) , cursor-handle . insertion-cursor : active : dir ( rtl ) { border-radius : 10 px 10 px 0 0 ; }
2016-01-06 00:25:06 +00:00
/* Decouple the font of context menus from their entry/textview */
2017-05-31 17:47:57 +00:00
. context-menu { font : initial ; }
. touch-selection { font : initial ; color : #fff ; border : none ; background-color : black ; background-clip : padding-box ; box-shadow : none ; text-shadow : 0 1 px black ; - gtk-icon-shadow : 0 1 px black ; }
. touch-selection : backdrop { text-shadow : none ; }
. touch-selection button { border-width : 2 px ; border-style : solid ; color : #fff ; background-image : none ; background-color : rgba ( 0 , 0 , 0 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. touch-selection button : hover { border-width : 2 px ; border-style : solid ; color : #fff ; background-color : rgba ( 77 , 77 , 77 , 0.8 ) ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; }
. touch-selection button : active , . touch-selection button : checked { border-width : 2 px ; border-style : solid ; color : rgba ( 0 , 0 , 0 , 0.8 ) ; background-color : #fff ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; box-shadow : none ; }
. touch-selection button : disabled , . touch-selection button : backdrop : disabled { border-width : 2 px ; border-style : solid ; border-color : rgba ( 255 , 255 , 255 , 0.2 ) ; color : gray ; }
. touch-selection button : backdrop { border-width : 2 px ; border-style : solid ; }
. touch-selection . check { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : hover { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : active { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : disabled { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : indeterminate { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : indeterminate : hover { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : indeterminate : selected { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : indeterminate : disabled { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : checked { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : checked : disabled { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : checked : hover { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : checked : active { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . check : backdrop : checked { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : hover { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : active { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : disabled { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : indeterminate { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : indeterminate : hover { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : indeterminate : selected { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : indeterminate : disabled { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : checked { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : checked : disabled { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : checked : hover { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : checked : active { - gtk-icon-shadow : none ; color : #fff ; }
. touch-selection . radio : backdrop : checked { - gtk-icon-shadow : none ; color : #fff ; }
button . circular { border-radius : 20 px ; - gtk-outline-radius : 20 px ; }
button . circular label { padding : 0 ; }
row : selected button . circular { color : #fff ; }
row : selected button . circular : hover { color : #000 ; }
row : selected button . circular : active { color : #fff ; }
. keycap { min-width : 18 px ; min-height : 25 px ; margin-top : 3 px ; padding-bottom : 2 px ; padding-left : 6 px ; padding-right : 6 px ; color : #000 ; background-color : #fff ; border : 2 px solid ; border-color : gray ; border-radius : 5 px ; box-shadow : inset 0 -3 px silver , inset 0 -2 px #fff , inset 0 0 0 1 px #fff ; font-size : smaller ; }
* : drop ( active ) : focus , * : drop ( active ) { border-color : #000 ; box-shadow : inset 0 0 0 2 px #000 ; }
stackswitcher button . text-button { min-width : 100 px ; }
stackswitcher button . circular { min-width : 0 px ; }
2017-09-02 16:41:59 +00:00
/********* Emoji * */
popover . emoji-picker { padding-left : 0 ; padding-right : 0 ; }
button . emoji-section , button . emoji-section : backdrop { /* Dodge stuff inherited from backdrop button */ border-color : transparent ; border-width : 3 px ; border-style : none none solid ; border-radius : 0 ; margin : 2 px 4 px 2 px 4 px ; padding : 3 px 0 0 ; min-width : 32 px ; min-height : 28 px ; /* reset props inherited from the button style */ background : none ; box-shadow : none ; text-shadow : none ; outline-offset : -5 px ; }
button . emoji-section : backdrop : not ( : checked ) , button . emoji-section : backdrop : backdrop : not ( : checked ) { border-color : transparent ; }
button . emoji-section : hover , button . emoji-section : backdrop : hover { border-color : gray ; }
button . emoji-section : checked , button . emoji-section : backdrop : checked { border-color : #000 ; }
button . emoji-section label , button . emoji-section : backdrop label { padding : 0 ; opacity : 0.55 ; }
button . emoji-section : hover label , button . emoji-section : backdrop : hover label { opacity : 0.775 ; }
button . emoji-section : checked label , button . emoji-section : backdrop : checked label { opacity : 1 ; /* Dodge default inversion to white for non-flat, selected button */ color : #000 ; }
. emoji { font-size : x-large ; padding : 6 px ; border-radius : 6 px ; }
2017-09-05 00:42:31 +00:00
. emoji : hover { background : #000 ; color : #fff ; }