diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 30ef5d4..b505c95 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -76,26 +76,35 @@ p { #frame_btn_close { background-color: #e74c32; } - -#frame_btn_close:hover { +#frame_btn_close:hover, +#frame_btn_close:focus { background-color: #FF9A8A; } +#frame_btn_close:active { + background-color: #ff8d7b; +} #frame_btn_restoredown { background-color: #fed045; } - -#frame_btn_restoredown:hover { +#frame_btn_restoredown:hover, +#frame_btn_restoredown:focus { background-color: #FFE9A9; } +#frame_btn_restoredown:active { + background-color: #ffde7b; +} #frame_btn_minimize { background-color: #96e734; } - -#frame_btn_minimize:hover { +#frame_btn_minimize:hover, +#frame_btn_minimize:focus { background-color: #D6FFA6; } +#frame_btn_minimize:active { + background-color: #bfff76; +} /******************************************************************************* * * @@ -159,6 +168,9 @@ p { color: #a2a2a2; outline: none; } +#loginForm a:active { + color: #8b8b8b; +} /* Logo on login form. */ #loginImageSeal { @@ -195,7 +207,7 @@ p { width: 250px; margin-bottom: 20px; border-color: #fff; - color: rgb(197, 197, 197); + color: rgba(255, 255, 255, 0.75); font-weight: bold; text-align: center; box-sizing: border-box; @@ -207,7 +219,7 @@ p { outline: none; } .loginField::-webkit-input-placeholder { - color: rgb(197, 197, 197); + color: rgba(255, 255, 255, 0.75); font-size: 10px; letter-spacing: 1px; text-align: center; @@ -255,6 +267,10 @@ p { text-shadow: 0px 0px 20px #fff; outline: none; } +#loginButton:active { + color: #c7c7c7; + text-shadow: 0px 0px 20px #c7c7c7; +} #loginSVG { -webkit-transform: translate3d(0, 0, 0); overflow: visible; @@ -268,6 +284,12 @@ p { #loginButton:focus #loginSVG { -webkit-filter: drop-shadow(0px 0px 2px #fff); } +#loginButton:active #loginSVG .arrowLine { + stroke: #c7c7c7; +} +#loginButton:active #loginSVG { + -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7); +} #loginButtonContent { display: flex; @@ -326,7 +348,7 @@ p { border: 1px solid #848484; border-radius: 1px; background: none; - transition: border-color 0.25s ease; + transition: 0.25s ease; } /* On hover and focus, add a grey border color. */ #checkmarkContainer:hover input ~ *, @@ -334,6 +356,11 @@ p { color: #a2a2a2; border-color: #a2a2a2; } +/* On keydown, darken the checkbox a bit. */ +#checkmarkContainer input:active ~ *:not(#loginRememberText) { + color: #8d8d8d; + border-color: #8d8d8d; +} /* For checked -> #checkmarkContainer input:checked ~ * */ /* Create the checkmark/indicator (hidden when not checked). */ .loginCheckmark:after { diff --git a/app/frame.ejs b/app/frame.ejs index e3cadf5..534bce0 100644 --- a/app/frame.ejs +++ b/app/frame.ejs @@ -1,7 +1,7 @@