diff --git a/assets/style.css b/assets/style.css index 100711e..10504fb 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,203 +1,183 @@ @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'); -.dashboard -{ - height:100%; - text-align:center; - width:100%; +.dashboard { + height: 100%; + text-align: center; + width: 100%; } -:root -{ - --error:#ff3700; - --primary:#2a9dd6; - --primary-bg:#1b1529; - --primary-hover:#2489bb; - --primary-text:#d2d6e5; - --secondary-bg:#1a1a1a; - --third-bg:#383838; +:root { + --error: #ff3700; + --primary: #2a9dd6; + --primary-bg: #1b1529; + --primary-hover: #2489bb; + --primary-text: #d2d6e5; + --secondary-bg: #1a1a1a; + --third-bg: #383838; } -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%; +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%; } -header h1 -{ - margin:0; - padding:0; +header h1 { + margin: 0; + padding: 0; } -header hr -{ - border-color:var(--primary); - opacity:0.5; - width:30%; +header hr { + border-color: var(--primary); + opacity: 0.5; + width: 30%; } -header ul li -{ - list-style:circle; - width:fit-content; +header ul li { + list-style: circle; + width: fit-content; } -header ul -{ - display:flex; - flex-direction:column; - gap:0; - text-align:left; - width:fit-content; +header ul { + display: flex; + flex-direction: column; + gap: 0; + text-align: left; + width: fit-content; } -header -{ - align-items:center; - text-align:center; - width:100%; +header { + align-items: center; + text-align: center; + width: 100%; } -li a -{ - color:var(--primary-text); - padding-bottom:.45rem; - position:relative; - text-decoration:none; - transition:all .3s ease; +li a { + color: var(--primary-text); + padding-bottom: .45rem; + position: relative; + text-decoration: none; + transition: all .3s ease; } -li a:hover::after -{ - margin:0 auto; - width:85%; +li a:hover::after { + margin: 0 auto; + width: 85%; } -li -{ - list-style:none; +li { + list-style: none; } -li.navpage_item -{ - padding-left:20px; - padding-right:20px; +li.navpage_item { + padding-left: 20px; + padding-right: 20px; } -nav -{ - display:flex; - flex-direction:row; - justify-content:space-between; +nav { + display: flex; + flex-direction: row; + justify-content: space-between; height: 55px; } -nav,footer -{ - -moz-box-shadow:0 20px 28px 0 rgba(0,0,0,0.6); - -webkit-box-shadow:0 20px 28px 0 rgba(0,0,0,0.6); - background-color:rgba(0,0,0,0.6); - box-shadow:0 20px 28px 0 rgba(0,0,0,0.6); - padding:1.2rem 1rem; +nav, +footer { + -moz-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); + -webkit-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); + background-color: rgba(0, 0, 0, 0.6); + box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); + padding: 1.2rem 1rem; } -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; +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; } -ul -{ - display:flex; - flex-direction:row; - gap:2.5rem; - list-style:none; - padding-left:0; +ul { + display: flex; + flex-direction: row; + gap: 2.5rem; + list-style: none; + padding-left: 0; } -ul.navpage_list -{ - gap:10px; - background-color:var(--third-bg); - display:none; - flex-direction:column; - overflow:hidden; - position:fixed; - transition:max-height .3s ease, border .325s ease; - z-index:2; +ul.navpage_list { + gap: 10px; + background-color: var(--third-bg); + display: none; + flex-direction: column; + overflow: hidden; + position: fixed; + transition: max-height .3s ease, border .325s ease; + z-index: 2; } -.back -{ - background-color:#2a9dd6; - border-radius:15px; - color:var(--primary-text); - padding:.35rem .65rem; - text-decoration:none; - transition:all .3s ease; +.back { + background-color: #2a9dd6; + border-radius: 15px; + color: var(--primary-text); + padding: .35rem .65rem; + text-decoration: none; + transition: all .3s ease; } -.back:hover -{ - background-color:var(--primary-hover); - transition:all .3s ease; +.back:hover { + background-color: var(--primary-hover); + transition: all .3s ease; } -.feature-list -{ - display:block; - margin:auto; - width:fit-content; +.feature-list { + display: block; + margin: auto; + width: fit-content; } -.feature-list-ul ul -{ +.feature-list-ul ul { margin: 5px auto auto 20px; } -.navsite_item -{ - align-items:center; - justify-content:center; - text-align:center; - width:120px; +.navsite_item { + align-items: center; + justify-content: center; + text-align: center; + width: 120px; } -.navsite_item:hover .navpage_list -{ - border:4px solid var(--primary-hover); - display:flex!important; - max-height:200px; +.navsite_item:hover .navpage_list { + border: 4px solid var(--primary-hover); + display: flex !important; + max-height: 200px; width: inherit; box-sizing: border-box; } -.navsite_item:not(:hover) .navpage_list -{ - border:0 solid transparent; - max-height:0; - transition-delay:.1s; +.navsite_item:not(:hover) .navpage_list { + border: 0 solid transparent; + max-height: 0; + transition-delay: .1s; width: inherit; } -#navsite_list -{ - display:flex; - flex-direction:row; - gap:3.25rem; + +#navsite_list { + display: flex; + flex-direction: row; + gap: 3.25rem; text-align: center; } @@ -215,6 +195,7 @@ ul.navpage_list #toggle_button { display: flex; } + #navsite_list { display: none; position: fixed; @@ -232,15 +213,22 @@ ul.navpage_list } ul.navpage_list { - display: flex !important; + gap: 10px; + background-color: var(--third-bg); + display: flex; + flex-direction: column; + overflow: hidden; + position: fixed; + transition: max-height .3s ease, border .325s ease; + z-index: 2; } #navsite_list.active { display: flex; - -moz-box-shadow:0 20px 28px 0 rgba(0,0,0,0.6); - -webkit-box-shadow:0 20px 28px 0 rgba(0,0,0,0.6); - background-color:rgba(0,0,0,0.6); - box-shadow:0 20px 28px 0 rgba(0,0,0,0.6); + -moz-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); + -webkit-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); + background-color: rgba(0, 0, 0, 0.6); + box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); top: 80px; text-align: center; } @@ -248,11 +236,11 @@ ul.navpage_list nav { flex-direction: column; align-items: center; - background-color: rgba(0,0,0,0.6); + background-color: rgba(0, 0, 0, 0.6); } } -#statusMessageContainer{ +#statusMessageContainer { position: fixed; top: 80px; right: 20px; @@ -262,9 +250,12 @@ ul.navpage_list } .status-message { - background-color: #dff0d8; /* Success background color */ - border: 1px solid #3c763d; /* Success border color */ - color: #3c763d; /* Success text color */ + 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; @@ -272,61 +263,58 @@ ul.navpage_list } .status-message.failure { - background-color: #f2dede; /* Failure background color */ - border: 1px solid #a94442; /* Failure border color */ - color: #a94442; /* Failure text color */ + background-color: #f2dede; + /* Failure background color */ + border: 1px solid #a94442; + /* Failure border color */ + color: #a94442; + /* Failure text color */ } -.wrapper-40x .error -{ - color:var(--error); +.wrapper-40x .error { + color: var(--error); } -.wrapper-40x h1 -{ - font-size:10rem; - margin:0; +.wrapper-40x h1 { + font-size: 10rem; + margin: 0; } -.wrapper-40x h3 -{ - margin-bottom:2rem; +.wrapper-40x h3 { + margin-bottom: 2rem; } -.wrapper-40x -{ - text-align:center; +.wrapper-40x { + text-align: center; } -#navbar_container -{ - position:relative; - z-index:500; +#navbar_container { + position: relative; + z-index: 500; } -#navbar_container,#page_container,#footer_container -{ - width:100%; +#navbar_container, +#page_container, +#footer_container { + width: 100%; } -#page_container -{ - flex-grow:1; +#page_container { + flex-grow: 1; } -header a,.error-code -{ - color:var(--primary); +header a, +.error-code { + color: var(--primary); } -input -{ +input { background-color: var(--third-bg); - border:2px solid var(--primary); - border-radius:50px; + border: 2px solid var(--primary); + border-radius: 50px; } -button{ +button { border-radius: 50px; border: 2px solid var(--primary); background: var(--third-bg);