From f09532438ea74eaf998d3c4cb1edf7870b7cc53e Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Mon, 22 Aug 2016 23:44:48 -0400 Subject: [PATCH] Added preferences, and dark theme --- hourglass/client/main/main.css | 64 +++++++++---- hourglass/client/main/main.html | 53 +++++++++-- hourglass/client/main/main.js | 121 ++++++++++++++++++++----- hourglass/client/profile/profile.html | 2 +- hourglass/public/Backgrounds/Black.jpg | Bin 0 -> 160559 bytes 5 files changed, 190 insertions(+), 50 deletions(-) create mode 100644 hourglass/public/Backgrounds/Black.jpg diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index eb7f7f4..84761ee 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -36,6 +36,11 @@ html { -moz-user-select: none; -ms-user-select: none; user-select: none; + + -webkit-transition: color 0.5s ease + -moz-transition: color 0.5s ease + -ms-transition: color 0.5s ease + transition: color 0.5s ease } ::-webkit-input-placeholder { @@ -83,6 +88,11 @@ header { display: inline-block; position: relative; z-index: 50; + + -webkit-transition: background-color 0.5s ease; + -moz-transition: background-color 0.5s ease; + -ms-transition: background-color 0.5s ease; + transition: background-color 0.5s ease; } h1,h2,h3,h4,h5 { @@ -135,7 +145,6 @@ input, textarea { padding-right: 0.8%; float: left; - color: #333; -webkit-transition: color 0.5s ease, background-color 0.5s ease; -moz-transition: color 0.5s ease, background-color 0.5s ease; @@ -151,7 +160,7 @@ input, textarea { } .fa-bars:hover, .fa-cog:hover { - background-color: #CCC; + background-color: rgba(0,0,0,0.2); } #loadBar, #progress { @@ -205,39 +214,49 @@ input, textarea { #optionsContainer { width: 12%; + padding: 1.5%; right: 0; } +#optionsContainer .change { + color: #000; +} + +#optionsContainer h3 { + font-size: 175%; +} + .mode, .function { width: 100%; position: relative; background-color: #849CAE; - -webkit-transition: background-color 0.5s ease; - -moz-transition: background-color 0.5s ease; - -ms-transition: background-color 0.5s ease; - transition: background-color 0.5s ease; + -webkit-transition: background-color 0.5s ease, box-shadow 0.5s ease; + -moz-transition: background-color 0.5s ease, box-shadow 0.5s ease; + -ms-transition: background-color 0.5s ease, box-shadow 0.5s ease; + transition: background-color 0.5s ease, box-shadow 0.5s ease; cursor: pointer; } .mode:hover, .function:hover { - background-color: #A2B5C3; + box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1); } .mode:active, .function:active { - background-color: #EFF3F5; + box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.3); - -webkit-transition: background-color 0.2s ease; - -moz-transition: background-color 0.2s ease; - -ms-transition: background-color 0.2s ease; - transition: background-color 0.2s ease; + -webkit-transition: box-shadow 0.2s ease; + -moz-transition: box-shadow 0.2s ease; + -ms-transition: box-shadow 0.2s ease; + transition: box-shadow 0.2s ease; } .fa-university, .fa-calendar { font-size: 175%; width: 12%; padding: 10%; + -webkit-filter: drop-shadow(2px 2px 5px #666); filter: drop-shadow(2px 2px 5px #666); } @@ -245,6 +264,7 @@ input, textarea { .fa-plus, .fa-minus, .fa-tasks, .fa-graduation-cap, .fa-exchange { font-size: 130%; padding: 5%; + -webkit-filter: drop-shadow(2px 2px 5px #666); filter: drop-shadow(2px 2px 5px #666); } @@ -412,7 +432,7 @@ input, textarea { font-weight: 400; } -.workTitle { +.workTitle, .prefTitle { font-size: 150%; font-weight: 400; margin: 0; @@ -420,7 +440,11 @@ input, textarea { margin-bottom: 1%; } -.workOptions { +.prefTitle { + margin-top: 5%; +} + +.workOptions, .prefOptions { box-shadow: 2px 2px 5px 3px #666; position: absolute; @@ -435,7 +459,7 @@ input, textarea { transition: opacity 0.4s ease; } -.workOptionText { +.workOptionText, .prefOptionText { font-size: 150%; min-width: 10%; padding: 20px; @@ -450,7 +474,7 @@ input, textarea { transition: box-shadow 0.4s ease; } -.workOptions p:hover { +.workOptions p:hover, .prefOptions p:hover { box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1); } @@ -721,4 +745,12 @@ input, textarea { .fc-day:not(.fc-past):not(.fc-other-month):hover { background-color: rgba(0,0,0,0.1); +} + +#prefCont { + padding: 5%; +} + +.inputRadioPref { + margin-bottom: 6%; } \ No newline at end of file diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html index 451732c..2d62542 100644 --- a/hourglass/client/main/main.html +++ b/hourglass/client/main/main.html @@ -5,7 +5,7 @@