teascade/botsym-css
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Edit fonts

Browse Source
This commit is contained in:
Sofia 2020-09-30 00:05:09 +03:00
parent 0cff0b23b3
commit 9f39d36752
1 changed files with 365 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

358
css/style.css
View File

@ -1,113 +1,165 @@
@charset "UTF-8";
@font-face {
font-family: "Iosevka Slab Regular";
src: url("../fonts/iosevka-slab-regular.woff2") format("woff2"); }
src: url("../fonts/iosevka-slab-regular.woff2") format("woff2");
}
:root {
font-family: "Iosevka Slab Regular", "monospace";
font-family: "Iosevka Slab Regular", "Iosevka Slab", "Consolas", "monospace";
background-color: black;
color: #c9c9c9;
border-color: #c9c9c9;
font-weight: 400;
font-size: 16px;
line-height: 21px; }
line-height: 21px;
}
/* General styles for elements */
* {
margin: 0;
padding: 0; }
padding: 0;
}
p {
width: auto; }
width: auto;
}
b {
font-weight: 1000; }
font-weight: 1000;
}
li {
list-style: none; }
list-style: none;
}
ul {
padding-left: 1ch; }
padding-left: 1ch;
}
a {
color: #c9c9c9; }
color: #c9c9c9;
}
a:hover {
cursor: pointer;
color: #c9c9c9;
background-color: #171c94; }
background-color: #171c94;
}
nav ul>li>ul:hover a {
color: #c9c9c9; }
color: #c9c9c9;
}
hr {
height: 10.5px;
border: 0;
border-bottom: 1px solid #c9c9c9;
margin-bottom: 15px; }
margin-bottom: 15px;
}
nav li hr, li.button-list > ul a hr, .white hr {
border-color: black; }
nav li hr,
li.button-list>ul a hr,
.white hr {
border-color: black;
}
nav>li>ul li>ul:hover>hr,
li.button-list>ul:hover a hr {
border-color: #c9c9c9;
}
nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
border-color: #c9c9c9; }
/* Lists */
li:not(.button-list)>ul::before {
content: "- "; }
content: "- ";
}
li.button-list>ul {
width: calc(100% - 1ch);
text-decoration: underline; }
text-decoration: underline;
}
li.button-list>ul:hover {
cursor: pointer;
color: #c9c9c9;
background-color: #171c94; }
background-color: #171c94;
}
li.button-list>ul>li {
width: 100%; }
width: 100%;
}
li.button-list>ul a {
display: block;
width: 100%; }
width: 100%;
}
/* Navbars */
@keyframes hide {
0% {
opacity: 0;
left: inherit; }
left: inherit;
}
1% {
opacity: 0; }
opacity: 0;
}
100% {
opacity: 0;
left: -9999px; } }
left: -9999px;
}
}
nav a {
color: black;
display: block;
width: 100%;
text-decoration: none; }
text-decoration: none;
}
nav ul::before {
content: "" !important; }
content: "" !important;
}
nav>li {
background-color: #c9c9c9;
color: black;
border-color: black;
margin-left: 0; }
margin-left: 0;
}
nav>li>ul {
margin: 0;
padding: 0;
display: table-cell;
padding-left: 1ch;
padding-right: 1ch; }
padding-right: 1ch;
}
nav>li>ul:hover {
cursor: pointer;
color: #c9c9c9;
background-color: #171c94; }
background-color: #171c94;
}
nav>li>ul:focus {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9; }
border-color: #c9c9c9;
}
nav>li>ul:focus li {
display: block;
opacity: 1;
left: inherit;
animation-name: hide;
animation-name: none; }
animation-name: none;
}
nav>li>ul>li {
background-color: #c9c9c9;
color: black;
@ -125,20 +177,27 @@ nav > li {
opacity: 0;
left: -9999px;
animation-name: hide;
animation-duration: 0.5s; }
animation-duration: 0.5s;
}
nav>li>ul>li>ul {
background-color: #c9c9c9;
color: black;
border-color: black;
padding-left: 1ch;
padding-right: 1ch;
min-height: 21px; }
min-height: 21px;
}
nav>li>ul>li>ul:hover {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9; }
border-color: #c9c9c9;
}
/* Miscallaneous Classes */
.box {
border: 2px solid #c9c9c9;
margin: 0.5ch;
@ -148,9 +207,13 @@ nav > li {
margin-bottom: 10.5px;
padding-top: 8.5px;
padding-bottom: 8.5px;
vertical-align: top; }
vertical-align: top;
}
.box.inline {
display: inline-block; }
display: inline-block;
}
.box.double {
border-style: double;
border-width: 4px;
@ -159,56 +222,85 @@ nav > li {
margin-top: 10.5px;
margin-bottom: 10.5px;
padding-top: 6.5px;
padding-bottom: 6.5px; }
padding-bottom: 6.5px;
}
.box.black {
background-color: black;
color: #c9c9c9;
border-color: #c9c9c9;
box-shadow: 0 0 0 0.25ch black; }
box-shadow: 0 0 0 0.25ch black;
}
.box.white {
background-color: #c9c9c9;
color: black;
border-color: black;
box-shadow: 0 0 0 0.25ch #c9c9c9; }
box-shadow: 0 0 0 0.25ch #c9c9c9;
}
.box.white a {
color: black; }
color: black;
}
.box.white a:hover {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9; }
border-color: #c9c9c9;
}
.box.blue {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9;
box-shadow: 0 0 0 0.25ch #171c94; }
box-shadow: 0 0 0 0.25ch #171c94;
}
.box.blue li.button-list>ul:hover {
background-color: #c9c9c9;
color: black;
border-color: black; }
border-color: black;
}
.box.blue li.button-list>ul:hover>a {
color: black; }
color: black;
}
.box.blue a:hover {
background-color: #c9c9c9;
color: #171c94;
border-color: #171c94; }
border-color: #171c94;
}
.box.blue hr {
border-color: #c9c9c9; }
border-color: #c9c9c9;
}
.box.blue button:hover {
background-color: #c9c9c9;
color: #171c94;
border-color: #171c94; }
.box.blue .checkbox-right:hover, .box.blue .checkbox-left:hover, .box.blue .radio-right:hover, .box.blue .radio-left:hover {
border-color: #171c94;
}
.box.blue .checkbox-right:hover,
.box.blue .checkbox-left:hover,
.box.blue .radio-right:hover,
.box.blue .radio-left:hover {
background-color: #c9c9c9;
color: #171c94;
border-color: #171c94; }
border-color: #171c94;
}
.list-symbol::after {
content: " ▼"; }
content: " ▼";
}
.no-select {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none; }
-webkit-user-select: none;
}
/* How to add pages:
*
@ -221,149 +313,215 @@ nav > li {
* }
* }
*/
/* Form styles */
input[type=checkbox], input[type=radio] {
display: none; }
.checkbox-right:hover, .checkbox-left:hover, .radio-right:hover, .radio-left:hover {
/* Form styles */
input[type=checkbox],
input[type=radio] {
display: none;
}
.checkbox-right:hover,
.checkbox-left:hover,
.radio-right:hover,
.radio-left:hover {
cursor: pointer;
color: #c9c9c9;
background-color: #171c94; }
background-color: #171c94;
}
.checkbox-right::after {
content: "[ ]"; }
content: "[ ]";
}
.checkbox-left::before {
content: "[ ]"; }
content: "[ ]";
}
.radio-right::after {
content: "( )"; }
content: "( )";
}
.radio-left::before {
content: "( )"; }
content: "( )";
}
input[type=checkbox]:checked+.checkbox-right::after {
content: "[x]"; }
content: "[x]";
}
input[type=checkbox]:checked+.checkbox-left::before {
content: "[x]"; }
content: "[x]";
}
input[type=radio]:checked+.radio-right::after {
content: "(x)"; }
input[type=radio]:checked + .radio-left::before {
content: "(x)"; }
content: "(x)";
}
input[type=text], button {
input[type=radio]:checked+.radio-left::before {
content: "(x)";
}
input[type=text],
button {
background-color: inherit;
border: none;
font-family: inherit;
font-size: inherit;
color: inherit; }
input[type=text]:hover, button:hover {
color: inherit;
}
input[type=text]:hover,
button:hover {
cursor: pointer;
color: #c9c9c9;
background-color: #171c94; }
background-color: #171c94;
}
label:hover {
cursor: pointer; }
cursor: pointer;
}
button:focus, button:hover, button:active, button::-moz-focus-inner {
button:focus,
button:hover,
button:active,
button::-moz-focus-inner {
border: none;
text-decoration: none; }
text-decoration: none;
}
button::before {
content: "[ "; }
content: "[ ";
}
button::after {
content: " ]"; }
content: " ]";
}
.textinput {
display: inline-block; }
display: inline-block;
}
.textinput:hover {
cursor: pointer;
color: #c9c9c9;
background-color: #171c94; }
background-color: #171c94;
}
.textinput::before {
content: "["; }
content: "[";
}
.textinput::after {
content: "]"; }
content: "]";
}
.textinput:hover>input[type=text] {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9; }
border-color: #c9c9c9;
}
input[type=text] {
background-color: #c9c9c9;
color: black;
border-color: black;
width: 15ch; }
width: 15ch;
}
/* Style helpers, like space-takers */
.space-1 {
min-height: 21px; }
min-height: 21px;
}
.space-2 {
min-height: 42px; }
min-height: 42px;
}
.space-3 {
min-height: 63px; }
min-height: 63px;
}
.space-4 {
min-height: 84px; }
min-height: 84px;
}
.space-5 {
min-height: 105px; }
min-height: 105px;
}
.width-5 {
width: 5ch; }
width: 5ch;
}
.width-10 {
width: 10ch; }
width: 10ch;
}
.width-15 {
width: 15ch; }
width: 15ch;
}
.width-20 {
width: 20ch; }
width: 20ch;
}
.width-25 {
width: 25ch; }
width: 25ch;
}
.width-50 {
width: 48ch; }
width: 48ch;
}
.width-100 {
width: 98ch; }
width: 98ch;
}
.width-150 {
width: 148ch; }
width: 148ch;
}
.width-200 {
width: 198ch; }
width: 198ch;
}
.width-250 {
width: 248ch; }
width: 248ch;
}
.padding-1 {
padding: 1ch;
padding-top: 21px;
padding-bottom: 21px; }
padding-bottom: 21px;
}
.padding-2 {
padding: 2ch;
padding-top: 42px;
padding-bottom: 42px; }
padding-bottom: 42px;
}
.padding-3 {
padding: 3ch;
padding-top: 63px;
padding-bottom: 63px; }
padding-bottom: 63px;
}
.padding-4 {
padding: 4ch;
padding-top: 84px;
padding-bottom: 84px; }
padding-bottom: 84px;
}
.padding-5 {
padding: 5ch;
padding-top: 105px;
padding-bottom: 105px; }
padding-bottom: 105px;
}
/*# sourceMappingURL=style.css.map */