Compare commits
No commits in common. "2433609cd861e941290b29988583285daa0df5e6" and "7f21301da05e579c33b31174dc2418923197c5f5" have entirely different histories.
2433609cd8
...
7f21301da0
@ -1,28 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat');
|
||||
|
||||
/* Colors */
|
||||
:root {
|
||||
--color-background0: #212121;
|
||||
--color-background1: #212121;
|
||||
--color-background2: dimgray;
|
||||
--color-border0: #FFFFFF;
|
||||
--color-border1: grey;
|
||||
--color-text: #FFFFFF;
|
||||
--color-green: green;
|
||||
--color-lime: #BADA55;
|
||||
--color-red: red;
|
||||
--color-switch-button: #FFFFFF;
|
||||
--color-switch-background: grey;
|
||||
--color-transparent: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* Sidebar size is the left panel size when opened */
|
||||
:root {
|
||||
--sidebar-size: max(20vw, 160px);
|
||||
--sidebar-sz-plus10: calc(var(--sidebar-size) + 10px);
|
||||
--sidebar-sz-plus30: calc(var(--sidebar-size) + 30px);
|
||||
}
|
||||
|
||||
html {
|
||||
text-align: center;
|
||||
font-family: Montserrat;
|
||||
@ -45,7 +21,7 @@ table {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
@ -54,11 +30,11 @@ input[type=text] {
|
||||
width: 90%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
background-color: var(--color-background1);
|
||||
border: 2px solid var(--color-border1);
|
||||
background-color: #212121;
|
||||
border: 2px solid grey;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -68,18 +44,18 @@ input[type=password] {
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
text-align: center;
|
||||
border: 2px solid var(--color-border1);
|
||||
border: 2px solid grey;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background1);
|
||||
color: white;
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.button{
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--color-border1);
|
||||
background-color: var(--color-background1);
|
||||
color: var(--color-text);
|
||||
border: 2px solid grey;
|
||||
background-color: #212121;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
@ -91,13 +67,13 @@ input[type=password] {
|
||||
|
||||
.ban{
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--color-red);
|
||||
border: 2px solid red;
|
||||
background-size: 200% 100%;
|
||||
background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-red) 50%);
|
||||
background-image: linear-gradient(to right, #212121 50%, red 50%);
|
||||
-webkit-transition: background-position 0.5s;
|
||||
-moz-transition: background-position 0.5s;
|
||||
transition: background-position 0.5s;
|
||||
color: var(--color-text);
|
||||
color: white;
|
||||
padding: 12px 0px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
@ -107,16 +83,16 @@ input[type=password] {
|
||||
}
|
||||
|
||||
.confirm{
|
||||
color: var(--color-text);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
background-size: 200% 100%;
|
||||
background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-green) 50%);
|
||||
background-image: linear-gradient(to right, #212121 50%, green 50%);
|
||||
-webkit-transition: background-position 0.5s;
|
||||
-moz-transition: background-position 0.5s;
|
||||
transition: background-position 0.5s;
|
||||
border: 2px solid var(--color-border1);
|
||||
border: 2px solid grey;
|
||||
}
|
||||
|
||||
.confirm:hover{
|
||||
@ -124,16 +100,16 @@ input[type=password] {
|
||||
}
|
||||
|
||||
.confirm{
|
||||
color: var(--color-text);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
background-size: 200% 100%;
|
||||
background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-green) 50%);
|
||||
background-image: linear-gradient(to right, #212121 50%, green 50%);
|
||||
-webkit-transition: background-position 0.5s;
|
||||
-moz-transition: background-position 0.5s;
|
||||
transition: background-position 0.5s;
|
||||
border: 2px solid var(--color-border1);
|
||||
border: 2px solid grey;
|
||||
}
|
||||
|
||||
.confirm:hover{
|
||||
@ -141,18 +117,18 @@ input[type=password] {
|
||||
}
|
||||
.unselected{
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--color-border1);
|
||||
background-color: var(--color-background1);
|
||||
color: var(--color-text);
|
||||
border: 2px solid grey;
|
||||
background-color: #212121;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
}
|
||||
.selected{
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--color-border1);
|
||||
background-color: var(--color-background2);
|
||||
color: var(--color-text);
|
||||
border: 2px solid grey;
|
||||
background-color: dimgray;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
width: 70%;
|
||||
margin: 10px;
|
||||
@ -160,11 +136,11 @@ input[type=password] {
|
||||
|
||||
|
||||
button:hover{
|
||||
border: 2px solid var(--color-border0);
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
}
|
||||
input:hover{
|
||||
border: 2px solid var(--color-border0);
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
|
||||
@ -172,17 +148,17 @@ input:hover{
|
||||
|
||||
.submit{
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--color-border1);
|
||||
background-color: var(--color-background1);
|
||||
color: var(--color-text);
|
||||
border: 2px solid grey;
|
||||
background-color: #212121;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-background0);
|
||||
color: var(--color-text);
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -191,7 +167,7 @@ body {
|
||||
.left-pannel{
|
||||
flex: 1;
|
||||
margin: 20px;
|
||||
border: 1px solid var(--color-border0);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
width: 80%;
|
||||
@ -202,9 +178,10 @@ body {
|
||||
.content{
|
||||
flex: 3;
|
||||
margin: 20px;
|
||||
border: 1px solid var(--color-border0);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
|
||||
}
|
||||
@ -251,7 +228,7 @@ label {
|
||||
text-indent: -9999px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--color-switch-background);
|
||||
background: grey;
|
||||
display: block;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
@ -268,13 +245,13 @@ label:after {
|
||||
left: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--color-switch-button);
|
||||
background: #fff;
|
||||
border-radius: 90px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
background: var(--color-lime);
|
||||
background: #bada55;
|
||||
}
|
||||
|
||||
input:checked + label:after {
|
||||
@ -291,16 +268,16 @@ select {
|
||||
/*height: 100%;*/
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
background-color: var(--color-background1);
|
||||
border: 2px solid var(--color-border1);
|
||||
background-color: #212121;
|
||||
border: 2px solid grey;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
select:hover {
|
||||
border: 2px solid var(--color-border0);
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
|
||||
@ -308,11 +285,11 @@ input[type="time"] {
|
||||
width: 70%;
|
||||
padding: 8px 12px;
|
||||
margin: 8px 0;
|
||||
background-color: var(--color-background1);
|
||||
border: 2px solid var(--color-border1);
|
||||
background-color: #212121;
|
||||
border: 2px solid grey;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -325,78 +302,3 @@ input[type="time"]::-webkit-calendar-picker-indicator {
|
||||
input[type="time"]::-webkit-calendar-picker-indicator:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/** Sidebar stuff */
|
||||
#slide-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label[for="slide-sidebar"] {
|
||||
all: initial;
|
||||
z-index: 1; /* Always on top */
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: var(--sidebar-sz-plus30);
|
||||
|
||||
-moz-transition: left 0.5s ease;
|
||||
transition: left 0.5s ease;
|
||||
background: var(--color-transparent);
|
||||
}
|
||||
|
||||
label[for="slide-sidebar"]:after {
|
||||
all:unset;
|
||||
}
|
||||
|
||||
input:checked + label[for="slide-sidebar"] {
|
||||
background: var(--color-transparent);
|
||||
}
|
||||
|
||||
#slide {
|
||||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-color: var(--color-border0);
|
||||
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background0);
|
||||
padding: 8px 8px 2px 8px;
|
||||
}
|
||||
|
||||
/* When opened behaviour */
|
||||
.left-pannel {
|
||||
width: var(--sidebar-size);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: var(--sidebar-sz-plus10);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
-moz-transition: left 0.5s ease;
|
||||
transition: left 0.5s ease;
|
||||
|
||||
padding: 0 25px;
|
||||
background-color: var(--color-background0); /* we need no transparency when switching */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* When closed behaviour */
|
||||
input:checked#slide-sidebar~label {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
input:checked#slide-sidebar~.left-pannel {
|
||||
display: none;
|
||||
transition: display 0s 0.5s;
|
||||
}
|
||||
|
||||
input:checked#slide-sidebar~.content {
|
||||
left: 0;
|
||||
}
|
||||
@ -12,17 +12,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<input id="slide-sidebar" type="checkbox" role="button"/>
|
||||
<label for="slide-sidebar">
|
||||
<div id="slide">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M4 6l16 0"></path>
|
||||
<path d="M4 12l16 0"></path>
|
||||
<path d="M4 18l16 0"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</label>
|
||||
<div class="left-pannel">
|
||||
{% block left_pannel %}
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user