commit 1f2e4876a27ee30670c9ac7d8e53d041a97d91a7 parent 2d62989efd75856354649d56bf615a6f47cc519e Author: blogdron <blogdron@gmail.com> Date: Fri, 16 May 2025 19:40:37 +0300 fwvm style release Diffstat:
45 files changed, 556 insertions(+), 110 deletions(-)
diff --git a/LICENSE b/LICENSE @@ -1,6 +1,7 @@ MIT License Copyright (c) 2019 Nathanael Gentry +Copyright (c) 2025 Fedor Elizarov Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md @@ -1,8 +1,3 @@ -# New Dawn -A framework for presenting a Web interface using native CSS replications of the Mac OS 8.1 interface components. The project's name is a play on After Dark, as [`after-dark-css`](https://github.com/bryanbraun/after-dark-css) inspired this framework and provided the foundational window layout. +## FVWM Classic Style -## Acknowledgements - - `after-dark-css`, for the basic System 7.1.1 interface - - [`flyer`](https://www.masswerk.at/flyer/), for further inspiration - - Robin Casady, for releasing ChicagoFLF into the public domain - - Apple, who maintains the copyright on the background patterns and interface components + diff --git a/base.css b/base.css @@ -1,34 +1,65 @@ -/* apply a natural box layout model to all elements */ -*, -*:before, -*:after { +/*---------------------------------------------------------------------------*/ +*, *:before, *:after +{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } -@font-face { +@font-face +{ font-family: 'ChicagoFLF'; src: url('fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */ } -:root { +:root +{ --button-box-shadow: - inset -1px -1px 0px 0px #777, - inset -2px -2px 0px 0px #aaa, - inset 1px 1px 0px 0px #ddd, - inset 2px 2px 0px 0px #fff; + inset -1px -1px 0px 0px #777, + inset -2px -2px 0px 0px #aaa, + inset 1px 1px 0px 0px #ddd, + inset 2px 2px 0px 0px #fff; --button-hover-bezel: - 0 0 0 1px #aaa, - 0 0 0 2px #ddd, - 0 0 0 3px #000; + 0 0 0 1px #aaa, + 0 0 0 2px #ddd, + 0 0 0 3px #000; } -html, -body { +@supports (scrollbar-color: auto) +{ + .black-scrollbar + { + scrollbar-color: black white; + } +} + +@supports (scrollbar-width: auto) +{ + .black-scrollbar + { + scrollbar-width: auto; + } +} + +@supports selector(::-webkit-scrollbar) +{ + + .old-scrollbar ::-webkit-scrollbar + { + background: url("img/controls/scrollbar-background.png"); + } + .old-scrollbar ::-webkit-scrollbar-thumb + { + background: url("img/controls/scrollbar.png"); + } + +} +/*---------------------------------------------------------------------------*/ +html, body +{ -moz-user-select: none; -webkit-user-select: none; - background-image: url("img/patterns/128.png"); + background-image: url("img/patterns/p4.png"); background-repeat: repeat; margin: 0; height: 100%; @@ -37,113 +68,260 @@ body { font-weight: normal; overflow: hidden; } -button { + +button +{ font-family: inherit; font-size: inherit; color: inherit; } -a { + +a +{ color: #000; } :focus {outline:none;} ::-moz-focus-inner {border:0;} - -/* Window layout */ -.content { - position: relative; +/*---------------------------------------------------------------------------*/ +.draggable +{ + /*Helper class for js*/ +} +/*---------------------------------------------------------------------------*/ +.content +{ + top: 200px; + left: 800px; z-index: 2; + position: absolute; font-size: 12px; font-weight: normal; width: 260px; - margin: 100px auto 0; - border: 1px solid #111; - background: #ccc; - box-shadow: - 1px 2px #111, - inset 1px 1px 0px 0px #fff, - inset -1px -1px 0px 0px #999; + min-width: 64px; + min-height: 64px; + + border-image-slice: 40 40 40 40; + border-image-width: 40px 40px 40px 40px; + border-image-outset: 3px 4px 4px 3px; + border-image-repeat: repeat round; + border-style: solid; + border-image-source: url("img/border/border-image-nobar.png"); + background-color: #ddd; + + resize: both; + overflow:auto; + overflow-y: hidden; + + @supports selector(::-webkit-scrollbar) + { + border-image-outset: 4px 4px 4px 4px; + } +} +/*---------------------------------------------------------------------------*/ +.win-blue.content +{ + border-image-source: url("img/border/border-image-nobar-blue.png"); +} + +.win-red.content +{ + border-image-source: url("img/border/border-image-nobar.png"); } -.content .inner { - margin: 2px 4px 4px 4px; - border: 1px solid #111; +/*---------------------------------------------------------------------------*/ +.content .panel +{ + top:0.25px; + @supports selector(::-webkit-scrollbar) + { + top:0px; + } + + size:100% 19px; + position: sticky; + padding-bottom:2px; + background-size: 100% 100%; + background-image: url("img/bar/bar.png"); + background-repeat: no-repeat; + background-position:top top; +} +/*---------------------------------------------------------------------------*/ +.win-blue .panel +{ + background-image: url("img/bar/bar-blue.png"); +} + +.win-red .panel +{ + background-image: url("img/bar/bar.png"); +} + +/*---------------------------------------------------------------------------*/ +.content .inner +{ + overflow-y: auto; background-color: #ddd; - box-shadow: - -1px -1px 0px 0px #999, - 1px 1px 0px 0px #fff, - inset 1px 1px 0px 0px #fff, - inset -1px -1px 0px 0px #999; + padding: 5px; + height:100%; + width:100%; } -.title { + +.title +{ + color:#bebebe; width: 100%; text-align: center; font-size: inherit; font-weight: inherit; padding: 1px 0; - background-size: 3px 2px; margin: 0 0 0 0; } -.content .icon { + +.content .icon +{ text-align: center; - margin: 1em 0; + margin: 1px 0; } -.content ul { + +.content ul +{ list-style-type: none; margin: 2px 0 1.5em 0; padding: 0 0 0 2em; font-size: 12px; } -.footer { + +.footer +{ width: 400px; text-align: center; margin: 2em auto 0; font-size: 12px; } -.control-box { +/*---------------------------------------------------------------------------*/ +.control-box +{ position: absolute; - top: 3px; padding: 1px; background-color: #222; - box-shadow: - inset -1px -1px 0px 0px #fff, - inset 1px 1px 0px 0px #888; -} -.close-box.control-box { - left: 4px; -} -.control-box-inner { - display: block; - height: 12px; - width: 12px; - background-image: - linear-gradient(to bottom right, #999, #aaa, #bbb, #ccc, #ddd, #eee, #fff); - border: 1px solid #222; - box-shadow: - inset 1px 1px 0px 0px #ccc, - inset -1px -1px 0px 0px #888; - text-indent: -99999em; } -.control-box-inner:active { +/*---------------------------------------------------------------------------*/ +.icon-box.control-box +{ + height:18px; + width: 26px; + background-image: url("img/controls/icon-control-button.png"); +} + +.icon-box.control-box:active +{ + background-image: url("img/controls/icon-control-button-pressed.png"); +} + +.icon-box.inner +{ + /*For compability*/ +} +/*---------------------------------------------------------------------------*/ +.win-blue .icon-box.control-box +{ + background-image: url("img/controls/icon-control-button-blue.png"); +} +.win-red .icon-box.control-box +{ + background-image: url("img/controls/icon-control-button.png"); +} +.win-blue .icon-box.control-box:active +{ + background-image: url("img/controls/icon-control-button-blue-pressed.png"); +} +.win-red .icon-box.control-box:active +{ + background-image: url("img/controls/icon-control-button-pressed.png"); +} +/*---------------------------------------------------------------------------*/ +.control-box-inner:active +{ box-shadow: none; } -.zoom-box.control-box { + +.control-box-inner +{ + /*For compability*/ +} +/*---------------------------------------------------------------------------*/ +.close-box.control-box +{ + + height:18px; + width: 24px; + background-image: url("img/controls/close-control-button.png"); right: 20px; } -.zoom-box-inner { - height: 6px; - width: 7px; - border-bottom: 1px solid #000; - border-right: 1px solid #000; + +.close-box.control-box:active +{ + background-image: url("img/controls/close-control-button-pressed.png"); } -.windowshade-box.control-box { - right: 4px; + +.close-box-inner +{ + /*For compability*/ } -.windowshade-box-inner { - margin-top: 3px; - height: 3px; - border-top: 1px solid #000; - border-bottom: 1px solid #000; +/*---------------------------------------------------------------------------*/ +.win-blue *.close-box.control-box +{ + background-image: url("img/controls/close-control-button-blue.png"); } -.content .command_button { +.win-red *.close-box.control-box +{ + background-image: url("img/controls/close-control-button.png"); +} +.win-blue *.close-box.control-box:active +{ + background-image: url("img/controls/close-control-button-blue-pressed.png"); +} +.win-red *.close-box.control-box:active +{ + background-image: url("img/controls/close-control-button-pressed.png"); +} +/*---------------------------------------------------------------------------*/ +.maximize-box.control-box +{ + right: 0px; + height:18px; + width: 20px; + background-image: url("img/controls/maximize-control-button.png"); +} + +.maximize-box.control-box:active +{ + background-image: url("img/controls/maximize-control-button-pressed.png"); +} + +.maximize-box-inner +{ + /*For compability*/ +} +/*---------------------------------------------------------------------------*/ +.win-blue *.maximize-box.control-box +{ + background-image: url("img/controls/maximize-control-button-blue.png"); +} +.win-red *.maximize-box.control-box +{ + background-image: url("img/controls/maximize-control-button.png"); +} +.win-blue *.maximize-box.control-box:active +{ + background-image: url("img/controls/maximize-control-button-blue-pressed.png"); +} +.win-red *.maximize-box.control-box:active +{ + background-image: url("img/controls/maximize-control-button-pressed.png"); +} +/*---------------------------------------------------------------------------*/ +.content .command_button +{ height: 22px; background-color: #dedede; display: inline-block; @@ -153,23 +331,30 @@ a { border: 1px solid #000; box-shadow: var(--button-box-shadow); } -.content .command_button:hover { + +.content .command_button:hover +{ box-shadow: - var(--button-box-shadow), - var(--button-hover-bezel); + var(--button-box-shadow), + var(--button-hover-bezel); } -.content .command_button:active { + +.content .command_button:active +{ color: #fff; background-color: #666; box-shadow: - var(--button-hover-bezel), - inset -1px -1px 0px 0px #888, - inset -2px -2px 0px 0px #777, - inset 1px 1px 0px 0px #444, - inset 2px 2px 0px 0px #555; -} -/* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */ -.visuallyhidden { + var(--button-hover-bezel), + inset -1px -1px 0px 0px #888, + inset -2px -2px 0px 0px #777, + inset 1px 1px 0px 0px #444, + inset 2px 2px 0px 0px #555; +} +/*---------------------------------------------------------------------------*/ +/*Hide only visually, but have it available for screenreaders & for SEO purps*/ +/*---------------------------------------------------------------------------*/ +.visuallyhidden +{ border: 0; clip: rect(0 0 0 0); height: 1px; @@ -180,12 +365,14 @@ a { width: 1px; } -.clearfix:before, -.clearfix:after { +.clearfix:before, .clearfix:after +{ content: " "; display: table; } -.clearfix:after { +.clearfix:after +{ clear: both; } +/*---------------------------------------------------------------------------*/ diff --git a/img/bar/bar-blue.png b/img/bar/bar-blue.png Binary files differ. diff --git a/img/bar/bar.png b/img/bar/bar.png Binary files differ. diff --git a/img/bomb.png b/img/bomb.png Binary files differ. diff --git a/img/border/border-image-nobar-blue.png b/img/border/border-image-nobar-blue.png Binary files differ. diff --git a/img/border/border-image-nobar.png b/img/border/border-image-nobar.png Binary files differ. diff --git a/img/controls/close-control-button-blue-pressed.png b/img/controls/close-control-button-blue-pressed.png Binary files differ. diff --git a/img/controls/close-control-button-blue.png b/img/controls/close-control-button-blue.png Binary files differ. diff --git a/img/controls/close-control-button-pressed.png b/img/controls/close-control-button-pressed.png Binary files differ. diff --git a/img/controls/close-control-button.png b/img/controls/close-control-button.png Binary files differ. diff --git a/img/controls/icon-control-button-blue-pressed.png b/img/controls/icon-control-button-blue-pressed.png Binary files differ. diff --git a/img/controls/icon-control-button-blue.png b/img/controls/icon-control-button-blue.png Binary files differ. diff --git a/img/controls/icon-control-button-pressed.png b/img/controls/icon-control-button-pressed.png Binary files differ. diff --git a/img/controls/icon-control-button.png b/img/controls/icon-control-button.png Binary files differ. diff --git a/img/controls/maximize-control-button-blue-pressed.png b/img/controls/maximize-control-button-blue-pressed.png Binary files differ. diff --git a/img/controls/maximize-control-button-blue.png b/img/controls/maximize-control-button-blue.png Binary files differ. diff --git a/img/controls/maximize-control-button-pressed.png b/img/controls/maximize-control-button-pressed.png Binary files differ. diff --git a/img/controls/maximize-control-button.png b/img/controls/maximize-control-button.png Binary files differ. diff --git a/img/controls/scrollbar-background.png b/img/controls/scrollbar-background.png Binary files differ. diff --git a/img/controls/scrollbar.png b/img/controls/scrollbar.png Binary files differ. diff --git a/img/example.png b/img/example.png Binary files differ. diff --git a/img/favicon.ico b/img/favicon.ico Binary files differ. diff --git a/img/glxgears-icon.png b/img/glxgears-icon.png Binary files differ. diff --git a/img/glxgears.png b/img/glxgears.png Binary files differ. diff --git a/img/patterns/p1.png b/img/patterns/p1.png Binary files differ. diff --git a/img/patterns/p2.png b/img/patterns/p2.png Binary files differ. diff --git a/img/patterns/p3.png b/img/patterns/p3.png Binary files differ. diff --git a/img/patterns/p4.png b/img/patterns/p4.png Binary files differ. diff --git a/img/unused/border-image-blue-outbox.png b/img/unused/border-image-blue-outbox.png Binary files differ. diff --git a/img/unused/border-image-blue-v0.png b/img/unused/border-image-blue-v0.png Binary files differ. diff --git a/img/unused/border-image-blue.png b/img/unused/border-image-blue.png Binary files differ. diff --git a/img/unused/border-image-outbox-plus.png b/img/unused/border-image-outbox-plus.png Binary files differ. diff --git a/img/unused/border-image-outbox.png b/img/unused/border-image-outbox.png Binary files differ. diff --git a/img/unused/border-image-v0.png b/img/unused/border-image-v0.png Binary files differ. diff --git a/img/unused/border-image.png b/img/unused/border-image.png Binary files differ. diff --git a/img/unused/close-window-blue.png b/img/unused/close-window-blue.png Binary files differ. diff --git a/img/unused/close-window-red.png b/img/unused/close-window-red.png Binary files differ. diff --git a/img/unused/icon-place-blue.png b/img/unused/icon-place-blue.png Binary files differ. diff --git a/img/unused/icon-place-red.png b/img/unused/icon-place-red.png Binary files differ. diff --git a/img/unused/maximize-window-blue.png b/img/unused/maximize-window-blue.png Binary files differ. diff --git a/img/unused/maximize-window-red.png b/img/unused/maximize-window-red.png Binary files differ. diff --git a/img/xclock.png b/img/xclock.png Binary files differ. diff --git a/index.html b/index.html @@ -2,31 +2,294 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <title>Mac OS 8.1</title> + <title>X11 Xorg FVWM Style</title> + <!-- Xorg image taked from wikipedia for favicon --> <link rel="shortcut icon" href="img/favicon.ico" /> + <!-- Taadaaaam Its Works! --> <link rel="stylesheet" href="base.css"> + <!-- For set elements hooks handlers --> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> + <!-- For draggable elements --> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> + <!-- Common script location --> <script> + /* Pseudo window titles as place for draggable */ $( function() { - $( "#content" ).draggable({ handle: "h1.title" }); + $( "#content4" ).draggable({ handle: "h1.title" }); + $( "#content" ).draggable({ handle: "h1.title" }); + $( "#content2" ).draggable({ handle: "h1.title" }); + $( "#content3" ).draggable({ handle: "h1.title" }); + $( "#content7" ).draggable({ handle: "h1.title" }); + $( "#content8" ).draggable({ handle: "h1.title" }); + $( "#content5" ).draggable({ handle: "div.draggable" }); + $( "#content6" ).draggable({ handle: "div.draggable" }); + $( "#content" ).resizable({ handle: "content.inner" }); + + $(".content").hover( + function () { + $(this).addClass("win-blue"); + }, + function () { + $(this).removeClass("win-blue"); + } + ); } ); + /*Override context menu fo show css menu*/ + addEventListener("contextmenu",function(e) + { + /*This is disable browser context menu*/ + e.preventDefault(); + alert("Реализовать контекстное меню я не смог :)") + }) </script> </head> <body> - <noscript><p><em>This page requires JavaScript.</em></p></noscript> - <div id="content" class="content"> - <div class="control-box close-box"><a class="control-box-inner"></a></div> - <div class="control-box zoom-box"><div class="control-box-inner"><div class="zoom-box-inner"></div></div></div> - <div class="control-box windowshade-box"><div class="control-box-inner"><div class="windowshade-box-inner"></div></div></div> - <h1 class="title">Unimplemented!</h1> + <noscript><p><em>This page requires JavaScript :(.</em></p></noscript> +<!----------------------------------------------------------------------------> +<!-- Example --> +<!----------------------------------------------------------------------------> + <div id="content" class="content old-scrollbar" style="top: 50px; left: 250px;" > + + <div class="panel"> + + <div class="control-box icon-box"> + <a class="control-box-inner"></a> + </div> + + <div class="control-box close-box"> + <div class="control-box-inner"> + <div class="close-box-inner"></div> + </div> + </div> + + <div class="control-box maximize-box"> + <div class="control-box-inner"> + <div class="maximize-box-inner"></div> + </div> + </div> + + <h1 class="title">FVWM ERROR!</h1> + </div> <div class="inner"> - <div class="icon"><img src="img/bomb.png" /></div> + <div class="icon"><img src="img/bomb.png" alt="icon"/></div> <ul> - <li><class "s">A system error has occurred. Please reboot your Mac.</li> + <li>A FVWM error has occurred. Please reboot your PC :)</li> </ul> <button class="command_button">Reboot</button> + <button class="command_button">Ignore</button> + <button class="command_button">FuckIt</button> + <hr/> + <p> +Fvwm is a virtual window manager for the X windows system. It was originally a feeble fork of TWM by Robert Nation in 1993 (fvwm history), and has evolved into the fantastic, fabulous, famous, flexible, and so on, window manager we have today. + +Fvwm is a ICCCM/EWMH compliant and highly configurable floating window manager built primarily using Xlib. Fvwm is configured using a configuration file, which is used to configure most aspects of the window manager including window looks, key bindings, menus, window behavior, additional modules, and more. There is a default configuration file that can be used as a starting point for writing one's own configuration file. + +Fvwm is a light weight window manager and can be configured to be anything from a small sleek window manager to a full featured desktop environment. To get the most out of fvwm, one should be willing to read the documents, and take the time to write a custom configuration file that suites their needs. The manual pages and the fvwm wiki can be used to help learn how to configure fvwm. + +Origin text from https://www.fvwm.org/ + </p> + </div> + </div> + + +<!----------------------------------------------------------------------------> +<!-- Example --> +<!----------------------------------------------------------------------------> + <div id="content7" class="content old-scrollbar win-blue" style="width: 600px; height:400px; top: 50px; left: 540px;" > + + <div class="panel"> + + <div class="control-box icon-box"> + <a class="control-box-inner"></a> + </div> + + <div class="control-box close-box"> + <div class="control-box-inner"> + <div class="close-box-inner"></div> + </div> + </div> + + <div class="control-box maximize-box"> + <div class="control-box-inner"> + <div class="maximize-box-inner"></div> + </div> + </div> + + <h1 class="title">Xterm</h1> + </div> + <div class="inner" style="font:monospace;" > + + <pre> + +LUA5.2(1) General Commands Manual LUA5.2(1) + +NAME + lua - Lua interpreter + +SYNOPSIS + lua [ options ] [ script [ args ] ] + +DESCRIPTION + lua is the standalone Lua interpreter. It loads and executes + Lua programs, either in textual source form or in precompiled + binary form. (Precompiled binaries are output by luac, the Lua + compiler.) lua can be used as a batch interpreter and also in‐ + teractively. + + The given options are handled in order and then the Lua program + in file script is loaded and executed. The given args are + available to script as strings in a global table named arg. If + no options or arguments are given, then -v -i is assumed when + the standard input is a terminal; otherwise, - is assumed. + + In interactive mode, lua prompts the user, reads lines from the + standard input, and executes them as they are read. If a line + does not contain a complete statement, then a secondary prompt + is displayed and lines are read until a complete statement is + formed or a syntax error is found. If a line starts with '=', + then lua evaluates and displays the values of the expressions in + the remainder of the line. + + At the very start, before even handling the command line, lua + checks the contents of the environment variables LUA_INIT_5_2 or + LUA_INIT, in that order. If the contents is of the form '@file‐ + name', then filename is executed. Otherwise, the string is as‐ + sumed to be a Lua statement and is executed. + +OPTIONS + -e stat + execute statement stat. + + -i enter interactive mode after executing script. + + -l name + execute the equivalent of name=require('name') before ex‐ + ecuting script. + + -v show version information. + + -E ignore environment variables. + + -- stop handling options. + + - stop handling options and execute the standard input as a + file. + +SEE ALSO + luac(1) + The documentation at lua.org, especially section 7 of the refer‐ + ence manual. + +DIAGNOSTICS + Error messages should be self explanatory. + +AUTHORS + R. Ierusalimschy, L. H. de Figueiredo, W. Celes + </pre> + </div> + </div> +<!----------------------------------------------------------------------------> +<!-- Example --> +<!----------------------------------------------------------------------------> + <div id="content8" class="content old-scrollbar" style="width: 600px; height:400px; top: 50px; left:1180px;" > + + <div class="panel"> + + <div class="control-box icon-box"> + <a class="control-box-inner"></a> + </div> + + <div class="control-box close-box"> + <div class="control-box-inner"> + <div class="close-box-inner"></div> + </div> + </div> + + <div class="control-box maximize-box"> + <div class="control-box-inner"> + <div class="maximize-box-inner"></div> + </div> + </div> + + <h1 class="title">Xterm</h1> + </div> + <div class="inner" style=" background-color: black; color: white; font:monospace;" > + + <pre> +Tasks: 352 total, 1 running, 351 sleeping, 0 stopped, 0 zombie +%Cpu(s): 4,4 us, 4,4 sy, 0,0 ni, 89,7 id, 0,0 wa, 0,0 hi, 1,5 si, 0,0 st +MiB Mem : 11967,1 total, 643,1 free, 10429,0 used, 1514,7 buff/cache +MiB Swap: 11847,4 total, 6717,9 free, 5129,6 used. 1538,1 avail Mem + + PID USER PR NI VIRT RES SHR S %CPU %MEM TIME+ COMMAND + 1871 dron 20 0 5139512 328716 47316 S 27,3 2,7 26,30 cinnamon +1034893 dron 20 0 2494152 127996 99148 S 18,2 1,0 2:15.71 Isolated + 776804 dron 20 0 2850472 147612 74280 S 9,1 1,2 253:31.18 Isolated + 821534 dron 20 0 3707248 978860 128140 S 9,1 8,0 53:25.42 Isolated + 1 root 20 0 24536 8476 5692 S 0,0 0,1 1:10.59 ~~~~~~~~ + 2 root 20 0 0 0 0 S 0,0 0,0 0:02.53 kthreadd + 3 root 20 0 0 0 0 S 0,0 0,0 0:00.00 pool_wor + 4 root 0 -20 0 0 0 I 0,0 0,0 0:00.00 kworker/ + 5 root 0 -20 0 0 0 I 0,0 0,0 0:00.00 kworker/ + 6 root 0 -20 0 0 0 I 0,0 0,0 0:00.00 kworker/ + 7 root 0 -20 0 0 0 I 0,0 0,0 0:00.00 kworker/ + 8 root 0 -20 0 0 0 I 0,0 0,0 0:00.00 kworker/ + 13 root 0 -20 0 0 0 I 0,0 0,0 0:00.00 kworker/ + 14 root 20 0 0 0 0 I 0,0 0,0 0:00.00 rcu_task + 15 root 20 0 0 0 0 I 0,0 0,0 0:00.00 rcu_task + 16 root 20 0 0 0 0 I 0,0 0,0 0:00.00 rcu_task + 17 root 20 0 0 0 0 S 0,0 0,0 1:12.46 ksoftirq + 18 root 20 0 0 0 0 I 0,0 0,0 23:17.20 rcu_pree + 19 root 20 0 0 0 0 S 0,0 0,0 0:00.00 rcu_exp_ + 20 root 20 0 0 0 0 S 0,0 0,0 0:01.41 rcu_exp_ + 21 root rt 0 0 0 0 S 0,0 0,0 0:06.68 migratio + 22 root -51 0 0 0 0 S 0,0 0,0 0:00.00 idle_inj + 23 root 20 0 0 0 0 S 0,0 0,0 0:00.00 cpuhp/0 + 24 root 20 0 0 0 0 S 0,0 0,0 0:00.00 cpuhp/1 + 25 root -51 0 0 0 0 S 0,0 0,0 0:00.00 idle_inj + 26 root rt 0 0 0 0 S 0,0 0,0 0:07.61 migratio + 27 root 20 0 0 0 0 S 0,0 0,0 0:37.86 ksoftirq + 30 root 20 0 0 0 0 S 0,0 0,0 0:00.00 cpuhp/2 + </pre> + </div> + </div> +<!----------------------------------------------------------------------------> +<!-- Custom Override example --> +<!----------------------------------------------------------------------------> +<div id="content5" class="content old-scrollbar win-blue" style="top: 50px; left: 50px; width: 74px; height:74px; background-color:black;" > + <div class="inner draggable" style="background-color:white; overflow:hidden; " > + <img src="img/xclock.png" style="width:100%; height:100%;" alt="icon"/> + </div> + </div> +<!----------------------------------------------------------------------------> +<!-- Custom Override example --> +<!----------------------------------------------------------------------------> +<div id="content6" class="content old-scrollbar" style="top: 50px; left: 150px; width: 74px; height:74px; background-color:black;" > + <div class="inner draggable" style="background-color:black; overflow:hidden; " > + <img src="img/glxgears-icon.png" alt="icon"/> </div> </div> + + + + + + + + + + + + + + + + + + + + + + </body> </html>