slink/laravel/public/css/default.css

435 lines
7.3 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
--primary: #ff0050;
--background: #121212;
--foreground: #202020;
--text: #bbb;
}
body {
margin: 0;
overflow: hidden;
overflow-y: scroll;
font-family: 'Roboto', sans-serif;
background-color: var(--background);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
}
input:focus {
outline: none;
}
a {
color: var(--primary);
text-decoration: none;
}
h2 {
margin: 20px 0 0 10px;
}
header {
background-color: var(--foreground);
padding: 8px;
display: flex;
align-items: center;
font-size: 1.4em;
height: 60px;
box-shadow: 0px 3px 10px 0 #0008;
position: relative;
z-index: 2;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
header a {
color: white;
text-decoration: none;
margin-inline: 10px;
}
header a img {
width: 40px;
height: 40px;
}
header nav {
display: flex;
flex-direction: row;
}
header nav a {
display: flex;
align-items: center;
}
#logo {
font-size: 1.3em;
font-weight: bold;
}
.container {
width: 1100px;
margin: auto;
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 50px;
background-color: var(--foreground);
width: fit-content;
margin: 10vh auto;
border-radius: 10px;
box-shadow: 3px 3px 10px 0 #0008;
}
.form-container form {
display: flex;
flex-direction: column;
width: 300px;
}
.form-container form input {
color: var(--text);
background-color: #0000;
border: none;
border-bottom: 1px solid var(--primary);
font-size: 1.3em;
margin-bottom: 20px;
}
.form-container form label {
color: #666;
font-size: 0.8em;
margin-left: 2px;
}
.form-container button, button[type="submit"] {
margin-block: 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
color: white;
font-size: 1em;
background-color: var(--primary);
transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out;
}
.form-container button:hover, button[type="submit"]:hover {
box-shadow: 0px 0px 10px 0 #ff005080;
}
.form-container button:active, button[type="submit"]:active {
background-color: #cc0035;
}
.form-container .error {
width: 280px;
color: red;
background: #ff000028;
border-radius: 5px;
padding: 10px;
}
#banner-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 50px;
background-color: var(--primary);
width: calc(100% - 100px);
gap: 40px;
}
#banner-container a {
color: white;
text-decoration: underline;
}
#banner-container h1 {
font-size: 2.5em;
color: white;
}
#banner-container input {
color: black;
background-color: #fff;
border-radius: 5px;
font-size: 1.3em;
margin-bottom: 20px;
padding: 10px;
border: 0;
width: 600px;
box-shadow: 2px 2px 5px 0 #0004;
}
#banner-container button {
font-size: 1.3em;
padding: 10px 20px;
border: none;
border-radius: 5px;
color: white;
box-shadow: 2px 2px 5px 0 #0004;
background-color: var(--foreground);
}
#banner-container input::placeholder {
color: #aaa;
}
#banner-container.container {
gap: 0;
}
#banner-container.container p, #banner-container.container h1 {
margin: 0;
}
#info-container {
display: grid;
grid-template-columns: 1fr 4fr;
font-size: 1.4em;
gap: 10px;
padding: 10px;
}
#info-container label {
grid-column: 1;
}
#info-container p, #info-container a {
grid-column: 2 / span 2;
width: fit-content;
}
#info-container #maxclicks {
width: 80px;
height: 24px;
text-align: right;
font-size: 1em;
background-color: #0000;
color: white;
border: none;
border-bottom: 1px solid var(--primary);
}
#info-container label {
align-self: center;
}
#info-container #expiry-toggle {
display: inline;
grid-row: 5;
grid-column: 2;
width: 20px;
height: 20px;
align-self: center;
}
#info-container #expiry-date {
grid-column: 2;
width: 150px;
grid-row: 5;
margin-left: 95px;
}
#info-container #date-label {
grid-column: 2;
grid-row: 5;
align-self: center;
color: #aaa;
margin-left: 40px;
}
#info-container #time-label {
grid-column: 2;
grid-row: 5;
align-self: center;
color: #aaa;
margin-left: 270px;
}
#info-container #expiry-hour, #info-container #expiry-minute {
margin-left: 330px;
grid-column: 2;
grid-row: 5;
width: 50px;
}
.info {
height: 25px;
width: 25px;
align-self: center;
margin-left: auto;
margin-right: 50px;
}
#maxclicks-label {
grid-column: 1;
grid-row: 4;
}
#maxclicks-info {
grid-column: 1;
grid-row: 4;
}
#expiry-label {
grid-column: 1;
grid-row: 5;
}
#expiry-info {
grid-column: 1;
grid-row: 5;
}
#info-container #expiry-minute {
margin-left: 390px;
}
#info-container #time-separator {
font-size: 30px;
grid-column: 2;
grid-row: 5;
color: #aaa;
margin-left: 381px;
}
#info-container #created {
margin: 0;
display: flex;
flex-direction: column;
grid-column: 2;
grid-row: 1;
&::before {
content: 'Created: ';
font-size: 0.6em;
color: #aaa;
}
}
#info-container #updated {
margin: 0;
display: flex;
flex-direction: column;
grid-column: 2;
margin-left: 360px;
grid-row: 1;
&::before {
content: 'Updated: ';
font-size: 0.6em;
color: #aaa;
}
}
#info-container #timestamp-label {
grid-column: 1;
grid-row: 1;
align-self: end;
}
#info-container #expiry-date, #info-container #expiry-hour, #info-container #expiry-minute {
font-size: 1em;
}
#info-container button {
grid-row: 6;
}
#timestamp-label, #destination-label, #URL-label, #maxclicks-label {
&::after {
content: '';
display: flex;
height: 1px;
background-color: #888;
width: calc(500% + 20px);
transform: translateY(5px);
}
}
a button {
background: none;
border: none;
align-self: center;
font-size: 0.8em;
cursor: pointer;
}
#graphs {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#graphs h2, #stats h2 {
margin-bottom: 20px;
}
#map {
width: 540px;
height: 400px;
}
table {
font-size: 1.5em;
border-collapse: collapse;
}
table td, table th {
padding: 10px;
margin: 0;
gap: 0;
border: 0;
}
table td {
border-top: 1px solid #888;
}
table th, table td {
border-right: 1px solid #888;
}
table th:last-child, table td:last-child, table th:first-child, table td:first-child{
text-align: center;
}
table th:last-child, table td:last-child {
border-right: none;
}
table {
margin-bottom: 40px;
}
footer {
margin-top: auto;
height: 50px;
background: var(--foreground);
width: calc(100vw - 60px);
color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-left: 30px;
padding-right: 30px;
bottom: 0;
}
footer p {
width: auto;
}