nikdoof/ohayodash
1
0
Fork 0
mirror of https://github.com/nikdoof/ohayodash.git synced 2025-12-14 02:22:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format the CSS

Browse Source
This commit is contained in:
Andrew Williams
2021-12-24 13:01:45 +00:00
parent 47fb1b013e
commit a9414663e0
1 changed files with 137 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
ohayodash/static/css/styles.css
View File

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