328 lines
11 KiB
CSS
328 lines
11 KiB
CSS
:root {
|
|
/* fonts */
|
|
--head-font: 'Montserrat', sans-serif;
|
|
--main-font: 'Open Sans', sans-serif;
|
|
|
|
/* font and margin sizes */
|
|
--main-size: 1.15em;
|
|
--medium-size: 0.7em;
|
|
--small-size: 0.65em;
|
|
--unit-size: 1em;
|
|
--side-margin: 5em;
|
|
--nav-size: 15em;
|
|
|
|
/* colours and shadows */
|
|
--fg: #eceff4;
|
|
--accent: #81a1c1;
|
|
--accent-low: #81a1c160;
|
|
--bg1: #2e3440;
|
|
--bg2: #3b4252;
|
|
--bg3: #434c5e;
|
|
--bg4: #4c566a;
|
|
--bg5: #d8dee9;
|
|
--shadow: 0px 0px 20px 0px rgba(46,52,64,0.95);
|
|
}
|
|
|
|
/* DEFAULTS */
|
|
body,
|
|
html {
|
|
background: var(--bg1);
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
color: var(--fg);
|
|
font-family: var(--main-font);
|
|
font-size: var(--main-size);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul {
|
|
text-decoration: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a:link {
|
|
text-decoration: none;
|
|
outline: 0;
|
|
color: var(--fg);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
a:visited {
|
|
outline: 0;
|
|
color: var(--fg);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
a:hover {
|
|
color: var(--fg);
|
|
transition: all 0.8s ease;
|
|
}
|
|
a:focus {
|
|
color: var(--fg);
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
b {
|
|
font-family: var(--head-font);
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* HEADER */
|
|
#header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--accent);
|
|
padding: var(--main-size);
|
|
height: var(--main-size);
|
|
}
|
|
|
|
#top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.icon-menu {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: var(--unit-size);
|
|
height: var(--unit-size);
|
|
cursor: pointer;
|
|
transition: all .5s ease-in-out;
|
|
}
|
|
.icon-menu label {
|
|
width: var(--unit-size);
|
|
height: 3px;
|
|
border-radius: 3px;
|
|
background: var(--bg1);
|
|
transition: all .5s ease-in-out;
|
|
}
|
|
.icon-menu label::before,
|
|
.icon-menu label::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: var(--unit-size);
|
|
height: 3px;
|
|
border-radius: 3px;
|
|
background: var(--bg1);
|
|
transition: all .5s ease-in-out;
|
|
}
|
|
.icon-menu label::before {
|
|
transform: translateY(-6px);
|
|
}
|
|
.icon-menu label::after {
|
|
transform: translateY(6px);
|
|
}
|
|
#toggle:checked+div label{
|
|
width: 0;
|
|
}
|
|
#toggle:checked+div label::before {
|
|
transform: rotate(45deg);
|
|
}
|
|
#toggle:checked+div label::after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
#instance {
|
|
order: 2;
|
|
}
|
|
|
|
#instance b {
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
margin-left: calc(0.2 * var(--unit-size));
|
|
color: var(--bg1);
|
|
}
|
|
|
|
.icon-logo {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline-block;
|
|
width: var(--unit-size);
|
|
height: var(--unit-size);
|
|
stroke-width: 0;
|
|
stroke: currentColor;
|
|
fill: var(--bg1);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#left-panel {
|
|
order: 1;
|
|
}
|
|
|
|
/* left panel z-index fix */
|
|
.form {
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
#header {
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
/* RIGHT PANEL */
|
|
#right-panel {
|
|
order: 3;
|
|
}
|
|
|
|
.arrow {
|
|
border: solid var(--bg1);
|
|
border-width: 0 3px 3px 0;
|
|
display: inline-block;
|
|
padding: 0.3em;
|
|
}
|
|
.right {
|
|
transform: rotate(135deg);
|
|
-webkit-transform: rotate(135deg);
|
|
}
|
|
|
|
.rss {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: var(--nav-size);
|
|
height: calc(100vh - (3 * var(--unit-size)));
|
|
position: fixed;
|
|
background-color: var(--bg1);
|
|
margin-top: calc(3 * var(--main-size));
|
|
border: solid 1px var(--accent-low);
|
|
}
|
|
|
|
input.larger {
|
|
width: var(--main-size);
|
|
height: calc( 2 * var(--main-size));
|
|
}
|
|
|
|
/* untoggled */
|
|
.rss {
|
|
right: -100%;
|
|
top: 0;
|
|
transition: 0.3s ease;
|
|
}
|
|
.arrow label {
|
|
display: block;
|
|
cursor: pointer
|
|
}
|
|
#toggle-right {
|
|
position: absolute;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
}
|
|
#toggle-right:not(:checked)+.arrow {
|
|
transform: rotate(135deg);
|
|
transition: 0.3s ease;
|
|
}
|
|
|
|
/* toggled */
|
|
#toggle-right:checked~.rss {
|
|
display: flex;
|
|
right: 0;
|
|
top: 0;
|
|
transition: 0.3s ease;
|
|
}
|
|
#toggle-right:checked+.arrow {
|
|
transform: rotate(-45deg);
|
|
transition: 0.3s ease;
|
|
}
|
|
|
|
/* styling radio buttons and checkboxes */
|
|
.content input[type="checkbox"] + label::before {
|
|
content: '';
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
width: var(--medium-size);
|
|
height: var(--medium-size);
|
|
background: var(--fg);
|
|
border-radius: 10%
|
|
}
|
|
.content input[type="checkbox"]:checked + label::before {
|
|
background: var(--accent);
|
|
border-radius: 10%;
|
|
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgdmVyc2lvbj0iMS4xIiAgIHdpZHRoPSIzMiIgICBoZWlnaHQ9IjMyIiAgIHZpZXdCb3g9IjAgMCAzMiAzMiIgICBpZD0ic3ZnNiIgICBzb2RpcG9kaTpkb2NuYW1lPSJjaGVja21hcmsuc3ZnIiAgIGlua3NjYXBlOnZlcnNpb249IjEuMCAoNDAzNWE0ZmI0OSwgMjAyMC0wNS0wMSkiPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGExMiI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICA8L2NjOldvcms+ICAgIDwvcmRmOlJERj4gIDwvbWV0YWRhdGE+ICA8ZGVmcyAgICAgaWQ9ImRlZnMxMCIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIGlua3NjYXBlOmRvY3VtZW50LXJvdGF0aW9uPSIwIiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiICAgICBib3JkZXJvcGFjaXR5PSIxIiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIgICAgIGdyaWR0b2xlcmFuY2U9IjEwIiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTM4MiIgICAgIGlkPSJuYW1lZHZpZXc4IiAgICAgc2hvd2dyaWQ9ImZhbHNlIiAgICAgaW5rc2NhcGU6em9vbT0iMjkuODc1IiAgICAgaW5rc2NhcGU6Y3g9IjE2LjA2Njk0NiIgICAgIGlua3NjYXBlOmN5PSIxNiIgICAgIGlua3NjYXBlOndpbmRvdy14PSIwIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMwIiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzYiIC8+ICA8dGl0bGUgICAgIGlkPSJ0aXRsZTIiPmNoZWNrbWFyazwvdGl0bGU+ICA8cGF0aCAgICAgZD0iTTI3IDRsLTE1IDE1LTctNy01IDUgMTIgMTIgMjAtMjB6IiAgICAgaWQ9InBhdGg0IiAgICAgc3R5bGU9ImZpbGw6IzJlMzQ0MDtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=); background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 80%;
|
|
}
|
|
.content input[type="checkbox"]:focus + label::before,
|
|
.content input[type="checkbox"]:hover + label::before{
|
|
border-radius: 10%;
|
|
box-shadow: 0 0 8px var(--accent);
|
|
}
|
|
.content input[type="checkbox"] {
|
|
position: absolute;
|
|
height: 1px;
|
|
width: 1px;
|
|
overflow: hidden;
|
|
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
}
|
|
|
|
|
|
.content input[type="radio"] + label::before {
|
|
content: '';
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
width: var(--medium-size);
|
|
height: var(--medium-size);
|
|
background: var(--fg);
|
|
border-radius: 50%
|
|
}
|
|
.content input[type="radio"]:checked + label::before {
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wICg0MDM1YTRmYjQ5LCAyMDIwLTA1LTAxKSIgICBzb2RpcG9kaTpkb2NuYW1lPSJjaXJjbGUuc3ZnIiAgIGlkPSJzdmc0IiAgIHZlcnNpb249IjEuMSIgICBoZWlnaHQ9IjUwMCIgICB3aWR0aD0iNTAwIj4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhMTAiPiAgICA8cmRmOlJERj4gICAgICA8Y2M6V29yayAgICAgICAgIHJkZjphYm91dD0iIj4gICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiAgICAgICAgPGRjOnR5cGUgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzOCIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzQiICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMwIiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiICAgICBpbmtzY2FwZTpjeT0iMjUwIiAgICAgaW5rc2NhcGU6Y3g9IjI1MS4wNDYwMyIgICAgIGlua3NjYXBlOnpvb209IjEuOTEyIiAgICAgc2hvd2dyaWQ9ImZhbHNlIiAgICAgaWQ9Im5hbWVkdmlldzYiICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzgyIiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIiAvPiAgPGNpcmNsZSAgICAgc3R5bGU9ImZpbGw6IzJlMzQ0MDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJlMzQ0MDtzdHJva2Utb3BhY2l0eTowIiAgICAgaWQ9ImNpcmNsZTIiICAgICBzdHJva2Utd2lkdGg9IjgiICAgICBzdHJva2U9IiMwMDAiICAgICBmaWxsPSIjZmZmIiAgICAgcj0iMjEwIiAgICAgY3k9IjI1MCIgICAgIGN4PSIyNTAiIC8+PC9zdmc+);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 50%;
|
|
fill: #2e3440;
|
|
}
|
|
.content input[type="radio"]:focus + label::before,
|
|
.content input[type="radio"]:hover + label::before{
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 8px var(--accent);
|
|
}
|
|
.content input[type="radio"] {
|
|
position: absolute;
|
|
height: 1px;
|
|
width: 1px;
|
|
overflow: hidden;
|
|
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
}
|
|
.create-notice button[type=submit] {
|
|
background: var(--bg1);
|
|
padding: 0.3em 1em;
|
|
color: var(--fg);
|
|
border-style: solid;
|
|
border-color: var(--accent);
|
|
border-radius: var(--small-size);
|
|
border-width: 2px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: var(--small-size);
|
|
font-weight: 700;
|
|
}
|
|
.create-notice button[type=submit]:focus,
|
|
.create-notice button[type=submit]:hover {
|
|
border-radius: var(--small-size);
|
|
box-shadow: 0 0 8px var(--accent);
|
|
}
|
|
|
|
.avatar {
|
|
border-radius: 50%;
|
|
}
|