diff --git a/assets/style.css b/assets/style.css index 1bd5a4a..7f29dcf 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,217 +1,280 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); -:root { - --primary-bg: rgb(27, 21, 41); - --secondary-bg: #1a1a1a; - --third-bg: #383838; - --primary-text: #d2d6e5; - --error: rgb(255, 55, 0); - --primary: #2a9dd6; - --primary-hover: #2489bb; +.dashboard +{ + height:100%; + text-align:center; + width:100%; } -body { - background: linear-gradient(127deg, var(--secondary-bg), var(--primary-bg)) no-repeat fixed; - background-size: cover; - height: 100%; - width: 100%; - font-family: 'Poppins', sans-serif; - color: var(--primary-text); - margin: 0; - padding: 0; - min-height: 100vh; - min-width: 100vw; - display: flex; - flex-direction: column; - align-items: center; +:root +{ + --error:#ff3700; + --primary:#2a9dd6; + --primary-bg:#1b1529; + --primary-hover:#2489bb; + --primary-text:#d2d6e5; + --secondary-bg:#1a1a1a; + --third-bg:#383838; } -nav, footer { - padding: 1.2rem 1rem; - background-color: rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.2); +body +{ + align-items:center; + background:linear-gradient(127deg,var(--secondary-bg), var(--primary-bg)) no-repeat fixed; + background-size:cover; + color:var(--primary-text); + display:flex; + flex-direction:column; + font-family:\'Poppins\', sans-serif; + height:100%; + margin:0; + min-height:100vh; + min-width:100vw; + padding:0; + width:100%; } -#navbar_container, #page_container, #footer_container { - width: 100%; +header h1 +{ + margin:0; + padding:0; } -nav { - display: flex; - flex-direction: row; - justify-content: space-between; - height: 75px !important; - position: relative; - z-index: 500; +header hr +{ + border-color:var(--primary); + opacity:0.5; + width:30%; } -ul, header ul, header ul li, ul.navpage_list { - display: flex; - flex-direction: row; - gap: 2.5rem; - list-style: none; - padding-left: 0; - width: fit-content; +header ul li +{ + list-style:circle; + width:fit-content; } -li, li.navpage_item { - list-style: none; +header ul +{ + display:flex; + flex-direction:column; + gap:0; + text-align:left; + width:fit-content; } -li a, li.navpage_item { - position: relative; - padding-bottom: 0.45rem; - color: var(--primary-text); - text-decoration: none; - transition: all 0.3s ease; +header +{ + align-items:center; + text-align:center; + width:100%; } -li a:hover::after { - width: 85%; - margin: 0 auto; +li a +{ + color:var(--primary-text); + padding-bottom:.45rem; + position:relative; + text-decoration:none; + transition:all .3s ease; } -.wrapper-40x { - text-align: center; +li a:hover::after +{ + margin:0 auto; + width:85%; } -.wrapper-40x h1 { - font-size: 10rem; - margin: 0; +li +{ + list-style:none; } -.wrapper-40x .error { - color: var(--error); +li.navpage_item +{ + padding-left:20px; + padding-right:20px; } -.wrapper-40x h3 { - margin-bottom: 2rem; +nav +{ + display:flex; + flex-direction:row; + justify-content:space-between; } -.error-code { - color: var(--primary); +nav,footer +{ + -moz-box-shadow:0 20px 28px 0 rgba(0,0,0,0.2); + -webkit-box-shadow:0 20px 28px 0 rgba(0,0,0,0.2); + background-color:rgba(0,0,0,0.2); + box-shadow:0 20px 28px 0 rgba(0,0,0,0.2); + padding:1.2rem 1rem; } -.back { - color: var(--primary-text); - text-decoration: none; - background-color: #2a9dd6; - padding: 0.35rem 0.65rem; - transition: all 0.3s ease; - border-radius: 15px; +table.list-table > tbody,table.list-table > tbody > th,table.list-table > tbody > tr,table.list-table > tbody > tr > td +{ + border:2px solid var(--primary); + border-collapse:collapse; } -.back:hover { - transition: all 0.3s ease; - background-color: var(--primary-hover); +ul +{ + display:flex; + flex-direction:row; + gap:2.5rem; + list-style:none; + padding-left:0; } -header { - width: 100%; - align-items: center; - text-align: center; +ul.navpage_list +{ + gap:10px; } -header h1, header a { - margin: 0; - padding: 0; - color: var(--primary); +.back +{ + background-color:#2a9dd6; + border-radius:15px; + color:var(--primary-text); + padding:.35rem .65rem; + text-decoration:none; + transition:all .3s ease; } -header hr { - border-color: var(--primary); - opacity: 0.5; - width: 30%; +.back:hover +{ + background-color:var(--primary-hover); + transition:all .3s ease; } -.navsite_list, .navpage_list, .navsite_item, .navsite_item:hover .navpage_list, .navsite_item:not(:hover) .navpage_list { - display: flex; - gap: 3.25rem; -} -.navsite_list { - flex-direction: row; +.feature-list +{ + display:block; + margin:auto; + width:fit-content; } -.navsite_item, .navpage_list { - flex-direction: column; +.feature-list-ul ul +{ + margin-left:20px; + margin-top:5px; } -.navpage_list { - background-color: var(--third-bg); - margin-top: 10px; - display: flex; - flex-direction: column; - overflow: hidden; - max-height: 0; - border: 0 solid transparent; - transition: max-height 0.3s ease, border 0.325s ease; - position: relative; - z-index: 2; +.feature-list-ul +{ + margin:auto; } -.navsite_item:hover .navpage_list { - max-height: 200px; - border: 4px solid var(--primary-hover); +.navpage_list +{ + background-color:var(--third-bg); + border:0 solid transparent; + display:none; + flex-direction:column; + margin-top:10px; + max-height:0; + overflow:hidden; + position:relative; + transition:max-height .3s ease, border .325s ease; + z-index:2; } -.navsite_item:not(:hover) .navpage_list { - max-height: 0; - border: 0 solid transparent; - transition-delay: 0.1s; +.navsite_item +{ + align-items:center; + justify-content:center; + text-align:center; + width:120px; } -li.navpage_item { - padding-left: 20px; - padding-right: 20px; +.navsite_item:hover .navpage_list +{ + border:4px solid var(--primary-hover); + display:flex!important; + max-height:200px; } -ul.navpage_list { - gap: 10px; +.navsite_item:not(:hover) .navpage_list +{ + border:0 solid transparent; + max-height:0; + transition-delay:.1s; } -.feature-list, .feature-list-ul, .feature-list-ul ul { - margin: auto; - width: fit-content; - display: block; +.navsite_list +{ + display:flex; + flex-direction:row; + gap:3.25rem; } -.status-message { - background-color: #dff0d8; /* Success background color */ - border: 1px solid #3c763d; /* Success border color */ - color: #3c763d; /* Success text color */ - padding: 15px; - margin-bottom: 10px; - opacity: 1; - transition: opacity 0.5s ease-in-out; +.status-message +{ + background-color:#dff0d8; + border:1px solid #3c763d; + color:#3c763d; + margin-bottom:10px; + opacity:1; + padding:15px; + transition:opacity .5s ease-in-out; } -.status-message.failure { - background-color: #f2dede; /* Failure background color */ - border: 1px solid #a94442; /* Failure border color */ - color: #a94442; /* Failure text color */ +.status-message.failure +{ + background-color:#f2dede; + border:1px solid #a94442; + color:#a94442; } -table.list-table > tbody, table.list-table > tbody > th, table.list-table > tbody > tr, table.list-table > tbody > tr > td { - border: 2px solid var(--primary); - border-collapse: collapse; +.wrapper-40x .error +{ + color:var(--error); } -.dashboard { - width: 100%; - height: 100%; - text-align: center; +.wrapper-40x h1 +{ + font-size:10rem; + margin:0; } -#loginForm input, #register_Form input { - border-radius: 50px; - background: none; - border: 2px solid var(--primary); - width: 175px; +.wrapper-40x h3 +{ + margin-bottom:2rem; } -#page_container { - flex-grow: 1; +.wrapper-40x +{ + text-align:center; +} + +#navbar_container +{ + height:75px!important; + position:relative; + z-index:500; +} + +#navbar_container,#page_container,#footer_container +{ + width:100%; +} + +#page_container +{ + flex-grow:1; +} + +header a,.error-code +{ + color:var(--primary); +} + +#loginForm input,#register_Form input +{ + background:none; + border:2px solid var(--primary); + border-radius:50px; + width:175px; } \ No newline at end of file