typingstudy.com by vadimcaptaciuc

/* ==UserStyle==
@name         typingstudy.com
@version      20221209.20.16
@namespace    userstyles.world/user/vadimcaptaciuc
@description  Hi guys. This topic was created after some time practice with the keyboard on this site. The reason for which I began to simply make a dark background came to the perfection of other elements with the purpose of convenience and less brightness of which affects vision. Thank you all who supports my idea and its creation.
@author       vadimcaptaciuc
@license      No License
==/UserStyle== */

@-moz-document domain("typingstudy.com") {
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,500;1,700&display=swap');
/* @import url('https://allfont.net/allfont.css?fonts=digital-7-italic'); */


@font-face {
    font-family: 'Digital-7 Italic';
    font-style: italic;
    font-weight: 400;
    src: local('Digital-7 Italic'), local('Digital-7-Italic'),
        url(https://allfont.ru/cache/fonts/digital-7-italic_5c91314350c2e9f707b272e88e18d052.woff) format('woff'),
        url(https://allfont.ru/cache/fonts/digital-7-italic_5c91314350c2e9f707b272e88e18d052.ttf) format('truetype');
}

:root{
    --font-family: 'Roboto', sans-serif;
    --font-digital: 'Digital-7 Italic', arial;
    --font-size: 15px;
    --color: #ebebeb;
    --black: #121212;
    --dark-bg: #1d1d1d;
    --light-bg: #363636;
    --light-bg-2: #525252;
    --light-red: #d25757;
    --light-lime: #6cf388;
}

body, html{
    font-family: var(--font-family);
    font-size: var(--font-size);
    background: var(--dark-bg);
    color: #c0c0c0;
}

h1, h2, h3, h4, h5, h6, #logo{
    color: var(--color);
    font-weight: 300;
}

#type, #text, #counter{
/*     font-family: inherit; */
    resize: vertical;
    font-weight: 300;
    border: 1px solid #666;
    outline-color: var(--light-lime);
    background-color: var(--light-bg);
    color: var(--color);
    padding: 10px 15px;
    box-shadow: none;
    width: auto;
    margin: 10px 0;
    max-height: 350px;
}

#text{
    background-color: var(--light-bg-2)
}

textarea#type{
    width: calc(100% - 33px) !important;
}

#left{
    color: var(--color);
    background-color: var(--dark-bg);
    border: 1px solid #535353;
    width: 300px;
    padding-bottom: 20px
}

#top{
    background-color: var(--dark-bg);
    color: #fff;
    border: 1px solid #535353;
    margin: 5px;
}

#hand_left, #hand_right{
	background-color: var(--color);
	border-radius: 1px;
    outline: 10px solid var(--color);
}

#wrap{
    background: var(--light-bg);
    padding: 5px 0;
}

.shadow_menu, .shadow_select{
    box-shadow:none;
}

ul#menu_subitems li.submenu_new a , a:link, ul#menu_items li.menu_done{
	color: #008eae;
	font-weight: normal;
}

ul#menu_items li.menu_done a, ul#menu_subitems li.submenu_done a,ul#menu_items li.submenu_done a {
	text-decoration: line-through;
	font-weight: normal !important;
	color: var(--light-red) !important;
}

div.kb:not([style]) div.key:not([style]) {
	background-color: var(--black);
	color: #fff !important;
	border: none;
	margin: 2px;
	box-shadow: 0 1px 1px lime;
}

div.kb div.key_enter_up_bottom, div.kb div.key_enter_up_middle{
    background-color: var(--black);
    color: #fff;
    border: none;
    margin: 1px;
}

.current{
    color: var(--light-lime);
    border-color: var(--light-lime);
}

ul.graph li {
	margin-bottom: 2px;
	padding: 7px 0;
	background-color: var(--light-bg-2);
	color: var(--color);
}

ul.graph li div.result {
    font-family: var(--font-digital);
	background-color: var(--light-lime);
	color: var(--black);
	border: none;
	border-radius: 2px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

#menu_items > li, ul#menu_items li.menu_other {
	padding: 5px 10px;
	background-color: var(--light-bg-2);
	margin-bottom: 4px;
	border-radius: 2px;
}

ul#menu_subitems li.submenu_new a, a:link, ul#menu_items li.menu_done{
    color: var(--light-lime);
}

ul#menu_items li a{
    font-weight: 300;
    color: var(--light-lime);
}

ul#menu_items li.menu_started a{
    color: var(--light-lime);
    font-weight: bold;
}

.counter_middle {
	background-color: #6cf388;
	height: 1px;
	width: 100%;
	margin: 3px 0;
}

#typing h2{
    text-align: center;
}

.counter_top {
	font-size: 30px;
	font-family: var(--font-digital);
	padding: 5px 13px;
	background-color: #808365;
	color: #1b1b1b;
	text-shadow: 1px 1px 2px;
	line-height: 27px;
	border-radius: 3px;
	border: 1px solid #898989;
	box-shadow: inset 0px 2px 3px #2b2b2b;
	width: 90px;
	text-align: right;
}

#middle {
	width: calc(100% - 330px);
    margin: 5px;
}

#first div#layout a.layout_btn, #first div#start a.start_btn {
	background-color: var(--light-bg-2);
	box-shadow: none;
	color: var(--light-lime);
	cursor: pointer;
	border-radius: 3px;
	border: none;
	width: 275px;
	font-size: inherit;
	padding: 3px;
	height: auto;
	line-height: normal;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}



}