diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index 7da97eb..4a48a88 100644 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -1,3 +1,15 @@ +@keyframes entry-anim { + from { + background-image: image(#00fFff); + background-size: 100% 2px; + background-position: bottom; } + to { + background-position: top; } } +@keyframes frame-anim { + from { + border-color: #009294; } + to { + border-color: #00fFff; } } /* $button_checked_bg_image: linear-gradient(to top, gtkshade($bg, 4), gtkshade($bg, 2) 30%, gtkshade($bg, 1.6)); @@ -103,11 +115,13 @@ scrollbar { scrollbar slider { transition: 200ms ease-out; } -decoration { - transition: 200ms ease-out; } - decoration:backdrop { - transition: 200ms ease-out; } + /*decoration { + transition: 200ms ease-out; + &:backdrop { + transition: 200ms ease-out; + } + }*/ assistant .sidebar label.highlight { color: #62ffff; background-color: #006e68; } @@ -526,7 +540,8 @@ entry { color: #00fFff; caret-color: currentColor; background-color: #013334; - box-shadow: inset 0px -4px 4px -4px rgba(0, 255, 255, 0.8); + background-repeat: no-repeat; + box-shadow: inset 0px -4px 4px -4px rgba(0, 255, 255, 0.2); /* &:backdrop { color: $unfocused_fg_color; background-color: $unfocused_base_color; @@ -539,7 +554,12 @@ entry { border-color: transparent; }*/ } entry:active, entry:focus { - box-shadow: inset 0px -4px 4px -4px #00fFff; } + box-shadow: inset 0px -4px 4px -4px #00fFff; + animation-duration: 300ms; + animation-timing-function: steps(6, end); + animation-iteration-count: 2; + animation-fill-mode: none; + animation-name: entry-anim; } entry:selected, entry:selected:focus, entry selection, entry selection:focus { color: #62ffff; background-color: #006e68; } @@ -659,27 +679,39 @@ infobar { border-color: #0d3178; color: #92c4ff; background-image: none; - background-color: #0038a7; } - .info button { - border-color: #0d3178; - color: #92c4ff; - background-image: none; - background-color: #003cb4; } - .info button:hover { - border-color: #0b3383; - background-color: #003eb8; } - .info button:active { - border-color: #142850; - background-color: #04379b; } - .info button:active:hover { - border-color: #0b3383; } - .info button.close { - color: #92c4ff; } - .info button.close:hover { - background-color: rgba(128, 255, 255, 0.2); } - .info button.close:active { - color: #92c4ff; - background-color: rgba(0, 0, 0, 0.1); } + background-color: #0038a7; + /*button { + border-color: gtkshade($info_bg_color, 0.8); + color: $info_fg_color; + background-image: none; + background-color: gtkshade($info_bg_color, 1.08); + + &:hover { + border-color: gtkshade($info_bg_color, 0.85); + background-color: gtkshade($info_bg_color, 1.10); + } + + &:active { + border-color: gtkshade($info_bg_color, 0.6); + background-color: gtkshade($info_bg_color, 0.95); + + &:hover { + border-color: gtkshade($info_bg_color, 0.85); + } + } + &.close { + color: $info_fg_color; + + &:hover { + background-color: gtkalpha($light_shadow, 0.2); + } + + &:active { + color: $info_fg_color; + background-color: gtkalpha($dark_shadow, 0.1); + } + } + }*/ } .warning { border-width: 1px; @@ -687,27 +719,40 @@ infobar { border-color: #b86814; color: #f9f06b; background-image: none; - background-color: #FF8300; } - .warning button { - border-color: #b86814; - color: #f9f06b; - background-image: none; - background-color: #ff8d14; } - .warning button:hover { - border-color: #c86f10; - background-color: #ff8f1a; } - .warning button:active { - border-color: #7a4e1f; - background-color: #ec7c06; } - .warning button:active:hover { - border-color: #c86f10; } - .warning button.close { - color: #f9f06b; } - .warning button.close:hover { - background-color: rgba(128, 255, 255, 0.2); } - .warning button.close:active { - color: #f9f06b; - background-color: rgba(0, 0, 0, 0.1); } + background-color: #FF8300; + /*button { + border-color: gtkshade($warning_bg_color, 0.8); + color: $warning_fg_color; + background-image: none; + background-color: gtkshade($warning_bg_color, 1.08); + + &:hover { + border-color: gtkshade($warning_bg_color, 0.85); + background-color: gtkshade($warning_bg_color, 1.10); + } + + &:active { + border-color: gtkshade($warning_bg_color, 0.6); + background-color: gtkshade($warning_bg_color, 0.95); + + &:hover { + border-color: gtkshade($warning_bg_color, 0.85); + } + } + + &.close { + color: $warning_fg_color; + + &:hover { + background-color: gtkalpha($light_shadow, 0.2); + } + + &:active { + color: $warning_fg_color; + background-color: gtkalpha($dark_shadow, 0.1); + } + } + }*/ } .question { border-width: 1px; @@ -715,27 +760,40 @@ infobar { border-color: #16422e; color: #8ff0a4; background-image: none; - background-color: #155a3a; } - .question button { - border-color: #16422e; - color: #8ff0a4; - background-image: none; - background-color: #14643f; } - .question button:hover { - border-color: #164831; - background-color: #136740; } - .question button:active { - border-color: #152e22; - background-color: #165437; } - .question button:active:hover { - border-color: #164831; } - .question button.close { - color: #8ff0a4; } - .question button.close:hover { - background-color: rgba(128, 255, 255, 0.2); } - .question button.close:active { - color: #8ff0a4; - background-color: rgba(0, 0, 0, 0.1); } + background-color: #155a3a; + /*button { + border-color: gtkshade($question_bg_color, 0.8); + color: $question_fg_color; + background-image: none; + background-color: gtkshade($question_bg_color, 1.08); + + &:hover { + border-color: gtkshade($question_bg_color, 0.85); + background-color: gtkshade($question_bg_color, 1.10); + } + + &:active { + border-color: gtkshade($question_bg_color, 0.6); + background-color: gtkshade($question_bg_color, 0.95); + + &:hover { + border-color: gtkshade($question_bg_color, 0.85); + } + } + + &.close { + color: $question_fg_color; + + &:hover { + background-color: gtkalpha($light_shadow, 0.2); + } + + &:active { + color: $question_fg_color; + background-color: gtkalpha($dark_shadow, 0.1); + } + } + }*/ } .error { border-width: 1px; @@ -743,27 +801,40 @@ infobar { border-color: #b81414; background-color: #FF0000; background-image: none; - color: #f6d32d; } - .error button { - border-color: #b81414; - color: #f6d32d; - background-image: none; - background-color: #ff1414; } - .error button:hover { - border-color: #c81010; - background-color: #ff1a1a; } - .error button:active { - border-color: #7a1f1f; - background-color: #ec0606; } - .error button:active:hover { - border-color: #c81010; } - .error button.close { - color: #f6d32d; } - .error button.close:hover { - background-color: rgba(128, 255, 255, 0.2); } - .error button.close:active { - color: #f6d32d; - background-color: rgba(0, 0, 0, 0.1); } + color: #f6d32d; + /*button { + border-color: gtkshade($error_bg_color, 0.8); + color: $error_fg_color; + background-image: none; + background-color: gtkshade($error_bg_color, 1.08); + + &:hover { + border-color: gtkshade($error_bg_color, 0.85); + background-color: gtkshade($error_bg_color, 1.10); + } + + &:active { + border-color: gtkshade($error_bg_color, 0.6); + background-color: gtkshade($error_bg_color, 0.95); + + &:hover { + border-color: gtkshade($error_bg_color, 0.85); + } + } + + &.close { + color: $error_fg_color; + + &:hover { + background-color: gtkalpha($light_shadow, 0.2); + } + + &:active { + color: $error_fg_color; + background-color: gtkalpha($dark_shadow, 0.1); + } + } + }*/ } image { color: alpha(currentColor, 0.75); } @@ -821,7 +892,13 @@ image { padding: 3px 5px; } scrolledwindow.frame, scrolledwindow viewport.frame { - border: none; } + border: 1px solid #009294; } + scrolledwindow.frame:focus, scrolledwindow viewport.frame:focus { + animation-duration: 300ms; + animation-timing-function: linear; + animation-iteration-count: 2; + animation-fill-mode: none; + animation-name: glow-anim; } arrow, combobox arrow { color: alpha(currentColor, 0.75); @@ -1786,8 +1863,7 @@ headerbar { padding: 4px 8px; min-height: 32px; color: #57ff00; - background-color: #002428; - border-bottom: 1px solid #009294; } + background-color: #002428; } headerbar:backdrop { color: rgba(87, 255, 0, 0.5); } .tiled headerbar, .tiled headerbar:backdrop, .maximized headerbar, .maximized headerbar:backdrop { @@ -2358,14 +2434,38 @@ tooltip { textview { color: #00fFff; background-color: #013334; } + textview:focus, textview:focus text, textview.view:focus, textview.view:focus text { + animation-duration: 300ms; + animation-timing-function: steps(6, end); + animation-iteration-count: 2; + animation-fill-mode: none; } textview text { background-color: #013334; } + textview text:focus { + animation-duration: 300ms; + animation-timing-function: steps(6, end); + animation-iteration-count: 2; + animation-fill-mode: none; } textview text:selected, textview text selection, textview text:selected:focus, textview text selection:focus { color: #62ffff; background-color: #006e68; } treeview { - -treeview-vertical-separator: 0; } + -treeview-vertical-separator: 0; + /*entry, entry.flat { + border-radius: 0; + background-image: none; + background-color: $base_color; + + &:focus { + border-color: $selected_bg_color; + } + }*/ } + treeview.view:focus { + animation-duration: 300ms; + animation-timing-function: steps(6, end); + animation-iteration-count: 2; + animation-fill-mode: none; } treeview.view:selected, treeview.view:selected:focus { border-radius: 0; color: #62ffff; @@ -2383,23 +2483,24 @@ treeview { border-radius: 0; } treeview header button:last-child { border-width: 0 0 1px 0; } - treeview header button:hover, treeview header button:focus:hover { - background-image: none; - background-color: #002428; } - treeview header button:active, treeview header button:focus:active { - color: #62ffff; - background-image: none; - background-color: #006e68; } - treeview entry, treeview entry.flat { - border-radius: 0; - background-image: none; - background-color: #013334; } - treeview entry:focus, treeview entry.flat:focus { - border-color: #006e68; } + treeview header button, treeview header button:focus { + /*&:hover { + background-image: none; + background-color: $bg_color; + }*/ } + treeview header button:active, treeview header button:focus:active { + color: #62ffff; + /*background-image: none;*/ + background-color: #006e68; } .view { color: #00fFff; background-color: #013334; } + .view:focus { + animation-duration: 300ms; + animation-timing-function: linear; + animation-iteration-count: 2; + animation-fill-mode: none; } .view:disabled { color: #c01c32; background-color: #4a122f; } @@ -2562,29 +2663,37 @@ searchbar { background-clip: border-box; background-origin: border-box; } -.osd button, button.osd { - padding: 4px; - border-width: 1px; - border-style: solid; - border-color: #073a3c; - border-radius: 5px; - background-color: #00565a; - color: #00fFff; } - .osd button:hover, button.osd:hover { - border-color: #093031; - background-color: #00585b; - color: #00fFff; } - .osd button:active, .osd button:checked, button.osd:active, button.osd:checked { - border-color: #073a3c; - background-color: #024a4d; - color: #00fFff; } - .osd button:disabled, button.osd:disabled { - border-color: #053f41; - background-color: #044547; - color: rgba(0, 255, 255, 0.8); } - .osd button:checked:disabled, button.osd:checked:disabled { - background-color: #073a3c; } + /*.osd button, button.osd { + padding: 4px; + border-width: 1px; + border-style: solid; + border-color: gtkshade($osd_bg, 0.8); + border-radius: $button_radius; + background-color: gtkshade($osd_bg, 1.08); + color: $osd_fg; + &:hover { + border-color: gtkshade($osd_bg, 0.7); + background-color: gtkshade($osd_bg, 1.10); + color: $osd_fg; + } + + &:active, &:checked { + border-color: gtkshade($osd_bg, 0.8); + background-color: gtkshade($osd_bg, 0.95); + color: $osd_fg; + } + + &:disabled { + border-color: gtkshade($osd_bg, 0.85); + background-color: gtkshade($osd_bg, 0.9); + color: gtkalpha($osd_fg, 0.8); + } + + &:checked:disabled { + background-color: gtkshade($osd_bg, 0.8); + } + }*/ .osd toolbar, toolbar.osd { -GtkToolbar-button-relief: normal; padding: 4px; @@ -2593,76 +2702,111 @@ searchbar { border-radius: 0; border-color: #073a3c; background-color: #005053; - color: #00fFff; } - .osd toolbar button, toolbar.osd button { - padding: 2px 4px; - border-width: 1px; - border-style: solid; - border-color: #073a3c; - border-radius: 5px; - background-color: #00565a; - color: #00fFff; } - .osd toolbar button:hover, toolbar.osd button:hover { - border-color: #093031; - background-color: #00585b; - color: #00fFff; } - .osd toolbar button:active, .osd toolbar button:checked, toolbar.osd button:active, toolbar.osd button:checked { - border-color: #073a3c; - background-color: #024a4d; - color: #00fFff; } - .osd toolbar button:disabled, toolbar.osd button:disabled { - border-color: #053f41; - background-color: #044547; - color: rgba(0, 255, 255, 0.8); } - .osd toolbar button:checked:disabled, toolbar.osd button:checked:disabled { - border-color: #083536; - background-color: #073a3c; } + color: #00fFff; + /*button { + padding: 2px 4px; + border-width: 1px; + border-style: solid; + border-color: gtkshade($osd_bg, 0.8); + border-radius: $button_radius; + background-color: gtkshade($osd_bg, 1.08); + color: $osd_fg; + + &:hover { + border-color: gtkshade($osd_bg, 0.7); + background-color: gtkshade($osd_bg, 1.10); + color: $osd_fg; + } + + &:active, &:checked { + border-color: gtkshade($osd_bg, 0.8); + background-color: gtkshade($osd_bg, 0.95); + color: $osd_fg; + } + + &:disabled { + border-color: gtkshade($osd_bg, 0.85); + background-color: gtkshade($osd_bg, 0.9); + color: gtkalpha($osd_fg, 0.8); + } + + &:checked:disabled { + border-color: gtkshade($osd_bg, 0.75); + background-color: gtkshade($osd_bg, 0.80); + } + }*/ } .osd toolbar separator, toolbar.osd separator { color: #044547; } -.osd scale slider, scale.osd slider { - background-color: #006e68; } - .osd scale slider:hover, scale.osd slider:hover { - background-color: #006e68; } - .osd scale slider:disabled, scale.osd slider:disabled { - background-color: #006a6d; } -.osd scale trough, scale.osd trough { - border-color: #006a6d; } - .osd scale trough:disabled, scale.osd trough:disabled { - border-color: #053f41; - background-color: transparent; } -.osd scale highlight, scale.osd highlight { - border-color: #006e68; - background-color: #006e68; } + /*.osd scale, scale.osd { + slider { + background-color: $selected_bg_color; -.osd progress, progress.osd { - background-color: #00fFff; } + &:hover { + background-color: $selected_bg_color; + } -.osd progressbar, progressbar.osd { - padding: 0; } - .osd progressbar trough, progressbar.osd trough { + &:disabled { + background-color: gtkmix($osd_bg, $osd_fg, 0.15); + } + } + + trough { + border-color: gtkmix($osd_bg, $osd_fg, 0.15); + + &:disabled { + border-color: gtkshade($osd_bg, 0.85); + background-color: transparent; + } + } + + highlight { + border-color: $selected_bg_color; + background-color: $selected_bg_color; + } + }*/ + /*.osd progress, progress.osd { + background-color: $osd_fg; + } + + .osd progressbar, progressbar.osd { padding: 0; - border-style: none; - border-radius: 0; - background-color: transparent; } - .osd progressbar progress, progressbar.osd progress { - border-style: none; - border-radius: 0; - background-color: #006e68; } -.osd scrollbar trough, scrollbar.osd trough { - background-color: transparent; } -.osd scrollbar slider, scrollbar.osd slider { - border-width: 0px; - border-radius: 6px; - background-color: #005255; } - .osd scrollbar slider:hover, scrollbar.osd slider:hover { - border-color: #00686b; - background-color: #00686b; } - .osd scrollbar slider:active, scrollbar.osd slider:active { - border-color: #00686b; - background-color: #003a3e; } + trough { + padding: 0; + border-style: none; + border-radius: 0; + background-color: transparent; + } + progress { + border-style: none; + border-radius: 0; + background-color: $selected_bg_color; + } + } + + .osd scrollbar, scrollbar.osd { + trough { + background-color: transparent; + } + + slider { + border-width: 0px; + border-radius: 6px; + background-color: gtkmix($osd_base, $osd_fg, 0.21); + + &:hover { + border-color: gtkmix($osd_base, $osd_fg, 0.31); + background-color: gtkmix($osd_base, $osd_fg, 0.31); + } + + &:active { + border-color: gtkmix($osd_base, $osd_fg, 0.31); + background-color: gtkmix($osd_base, $osd_fg, 0.1); + } + } + }*/ .osd view, view.osd, .osd.view { background-color: #002428; } .osd view:selected, .osd view:selected:focus, view.osd:selected, view.osd:selected:focus, .osd.view:selected, .osd.view:selected:focus { @@ -3053,10 +3197,12 @@ decoration { .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; } .popup decoration { - box-shadow: none; } + box-shadow: none; + transition-property: box-shadow; } .csd.popup decoration { border-radius: 2px; - box-shadow: 0 0 5px 1px rgba(87, 227, 137, 0.5); } + box-shadow: 0 0 5px 1px rgba(87, 227, 137, 0.5); + transition-property: box-shadow; } .ssd decoration { border-radius: 5px 5px 0 0; box-shadow: 0 0 5px 1px rgba(87, 227, 137, 0.5); }