From dc9f4a30a47cdce1e0070c18398351ea6c307305 Mon Sep 17 00:00:00 2001 From: Simo Sorce Date: Thu, 6 Nov 2014 14:01:04 -0500 Subject: Add visual cues to configuration panels Make it easier to recognize which plugins are enabled and which are disabled. Also make it easier to recognize when a plugin has just changed state, by flashing its row (help also realize it may have moved up/down) Based on concept work by Petr Vobornik Signed-off-by: Simo Sorce Reviewed-by: Patrick Uiterwijk --- ui/css/admin.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) (limited to 'ui') diff --git a/ui/css/admin.css b/ui/css/admin.css index 2409613..0f9472a 100644 --- a/ui/css/admin.css +++ b/ui/css/admin.css @@ -6068,3 +6068,62 @@ fieldset[disabled] .btn-primary.active { font-weight: 900; src: local('Open Sans Extrabold Italic'), url('../fonts/open-sans/OpenSans-ExtraBoldItalic.ttf') format('truetype'); } +.ipsilon-row { + border-top: 1px solid #dddddd; + padding: 8px; + min-height: 37px; +} +.ipsilon-row:last-child { + border-bottom: 1px solid #dddddd; +} +.hl-enabled { + background-color: #ffffff; +} +.hl-disabled { + background-color: #ededed; +} +.hl-disabled strong { + color: #555; +} +@keyframes bgfadein { + from { + background-color: #ededed; + } + to { + background-color: #ffffff; + } +} +@keyframes bgfadeout { + from { + background-color: #ffffff; + } + to { + background-color: #ededed; + } +} +.hl-enabled-new { + animation-duration: 3s; + animation-name: bgfadein; + animation-fill-mode: both; +} +.hl-disabled-new { + animation-duration: 3s; + animation-name: bgfadeout; + animation-fill-mode: both; +} +@keyframes flashout { + 0% { + background-color: #ffffff; + } + 50% { + background-color: #d9edf7; + } + 100% { + background-color: #ffffff; + } +} +.hl-enabled-flash { + animation-duration: 1.5s; + animation-name: flashout; + animation-fill-mode: both; +} -- cgit