Skip to content

Commit

Permalink
Light mode - super indev
Browse files Browse the repository at this point in the history
  • Loading branch information
@cassiancc
cassiancc committed Jul 27, 2022
1 parent f4011e7 commit 365f8b9
Show file tree
Hide file tree
Showing 5 changed files with 256 additions and 87 deletions.
100 changes: 100 additions & 0 deletions css/dark.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/*
Tier Away is a website that helps users create unique tier lists. No accounts, no hassle.
Copyright (C) 2022 Con Godsted
*/
/*body styling with the Theme*/

html {
scrollbar-color: #393939 #1f1f1f;
}
/*fancy header*/
header {
border: transparent;
border-bottom: #d22d59 solid;
}
header button {
color: #6b6b6b;
border-color: #393939;
}



/*6b6b6b BORDER*/
#button-panel button:hover, .export-visible a:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover, #fileselect:hover, #url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover {
border-color: #6b6b6b;
}
/*TRANSPARENT BORDER*/
#fileselect::file-selector-button, #tier-move button, .del-tier, #change-theme-button {
border-color: transparent;
}



/*TRANSPARENT BACKGROUND*/
#fileselect::file-selector-button, #tier-move button, .del-tier, #change-theme-button {
background-color: transparent;
}
/*WHITE BACKGROUND*/
.export-visible a {
background-color: white;
}
/*222222 BORDER*/
.hidden, .dropshown, .export-visible {
border-color: #222222;
}
/*393939 BORDER*/
#button-panel button, .export-visible a, .hidden button, .export-visible a, header button:hover, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #fileselect {
border-color: #393939;
}
/*BLACK BORDER*/
footer, table, tr, td, th {
border-color: black;
}




/*2b2b2b BACKGROUND*/
#fileselect:hover, #url-upload button:hover, .export-visible a:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover {
background-color: #2b2b2b;
}

/*18181b BACKGROUND*/
body, header button {
background-color: #18181b;
}
/*1f1f1f BACKGROUND*/
.dropshown, .hidden, .export-visible, .tiersettings, #tablehead {
background-color: #1f1f1f;
}
/*222222 BACKGROUND*/
#url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #button-panel button, .hidden button, .export-visible a, #button-panel button, .hidden button, header button:hover {
background-color: #222222;
}
/*393939 BACKGROUND*/
table {
background-color: #393939;
}
/*BLACK BACKGROUND*/
footer, #image-options, header {
background-color: black;
}


/*WHITE TEXT*/
#change-theme-button, #github, #new:hover, #tier-move button:hover, .del-tier:hover, footer a, body, header button:hover, #button-panel button, .hidden button, .export-visible a, #fileselect::file-selector-button, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier {
color: white;
}

/*RED TEXT*/
#github:hover, footer a:hover, #change-theme-button:hover {
color: #d22d59
}
/*6b6b6b TEXT*/
#trash, #new, #tier-move button, .del-tier {
color: #6b6b6b;
}
/*BLACK TEXT*/
th:not(.header) {
color: black
}
112 changes: 29 additions & 83 deletions css/style.css → css/desktop.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,63 +13,63 @@
}
/*body styling with the Theme*/
body {
background-color: #18181b;
color: white;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;

}
html {
scrollbar-color: #393939 #1f1f1f;
/*SOLID BORDERS*/
.hidden, .dropshown, .export-visible, tr, td, th, table, #fileselect, header, header button, footer, .export-visible a {
border-style: solid;
}
.hidden, .dropshown, .export-visible, header {
border-width: 5px;
}

table {
border-width: 3px;
}

tr, td, th, .export-visible a {
border-width: 2px;
}
#fileselect, header button {
border-width: 1px;
}
#change-theme-button {
font-size: 2.5em;
cursor: pointer;
}
/*TOP AND BOTTOM BORDERS*/
footer {
border-width: 0px;
border-top-width: 10px;
border-bottom-width: 10px;
}
/*fancy header*/
header {
display:flex;
background-color: black;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
border-bottom: #d22d59 5px solid;
}
header button {
color: #6b6b6b;
transition: color .1s;
white-space:nowrap;
border: #393939 solid 1px;
padding: 10px;
border-radius: 5px;
font-weight: bold;
background-color: #18181b;
font-size: medium;


}
header button:hover {
color: white;
background-color: #222222;
border-color: #393939;
}
/*popup menu buttons*/
#button-panel button, .hidden button, .export-visible a {
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
font-size: large;
background-color: #222222;
color: white;
border-color: #393939;
flex-wrap: wrap;
}
/*popup menu buttons hover*/
#button-panel button:hover {
background-color: #2b2b2b;
border-color: #6b6b6b
}
.export-visible a:hover {
background-color: lightgray;
border-color: #6b6b6b
}
#addtierdiv, #addurldiv, #addtextdiv, #addimagediv {
display: flex;
width: 100%;
Expand All @@ -87,22 +87,13 @@ header button:hover {
height: 20vh;
width: 100%;
text-align: center;
border: solid #393939 1px;
}
#fileselect::file-selector-button {
padding-bottom: 10px;
padding-top: 10px;
font-size: large;
background-color: transparent;
color: white;
border-color: transparent;
flex-wrap: wrap;
}
#fileselect:hover {
background-color: #2b2b2b;
border-color: #6b6b6b;
transition: border-color .1s;
}
#url-upload, #text-add {
display: flex;
width: 100%;
Expand All @@ -117,28 +108,15 @@ header button:hover {
width: 40%;
height: 100%;
font-size: medium;
background-color: #222222;
color: white;
border-color: #393939;
flex-wrap: wrap;
}
/*popup menu buttons hover*/
#url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover {
background-color: #2b2b2b;
border-color: #6b6b6b
}
#urlselect, #text-select, #add-tier{
width: 100%;
background-color: #222222;
color: white;
border-color: #393939;
margin-right: 10px;


}
#urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover {
background-color: #2b2b2b;
border-color: #6b6b6b;
outline: none;
}

Expand Down Expand Up @@ -171,12 +149,10 @@ td img {
}
table {
border-collapse: collapse;
border: black solid 3px;
width: 100%;
background-color: #393939;
}
tr, td, th {
border: black solid 2px;
#padding {
min-height: 10vh
}
.tierheader {
width: 7%;
Expand All @@ -186,7 +162,6 @@ tr, td, th {
}
.tiersettings {
width: 7%;
background-color: #1f1f1f;
text-align: center;
}
.tiersettings div {
Expand All @@ -196,21 +171,13 @@ tr, td, th {
#dragged {
opacity: 0.4;
}
#tablehead {
background-color: #1f1f1f;
}
th:not(.header) {
color: black
}
/*style the uploaded image options*/
#image-options {
min-height: 100px;
display: flex;
position: fixed;
bottom: 0;
background-color: black;
width: 100%;
border-top: black solid 10px;
min-height: min-content;
overflow: hidden;
}
Expand All @@ -221,7 +188,6 @@ th:not(.header) {
}
#trash {
padding: 5px;
color: #6b6b6b;
transition: color .1s;
}
.hidden {
Expand All @@ -236,15 +202,13 @@ th:not(.header) {
right: 0;
width: 50%;
text-align: center;
border: #222222 solid 5px;
border-radius: 10px;
justify-content: center;
}
/*fancy popup menu*/
.dropshown {
display: flex;
position: absolute;
background-color: #1f1f1f;
margin-left: auto;
margin-right: auto;
top: 25%;
Expand Down Expand Up @@ -281,10 +245,6 @@ th:not(.header) {
padding-bottom: 10px;
}
.export-visible a {
background-color: white;
border: white solid 1px;
border-radius: 5px;
color: black;
margin-top: 10px;
padding: 5px;
text-decoration: none;
Expand All @@ -299,30 +259,17 @@ th:not(.header) {

}
#new, #tier-move button, .del-tier {
color: #6b6b6b;
transition: color .1s;

}
/*white links and white table buttons*/
#new:hover, #tier-move button:hover, .del-tier:hover, footer a{
color: white;
}

#github:hover, footer a:hover {
color: #d22d59
}

/*give margin to links*/
#desc, #upload-images-info {
margin-left: 10px;
}
/*fancy footer*/
footer {
background-color: black;
margin-left: auto;
margin-right: auto;
border-top: black 10px solid;
border-bottom: black 10px solid;
text-align: center;
position: bottom;
bottom:0;
Expand All @@ -342,7 +289,6 @@ footer {
/*style github*/
#github {
text-decoration: none;
color: white;
padding-right: 2vh;
margin-bottom: 5px;
}
Expand Down
Loading

0 comments on commit 365f8b9

Please sign in to comment.