{"id":1201,"date":"2023-04-07T18:25:29","date_gmt":"2023-04-07T15:25:29","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1201"},"modified":"2023-04-07T18:25:32","modified_gmt":"2023-04-07T15:25:32","slug":"ui-kit","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1201\/","title":{"rendered":"Ui Kit"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Ui Kit\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/eEvXuuBqGH8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;link rel=&quot;stylesheet&quot; href=&quot;\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.11.2\/themes\/smoothness\/jquery-ui.css&quot;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/fonts.googleapis.com\/css?family=Roboto+Slab:400,700&quot;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/weloveiconfonts.com\/api\/?family=typicons&quot;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/weloveiconfonts.com\/api\/?family=fontawesome&quot;&gt;\n\n  &lt;section&gt;\n    &lt;h1&gt;UI Kit &lt;\/h1&gt;\n   \n    &lt;h2&gt;Color Picker v2&lt;\/h2&gt;\n    \n    &lt;div class=&quot;ui colors clearfix&quot;&gt; \n      &lt;div id=&quot;red&quot;&gt;&lt;\/div&gt;\n      &lt;div id=&quot;green&quot;&gt;&lt;\/div&gt; \n      &lt;div id=&quot;blue&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt; \n\n    &lt;h2&gt;Ratings&lt;\/h2&gt; \n    \n    &lt;fieldset class=&quot;rating ui&quot;&gt;\n      &lt;input type=&quot;radio&quot; id=&quot;star5&quot; name=&quot;rating&quot; value=&quot;5&quot; \/&gt;&lt;label for=&quot;star5&quot; title=&quot;Rocks!&quot;&gt;5 stars&lt;\/label&gt;\n      &lt;input type=&quot;radio&quot; id=&quot;star4&quot; name=&quot;rating&quot; value=&quot;4&quot; \/&gt;&lt;label for=&quot;star4&quot; title=&quot;Pretty good&quot;&gt;4 stars&lt;\/label&gt;\n      &lt;input type=&quot;radio&quot; id=&quot;star3&quot; name=&quot;rating&quot; value=&quot;3&quot; \/&gt;&lt;label for=&quot;star3&quot; title=&quot;Meh&quot;&gt;3 stars&lt;\/label&gt;\n      &lt;input type=&quot;radio&quot; id=&quot;star2&quot; name=&quot;rating&quot; value=&quot;2&quot; \/&gt;&lt;label for=&quot;star2&quot; title=&quot;Kinda bad&quot;&gt;2 stars&lt;\/label&gt;\n      &lt;input type=&quot;radio&quot; id=&quot;star1&quot; name=&quot;rating&quot; value=&quot;1&quot; \/&gt;&lt;label for=&quot;star1&quot; title=&quot;Sucks big time&quot;&gt;1 star&lt;\/label&gt;  \n    &lt;\/fieldset&gt;\n\n    &lt;h2&gt;Progress Steps&lt;\/h2&gt; \n    \n    &lt;ol class=&quot;ui progress&quot;&gt;\n      &lt;li class=&quot;active&quot;&gt;\n        &lt;span&gt;Step 1&lt;\/span&gt;&lt;span&gt;1&lt;\/span&gt;\n      &lt;\/li&gt;\n      &lt;li class=&quot;active&quot;&gt;\n        &lt;span&gt;Step 2&lt;\/span&gt;&lt;span&gt;2&lt;\/span&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;span&gt;Step 3&lt;\/span&gt;&lt;span&gt;3&lt;\/span&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;span&gt;Step 4&lt;\/span&gt;&lt;span&gt;4&lt;\/span&gt;\n      &lt;\/li&gt; \n    &lt;\/ol&gt;\n\n    &lt;h2&gt;Video&lt;\/h2&gt;\n    \n    &lt;div class=&quot;ui video&quot;&gt;\n      &lt;div id=&quot;video-container&quot;&gt;\n        &lt;!-- Video --&gt;\n        &lt;video id=&quot;video&quot; width=&quot;100%&quot; height=&quot;350&quot;&gt;\n          &lt;source src=&quot;https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-31_10-39-01.webm&quot; type=&quot;video\/webm&quot;&gt;\n            &lt;source src=&quot;http:\/\/video-js.zencoder.com\/oceans-clip.ogv&quot; type=&quot;video\/ogv&quot;&gt;\n              &lt;source src=&quot;http:\/\/video-js.zencoder.com\/oceans-clip.mp4&quot; type=&quot;video\/mp4&quot;&gt;\n                &lt;p&gt;\n                  Your browser doesn't support HTML5 video.\n                  &lt;a href=&quot;videos\/mikethefrog.mp4&quot;&gt;Download&lt;\/a&gt; the video instead. \n                &lt;\/p&gt;\n              &lt;\/video&gt;\n              &lt;!-- Video Controls --&gt; \n              &lt;div id=&quot;video-controls&quot;&gt; \n                &lt;button type=&quot;button&quot; id=&quot;play-pause&quot;&gt;&lt;span class=&quot;fontawesome-play&quot;&gt;&lt;\/span&gt;&lt;\/button&gt;\n                &lt;input type=&quot;range&quot; id=&quot;seek-bar&quot; value=&quot;0&quot;&gt;\n                  &lt;button type=&quot;button&quot; id=&quot;mute&quot;&gt;&lt;span class=&quot;fontawesome-volume-off&quot;&gt;&lt;\/span&gt;&lt;\/button&gt;\n                  &lt;input type=&quot;range&quot; id=&quot;volume-bar&quot; min=&quot;0&quot; max=&quot;1&quot; step=&quot;0.1&quot; value=&quot;1&quot;&gt;\n                    &lt;button type=&quot;button&quot; id=&quot;full-screen&quot;&gt;&lt;span class=&quot;fontawesome-fullscreen&quot;&gt;&lt;\/span&gt;&lt;\/button&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;          \n              &lt;\/div&gt;\n  \n              &lt;h2&gt;Menu Notifications&lt;\/h2&gt;\n              \n             &lt;div class=&quot;ui menu-notification&quot;&gt;\n               &lt;ul&gt;\n                 &lt;li&gt;Item1&lt;\/li&gt;\n                 &lt;li&gt;Item2&lt;\/li&gt;\n                 &lt;li&gt;Item3&lt;\/li&gt;\n                 &lt;li&gt;Item4&lt;\/li&gt;\n                 &lt;li class=&quot;notification-sml&quot;&gt;Item5&lt;\/li&gt;\n               &lt;\/ul&gt;\n             &lt;\/div&gt;\n              \n    &lt;h2&gt;Menu&lt;\/h2&gt;\n    &lt;div class=&quot;menu ui&quot;&gt;\n      &lt;div&gt;\n        Menu\n        &lt;span class=&quot;fontawesome-caret-down&quot;&gt;&lt;\/span&gt;\n      &lt;\/div&gt;\n      &lt;ul&gt;\n        &lt;li&gt;Menu Item 1&lt;\/li&gt;\n        &lt;li&gt;Menu Item 2&lt;\/li&gt;\n        &lt;li&gt;Menu Item 3&lt;\/li&gt;\n        &lt;li&gt;Menu Item 4&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n       \n    &lt;h2&gt;Slider&lt;\/h2&gt;\n    &lt;div class=&quot;ui&quot;&gt;\n      &lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;50&quot; value=&quot;7&quot; step=&quot;0&quot;\/&gt;\n    &lt;\/div&gt;\n    \n    &lt;h2&gt;Progress Bar&lt;\/h2&gt;\n    \n    &lt;div class=&quot;ui progress&quot;&gt;\n      &lt;span style=&quot;width: 56%&quot;&gt;&lt;\/span&gt;\n    &lt;\/div&gt;\n    \n    &lt;h2&gt;Notifications&lt;\/h2&gt;\n    \n    &lt;div class=&quot;ui notifications&quot;&gt;\n      &lt;ul&gt;\n        &lt;li class=&quot;notification&quot;&gt;&lt;span class=&quot;fontawesome-envelope&quot;&gt;&lt;\/span&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;span class=&quot;fontawesome-twitter&quot;&gt;&lt;\/span&gt;&lt;\/li&gt;\n        &lt;li class=&quot;notification&quot;&gt;&lt;span class=&quot;fontawesome-comments&quot;&gt;&lt;\/span&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;span class=&quot;fontawesome-rss&quot;&gt;&lt;\/span&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;  \n    &lt;\/div&gt;\n\n    &lt;h2&gt;Subscribe&lt;\/h2&gt;\n    \n    &lt;div class=&quot;ui&quot;&gt;\n      &lt;label for=&quot;name&quot;&gt;Email:&lt;\/label&gt;\n      &lt;input type=&quot;email&quot; name=&quot;name&quot; id=&quot;name&quot; placeholder=&quot;John@Smith.com&quot;    pattern=&quot;[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}&quot;\/&gt;\n      &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; \/&gt;\n      &lt;div class=&quot;input-validation&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;  \n    \n    &lt;div class=&quot;ui&quot;&gt;\n      &lt;label for=&quot;name&quot;&gt;&lt;span class=&quot;fontawesome-envelope&quot;&gt;&lt;\/span&gt;&lt;\/label&gt;\n      &lt;input type=&quot;email&quot; name=&quot;name&quot; id=&quot;name&quot; placeholder=&quot;John@Smith.com&quot;    pattern=&quot;[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}&quot;\/&gt;\n      &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; \/&gt;\n      &lt;div class=&quot;input-validation2&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;  \n    \n    &lt;h2&gt;Log in &lt;\/h2&gt;\n    \n    &lt;div class=&quot;ui login&quot;&gt;\n      &lt;label for=&quot;name&quot;&gt;Username:&lt;\/label&gt;\n      &lt;input type=&quot;email&quot; name=&quot;name&quot; id=&quot;name&quot; placeholder=&quot;John Smith&quot; \/&gt;\n      &lt;label for=&quot;name&quot;&gt;Password:&lt;\/label&gt;\n      &lt;input type=&quot;password&quot; name=&quot;name&quot; id=&quot;name&quot; placeholder=&quot;********&quot; \/&gt;\n      &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;\/&gt;\n    &lt;\/div&gt;  \n\n    &lt;h2&gt;Search&lt;\/h2&gt;\n    \n    &lt;div class=&quot;ui&quot;&gt;\n      &lt;label for=&quot;name&quot;&gt;&lt;span class=&quot;fontawesome-search&quot;&gt;&lt;\/span&gt;&lt;\/label&gt;\n      &lt;input type=&quot;email&quot; name=&quot;name&quot; id=&quot;name&quot; \/&gt;\n      &lt;input type=&quot;submit&quot; value=&quot;Search&quot;\/&gt;\n    &lt;\/div&gt;   \n    \n    &lt;div class=&quot;ui search2&quot;&gt;\n      &lt;label for=&quot;name&quot;&gt;&lt;span class=&quot;fontawesome-search&quot;&gt;&lt;\/span&gt;&lt;\/label&gt;\n      &lt;input type=&quot;email&quot; name=&quot;name&quot; id=&quot;name&quot; placeholder=&quot;Press enter to search&quot;\/&gt;\n    &lt;\/div&gt;   \n    \n\t&lt;\/section&gt;\n\n  &lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n  &lt;script src=&quot;\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.11.2\/jquery-ui.min.js&quot;&gt;&lt;\/script&gt;\n  &lt;script src=&quot;https:\/\/s.cdpn.io\/31787\/video-controls.js&quot;&gt;&lt;\/script&gt;\n  &lt;script src=&quot;https:\/\/s.cdpn.io\/31787\/html5slider.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@charset &quot;UTF-8&quot;;\n\/*==============================================\nDemo Styles\n================================================ *\/\n@import &quot;http:\/\/weloveiconfonts.com\/api\/?family=fontawesome&quot;;\nhtml {\n  font-family: 'Roboto Slab', serif;\n  font-size: 16px;\n  height: 100%;\n}\n\nbody {\n  background: #9b59b6;\n  text-align: center;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nsection {\n  width: 30rem;\n  margin: auto;\n  padding-bottom: 10rem;\n}\n\nh1 {\n  color: #fff;\n  font-size: 5rem;\n  font-weight: bold;\n  margin: 0 0 2rem 0;\n  text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);\n}\n\nh2 {\n  color: #fff;\n  font-size: 2rem;\n  font-weight: bold;\n  margin: 0;\n  text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);\n}\n\nh4 {\n  color: #fff;\n  margin: -2rem 0 2rem 0;\n  text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4);\n}\n\n\/*==============================================\nBase Form Styles \nAll form elements need these styles\nThe rest are modular\n================================================ *\/\n[class*=&quot;fontawesome-&quot;]:before {\n  font-family: 'FontAwesome', sans-serif;\n  font-size: 1.5rem;\n  line-height: 2;\n}\n\n.ui {\n  border-radius: 2rem;\n  box-shadow: inset 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.1), 0.2rem 0.2rem 0 rgba(255, 255, 255, 0.1);\n  background: rgba(0, 0, 0, 0.25);\n  display: inline-block;\n  font-size: 1rem;\n  margin: 0 0 1rem 0;\n  padding: 1rem;\n  text-align: center;\n  width: 30rem;\n}\n.ui input[type=&quot;email&quot;], .ui input[type=&quot;password&quot;], .ui input[type=&quot;search&quot;] {\n  background: rgba(0, 0, 0, 0.25);\n  border: 0;\n  border-radius: 0;\n  height: 3rem;\n  width: 58%;\n  color: #fff;\n  float: left;\n  padding-left: 0.5rem;\n}\n.ui input[type=&quot;email&quot;]:focus, .ui input[type=&quot;password&quot;]:focus, .ui input[type=&quot;search&quot;]:focus {\n  background: rgba(0, 0, 0, 0.5);\n  transition: background 1s ease;\n}\n.ui input[type=&quot;submit&quot;] {\n  background: rgba(0, 0, 0, 0.4);\n  border: 0;\n  border-radius: 0 1rem 1rem 0;\n  color: #fff;\n  float: left;\n  height: 3rem;\n  width: 20%;\n  z-index: 3;\n}\n.ui input[type=&quot;submit&quot;]:hover {\n  background: rgba(0, 0, 0, 0.6);\n  transition: all 1s ease;\n}\n.ui label {\n  background: rgba(0, 0, 0, 0.4);\n  border: 0;\n  border-radius: 0 1rem 1rem 0;\n  color: #fff;\n  float: left;\n  height: 3rem;\n  width: 20%;\n  z-index: 3;\n  border-radius: 1rem 0 0 1rem;\n  line-height: 3;\n}\n\n\/*==============================================\nColor Picker Slider\n================================================ *\/\n#red, #green, #blue {\n  float: left;\n  clear: left;\n  width: 100%;\n  margin: 1rem 0;\n}\n\n#red .ui-slider-range {\n  background: #ef2929;\n}\n\n#green .ui-slider-range {\n  background: #8ae234;\n}\n\n#blue .ui-slider-range {\n  background: #729fcf;\n}\n\n.ui-slider-handle {\n  width: 2rem !important;\n  height: 2rem !important;\n  border-radius: 50%;\n  margin-top: -0.2rem;\n}\n\n.ui-slider-range {\n  border-radius: 1rem;\n}\n\n.colors &gt; div {\n  background: rgba(0, 0, 0, 0.5);\n  border: none;\n  border-radius: 1rem;\n  height: 1rem;\n  width: 100%;\n}\n\n\/*==============================================\nRatings modified version of Lea Verou's\nhttp:\/\/lea.verou.me\/2011\/08\/accessible-star-rating-widget-with-pure-css\/\n================================================ *\/\nfieldset {\n  border: 0;\n}\n\n.rating:not(:checked) &gt; input {\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\n  top: -9999px;\n}\n\n.rating:not(:checked) &gt; label {\n  background: none;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n  float: right;\n  height: 3.5rem;\n  overflow: hidden;\n  padding: 0;\n  transition: color 1s ease-in-out;\n  white-space: nowrap;\n  width: 5.4rem;\n}\n\n.rating:not(:checked) &gt; label:before {\n  content: '= ';\n  font-family: 'Typicons', sans-serif;\n  font-size: 5rem;\n  line-height: 1;\n}\n\n.rating &gt; input:checked + label:hover,\n.rating &gt; input:checked + label:hover ~ label,\n.rating &gt; input:checked ~ label:hover,\n.rating &gt; input:checked ~ label:hover ~ label,\n.rating &gt; label:hover ~ input:checked ~ label,\n.rating:not(:checked) &gt; label:hover,\n.rating:not(:checked) &gt; label:hover ~ label,\n.rating &gt; input:checked ~ label {\n  color: #fff;\n  text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4);\n  transition: color 1s ease-in-out;\n}\n\n\/*==============================================\nProgress Steps\n================================================ *\/\nol.ui {\n  list-style: none;\n  list-style-image: none;\n  margin: 0 0 1rem 0;\n  padding: 1rem 0 1rem 1rem;\n  white-space: nowrap;\n}\nol.ui li {\n  float: left;\n  margin-right: 1rem;\n  position: relative;\n  text-align: center;\n  width: 100px;\n}\nol.ui li &gt; span {\n  color: #fff;\n  display: block;\n  margin-bottom: 0.5rem;\n  width: 100px;\n}\nol.ui span:nth-of-type(2) {\n  background: rgba(0, 0, 0, 0.4);\n  border: 0.2rem solid transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  font-size: 1.5rem;\n  font-weight: bold;\n  width: 3rem;\n  height: 3rem;\n  display: inline-block;\n  line-height: 1.7;\n  transition: all 1.2s ease-in-out;\n}\nol.ui span:nth-of-type(2):before {\n  background: rgba(0, 0, 0, 0.4);\n  bottom: 1.9rem;\n  content: &quot;&quot;;\n  height: 0.5rem;\n  left: -2.65rem;\n  position: absolute;\n  transition: all 1.2s ease-in-out;\n  width: 0rem;\n}\nol.ui span:nth-of-type(2):after {\n  background: rgba(0, 0, 0, 0.4);\n  bottom: 1.9rem;\n  content: &quot;&quot;;\n  height: 0.5rem;\n  left: 4.65rem;\n  position: absolute;\n  transition: all 1.2s ease-in-out;\n  width: 4.35rem;\n}\nol.ui li:first-of-type span:nth-of-type(2):before,\nol.ui li:last-of-type span:nth-of-type(2):after {\n  display: none;\n}\nol.ui .active span:nth-of-type(2) {\n  border: 0.2rem solid white;\n  transition: all 1s ease-in-out;\n  transition-delay: 0.8s;\n}\nol.ui .active span:nth-of-type(2):before {\n  background: white;\n  transition: all 1.2s ease-in-out;\n  width: 4.35rem;\n}\nol.ui p {\n  color: #fff;\n  left: 50%;\n  margin-left: -1rem;\n  margin-top: 4.5rem;\n  cursor: pointer;\n  position: absolute;\n}\n\n#first {\n  transition-delay: 0;\n}\n\n\/*==============================================\nVideo Player\n================================================ *\/\ninput[type='range'] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 1rem;\n  background: rgba(0, 0, 0, 0.5);\n  height: 1rem;\n  width: 100%;\n}\n\ninput[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 1rem;\n  background: white;\n  height: 2rem;\n  width: 2rem;\n}\n\n#video-container {\n  margin: 0.5rem 0.5rem 0 0.5rem;\n}\n\n#video-controls {\n  position: relative;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\nbutton {\n  background: none;\n  border: 0;\n  color: #EEE;\n  border-radius: 3px;\n  width: 2rem;\n}\nbutton [class*=&quot;fontawesome-&quot;]:before {\n  font-family: 'FontAwesome', sans-serif;\n  font-size: 1.5rem;\n  line-height: 1.7;\n}\n\nbutton:hover {\n  cursor: pointer;\n  color: #ccc;\n}\n\n#seek-bar {\n  width: 58%;\n}\n\n#volume-bar {\n  width: 16%;\n}\n\n\/*==============================================\nMenu\n================================================ *\/\n.ui ul {\n  list-style: none;\n  margin: 0 -1rem;\n}\n.ui ul li {\n  color: #fff;\n  cursor: pointer;\n  float: left;\n  font-size: 1.3rem;\n  height: 2rem;\n  position: relative;\n  text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.6);\n  width: 5rem;\n}\n\n.notification-sml:after {\n  background: #e50000;\n  border-radius: 1rem 1rem 1rem 0;\n  box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.6);\n  content: '1';\n  font-size: 0.8rem;\n  font-weight: bold;\n  height: 1.2rem;\n  left: 4.4rem;\n  margin-top: -1rem;\n  position: absolute;\n  width: 1.2rem;\n}\n\n\/*==============================================\nDrop Down Menu\n================================================ *\/\n.menu ul {\n  list-style: none;\n  display: none;\n  width: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  float: left;\n  margin: 1rem 0 0 0;\n  padding: 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n.menu ul li {\n  color: #fff;\n  cursor: pointer;\n  display: block;\n  float: none;\n  height: 3rem;\n  padding: 0.5rem;\n  width: 100%;\n}\n.menu ul li:hover {\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 1rem;\n  cursor: pointer;\n}\n.menu div {\n  float: left;\n  width: 100%;\n  background: rgba(0, 0, 0, 0.25);\n  border-radius: 1rem;\n  color: #fff;\n  cursor: pointer;\n  line-height: 3;\n  padding-left: 3rem;\n}\n.menu div span {\n  float: right;\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 0 1rem 1rem 0;\n  cursor: pointer;\n  padding: 0 1rem;\n}\n.menu div span:hover {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n\/*==============================================\nSlider\n================================================ *\/\ninput[type='range'] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 1rem;\n  background: rgba(0, 0, 0, 0.5);\n  height: 1rem;\n  width: 100%;\n}\n\ninput[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 1rem;\n  background: white;\n  height: 2rem;\n  width: 2rem;\n}\n\n\/*==============================================\nProgress Bar\n=============================================== *\/\n.progress &gt; span {\n  background-color: rgba(255, 255, 255, 0.6);\n  border-radius: 1rem;\n  display: block;\n  height: 2rem;\n  overflow: hidden;\n  position: relative;\n}\n.progress &gt; span:after {\n  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));\n  background-size: 5rem 5rem;\n  border-radius: 1rem;\n  content: &quot;&quot;;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  z-index: 1;\n}\n\n\/*==============================================\nNotifications\n=============================================== *\/\n.notifications ul {\n  margin: 0;\n  padding: 0;\n}\n.notifications ul li {\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: 1rem;\n  color: #fff;\n  cursor: pointer;\n  float: left;\n  height: 5rem;\n  list-style: none;\n  margin: 0 0.5rem;\n  width: 6rem;\n}\n.notifications ul li [class*=&quot;fontawesome-&quot;]:before {\n  font-size: 3rem;\n  line-height: 1.7;\n}\n\n.notification:after {\n  background: #e50000;\n  border-radius: 1rem 1rem 1rem 0;\n  box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.6);\n  content: '1';\n  font-size: 1.3rem;\n  font-weight: bold;\n  height: 2rem;\n  position: absolute;\n  margin-top: -0.5rem;\n  width: 2rem;\n}\n\n\/*==============================================\nLogin Form\n================================================ *\/\n.login input[type=&quot;email&quot;], .login input[type=&quot;password&quot;] {\n  border-radius: 0 1rem 1rem 0;\n  margin: 0.5rem 0;\n  width: 75%;\n}\n.login label {\n  margin: 0.5rem 0;\n  width: 25%;\n}\n.login input[type=&quot;submit&quot;] {\n  border-radius: 1rem;\n  margin: 1rem 0;\n  width: 100%;\n}\n\ninput[type=&quot;email&quot;]:valid ~ .input-validation:after {\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 1rem;\n  content: &quot;\u2713&quot;;\n  color: #fff;\n  font-size: 2rem;\n  height: 3rem;\n  line-height: 1.5;\n  margin-left: 2rem;\n  position: absolute;\n  width: 3rem;\n}\n\ninput[type=&quot;email&quot;]:invalid ~ .input-validation:before {\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 1rem;\n  content: &quot;X&quot;;\n  color: #fff;\n  font-family: 'arial', sans-serif;\n  font-size: 2rem;\n  font-weight: bold;\n  height: 3rem;\n  line-height: 1.5;\n  margin-left: 2rem;\n  position: absolute;\n  width: 3rem;\n}\n\ninput[type=&quot;email&quot;]:invalid ~ .input-validation2:after {\n  border-radius: 1rem;\n  content: &quot;This is an invalid email address&quot;;\n  color: #fff;\n  top: 0.5rem;\n  position: relative;\n}\n\n\/*==============================================\nSearch Inputs\n================================================ *\/\n.search2 input[type=&quot;email&quot;] {\n  border-radius: 0 1rem 1rem 0;\n  width: 80%;\n}\n\n\/*==============================================\nTwitter Widget\n================================================ *\/\n.twitter .fontawesome-twitter:before {\n  color: #fff;\n  float: left;\n  font-size: 4rem;\n  line-height: 2;\n  margin: -1rem 0 -2rem 0.5rem;\n}\n.twitter div {\n  background: rgba(0, 0, 0, 0.4);\n  border-radius: 1rem;\n  color: #fff;\n  float: right;\n  font-size: 1.3rem;\n  margin-bottom: 0.5rem;\n  padding: 1rem;\n  position: relative;\n  width: 100%;\n  word-wrap: break-word;\n}\n.twitter div:after {\n  content: &quot;&quot;;\n  display: block;\n  \/* reduce the damage in FF3.0 *\/\n  position: absolute;\n  bottom: -15px;\n  left: 50px;\n  width: 0;\n  border-width: 15px 15px 0;\n  border-style: solid;\n  border-color: rgba(0, 0, 0, 0.4) transparent;\n}\n.twitter a {\n  color: #fff;\n  font-size: 1.5rem;\n  text-decoration: none;\n}\n.twitter h3 {\n  color: #fff;\n  font-size: 2rem;\n  margin: 0;\n  padding: 0;\n}\n<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">$(&quot;ol.ui li&quot;).click(function(e) {\n    var currentElem = $('.ui.progress &gt; li').index($(this));\n    if($(this).is('.ui.progress &gt; li:last-child') &amp;&amp; !$(this).hasClass('active')) {\n      var elem = document.querySelectorAll('.ui.progress &gt; li');\n      \n      [].forEach.call(elem, function(index, value) { \n        index.classList.add('active');  \n      }); \n    }\n    else {  \n      $(this).toggleClass('active'); \n    }\n  });\n\n  \/\/Color Picker \n  \n  function hexFromRGB(r, g, b) {\n    var hex = [\n      r.toString( 16 ),\n      g.toString( 16 ),\n      b.toString( 16 )\n    ];\n    $.each( hex, function( nr, val ) {\n      if ( val.length === 1 ) {\n        hex[ nr ] = &quot;0&quot; + val;\n      }\n    });\n    return hex.join( &quot;&quot; ).toUpperCase();\n  }\n  function refreshSwatch() {\n    var red = $( &quot;#red&quot; ).slider( &quot;value&quot; ),\n        green = $( &quot;#green&quot; ).slider( &quot;value&quot; ),\n        blue = $( &quot;#blue&quot; ).slider( &quot;value&quot; ),\n        hex = hexFromRGB( red, green, blue );\n    $( &quot;body&quot; ).css( &quot;background-color&quot;, &quot;#&quot; + hex );\n  }\n  $(function() {\n    $( &quot;#red, #green, #blue&quot; ).slider({\n      orientation: &quot;horizontal&quot;,\n      range: &quot;min&quot;,\n      min: 50,\n      max: 190,\n      value: 127,\n      slide: refreshSwatch,\n      change: refreshSwatch\n    });\n    $( &quot;#red&quot; ).slider( &quot;value&quot;, 115 );\n    $( &quot;#green&quot; ).slider( &quot;value&quot;, 59 );\n    $( &quot;#blue&quot; ).slider( &quot;value&quot;, 172 );\n  });\n  \n  \/\/ Menu Notifications \n  \n  $(&quot;.menu-notification ul li&quot;).click(function() {\n    $(this).toggleClass('notification-sml');\n  });\n  \n  \/\/ Dropdown Menu\n  \n  $(&quot;.menu&quot;).click(function () {\n    $(&quot;.menu ul&quot;).slideToggle(&quot;600&quot;); \n  });\n  \n  \/\/ Notifications \n  \n  $(&quot;.notifications ul li&quot;).click(function() {\n    $(this).toggleClass('notification');\n  });\n  \n  \/\/ Twitter old API no longer works\n  \n  $.getJSON(&quot;https:\/\/api.twitter.com\/1\/statuses\/user_timeline\/darbybrown.json?count=1&amp;include_rts=1&amp;callback=?&quot;, function(data) {\n       $(&quot;.twitter div&quot;).html(data[0].text);\n  });<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[70],"class_list":["post-1201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other","tag-ui-kit"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1201"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1201\/revisions"}],"predecessor-version":[{"id":1203,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1201\/revisions\/1203"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1202"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}