Initial Commit of v2
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
:root {
|
||||
/** Base colors */
|
||||
--clr-dark-a0: #000000;
|
||||
--clr-light-a0: #ffffff;
|
||||
|
||||
/** Dark theme primary colors */
|
||||
--clr-primary-a0: #00ff00;
|
||||
--clr-primary-a10: #52ff3f;
|
||||
--clr-primary-a20: #75ff5e;
|
||||
--clr-primary-a30: #8fff78;
|
||||
--clr-primary-a40: #a6ff90;
|
||||
--clr-primary-a50: #baffa7;
|
||||
|
||||
/** Dark theme surface colors */
|
||||
--clr-surface-a0: #121212;
|
||||
--clr-surface-a10: #282828;
|
||||
--clr-surface-a20: #3f3f3f;
|
||||
--clr-surface-a30: #575757;
|
||||
--clr-surface-a40: #717171;
|
||||
--clr-surface-a50: #8b8b8b;
|
||||
|
||||
/** Dark theme tonal surface colors */
|
||||
--clr-surface-tonal-a0: #1b2617;
|
||||
--clr-surface-tonal-a10: #303a2c;
|
||||
--clr-surface-tonal-a20: #475043;
|
||||
--clr-surface-tonal-a30: #5e675b;
|
||||
--clr-surface-tonal-a40: #777e74;
|
||||
--clr-surface-tonal-a50: #91978e;
|
||||
}
|
||||
@@ -0,0 +1,972 @@
|
||||
html, body {
|
||||
color: var(--clr-light-a0);
|
||||
background-color: var(--clr-surface-a0);
|
||||
margin: 0px;
|
||||
font-family: DM Sans, Roboto, -apple-system, Segoe UI, sans-serif;
|
||||
overflow-x: hidden;
|
||||
|
||||
touch-action: pan-y;
|
||||
transition: transform 0.5s ease;
|
||||
max-width: 100%;
|
||||
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* For Chrome, Edge, and Safari */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px; /* Width of the scrollbar */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--clr-surface-a10) /* Track color */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--clr-surface-a40); /* Thumb color */
|
||||
border-radius: 10px; /* Rounded corners */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--clr-surface-a50); /* Thumb color on hover */
|
||||
}
|
||||
|
||||
/* For Firefox */
|
||||
body {
|
||||
scrollbar-color: var(--clr-surface-a50) var(--clr-surface-a10); /* Thumb color and track color */
|
||||
scrollbar-width: thin; /* Makes the scrollbar thinner */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.swipe-left {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.swipe-right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 75%;
|
||||
background-color: var(--clr-surface-a10);
|
||||
color: var(--clr-light-a0);
|
||||
padding: 10px 12.5%;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
height: 23px;
|
||||
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.navigation a {
|
||||
text-decoration: none;
|
||||
color: var(--clr-light-a0);
|
||||
font-weight: 800;
|
||||
padding: 0px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.navigation .right {
|
||||
float: right;
|
||||
|
||||
top: -8px;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navigation .right input[type="text"] {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--clr-surface-a10);
|
||||
color: var(--clr-surface-a50);
|
||||
font-size: 16px;
|
||||
text-align: end;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.navigation .active {
|
||||
color: var(--clr-primary-a0);
|
||||
}
|
||||
|
||||
.navigation .nocursor {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.navigation .nohover:hover {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
.itemlist {
|
||||
max-width: 80%;
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
padding: 10px 10% 10px 10%;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
transition: transform 0.5s ease;
|
||||
background-color: var(--clr-surface-a0);
|
||||
}
|
||||
|
||||
.itemlist .item-background {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
-o-filter: blur(5px);
|
||||
-ms-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
.itemlist .item {
|
||||
/*background-color: var(--clr-surface-a10);*/
|
||||
color: var(--clr-light-a0);
|
||||
/*padding: 10px;*/
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
height: 100%;
|
||||
|
||||
backdrop-filter: blur(10px) brightness(50%);
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.itemlist .item img {
|
||||
width: 100%;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.itemlist .item a.price {
|
||||
color: var(--clr-primary-a30);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.itemlist .item .item-info {
|
||||
display: block;
|
||||
color: var(--clr-light-a0);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.itemlist .item .item-info img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.itemlist .item .item-info .name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.itemlist .item .item-info .creator {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
text-align: start;
|
||||
max-width: 100%;
|
||||
width: 150px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.itemlist .item .item-info .info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 95%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.itemlist .item img.plattform {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.itemlist .item img.preview {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.itemlist .item-container {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.itemlistnext {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.itemlistprev {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.home {
|
||||
margin-top: 80px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.home p.desc {
|
||||
max-width: 80%;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
padding: 0px 10%;
|
||||
}
|
||||
|
||||
.home h1 {
|
||||
max-width: 80%;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
padding: 0px 10%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.select-section {
|
||||
max-width: 60%;
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
padding: 10px 20% 10px 20%;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.select-section .item-background {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
-o-filter: blur(5px);
|
||||
-ms-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
.select-section .section {
|
||||
/*background-color: var(--clr-surface-a10);*/
|
||||
color: var(--clr-light-a0);
|
||||
/*padding: 10px;*/
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
height: 100%;
|
||||
|
||||
backdrop-filter: blur(3px) brightness(50%);
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
width: 100%;
|
||||
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.select-section .section .section-info {
|
||||
color: var(--clr-light-a0);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: grid;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.select-section .section .section-info p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
text-decoration: none !important;
|
||||
font-size: x-large;
|
||||
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
.select-section .section .section-info desc.desc {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.select-section .selection-container {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.select-section .selection-container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: var(--clr-surface-a10);
|
||||
color: white;
|
||||
padding: 14px 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
padding-top: 10px;
|
||||
border-radius: 5px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: var(--clr-surface-a10);
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: var(--clr-light-a0);
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
footer {
|
||||
position: static;
|
||||
bottom: 0px;
|
||||
background-color: var(--clr-black-a0);
|
||||
color: var(--clr-surface-a50);
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin-top: auto; /* Pushes footer to the bottom */
|
||||
font-family: monospace, consolas, sans-serif;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--clr-primary-a30);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.login-container {
|
||||
max-width: 100%;
|
||||
width: 40%;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
transition: transform 0.5s ease;
|
||||
background-color: var(--clr-surface-a0);
|
||||
align-content: center;
|
||||
height: 100%;
|
||||
padding: 20% 30%;
|
||||
}
|
||||
|
||||
.login-container form {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
transition: transform 0.5s ease;
|
||||
background-color: var(--clr-surface-a0);
|
||||
}
|
||||
|
||||
.login-container form input[type="text"], .login-container form input[type="password"] {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--clr-surface-a10);
|
||||
color: var(--clr-surface-a50);
|
||||
font-size: 16px;
|
||||
text-align: start;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-container form input[type="submit"] {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--clr-primary-a0);
|
||||
color: var(--clr-dark-a0);
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-container .backbutton {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: var(--clr-surface-a20);
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* The side navigation menu */
|
||||
.sidebar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 250px;
|
||||
background-color: var(--clr-surface-a10);
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Sidebar links */
|
||||
.sidebar a {
|
||||
display: block;
|
||||
color: var(--clr-light-a0);
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Active/current link */
|
||||
.sidebar a.active {
|
||||
background-color: var(--clr-surface-a20);
|
||||
color: var(--clr-primary-a0);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Links on mouse-over */
|
||||
.sidebar a:hover:not(.active) {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
|
||||
div.content {
|
||||
margin-left: 200px;
|
||||
padding: 1px 16px;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
/* On screens that are less than 700px wide, make the sidebar into a topbar */
|
||||
@media screen and (max-width: 700px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.itemlist {
|
||||
max-width: 99%;
|
||||
}
|
||||
}
|
||||
|
||||
/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
|
||||
@media screen and (max-width: 400px) {
|
||||
.sidebar a {
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.adminpanel {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
transition: transform 0.5s ease;
|
||||
background-color: var(--clr-surface-a0);
|
||||
align-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.insert {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.insert h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.insert form {
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
transition: transform 0.5s ease;
|
||||
background-color: var(--clr-surface-a0);
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.insert form input[type="text"] {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--clr-surface-a10);
|
||||
color: var(--clr-surface-a50);
|
||||
font-size: 16px;
|
||||
text-align: start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.insert form input[type="submit"] {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--clr-primary-a0);
|
||||
color: var(--clr-dark-a0);
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.insert form select {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--clr-surface-a10);
|
||||
color: var(--clr-surface-a50);
|
||||
font-size: 16px;
|
||||
text-align: start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.insert form input[type="checkbox"]#nsfw {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--clr-surface-a10);
|
||||
color: var(--clr-surface-a50);
|
||||
font-size: 16px;
|
||||
text-align: start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.specieslist {
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.insert-result {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.insert-result .summary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
column-gap: 55px;
|
||||
}
|
||||
|
||||
.insert-result .summary table {
|
||||
border: 1px solid var(--clr-surface-a50);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.insert-result .summary table th {
|
||||
border-bottom: 1px solid var(--clr-surface-a50);
|
||||
}
|
||||
|
||||
.insert-result .summary table td {
|
||||
border-bottom: 1px solid var(--clr-surface-a50);
|
||||
border-left: 1px solid var(--clr-surface-a50);
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.insert-result .item-background {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
-o-filter: blur(5px);
|
||||
-ms-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
.insert-result .item {
|
||||
/*background-color: var(--clr-surface-a10);*/
|
||||
color: var(--clr-light-a0);
|
||||
/*padding: 10px;*/
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
height: 100%;
|
||||
|
||||
backdrop-filter: blur(10px) brightness(50%);
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.insert-result .item img {
|
||||
width: 100%;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.insert-result .item a.price {
|
||||
color: var(--clr-primary-a30);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.insert-result .item .item-info {
|
||||
display: block;
|
||||
color: var(--clr-light-a0);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.insert-result .item .item-info img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.insert-result .item .item-info .name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.insert-result .item .item-info .creator {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
text-align: start;
|
||||
max-width: 100%;
|
||||
width: 150px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.insert-result .item .item-info .info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 95%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.insert-result .item-container {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 5px;
|
||||
|
||||
margin-top: 30px;
|
||||
height: 400px;
|
||||
width: 310px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.nsfwcheck {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--clr-surface-a10);
|
||||
color: var(--clr-light-a0);
|
||||
font-size: 16px;
|
||||
text-align: start;
|
||||
margin-bottom: 10px;
|
||||
width: inherit;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nsfwcheck a {
|
||||
color: var(--clr-primary-a0);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
.itemlist {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
max-width: 90%;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 90%;
|
||||
padding: 10px 5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.itemlist {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.itemlist {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.select-section {
|
||||
max-width: 95%;
|
||||
width: 100%;
|
||||
padding: 10px 10% 10px 10%;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.nsfwcheck {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
bottom: 0px;
|
||||
margin-bottom: 0px;
|
||||
right: 0px;
|
||||
margin-right: 0px;
|
||||
border-radius: 0px;
|
||||
font-size: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nsfwcheck a {
|
||||
font-size: 20px;
|
||||
background: var(--clr-surface-a20);
|
||||
border-radius: 5px;
|
||||
padding: 5px 15px;
|
||||
display: block;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.nsfwcheck div.answers {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navitem {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.itemlist {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.select-section {
|
||||
max-width: 80%;
|
||||
width: 100%;
|
||||
padding: 10px 10% 10px 10%;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: calc(100% - 20px);
|
||||
padding: 10px 10px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user