/* classes' names rule: BLOCK__ELEMENT_MODIFICATOR

| \ topmenu |__link |__dropdown |__dropdown-content |__dropdown-content a | void, void a |__toc |__main |__image |__icon |__table |__anchor |__article |__list |__spoiler-btn |__spoiler-text | gallery |__description | footer | a | */ /*****************************************************************************/ /* ADDITIONAL FONTZ **********************************************************/ @font-face { /*font-family: ArtNouveau; src: url('font_art-nouveau_initial.ttf');*/ font-family: RexBold; src: url('font_rex_bold.otf'); } @font-face { font-family: MonoU; src: url('font_ubuntumono-r.ttf'); } @font-face { font-family: ArtModern; src: url('font_artmodernap.otf'); } @font-face { font-family: ArtNouveau; src: url('font_art-nouveau_initial.ttf'); } /* SAMPLE @font-face { font-family: 'HelveticaNeueCyr'; src: url('HelveticaNeueCyr-Medium.eot'); src: local('HelveticaNeueCyr-Medium'), url('HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'), url('HelveticaNeueCyr-Medium.woff') format('woff'), url('HelveticaNeueCyr-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; }*/ /*****************************************************************************/ /* GLOBAL SCROLLBAR FUR WEBKIT************************************************/ html::-webkit-scrollbar { width: 1.33em; } html::-webkit-scrollbar-thumb { background-color: #9aa; /* Color of the draggable part */ } html::-webkit-scrollbar-track { background-color: #754; /* Color of the background track */ } /*****************************************************************************/ /* GLOBALs *******************************************************************/ html { font-size: 17px; scrollbar-width: auto; } /* If wider than... */ @media (min-width: 1601px) { html { font-size: 17px }; } /*****************************************************************************/ /* BODY **********************************************************************/ body { line-height: 100%; font-size: 100%; font-family: 'Roboto','Arial','Verdana', sans-serif; font-style: normal; font-variant: normal; background-color: #e4e5ee; background: url('fon_wood_mediumquality.jpg'); /* background: url('fon_wood.jpg') repeat-x;*/ background-attachment: fixed; margin: 0; list-style-type: circle; word-wrap: break-word; /* word-wrap - legacy. Объявление для старых браузеров */ overflow-wrap: break-word; /* overflow-wrap - объявление для новых браузеров */ } .i { font-style: italic; } button { background: linear-gradient(to bottom,rgba(150, 150, 150, 0.90), #f9f9f9); text-align: center; font-size: 0.9em; color: #050505; text-decoration: none; border: 1px solid rgba(125, 125, 125, 1); cursor: pointer; box-shadow: 1px 2px 1px rgba(0, 0, 0, .4); border-radius: 3px; } .button_left { text-align: left; } .button_15 { min-width: 15em; } .align-right { text-align: right; } /*****************************************************************************/ /* NAVIGATION BAR ************************************************************/ .topmenu { display: table; width: 100%; left: 0; top: 0; background-color: #dddddd; background: url('fon_metal.jpg'); min-width: 37em; height: 1.7em; line-height: 1.7em; list-style: none; table-layout: fixed; overflow-x: hidden; /*hide all that can cross the borders of block by X-axis*/ overflow-y: auto; /*hide all that can cross the borders of block by Y-axis*/ position: fixed; /*independent of scrolling - always on the screen, overlaps other elements*/ font-family: RexBold; /* ArtNouveau */ font-style: normal; font-size: 1.25em; text-align: center; text-decoration: none; letter-spacing: 0px; box-shadow: 0px 5px 5px 0px rgba(15, 10, 20, .8); z-index: 10; /* to disable text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* links */ .topmenu__link { color: #0005bb; display: table-cell; text-decoration: inherit; border-top-right-radius: 5px; border-right: solid 1px #333333; width: 2em; /* 1.6 */ } .topmenu__link:hover, .topmenu__dropdown:hover { background-color: #ee1212; background-color: rgba(50, 40, 45, .50); color: black; } .topmenu__link_active, .topmenu__dropdown_active { color: #fefefe; /* almost white */ background-color: #cc1212; background-color: rgba(180, 30, 30, .70); box-shadow: 2px 2px 3px #3f3f3f inset; } /* dropdowns */ .topmenu__dropdown { color: #3236c5; display: table-cell; text-decoration: inherit; border-right: solid 1px #333333; position: relative; } .topmenu__dropdown:hover { background-color: rgba(30, 20, 25, .26); color: black; } .topmenu__dropdown:hover a { color: #090909; display: block; /* this hoormah makes a whole cell (not only linkword) to be a link */ } .topmenu__dropdown_active { /* активный раздел */ color: #fefefe; background-color: rgba(30, 20, 30, .5); display: block; border: none; } .topmenu__dropdown_notactive a { color: black; text-decoration: none; } .topmenu__dropdown_active a { color: #fefefe; text-decoration: none; } /* Dropdown Content (Hidden by Default) */ .topmenu__dropdown-content { display: none; width: 100%; position: absolute; background-color: #f9f9f9; box-shadow: 3px 5px 8px 0px rgba(0, 0, 0, .7); text-align: left; text-shadow: none; line-height: 1.5em; /* 0.85 */ letter-spacing: 0px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } /* Links inside the dropdown */ .topmenu__dropdown-content a { color: black; padding: 0px 8px; font-family: 'Arial', sans-serif; font-size: 0.7em; /* 0.45 */ text-decoration: none; display: block; font-weight: bold; } /* Change color of dropdown links on hover */ .topmenu__dropdown-content a:hover { background-color: #e1e1e1; } /* Add tab for menuitems with anchor links */ .topmenu__dropdown-content a[href*="#"] { padding-left: 1em; font-weight: normal; } /* Show the dropdown menu on hover */ .topmenu__dropdown:hover .topmenu__dropdown-content { display: block; } /*****************************************************************************/ /* MAIN PART OF PAGE *********************************************************/ .void { display: block; margin-top: 28px; /* to not be covered by topmenu */ overflow-x: hidden; /* hide all that can cross the borders of block by X-axis */ z-index: 8; line-height: normal; } /* LINKS settings */ .void a:link, .void a:visited { color: #002bb8; text-decoration: none; } .void a:hover { background-color: rgba(200,200,200,0.4); } /* TOC - Table of contents for some pages ************************************/ .void__toc { display: block; min-width: 15.0%; max-width: 20%; left: 0.8em; font-size: 0.9em; letter-spacing: 0px; text-align: left; background: linear-gradient(rgba(247,247,247,.33), rgba(247,247,247,.33)), url('fon_paper.jpg'); padding: 0.4em 0.75em 0.4em 0.75em; border: 0px solid #cccccc; border-radius: 0.3em; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .5); margin: 1.33em 0em 0em 0em; /*min-height: 50%;*/ overflow-x: hidden; /*hide all that can cross the borders of block by X-axis*/ overflow-y: auto; /*hide all that can cross the borders of block by Y-axis*/ position: fixed; /*independent of scrolling - always on the screen, overlaps other elements*/ /*word-break: break-all;*/ /* В отличие от word-wrap (overflow-wrap): break-word, при word-break: break-all длинное слово НЕ начнется с новой строки, а продолжится на той же */ /* to disable text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .void__toc a { display: block; margin-top: 0.41em; margin-bottom: 0.41em; } .void__toc a:link, .void__toc a:visited { color: #111187; } .void__toc_chapter { font-weight: bolder; } .void__toc_chapter_current { /*background-color: rgb(180,200,243,0.33);*/ font-weight: bolder; } .void__toc_subchapter { margin-left: 1em; } .void__toc_subchapter_current { background-color: rgba(60, 40, 60, .16); box-shadow: 2px 1px 2px 1px rgba(0, 0, 0, .3); margin-left: 1em; } .void__toc_subchapter_current::after {content: "◈"; color: forestgreen;} .void__toc_localheading { font-size: 0.93em; margin-left: 2.25em; } /* MAIN **********************************************************************/ .void__main { line-height: 1.5em; display: block; max-width: 59%; /*70em;*/ background-color: #fdfdfd; /* background: url('fon_paper_lighter.jpg'); */ color: #030303; text-align: justify; margin-right: 2%; margin-left: 20%; margin-bottom: 33px; padding-top: 1em; padding-left: 3em; padding-right: 4em; padding-bottom: 40px; box-shadow: 1px 0px 2px 2px rgba(0, 0, 0, .5); } .void__main p { margin-bottom: 0.5em; } .void__main img { max-width: 100%; } .void__main input { text-align: left; font-size: 0.9em; } .void__main textarea { min-width: 15em; text-align: left; font-size: 0.9em; } /* just because I can */ /*.void__main p::first-letter { font-weight: bold; }*/ .void__main_smallinput { text-align: right; max-width: 2em; } .void__main_heading { font-size: 1.80em; display: block; margin-top: 1em; margin-bottom: 0.5em; color: #002277; font-weight: bold; text-transform: uppercase; text-align: center; text-shadow: 1px 1px 2px #ccc; } .void__main_center { text-align: center; } .void__main_citate { text-align: left; font-size: 0.9em; line-height: 1.1em; padding: 0.5em 0em 0.5em 1em; margin: 1em 0em 0.5em 1.5em; border-left: 3px #b2252a solid; background-color: #efefef; } .void__main_toread { max-width: auto; text-align: left; font-size: 1em; line-height: 1.1em; padding: 0.5em 0em 0em 0.5em; margin: 0.5em 1.5em 0em 1.5em; background-color: #fcfcdd; border: 1px dashed #ffaaa0; border-radius: 4px; } /* MOD: console font; */ .void__main_console { display: block; line-height: normal; font-family: "Monospace", MonoU, Courier, monospace; text-decoration: none; text-align: left; font-size: 1.0em; font-weight: bold; background: none; } .void__main_console_grey { color: #c0c0c0; font-weight: normal; background: #333333; } .void__main_console_red { color: #bb1111; } .void__main_console_inline { display: inline; } /* Format for file listings */ .void__main_file { display: table; /*was block */ color: #ffffff; background-color: #2f3037; /*background-color: #dedede;*/ padding: 4px 2px 3px 6px; margin: 0.3em 0.5em 0.5em 0; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .5); line-height: 125%; font-family: "Monospace", MonoU, Courier, monospace; font-weight: normal; font-size: 1.0em; text-align: left; text-decoration: none; border-radius: 4px; white-space:pre-wrap; /* В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую */ } /* IMAGES ********************************************************************/ .void__image_floatright { float: right; } .void__image_floatleft { float: left; } /* ICONS for links ***********************************************************/ .void__icon { display: inline-block; min-width: 26px; min-height: 16px; background-position: center bottom 0px; background-repeat: no-repeat; margin-right: 2px; } .void__icon_warn { background-image: url( 'icon_warn.png' ); } .void__icon_warn2 { background-image: url( 'icon_warn2.png' ); } .void__icon_eng { background-image: url( 'icon_lang_eng.png' ); } .void__icon_rus { background-image: url( 'icon_lang_rus.png' ); } .void__icon_deu { background-image: url( 'icon_lang_deu.png' ); } .void__icon_video { background-image: url( 'icon_video.png' ); } .void__icon_disk { background-image: url( 'icon_disk.png' ); } .void__icon_drive { background-image: url( 'icon_drive.png' ); } .void__icon_list { background-image: url( 'icon_list.png' ); } .void__icon_linux { background-image: url( 'icon_linux.png' ); } .void__icon_win { background-image: url( 'icon_win.png' ); } .void__icon_mac { background-image: url( 'icon_mac.png' ); } .void__icon_steam { background-image: url( 'icon_steam.png' ); } .void__icon_lokal { background-image: url( 'favicon.ico' ); } .void__icon_archi { background-image: url( 'icon_archi.png' ); } .void__icon_drawio { background-image: url( 'icon_drawio.png' ); } .void__icon_habr { background-image: url( 'icon_habr.png' ); } .void__icon_w3school { background-image: url( 'icon_w3school.png' ); } .void__icon_soviet { background-image: url( 'icon_soviet.png' ); } .void__icon_stackoverflow { background-image: url( 'icon_stackoverflow.png' ); } .void__icon_wiki { background-image: url( 'icon_wiki.png' ); } /* TABLES ********************************************************************/ .void__table { margin-top: 0.33em; border: 2px solid #333333; border-collapse: collapse; font-size: 1em; line-height: 1.2em; background-color: #ffffff; text-align: left; word-wrap: break-word; /* word-wrap - legacy. Объявление для старых браузеров */ overflow-wrap: break-word; /* overflow-wrap - объявление для новых браузеров */ word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* значение auto не поддерживается Chrome */ } .void__table th { text-align: center; padding: 3px 5px 3px 6px; background-color: #f0fff0; border: 1px solid black; border-collapse: collapse; color: rgb(20, 20, 20); box-shadow: 1px 2px 1px 1px rgba(0, 0, 0, .5); } .void__table tr { border: 1px solid black; border-collapse: collapse; } .void__table tr:nth-child(odd) { background-color: #f6f6f6; } .void__table td { border: 1px solid black; border-collapse: collapse; width: auto; /* 50% */ padding: 3px 5px 3px 6px; vertical-align: top; } .void__table_normal { font-size: 1em; } .void__table_lesserfont { font-size: 0.9em; } .void__table_center { margin-left: auto; margin-right: auto; } .void__table_nobreak { word-wrap: normal; /* word-wrap - legacy. Объявление для старых браузеров */ overflow-wrap: normal; /* overflow-wrap - объявление для новых браузеров */ word-break: normal; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* значение auto не поддерживается Chrome */ } .void__table_subheader { background-color: #cccccc; font-weight: bold; text-align: center; } .void__table_centertd { height: 3em; text-align: center; } /* sorting */ .void__table_sort table {border-collapse: collapse;} .void__table_sort th {cursor: pointer;padding-right: 17px;} /* padding adds some place for arrow, so arrow will not overlap header text*/ th.sorted[data-order="1"],th.sorted[data-order="-1"] {position: relative;} th.sorted[data-order="1"]::after,th.sorted[data-order="-1"]::after {right: 2px;position: absolute;} th.sorted[data-order="-1"]::after {content: "▼";color: blue;} th.sorted[data-order="1"]::after {content: "▲";color: blue;} /* anchor - for proper view (not covered by topmenu) when walks using headings links should be placed just between any tag which will have id thanks to https://pixelflips.com/blog/anchor-links-with-a-fixed-header */ .void__anchor { display: block; height: 36px; margin-top: -36px; visibility: none; } /* ARTICLES ******************************************************************/ .void__article { display: block; line-height: inherit; font-weight: normal; font-size: 1em; } .void__article_heading { font-size: 1.6em; font-weight: bold; letter-spacing: 0.5px; display: block; padding-top: 0.25em; padding-bottom: 0.25em; padding-left: 1em; margin-top: 2em; margin-bottom: 1em; background-color: rgba(176, 227, 169, 1); color: rgb(40, 78, 167); border-top: 2px solid rgba(51,51,51,.2); border-top-left-radius: 5px; border-top-right-radius: 8px; text-transform: uppercase; text-align: center; text-shadow: 1px 1px 2px #999; } /* text h.. **************************************************************/ .void__main h3 { font-size: 1.33em; font-weight: normal; display: block; padding-top: 0.15em; padding-bottom: 0.15em; padding-left: 1em; margin: 2em 25% 1em 0em; color: rgb(50, 50, 85); background-color: rgba(230, 234, 240, 1); border-top: 2px solid rgba(51,51,51,.2); border-left: 2em solid rgba(176, 214, 166, 1); border-radius: 2px; text-align: left; } .void__main h4 { font-size: 1.2em; font-weight: normal; display: block; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 1em; margin: 1.25em 5em 0.5em 0em; color: #313150; border-bottom: 1px solid rgba(170,170,170,1); border-radius: 2px; text-align: left; } .void__main h5 { font-size: 0.9em; font-weight: bold; display: block; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 1em; margin: 1.75em 8em 0em 0em; border-top: 1px solid rgba(51,51,51,.2); border-right: 1px solid rgba(51,51,51,.2); border-radius: 3px; color: #313150; text-align: left; } /*.void__article p::first-letter { color: rgb(200, 10, 0); font-size: 1.66em; font-family: 'ArtModern','Arial','Verdana', sans-serif; }*/ /* lists *********************************************************************/ .void__list { display: block; text-align: left; margin: 0 0 0 2em; /*list-style-position: inside;*/ padding-left: 0em; /* for proper displaying of sublists of the same class placed in

of current parent-list */ } .void__list li { display: list-item; padding-top: 0; margin-top: 0.5em; /*padding-left: 1em; /* for proper displaying of sublists of the same class placed in

of current parent-list */ } .void__list li:last-child { margin-bottom: 1em; } /* spoilers ******************************************************************/ .void__spoiler-btn { display: inline-block; cursor: pointer; margin-top: 5px; margin-bottom: 0.4em; padding: 0; color: #446ea2; font-size: 100%; text-align: left; border-bottom: 2px dotted; } .void__spoiler-text { display: block; padding: 0; margin-top: 5px; margin-bottom: 0.5em; padding: 0.25em 0.5em 0.25em 0.75em; border: 1px inset silver; border-radius: 2px; height: auto; background-color: rgba(188, 188, 188, 0.15); } .void__spoiler input[type=checkbox] {display: none;} .void__spoiler input[type=checkbox] + .void__spoiler-text {display: none;} .void__spoiler input[type=checkbox]:checked + .void__spoiler-text {display: block;} summary { cursor: pointer; margin-top: 5px; margin-bottom: 0.4em; padding: 0; color: #446ea2; font-size: 100%; text-align: left; border-bottom: 2px dotted; } details { display: block; padding: 0; margin-top: 5px; margin-bottom: 0.5em; padding: 0.25em 0.5em 0.25em 0.75em; border: 1px inset silver; border-radius: 2px; height: auto; background-color: rgba(188, 188, 188, 0.15); } /*****************************************************************************/ /* GALLERY *******************************************************************/ .gallery { margin: 5px; display: block; max-width: 100%; } .gallery_center { text-align: center; } .gallery img { display: inline-block; margin: auto; height: auto; border: 1px solid transparent; max-width: 100%; } .gallery img:hover { border: 1px solid #adadad; cursor: pointer; } .gallery_border img { border: 1px solid #cccccc; } .gallery_10 img { max-width: 10%; } .gallery_25 img { max-width: 25%; } .gallery_33 img { max-width: 33%; } .gallery_50 img { max-width: 50%; } .gallery_66 img { max-width: 66%; } .gallery_75 img { max-width: 75%; } .gallery_80 img { max-width: 80%; } .gallery_100px img { max-width: 100px; } .gallery_200px img { max-width: 200px; } .gallery_300px img { max-width: 300px; } .gallery_400px img { max-width: 400px; } .gallery_500px img { max-width: 500px; } .gallery__description { padding: 0.75em 0.25em 0.25em 0.25em; text-align: center; font-size: 0.9em; } /*****************************************************************************/ /* HIDEBUTTON "СКРЫТЬ" *******************************************************/ .hidebutton { background: linear-gradient(rgba(150, 150, 150, 0.90), #f9f9f9); font-size: 17px; width: 100%; margin: 0.5em 0em 0.5em 0em; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .5); } .hidebutton:hover { cursor: pointer; } /*****************************************************************************/ /* SHOWBUTTON "ЯВИТЬ" ********************************************************/ .showbutton { display: none; max-width: 4em; background: linear-gradient(rgba(150, 150, 150, 1.00), #f9f9f9); font-size: 17px; padding: 1px 0.4em 1px 0.4em; margin: 1.75em 0em 0em 1em; position: fixed; /*independent of scrolling - always on the screen, overlaps other elements*/ } .showbutton:hover { cursor: pointer; } /*****************************************************************************/ /* FOOTAH ********************************************************************/ .footer { /*display: block;*/ max-width: 22em; bottom: 0; left: 0; height: 2em; background-color: #d1d1d1; background: url('fon_metal.jpg'); padding-top: 0.2em; margin-bottom: 0px; box-shadow: 0px -3px 4px 0px rgba(0, 0, 0, .5); font-size: 1em; text-align: left; overflow-x: hidden; /*hide all that can cross the borders of block by X-axis*/ overflow-y: hidden; /*hide all that can cross the borders of block by Y-axis*/ position: fixed; /*independent of scrolling - always on the screen, overlaps other elements*/ z-index: 10; } /* LINKS settings */ .footer a:link, .footer a:visited { color: #1530e1; text-decoration: none; } .footer a:hover { background-color: rgba(200,200,200,0.4); }