diff --git a/less/groups.less b/less/groups.less index 2a633e7..e5d5dd1 100644 --- a/less/groups.less +++ b/less/groups.less @@ -50,14 +50,23 @@ min-height: 250px; } - .change { - visibility: hidden; + &.initialised:hover { + .controls { + opacity: 0.5; + } } - &.initialised:hover { - .change { - .opacity(1); - visibility: visible; + .controls { + text-align: center; + min-height: 250px; + line-height: 250px; + .opacity(0); + .transition(opacity .15s linear); + cursor: pointer; + pointer-events: none; + + > * { + pointer-events: all; } } @@ -66,12 +75,10 @@ cursor: move; } - .instructions { - .opacity(1); - } - - .change { - display: none; + .controls { + > * { + display: none; + } } .save { @@ -89,15 +96,15 @@ } } - .change, .save, .indicator { + .save, .indicator { display: inline-block; position: absolute; top: 1em; - right: 1em; - background: rgba(0, 0, 0, 0.2); + right: 2em; + opacity: 1; + background-color: @brand-primary; color: #eee; padding: 0.5em; - border-radius: 5px; font-weight: bold; &:hover { @@ -105,11 +112,6 @@ } } - .change { - .opacity(0); - .transition(opacity .15s linear); - } - .save { display: none; } @@ -117,20 +119,6 @@ .indicator { display: none; } - - .instructions { - display: inline-block; - position: absolute; - right: 1em; - bottom: 1em; - background: rgba(0, 0, 0, 0.2); - color: #eee; - padding: 0.5em; - border-radius: 5px; - margin-top: 2em; - .opacity(0); - .transition(opacity .15s linear); - } } [component="groups/members"], [component="groups/pending"], [component="groups/invited"] { diff --git a/templates/groups/details.tpl b/templates/groups/details.tpl index 613f482..dafbe11 100644 --- a/templates/groups/details.tpl +++ b/templates/groups/details.tpl @@ -2,10 +2,12 @@
-
[[groups:cover-change]]
+
+ + +
[[groups:cover-save]]
[[groups:cover-saving]]
-
[[groups:cover-instructions]]