diff --git a/dist/Styles/dashboard-style.css b/dist/Styles/dashboard-style.css index 2dda679..716eed8 100644 --- a/dist/Styles/dashboard-style.css +++ b/dist/Styles/dashboard-style.css @@ -1,162 +1,396 @@ -body { - font-family: 'Rale way', sans-serif; - background-color: #fee; - margin: 0px; - padding: 0px; - width: 100%; -} - -:root { - --TASK_COLOR: #4fb91d; -} - - -p { - /* font-size: calc(10px-30*(100vw-3vw)/800); -*/ - font-size: 15px; - line-height: 2; -} - -.intro-section { - color: #4fb91d; -} - - -h1 { - font-size: 50px; - font-weight: 700; - color: var(--TASK_COLOR); -} - -h2 { - color: var(--TASK_COLOR); -} - -h4 { - color: var(--TASK_COLOR); -} - -.pull-left { - float: left; -} - -.pull-right { - float: right; -} - -.text-right { - text-align: right; -} - -.text-left { - text-align: left; -} - -.text-center { - text-align: right; -} - -/* NAVBAR SECTION */ -nav { - height: 4em; - margin: 0px; - width: 100%; - padding-top: 2em; - background-color: var(--TASK_COLOR); -} - -nav>ul { - display: -webkit-inline-flex; -} - - - nav ul li a { - text-decoration: none; - color: #fee; - -} - -nav ul li { - position: relative; - float: right; - width: 5em; - list-style: none; - -} - -nav .dropdown { - position: relative; - display: inline-block; -} - -nav .dropdown-content { - - display: none; - position: absolute; - background-color: #fee; - min-width: 40px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - padding: 12px 16px; - z-index: 1; -} - -nav .dropdown:hover .dropdown-content { - display: block; -} - -/* */ - -.flex-container { - min-height: 700px; - padding: 3em; - display: flex; - flex-flow: row wrap; -} - -/* MAIN */ -main { - flex: 4 0 0; - padding: 2em; - border-radius: 5px; - border: 1px solid var(--TASK_COLOR); - box-shadow: 2px 2px 7px 4px rgba(003, 065, 239, 0.12); -} - -/* ASIDE */ -aside { - flex: 1 0 0; - margin-left: 2rem; - margin-top: 1rem; - padding: 0px 1em; -} - -aside section { - line-height: 2; - font-size: 13px; -} - -aside ul li { - list-style: none; - margin: 1em 1em; -} - -aside ul li a { - text-decoration: none; - font-weight: 600; - color: #666; -} - -aside ul li a:hover { - text-decoration: none; - font-weight: 500; - color: var(--TASK_COLOR); -} - -/* PROFILE */ -main img { - width: 180px; - border-radius: 50%; - object-fit: cover; - border: .5em solid var(--TASK_COLOR); -} \ No newline at end of file +body { + font-family: 'Roboto', sans-serif; + background-color: #fee; + margin: 0px; + padding: 0px; + width: 100%; +} + +:root { + --TASK_COLOR: #4fb91d; +} + + +p { + /* font-size: calc(10px-30*(100vw-3vw)/800); +*/ + font-size: 15px; + line-height: 2; +} + + +h1 { + font-size: 50px; + font-weight: 700; + color: var(--TASK_COLOR); +} + +h2 { + color: var(--TASK_COLOR); +} + +h4 { + color: var(--TASK_COLOR); +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.text-right { + text-align: right; +} + +.text-left { + text-align: left; +} + +.text-center { + text-align: right; +} + +/* NAVBAR SECTION */ +nav { + height: 4em; + margin: 0px; + width: 100%; + padding-top: 2em; + background-color: var(--TASK_COLOR); +} + +nav>ul { + display: -webkit-inline-flex; +} + + +nav ul li a { + text-decoration: none; + color: #fee; + +} + +nav ul li { + position: relative; + float: right; + width: 5em; + list-style: none; + +} + +nav .dropdown { + position: relative; + display: inline-block; +} + +nav .dropdown-content { + + display: none; + position: absolute; + background-color: #fee; + min-width: 40px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + padding: 12px 16px; + z-index: 1; +} + +nav .dropdown:hover .dropdown-content { + display: block; +} + +/* */ + +.flex-container { + min-height: 700px; + padding: 3em; + display: flex; + flex-flow: row wrap; +} + +/* MAIN */ +main { + flex: 4 0 0; + padding: 2em; + border-radius: 5px; + border: 1px solid var(--TASK_COLOR); + box-shadow: 2px 2px 7px 4px rgba(003, 065, 239, 0.12); +} + +/* ASIDE */ +aside { + flex: 1 0 0; + margin-left: 2rem; + margin-top: 1rem; + padding: 0px 1em; +} + +aside section { + line-height: 2; + font-size: 13px; +} + +aside ul li { + list-style: none; + margin: 1em 1em; +} + +aside ul li a { + text-decoration: none; + font-weight: 600; + color: #666; +} + +aside ul li a:hover { + text-decoration: none; + font-weight: 500; + color: var(--TASK_COLOR); +} + +/* PROFILE */ +main img { + width: 180px; + border-radius: 50%; + object-fit: cover; + border: .5em solid var(--TASK_COLOR); +} + + + + + /*Beginning of Fund Porject Section Styling */ + + /* reset */ +ul { + margin: 0; + padding: 0; + list-style: none; +} + +input[type=radio] { + display: none; +} + +/* style */ +.a-container { + width: 600px; + margin: 20px auto; +} + +.a-container label { + display: block; + position: relative; + cursor: pointer; + font-size: 18px; + font-weight: bold; + padding: 10px 20px; + color: #aaa; + background-color: #006400; + border-bottom: 1px solid #ddd; + + -webkit-transition: all .2s ease; + -moz-transition: all .2s ease; + -ms-transition: all .2s ease; + -o-transition: all .2s ease; + transition: all .2s ease; +} + +.a-container label:after { + content: ""; + width: 0; + height: 0; + border-top: 8px solid #aaa; + border-right: 6px solid transparent; + border-bottom: 8px solid transparent; + border-left: 6px solid transparent; + position: absolute; + right: 10px; + top: 16px; +} + +.a-container input:checked + label, +.a-container label:hover { + background-color: #ddd; + color: #222; +} + +.a-container input:checked + label:after { + border-top: 8px solid transparent; + border-right: 6px solid transparent; + border-bottom: 8px solid #222; + border-left: 6px solid transparent; + top: 6px; +} + +.a-content { + padding: 0 20px 20px; + display: none; +} + +.a-container input:checked ~ .a-content { + display: block; +} + +/*End of Fund Porject Section Styling */ + + + +/* Beginning of Project Form */ + +#myForm { +font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; +font-size: 0.8em; +width: 40em; +padding: 1em; +border: 1px solid #ccc; +} + +#myForm * { +box-sizing: border-box; +} + +#myForm fieldset { +border: none; +padding: 0; +} + +#myForm select, +#myForm textarea { +display: block; +width: 100%; +border: 1px solid #ccc; +font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; +font-size: 0.9em; +padding: 0.3em; +} + +#myForm textarea { +height: 100px; +} + +#myForm button { +padding: 1em; +border-radius: 0.5em; +background: #eee; +border: none; +font-weight: bold; +margin-top: 1em; +} + +#myForm button:hover { +background: #ccc; +cursor: pointer; +} + +/*End of Project Form */ + + +/*20% Funded Modal Pop-up Box */ +.popup { + display: none; + position: fixed; + padding: 10px; + width: 280px; + left: 50%; + margin-left: -150px; + height: 180px; + top: 50%; + margin-top: -100px; + background: #FFF; + z-index: 20; +} + +#popup1 { + -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); +} +#popup2 { + -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); +} +#popup3 { + -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); +} +#popup4 { + -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); +} +#popup5 { + -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5); +} + + + +/*Tab Design for Project Stage Page */ + +.tabset > input[type="radio"] { + position: absolute; + left: -200vw; +} + +.tabset .tab-panel { + display: none; +} + +.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child, +.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2), +.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3), +.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4), +.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5), +.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) { + display: block; +} + + +.tabset > label { + position: relative; + display: inline-block; + padding: 15px 15px 25px; + border: 1px solid transparent; + border-bottom: 0; + cursor: pointer; + font-weight: 600; +} + +.tabset > label::after { + content: ""; + position: absolute; + left: 15px; + bottom: 10px; + width: 22px; + height: 4px; + background: #8d8d8d; +} + +.tabset > label:hover, +.tabset > input:focus + label { + color: #06c; +} + +.tabset > label:hover::after, +.tabset > input:focus + label::after, +.tabset > input:checked + label::after { + background: #06c; +} + +.tabset > input:checked + label { + border-color: #ccc; + border-bottom: 1px solid #fff; + margin-bottom: -1px; +} + +.tab-panel { + padding: 30px 0; + border-top: 1px solid #ccc; +} + + +.tabset { + max-width: 65em; +} + +