From 9800abe02202e18574e248930fb76b21f999df37 Mon Sep 17 00:00:00 2001 From: David Phillips Date: Mon, 14 Mar 2016 14:34:26 +1300 Subject: Initial rough-up of power confirmation box --- petrichor.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) (limited to 'petrichor.css') diff --git a/petrichor.css b/petrichor.css index 72d1b6e..2e1d078 100644 --- a/petrichor.css +++ b/petrichor.css @@ -18,6 +18,71 @@ body,html transition: opacity ease 0.3s; } +#mask +{ + transition: visibility 0s linear 0.15s, opacity 0.15s linear; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background-color: rgba(0,0,0,0.6); + visibility: hidden; + opacity: 0; +} + +#power-confirm +{ + transition: visibility 0s linear 0.15s, opacity 0.15s linear; + text-align: center; + height: 150px; + margin-top: -75px; + width: 100%; + position: absolute; + left: 0; + top: 50%; + visibility: hidden; + opacity: 0; +} + +#power-confirm li +{ + list-style: none; + display: inline-block; + margin: 2em; +} + +#power-confirm li a +{ + text-decoration: none; + color: inherit; + font-size: 1.5em; + display: inline-block; +} + +#power-confirm li div +{ + display: block; + height: 96px; + width: 96px; + border-radius: 48px; +} + +#icon-shutdown +{ + background: url('shutdown.png') #C33; +} + +#icon-reboot +{ + background: url('reboot.png') #33C; +} + +#icon-cancel +{ + background: url('cancel.png') #3C3; +} + #shutdown { position: absolute; @@ -106,7 +171,7 @@ a.user transition: visibility 0s linear 0.15s, opacity 0.15s linear; } -#password-container.shown, #message-container.shown +#password-container.shown, #message-container.shown, #mask.shown, #power-confirm.shown { visibility: visible; opacity: 1; -- cgit v1.1 From cfd46efffefcfd9c0e77edcc75b69f2709c22352 Mon Sep 17 00:00:00 2001 From: David Phillips Date: Mon, 14 Mar 2016 15:03:06 +1300 Subject: Correct alignment of power confirm button box --- petrichor.css | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'petrichor.css') diff --git a/petrichor.css b/petrichor.css index 2e1d078..8954763 100644 --- a/petrichor.css +++ b/petrichor.css @@ -20,36 +20,40 @@ body,html #mask { + text-align: center; transition: visibility 0s linear 0.15s, opacity 0.15s linear; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; - background-color: rgba(0,0,0,0.6); + background-color: rgba(0,0,0,0.7); visibility: hidden; opacity: 0; } #power-confirm { - transition: visibility 0s linear 0.15s, opacity 0.15s linear; - text-align: center; - height: 150px; - margin-top: -75px; - width: 100%; position: absolute; - left: 0; - top: 50%; + left: 50%; + bottom: 50px; visibility: hidden; opacity: 0; } +#power-confirm > ul +{ + display: inline-block; + margin: 0px 0px 0px -50%; +} + #power-confirm li { + text-align: center; list-style: none; display: inline-block; - margin: 2em; + margin-left: 2em; + margin-right: 2em; } #power-confirm li a -- cgit v1.1 From b0911b7b5556bfe621b6d42b51533c2264bae0f8 Mon Sep 17 00:00:00 2001 From: David Phillips Date: Mon, 14 Mar 2016 15:20:51 +1300 Subject: Move icon images to common directory --- petrichor.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'petrichor.css') diff --git a/petrichor.css b/petrichor.css index 8954763..c752ff0 100644 --- a/petrichor.css +++ b/petrichor.css @@ -74,17 +74,17 @@ body,html #icon-shutdown { - background: url('shutdown.png') #C33; + background: url('image/shutdown.png') #C33; } #icon-reboot { - background: url('reboot.png') #33C; + background: url('image/reboot.png') #33C; } #icon-cancel { - background: url('cancel.png') #3C3; + background: url('image/cancel.png') #3C3; } #shutdown -- cgit v1.1