From db295e182f1cf96f619d65c6a16c0c8a3cd289a5 Mon Sep 17 00:00:00 2001 From: Felipe Erias Morandeira Date: Thu, 4 Jul 2013 14:03:40 +0100 Subject: Added the CSS style of EosActionButtons to endless-widgets.css [endlessm/eos-sdk#104] --- data/css/endless-widgets.css | 146 ++++++++++++++++++++++++++++++++++ test/smoke-tests/eosactionbutton.css | 150 +---------------------------------- 2 files changed, 148 insertions(+), 148 deletions(-) diff --git a/data/css/endless-widgets.css b/data/css/endless-widgets.css index faf1e38..4ef2e2a 100644 --- a/data/css/endless-widgets.css +++ b/data/css/endless-widgets.css @@ -49,3 +49,149 @@ .top-bar .button *:active { color: #8a8a8a; } + + +/* Endless action button */ + +EosActionButton { + background-color: transparent; + border-style: solid; + border-image: none; + margin: 10px; + + border-radius: 40px; + border-width: 8px; +} + +EosActionButton GtkLabel { + font-family: BentonSans, sans-serif; + font-weight: normal; + font-size: 11px; +} + +/* Endless action button: sizes */ + +EosActionButton.primary { + border-radius: 40px; + border-width: 8px; +} + +EosActionButton.secondary { + border-radius: 30px; + border-width: 6px; +} + +EosActionButton.tertiary { + border-radius: 23px; + border-width: 5px; +} + +EosActionButton.quaternary { + border-radius: 17px; + border-width: 4px; +} + +/* Endless action button: light background */ + +/* normal */ +EosActionButton, +EosActionButton:selected, +EosActionButton:focused { + border-color: alpha(#323232, 0.5); + box-shadow: 1px 1px 1px alpha(black, 0.8) inset, + 0px -1px 1px alpha(white, 0.65); +} + +EosActionButton GtkImage, +EosActionButton GtkImage:selected, +EosActionButton GtkImage:focused { + color: alpha(#323232, 0.5); +} + +EosActionButton GtkLabel, +EosActionButton GtkLabel:selected, +EosActionButton GtkLabel:focused { + color: alpha(#323232, 0.65); +} + +/* hover */ +EosActionButton:hover { + border-color: alpha(#323232, 0.8); + box-shadow: 1px 1px 1px alpha(black, 0.8) inset; +} + +EosActionButton GtkImage:hover { + color: alpha(#282828, 0.8); +} + +EosActionButton GtkLabel:hover { + color: alpha(#1E1E1E, 0.8); +} + +/* pressed */ +EosActionButton:active { + border-color: alpha(#323232, 0.65); + box-shadow: 1px 1px 1px alpha(black, 0.8) inset; +} + +EosActionButton GtkImage:active { + color: alpha(#282828, 0.65); +} + +EosActionButton GtkLabel:active { + color: alpha(#1E1E1E, 0.8); +} + +/* insensitive, just in case */ +EosActionButton:insensitive, +EosActionButton:inconsistent { + border-color: alpha(#888888, 0.50); + box-shadow: none; +} + +/* Endless action button: dark background */ + +/* normal */ +.dark EosActionButton, +.dark EosActionButton:selected, +.dark EosActionButton:focused { + border-color: alpha(#E6E6E6, 0.5); + box-shadow: 1px 1px 1px alpha(black, 0.95) inset, + 0px -1px 1px alpha(white, 0.5) inset; +} + +.dark EosActionButton GtkImage, +.dark EosActionButton GtkImage:selected, +.dark EosActionButton GtkImage:selected, +.dark EosActionButton GtkLabel, +.dark EosActionButton GtkLabel:selected, +.dark EosActionButton GtkLabel:focused { + color: alpha(#E6E6E6, 0.5); +} + +/* hover */ +.dark EosActionButton:hover { + border-color: alpha(white, 0.8); + box-shadow: 1px 1px 1px alpha(black, 0.95) inset, + 0px -1px 1px alpha(white, 0.85) inset; +} + +.dark EosActionButton GtkImage:hover, +.dark EosActionButton GtkLabel:hover { + color: alpha(white, 0.8); +} + +/* pressed */ +.dark EosActionButton:active { + border-color: alpha(white, 0.65); + box-shadow: 1px 1px 1px alpha(black, 0.95) inset, + 0px -1px 1px alpha(white, 0.7) inset; +} + +.dark EosActionButton GtkImage:active { + color: alpha(white, 0.65); +} + +.dark EosActionButton GtkLabel:active { + color: alpha(white, 0.8); +} diff --git a/test/smoke-tests/eosactionbutton.css b/test/smoke-tests/eosactionbutton.css index a818076..13ddfe4 100644 --- a/test/smoke-tests/eosactionbutton.css +++ b/test/smoke-tests/eosactionbutton.css @@ -1,158 +1,12 @@ -/* ****** ACTION BUTTONS ****** */ - -EosActionButton { - background-color: transparent; - border-style: solid; - border-image: none; - margin: 10px; - - border-radius: 40px; - border-width: 8px; -} - -EosActionButton GtkLabel { - font-family: BentonSans, sans-serif; - font-weight: normal; - font-size: 11px; -} - -/* ****** SIZES ****** */ - -EosActionButton.primary { - border-radius: 40px; - border-width: 8px; -} - -EosActionButton.secondary { - border-radius: 30px; - border-width: 6px; -} - -EosActionButton.tertiary { - border-radius: 23px; - border-width: 5px; -} - -EosActionButton.quaternary { - border-radius: 17px; - border-width: 4px; -} - -/* ****** LIGHT BACKGROUND ****** */ - -/* normal */ -EosActionButton, -EosActionButton:selected, -EosActionButton:focused { - border-color: alpha(#323232, 0.5); - box-shadow: 1px 1px 1px alpha(black, 0.8) inset, - 0px -1px 1px alpha(white, 0.65); -} - -EosActionButton GtkImage, -EosActionButton GtkImage:selected, -EosActionButton GtkImage:focused { - color: alpha(#323232, 0.5); -} - -EosActionButton GtkLabel, -EosActionButton GtkLabel:selected, -EosActionButton GtkLabel:focused { - color: alpha(#323232, 0.65); -} - -/* hover */ -EosActionButton:hover { - border-color: alpha(#323232, 0.8); - box-shadow: 1px 1px 1px alpha(black, 0.8) inset; -} - -EosActionButton GtkImage:hover { - color: alpha(#282828, 0.8); -} - -EosActionButton GtkLabel:hover { - color: alpha(#1E1E1E, 0.8); -} - -/* pressed */ -EosActionButton:active { - border-color: alpha(#323232, 0.65); - box-shadow: 1px 1px 1px alpha(black, 0.8) inset; -} - -EosActionButton GtkImage:active { - color: alpha(#282828, 0.65); -} - -EosActionButton GtkLabel:active { - color: alpha(#1E1E1E, 0.8); -} - -/* insensitive, just in case */ -EosActionButton:insensitive, -EosActionButton:inconsistent { - border-color: alpha(#888888, 0.50); - box-shadow: none; -} - -/* ****** DARK BACKGROUND ****** */ - - -/* normal */ -.dark EosActionButton, -.dark EosActionButton:selected, -.dark EosActionButton:focused { - border-color: alpha(#E6E6E6, 0.5); - box-shadow: 1px 1px 1px alpha(black, 0.95) inset, - 0px -1px 1px alpha(white, 0.5) inset; -} - -.dark EosActionButton GtkImage, -.dark EosActionButton GtkImage:selected, -.dark EosActionButton GtkImage:selected, -.dark EosActionButton GtkLabel, -.dark EosActionButton GtkLabel:selected, -.dark EosActionButton GtkLabel:focused { - color: alpha(#E6E6E6, 0.5); -} - -/* hover */ -.dark EosActionButton:hover { - border-color: alpha(white, 0.8); - box-shadow: 1px 1px 1px alpha(black, 0.95) inset, - 0px -1px 1px alpha(white, 0.85) inset; -} - -.dark EosActionButton GtkImage:hover, -.dark EosActionButton GtkLabel:hover { - color: alpha(white, 0.8); -} - -/* pressed */ -.dark EosActionButton:active { - border-color: alpha(white, 0.65); - box-shadow: 1px 1px 1px alpha(black, 0.95) inset, - 0px -1px 1px alpha(white, 0.7) inset; -} - -.dark EosActionButton GtkImage:active { - color: alpha(white, 0.65); -} - -.dark EosActionButton GtkLabel:active { - color: alpha(white, 0.8); -} - /* ****** ACTION MENU ****** */ -GtkFrame#menu { +#menu { background-color: mix(white, black, 0.2); border-color: mix(white, black, 0.5); border-width: 0 0 0 6px; } -GtkFrame.dark#menu { +.dark#menu { background-color: mix(white, black, 0.8); border-width: 0 0 0 6px; } -- cgit v1.2.3