diff --git a/ohayodash/static/css/styles.css b/ohayodash/static/css/styles.css index 08276b3..2157a67 100755 --- a/ohayodash/static/css/styles.css +++ b/ohayodash/static/css/styles.css @@ -1,21 +1,35 @@ -html{ +html { box-sizing: border-box; moz-box-sizing: border-box; webkit-box-sizing: border-box; webkit-text-size-adjust: none; } -::-webkit-scrollbar-thumb {background: var(--color-text-acc); border: 5px solid var(--color-background); border-radius: 10px;} -::-webkit-scrollbar-track {background: var(--color-text-acc); border: 7px solid var(--color-background);} -::-webkit-scrollbar {width: 15px;} -::-webkit-scrollbar-corner { background: var(--color-background); } +::-webkit-scrollbar-thumb { + background: var(--color-text-acc); + border: 5px solid var(--color-background); + border-radius: 10px; +} + +::-webkit-scrollbar-track { + background: var(--color-text-acc); + border: 7px solid var(--color-background); +} + +::-webkit-scrollbar { + width: 15px; +} + +::-webkit-scrollbar-corner { + background: var(--color-background); +} html, -body{ +body { background-color: var(--color-background); color: var(--color-text-pri); scrollbar-color: var(--color-text-acc) var(--color-background); - scrollbar-width: thin; + scrollbar-width: thin; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif; font-size: 14px; font-weight: 400; @@ -29,73 +43,72 @@ body{ *, *:before, -*:after{ +*:after { box-sizing: inherit; moz-box-sizing: inherit; webkit-box-sizing: inherit; } -:root{ +:root { module-spacing: 3vh; } /* TEXT STYLES */ -h1, h2{ +h1, h2 { font-weight: 300; margin: 0; padding: 0; text-align: left; } -h2, h3, h4{ - text-transform: uppercase; +h2, h3, h4 { + text-transform: uppercase; } -h1{ +h1 { font-size: 4em; font-weight: 700; margin-bottom: 0.5em; } -h2{ +h2 { font-size: 16px; height: 30px; - + } -h3{ +h3 { font-size: 20px; font-weight: 900; height: 10px; } -h4{ +h4 { font-size: 1.1em; font-weight: 400; height: 10px; } -a{ +a { color: var(--color-text-pri); text-decoration: none; } -a:hover{ +a:hover { text-decoration: underline; webkit-text-decoration-color: var(--color-text-acc); webkit-text-decoration-skip: true; } -.icon{ +.icon { font-size: 2.5em; } - /* FORMS */ -input{ +input { background-color: transparent; border: 0; border-bottom: thin solid var(--color-text-acc); @@ -106,19 +119,19 @@ input{ width: 100%; } -input:focus{ +input:focus { color-border: var(--color-text-pri); outline: none; } -input:focus{ +input:focus { opacity: 1; } /* TABLES */ -table{ +table { border: thin solid #e4e4e4; border-collapse: collapse; border-spacing: 0; @@ -127,11 +140,11 @@ table{ width: 100%; } -table td:nth-of-type(2){ +table td:nth-of-type(2) { padding-right: 5em; } -table td{ +table td { border: thin solid #e4e4e4; color: #333333; font-size: 1em; @@ -140,46 +153,45 @@ table td{ word-break: normal; } -table th{ +table th { border: thin solid #e4e4e4; color: #333333; font-weight: bold; padding: 10px 5px; } -table a{ +table a { color: #333333; } /* ANIMATION */ -.fade{ +.fade { opacity: 0; } -@keyframes fadeseq{ - 100% { +@keyframes fadeseq { + 100% { opacity: 1; } } -.fade{ +.fade { opacity: 0; } -.fade{ +.fade { animation: fadeseq .3s forwards; } -.fade:nth-child(2){ +.fade:nth-child(2) { animation-delay: .4s; } - /* LAYOUT */ -#container{ +#container { align-items: stretch; display: grid; grid-column-gap: 20px; @@ -193,16 +205,14 @@ table a{ width: 60%; } - - /* SECTIONS */ -#header{ +#header { border-bottom: 0px solid var(--color-text-acc); z-index: 1; } -#apps_loop{ +#apps_loop { border-bottom: 0px solid var(--color-text-acc); display: grid; grid-column-gap: 0px; @@ -212,18 +222,18 @@ table a{ padding-bottom: var(--module-spacing); } -.apps_icon{ +.apps_icon { height: 64px; margin-right: 1em; padding-top: 15px; } -.apps_icon span{ +.apps_icon span { font-size: 2.5em; line-height: 3rem; } -.apps_item{ +.apps_item { display: flex; flex-direction: row; flex-wrap: wrap; @@ -231,7 +241,7 @@ table a{ margin: 0; } -.apps_text{ +.apps_text { display: flex; flex-direction: column; justify-content: center; @@ -239,20 +249,20 @@ table a{ overflow: hidden; } -.apps_text a{ +.apps_text a { font-size: 1em; font-weight: 500; text-transform: uppercase; } -.apps_text span{ +.apps_text span { color: var(--color-text-acc); font-size: 0.8em; text-transform: uppercase; } -#links_loop{ +#links_loop { display: grid; flex-wrap: nowrap; grid-column-gap: 20px; @@ -261,39 +271,24 @@ table a{ grid-template-rows: auto; } -#links_item{ +#links_item { line-height: 1.5rem; margin-bottom: 2em; webkit-font-smoothing: antialiased; } -#links_item h4{ +#links_item h4 { color: var(--color-text-acc); } -#links_item a{ +#links_item a { display: block; line-height: 2; } - - - - - - - - - - - - - - /* MODAL */ - -#modal{ +#modal { overflow-y: auto; bottom: 0; left: 0; @@ -306,79 +301,79 @@ table a{ z-index: 20; } -#modal:target{ +#modal:target { opacity: 1; pointer-events: auto; } -#modal>div{ +#modal>div { background-color: #ffffff; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.25); margin-left: auto; - margin-right: auto; + margin-right: auto; padding: 2em; margin-top: 5vh; width: 50%; - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } -#modal h1{ +#modal h1 { color: #333333; font-size: 2em; } -#modal h2{ - margin-top:1.5em; +#modal h2 { + margin-top: 1.5em; } -#modal-header{ - display:flex; - justify-content: space-between; +#modal-header { + display: flex; + justify-content: space-between; } -#modal-footer{ - display:flex; - font-size:2em; - justify-content: flex-start; +#modal-footer { + display: flex; + font-size: 2em; + justify-content: flex-start; } -#modal-footer a{ - margin-right:0.25em; - color:rgba(0, 0, 0, 0.35) +#modal-footer a { + margin-right: 0.25em; + color: rgba(0, 0, 0, 0.35) } -.modal-close{ +.modal-close { color: #000000; font-size: 1.5em; text-align: center; text-decoration: none; } -.modal-close:hover{ +.modal-close:hover { color: #000; } -#modal_init a{ +#modal_init a { bottom: 1vh; color: var(--color-text-acc); left: 1vw; position: fixed; } -#modal_init a:hover{ +#modal_init a:hover { color: var(--color-text-pri); } -#modal-theme{ +#modal-theme { border-bottom: 0px solid var(--color-text-acc); display: flex; flex-wrap: wrap; - margin-bottom: 2em; + margin-bottom: 2em; } -#providers{ - margin-bottom: 2em; +#providers { + margin-bottom: 2em; } #editor { @@ -419,94 +414,92 @@ table a{ /* THEMING */ -.theme-button{ +.theme-button { font-size: 0.8em; margin: 2px; - width:128px; + width: 128px; line-height: 3em; text-align: center; text-transform: uppercase; } -.theme-blackboard{ +.theme-blackboard { background-color: #000000; border: 4px solid #5c5c5c; - color: #FFFDEA; + color: #FFFDEA; } -.theme-gazette{ +.theme-gazette { background-color: #F2F7FF; border: 4px solid #5c5c5c; - color: #000000; + color: #000000; } -.theme-espresso{ +.theme-espresso { background-color: #21211F; border: 4px solid #4E4E4E; - color: #D1B59A; + color: #D1B59A; } -.theme-cab{ +.theme-cab { background-color: #FEED01; border: 4px solid #424242; - color: #1F1F1F; + color: #1F1F1F; } -.theme-cloud{ +.theme-cloud { background-color: #f1f2f0; border: 4px solid #35342f; - color: #37bbe4; + color: #37bbe4; } -.theme-lime{ +.theme-lime { background-color: #263238; border: 4px solid #AABBC3; - color: #aeea00; + color: #aeea00; } -.theme-passion{ +.theme-passion { background-color: #f5f5f5; border: 4px solid #8e24aa; - color: #12005e; + color: #12005e; } -.theme-blues{ +.theme-blues { background-color: #2B2C56; border: 4px solid #6677EB; - color: #EFF1FC; + color: #EFF1FC; } -.theme-chalk{ +.theme-chalk { background-color: #263238; border: 4px solid #FF869A; - color: #AABBC3; + color: #AABBC3; } -.theme-tron{ +.theme-tron { background-color: #242B33; border: 4px solid #6EE2FF; - color: #EFFBFF; + color: #EFFBFF; } -.theme-paper{ +.theme-paper { background-color: #F8F6F1; border: 4px solid #F5E1A4; - color: #4C432E; + color: #4C432E; } -.theme-nord{ +.theme-nord { background-color: #2E3440; border: 4px solid #8FBCBB; - color: #E5E9F0; + color: #E5E9F0; } /* MEDIA QUERIES */ -@media screen and (max-width: 1260px) -{ - #container - { +@media screen and (max-width: 1260px) { + #container { align-items: stretch; display: grid; grid-column-gap: 10px; @@ -519,31 +512,30 @@ table a{ margin-right: auto; width: 90%; } - - #apps_loop{ + + #apps_loop { grid-template-columns: 1fr 1fr 1fr; width: 90vw; } - #links_loop { + #links_loop { grid-template-columns: 1fr 1fr 1fr; } - #modal>div{ - margin-left: auto; - margin-right: auto; - margin-top: 5vh; - width: 90%; - } + #modal>div { + margin-left: auto; + margin-right: auto; + margin-top: 5vh; + width: 90%; + } } -@media screen and (max-width: 667px) -{ - html{ +@media screen and (max-width: 667px) { + html { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } - #container{ + #container { align-items: stretch; display: grid; grid-column-gap: 20px; @@ -555,41 +547,41 @@ table a{ width: 90%; } - h1{ + h1 { font-size: 4em; height: auto; margin-bottom: 0em; } - h2{ + h2 { font-size: 1em; height: auto; margin-bottom: 0em; } - h3{ + h3 { font-size: 1em; } - #apps_loop{ + #apps_loop { grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: 1fr 1fr; width: 90vw; } - .apps_icon{ + .apps_icon { height: 64px; margin-right: 0.8em; padding-top: 14px; } - .apps_icon span{ + .apps_icon span { font-size: 2em; line-height: 2.5rem; } - - #links_loop{ + + #links_loop { display: grid; flex-wrap: nowrap; grid-column-gap: 20px; @@ -604,4 +596,4 @@ table a{ #app-address { display: none; } -} +} \ No newline at end of file