892 lines
51 KiB
HTML
892 lines
51 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<title>Mabox Colorizer</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="./css/w3.css">
|
|
<style>
|
|
@font-face{
|
|
font-family: "Symbols";
|
|
src: url("/usr/share/fonts/TTF/Symbols-2048-em Nerd Font Complete.ttf") format("truetype");
|
|
}
|
|
body{
|
|
background-color:#222222;
|
|
color: #999999;
|
|
font-size: 1.6vw !important;
|
|
font-family: 'Symbols', sans-serif;
|
|
}
|
|
.dark{background-color:#191919;}
|
|
div.fixed {
|
|
position: fixed;
|
|
top: 4px;
|
|
right: 0;
|
|
width: 400px;
|
|
}
|
|
div.fixeddown {
|
|
position: fixed;
|
|
bottom:0;
|
|
left:0;
|
|
width:20%;
|
|
}
|
|
nav button.tablink {padding:3px 8px !important;width:94%;float:right;text-align:left;border-left:4px solid transparent;}
|
|
nav button.tablink:hover {background-color:#444444 !important;color:white !important;border-left:4px solid #222222;}
|
|
nav button.bg {background-color:#222222;color:white !important;border-left:4px solid #34BE5B !important;border-radius:4px 0 0 4px;}
|
|
hr {margin:0;border: 0;height: 1px;background-image: linear-gradient(to right, rgba(105, 105, 105, 0), rgba(105, 105, 105, 0.75), rgba(105, 105, 105, 0));}
|
|
div.fixed .bar-item {margin-right:4px; border-radius:4px;}
|
|
.third {padding: 0.01em 4px;}
|
|
.button {position:relative;}
|
|
.button .right {position:absolute; top:0; right:6px;}
|
|
main div.dark .button{min-width:8vw;border-radius:2px;}
|
|
section.tab {padding-top: 0;}
|
|
section#Colorizer {padding-top: 0.01em;}
|
|
#logoheader {padding:16px 0 12px 0;background-color:#111111;border-bottom:1px solid #444444;}
|
|
#logo {width:8vw;height:8vw;}
|
|
div.fixeddown p {margin:0;}
|
|
p#links a {text-decoration:none;margin:0 4px;font-size:2.4vw !important;}
|
|
#links {background-color:#111111;border-top:1px solid #444444;}
|
|
.link {cursor:pointer;}
|
|
.bar-block .btn {width: 100px;text-align:center;}
|
|
.bar-block .btn:hover {background-color:white;color:gray;}
|
|
.dropdown-content {min-width: 20px;}
|
|
a.tag {text-decoration:none; border:none;margin-bottom: 4px;border-radius:3px; padding:1px 6px;filter: brightness(0.8);}
|
|
a.tag:hover {text-decoration:none; border:none;margin-bottom: 4px;filter: brightness(1);}
|
|
.colors a.tag {border-radius:0;border:1px solid #333333;filter: brightness(1);}
|
|
.colors a.tag:hover {border:1px solid #EEEEEE;}
|
|
.attribs a.tag {margin-left:0;margin-right:1px;border:none;border-radius:0;filter: brightness(0.8);}
|
|
.attribs a.tag:hover {margin-left:0; margin-right:1px;border:none;border-radius:0;filter: brightness(1);}
|
|
kbd {
|
|
background-color: #eee;
|
|
border-radius: 3px;
|
|
border: 1px solid #b4b4b4;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
|
|
color: #333;
|
|
display: inline-block;
|
|
font-size: 0.85em;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 2px 4px;
|
|
white-space: nowrap;
|
|
}
|
|
.small {font-size: 1.5vw !important;}
|
|
.tiny {font-size: 1.25vw !important;}
|
|
h2 {font-size: 3vw !important;}
|
|
h3 {font-size: 2.4vw !important;}
|
|
h4 {font-size: 2.2vw !important;}
|
|
h5 {font-size: 2vw !important;border-bottom: 1px solid;padding-left: 1em;}
|
|
.large {width:3.2vw !important;height:2.4vw !important;font-size: 2.4vw !important;}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
|
grid-gap: .5em;
|
|
}
|
|
.grid + .grid {
|
|
margin-top: .5em;
|
|
}
|
|
.grid div {
|
|
border: 0 solid currentcolor;
|
|
border-radius: 4px;
|
|
/**min-height: 15vh;**/
|
|
padding: 1em;
|
|
/**color: #0178d4;
|
|
background-color:#191919;**/
|
|
font-size: 1em;
|
|
text-align: center;
|
|
/**display: flex;
|
|
flex-direction: column;**/
|
|
justify-content: center;
|
|
}
|
|
.gi2 {grid-column: span 2;}
|
|
.gi3 {grid-column: span 3;}
|
|
.gi4 {grid-column: span 4;}
|
|
.gi22 {
|
|
grid-column: span 2;
|
|
grid-row: span 2;
|
|
}
|
|
.gi2r{grid-row: span 2;}
|
|
.gi3r{grid-row: span 3;}
|
|
.gi4r{grid-row: span 4;}
|
|
|
|
</style>
|
|
<body>
|
|
|
|
<div class="sidebar bar-block" style="background-color:#333333;width:20%">
|
|
<div class="center" id="logoheader">
|
|
<svg id="logo" viewBox="0 0 128 128">
|
|
<polygon points="4,4 58,4 58,58 4,58" style="fill:#674EA7;stroke:white;stroke-width:4;fill-rule:nonzero;"/>
|
|
<polygon points="68,4 124,4 124,58 68,58" style="fill:#34BE5B;stroke:white;stroke-width:4;fill-rule:nonzero;"/>
|
|
<polygon points="4,68 58,68 58,124 4,124" style="fill:#FF8C00;stroke:white;stroke-width:4;fill-rule:nonzero;"/>
|
|
<polygon points="68,68 124,68 124,124 68,124" style="fill:#5e81ac;stroke:white;stroke-width:4;fill-rule:nonzero;"/>
|
|
</svg><br />
|
|
<span class="small">Colorizer</span>
|
|
</div>
|
|
<nav style="padding-top:8px;">
|
|
<button class="button small tablink bg" onclick="openTab(event, 'Colorizer')">Start</button>
|
|
<button class="button small tablink" onclick="openTab(event, 'Openbox')">Openbox Theme</button>
|
|
<button class="button small tablink" onclick="openTab(event, 'Conky')">Conky</button>
|
|
<button class="button small tablink" onclick="openTab(event, 'Jgmenu')">Menu/Sidepanels</button>
|
|
<button class="button small tablink" onclick="openTab(event, 'Tint2')">Tint2 Panel</button>
|
|
<button class="button small tablink" onclick="openTab(event, 'Wall2theme')">Wallpaper themes</button>
|
|
<button class="button small tablink" onclick="openTab(event, 'pyradiocava')"><i>Cava, PyRadio</i></button>
|
|
<button class="button small tablink" onclick="openTab(event, 'fonts')">Fonts</i></button>
|
|
<button class="button small tablink" onclick="openTab(event, 'Terminal')">Terminal theme</button>
|
|
<button class="button small tablink" onclick="openTab(event, 'Save')">Save and Restore</button>
|
|
</nav>
|
|
<div class="fixeddown">
|
|
<div class="center small" style="margin: 0 4px 4px 2px;">
|
|
<p><a class="tag small indigo" href="run://pcmanwp"> Wallpaper...</a> <a class="tag small indigo" href="run://mbwallpaper -o"></a></p>
|
|
<p><em>dynamic menus:</em></p>
|
|
<p>
|
|
<a class="tag small purple" href="run://colorizer -s"> Colorizer</a><br />
|
|
<a class="tag small amber" href="run://colorizer-ob -s"> Openbox</a>
|
|
<a class="tag small amber" href="run://colorizer-conky -s"> Conky</a>
|
|
<a class="tag small amber" href="run://colorizer-menus -s"> Menu</a>
|
|
<a class="tag small amber" href="run://colorizer-fonts -s"> Fonts</a><br />
|
|
<a class="tag small lime" href="run://colorizer-cava -s"> Cava</a>
|
|
<a class="tag small lime" href="run://colorizer-pyradio -s"> PyRadio</a>
|
|
</p>
|
|
</div>
|
|
<p id="links" class="center black">
|
|
<a href="https://maboxlinux.org" class="tooltip"><span class="text tag small round" style="position:absolute;left:-10px;bottom:26px">Mabox Website</span></a>
|
|
<a href="https://forum.maboxlinux.org" class="tooltip"><span class="text tag small round" style="position:absolute;left:-10px;bottom:26px">Community Forum</span></a>
|
|
<a href="https://manual.maboxlinux.org/en" class="tooltip"><span class="text tag small round" style="position:absolute;left:-10px;bottom:26px">Manual</span></a>
|
|
<a href="https://ko-fi.com/maboxlinux" class="tooltip"><span style="color:red"></span><span class="text tag small round" style="position:absolute;left:-10px;bottom:26px">Donate</span></a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-left:20%;" class="small">
|
|
|
|
<section id="Colorizer" class="container tab" style="min-height:100vh;">
|
|
|
|
<div class="display-container" style="min-height:90vh">
|
|
<img src="/usr/share/mabox-colorizer/img/colorizer.png" class="right"/>
|
|
<h2 class="center">Mabox Colorizer <span class="tiny">pre-release</span></h2>
|
|
<p class="center"><i>a set of tools to easily customize<br/>your Mabox Linux Desktop</i></p>
|
|
|
|
<p>Easily change look and feel of:
|
|
<ul>
|
|
<li><strong><span class="tag round tiny light-green link" onclick="openTab(event, 'Openbox')">Openbox theme</span></strong> (window decorations)</li>
|
|
<li><strong><span class="tag round tiny light-green link" onclick="openTab(event, 'Jgmenu')">Menu/Sidepanels</span></strong> and other <i>jgmenu-based</i> <strong>Mabox tools</strong></li>
|
|
<li><strong><span class="tag round tiny light-green link" onclick="openTab(event, 'Conky')">Conkies</span></strong></li>
|
|
<li><strong><span class="tag round tiny amber link" onclick="openTab(event, 'Wall2theme')">Generate themes</span></strong> for all above <strong>from Wallpaper colors</strong></li>
|
|
<!--<li><strong>PyRadio</strong> - Internet Radio Player</li>//-->
|
|
</ul></p>
|
|
<p class="center"> Try <strong>Randomizer</strong> to change themes quickly. You can securely reset to defaults at any time.</p>
|
|
<div class="row">
|
|
<div class="half container">
|
|
<div class="card round padding deep-purple"><span class="right xxlarge"></span><p><em>Quickly <strong>randomize</strong> <br />colorschemes for...</em></p>
|
|
<div class="bar-block grey"><a class="button bar-item tiny" href="run://randomizer ob">Openbox theme</a>
|
|
<a class="button bar-item tiny" href="run://randomizer menu show">Menu / Sidepanels</a>
|
|
<a class="button bar-item tiny" href="run://randomizer conky">Conkies</a>
|
|
<a class="button bar-item tiny hover-yellow" href="run://randomizer all show">All above</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="half container">
|
|
<div class="card round padding grey"><span class="right xxlarge"></span><p><em><strong>Reset</strong> to defaults...<br />(restore fresh install settings)</em></p>
|
|
<div class="bar-block dark-grey"><a class="button bar-item tiny" href="run://obtctl resetMBcolors">Openbox theme</a>
|
|
<a class="button bar-item tiny" href="run://jgctl resetMBcolors show">Menu / Sidepanels</a>
|
|
<a class="button bar-item tiny" href="run://conkyctl resetcolorsall">Conkies</a>
|
|
<a class="button bar-item tiny hover-yellow" href="run://randomizer resetall show">All above</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<p>Colorizer offers two modes of operation: basic and advanced.
|
|
<ul>
|
|
<li><strong>basic</strong> - you use this window - easy and fast</li>
|
|
<li><strong>advanced</strong> - using dynamically generated menus - more customization possibilities, unlimited choice of colors. Tuning.</li>
|
|
</ul>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
</section>
|
|
<section id="Openbox" class="container tab" style="display:none;min-height:100vh;">
|
|
<main class="grid">
|
|
<div class="gi4 gi4r left-align"><h2>Openbox window decoration</h2>
|
|
<p>The Openbox module allows you to easily customize the appearance of window decorations.</p>
|
|
<p>It works only with special theme - <strong>MBcolors</strong> <a class="tag round green tiny" href="run://obtctl theme MBcolors">switch to MBcolors</a></p>
|
|
<p><hr /></p>
|
|
<div class="pale-green leftbar border-green">
|
|
If you need a full set of options, precise color tuning and gradients - use the advanced dynamic menu<br />
|
|
<a class="button amber" href="run://colorizer-ob -s"> Openbox</a>
|
|
</div>
|
|
<p><hr /></p>
|
|
<strong>Size</strong> <em>presets</em><br />
|
|
<a class="tag small amber" href="run://obtctl tweak tiny">tiny</a>
|
|
<a class="tag small green" href="run://obtctl tweak small">small</a>
|
|
<a class="tag small pale-red" href="run://obtctl tweak normal">normal</a>
|
|
<a class="tag small green" href="run://obtctl tweak big">big</a>
|
|
<a class="tag small amber" href="run://obtctl tweak large">large</a>
|
|
|
|
<br />
|
|
|
|
|
|
|
|
</div>
|
|
<div class="gi2 dark"><span>Generate themes...</span></div>
|
|
<div class="gi2 dark"><strong>Monochrome</strong><br /><em>pick color from screen</em><br />
|
|
<a class="button padding-small dark-grey" href="run://obtctl mono pick dark"><span class="large"></span><br />Dark</a>
|
|
<a class="button padding-small grey" href="run://obtctl mono pick light"><span class="large"></span><br />Light</a>
|
|
<br />
|
|
</div>
|
|
<div class="gi2 dark"><strong>Wallpaper colors</strong><br /><em>choose variant</em><br />
|
|
<a class="button padding-small dark-grey" href="run://w2theme ob dark show"><span class="large"></span><br />Dark</a>
|
|
<a class="button padding-small grey" href="run://w2theme ob light show"><span class="large"></span><br />Light</a>
|
|
</div>
|
|
<div class="dark">
|
|
<a class="button padding-small amber" href="run://randomizer ob"><span class="large"></span><br />Random</a>
|
|
</div>
|
|
<div class="dark">
|
|
<a class="button padding-small teal hover-red" href="run://obtctl resetMBcolors"><span class="large"></span><br /> Reset </a>
|
|
</div>
|
|
</main>
|
|
<p><hr /></p>
|
|
<div class="show-inline-block">
|
|
<div class="bar border round dark-grey">
|
|
<div class="dropdown-hover">
|
|
<button class="button small border-right"> Window Border</button>
|
|
<div class="dropdown-content bar-block border dark-grey card">
|
|
<a class="bar-item btn" href="run://obtctl borderWidth 0">0</a>
|
|
<a class="bar-item btn" href="run://obtctl borderWidth 1">1</a>
|
|
<a class="bar-item btn" href="run://obtctl borderWidth 2">2</a>
|
|
<a class="bar-item btn" href="run://obtctl borderWidth 3">3</a>
|
|
<a class="bar-item btn" href="run://obtctl borderWidth 4">4</a>
|
|
<a class="bar-item btn" href="run://obtctl borderWidth 8">8</a>
|
|
</div>
|
|
</div>
|
|
<a class="bar-item btn hover-gray border-right" href="run://obtctl borderWidth increase">+</a>
|
|
<a class="bar-item btn hover-gray" href="run://obtctl borderWidth decrease">-</a>
|
|
</div>
|
|
</div>
|
|
<div class="show-inline-block">
|
|
<div class="bar border round dark-grey">
|
|
<div class="dropdown-hover">
|
|
<button class="button small border-right"> Title Padding</button>
|
|
<div class="dropdown-content bar-block border dark-grey card">
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 0">0</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 1">1</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 2">2</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 3">3</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 4">4</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 6">6</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 8">8</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 10">10</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 12">12</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 16">16</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl paddingHeight 20">20</a>
|
|
</div>
|
|
</div>
|
|
<a class="bar-item btn hover-gray border-right" href="run://obtctl paddingHeight increase">+</a>
|
|
<a class="bar-item btn hover-gray" href="run://obtctl paddingHeight decrease">-</a>
|
|
</div>
|
|
</div>
|
|
<div class="show-inline-block">
|
|
<div class="bar border round dark-grey">
|
|
<div class="dropdown-hover">
|
|
<button class="button small border-right">Title bar style</button>
|
|
<div class="dropdown-content bar-block border dark-grey card">
|
|
<a class="bar-item btn tiny" href="run://obtctl raised 1">raised</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl raised 0">flat</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl raised 2">sunken</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="show-inline-block">
|
|
<div class="bar border round dark-grey">
|
|
<div class="dropdown-hover">
|
|
<button class="button small border-right">Buttons</button>
|
|
<div class="dropdown-content bar-block border dark-grey card">
|
|
<a class="bar-item btn tiny" href="run://obtctl buttons tiny"><img src="./img/tiny.png">tiny</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl buttons normal"><img src="./img/normal.png">normal</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl buttons bold"><img src="./img/bold.png">bold</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl buttons dots"><img src="./img/dots.png">dots</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl buttons big-12">big 12px</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl buttons big-14">big 14px</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel display-container">Window title
|
|
<div class="display-topright medium colors"><span class="tiny">font color:</span>
|
|
<a class="tag " style="background-color:#FFFFFF" href="run://obtctl activetextcolor #FFFFFF"> </a>
|
|
<a class="tag " style="background-color:#BBBBBB" href="run://obtctl activetextcolor #BBBBBB"> </a>
|
|
<a class="tag " style="background-color:#60a917" href="run://obtctl activetextcolor #60a917"> </a>
|
|
<a class="tag " style="background-color:#a20025" href="run://obtctl activetextcolor #a20025"> </a>
|
|
<a class="tag " style="background-color:#e3c800" href="run://obtctl activetextcolor #e3c800"> </a>
|
|
<a class="tag " style="background-color:#222222" href="run://obtctl activetextcolor #333333"> </a>
|
|
<a class="tag " style="background-color:#000000" href="run://obtctl activetextcolor #000000"> </a>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- FONT FAMILY AND SIZE //-->
|
|
<div class="show-inline-block">
|
|
<div class="bar border round dark-grey">
|
|
<a class="bar-item btn hover-gray border-right" href="run://mb-setfont obtitle">font family</a>
|
|
<div class="dropdown-hover">
|
|
<button class="button small border-right">size</button>
|
|
<div class="dropdown-content bar-block border dark-grey card">
|
|
<a class="bar-item btn tiny" href="run://obtctl fontsize 8">8</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl fontsize 9">9</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl fontsize 10">10</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl fontsize 11">11</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl fontsize 12">12</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl fontsize 13">13</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl fontsize 14">14</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl fontsize 15">15</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl fontsize 16">16</a>
|
|
</div>
|
|
</div>
|
|
<a class="bar-item btn hover-gray border-right" href="run://obtctl fontsize increase">+</a>
|
|
<a class="bar-item btn hover-gray" href="run://obtctl fontsize decrease">-</a>
|
|
</div>
|
|
</div>
|
|
<!-- WEIGHT AND SLANT: BOLD ITALIC //-->
|
|
<div class="show-inline-block">
|
|
<div class="bar border round dark-grey">
|
|
<a class="bar-item btn hover-gray border-right" href="run://obtctl fontweighttoggle"></a>
|
|
<a class="bar-item btn hover-gray" href="run://obtctl fontslanttoggle"></a>
|
|
</div>
|
|
</div>
|
|
<!-- TEXT JUSTIFY //-->
|
|
<div class="show-inline-block">
|
|
<div class="bar border round dark-grey">
|
|
<a class="bar-item btn hover-gray border-right" href="run://obtctl textjustify left"></a>
|
|
<a class="bar-item btn hover-gray border-right" href="run://obtctl textjustify center"></a>
|
|
<a class="bar-item btn hover-gray" href="run://obtctl textjustify right"></a>
|
|
</div>
|
|
</div>
|
|
<!-- SHADOW EFFECT //-->
|
|
<div class="show-inline-block">
|
|
<div class="bar border round">
|
|
<div class="dropdown-hover dark-grey">
|
|
<button class="button small">shadow</button>
|
|
<div class="dropdown-content bar-block border dark-grey card">
|
|
<a class="bar-item btn tiny" href="run://obtctl shadow 0">no shadow</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl shadow 1">dark</a>
|
|
<a class="bar-item btn tiny" href="run://obtctl shadow 2">light</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row margin-top">
|
|
<div class="col m5 black round">
|
|
<p class="center">Title bar color</p>
|
|
<p class="center">for active window</p>
|
|
<div class="center padding colors">
|
|
<a class="tag large" style="background-color:#DDDDDD" href="run://obtctl clractivebg #DDDDDD"> </a>
|
|
<a class="tag large" style="background-color:#a4c400" href="run://obtctl clractivebg #a4c400"> </a>
|
|
<a class="tag large" style="background-color:#60a917" href="run://obtctl clractivebg #60a917"> </a>
|
|
<a class="tag large" style="background-color:#008a00" href="run://obtctl clractivebg #008a00"> </a>
|
|
<a class="tag large" style="background-color:#00aba9" href="run://obtctl clractivebg #00aba9"> </a>
|
|
<a class="tag large" style="background-color:#1ba1e2" href="run://obtctl clractivebg #1ba1e2"> </a>
|
|
<a class="tag large" style="background-color:#3e65ff" href="run://obtctl clractivebg #3e65ff"> </a>
|
|
<a class="tag large" style="background-color:#0050ef" href="run://obtctl clractivebg #0050ef"> </a>
|
|
<a class="tag large" style="background-color:#6a00ff" href="run://obtctl clractivebg #6a00ff"> </a>
|
|
<a class="tag large" style="background-color:#aa00ff" href="run://obtctl clractivebg #aa00ff"> </a>
|
|
<a class="tag large" style="background-color:#f472d0" href="run://obtctl clractivebg #f472d0"> </a>
|
|
<a class="tag large" style="background-color:#d80073" href="run://obtctl clractivebg #d80073"> </a>
|
|
<a class="tag large" style="background-color:#a20025" href="run://obtctl clractivebg #a20025"> </a>
|
|
<a class="tag large" style="background-color:#e51400" href="run://obtctl clractivebg #e51400"> </a>
|
|
<a class="tag large" style="background-color:#fa6800" href="run://obtctl clractivebg #fa6800"> </a>
|
|
<a class="tag large" style="background-color:#f0a30a" href="run://obtctl clractivebg #f0a30a"> </a>
|
|
<a class="tag large" style="background-color:#e3c800" href="run://obtctl clractivebg #e3c800"> </a>
|
|
<a class="tag large" style="background-color:#825a2c" href="run://obtctl clractivebg #825a2c"> </a>
|
|
<a class="tag large" style="background-color:#6d8764" href="run://obtctl clractivebg #6d8764"> </a>
|
|
<a class="tag large" style="background-color:#647687" href="run://obtctl clractivebg #647687"> </a>
|
|
<a class="tag large" style="background-color:#76608a" href="run://obtctl clractivebg #76608a"> </a>
|
|
<a class="tag large" style="background-color:#87794e" href="run://obtctl clractivebg #87794e"> </a>
|
|
<a class="tag large" style="background-color:#a0522d" href="run://obtctl clractivebg #a0522d"> </a>
|
|
<a class="tag large" style="background-color:#222222" href="run://obtctl clractivebg #222222"> </a>
|
|
<p><a class="tag dark-gray" href="run://mbclr pixelcolor obtctl clractivebg"><big></big> Pick from screen</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="col m1"> </div>
|
|
<div class="col black m6 round">
|
|
<p class="center">Gradient type</p>
|
|
<p class="center">
|
|
<a href="run://obtctl gradient_type solid"><img src="./img/solid.png"></a>
|
|
<a href="run://obtctl gradient_type vertical"><img src="./img/vertical.png"></a>
|
|
<a href="run://obtctl gradient_type horizontal"><img src="./img/horizontal.png"></a>
|
|
<a href="run://obtctl gradient_type mirrorhorizontal"><img src="./img/mirrorhorizontal.png"></a>
|
|
<a href="run://obtctl gradient_type splitvertical"><img src="./img/splitvertical.png"></a>
|
|
<a href="run://obtctl gradient_type diagonal"><img src="./img/diagonal.png"></a>
|
|
<a href="run://obtctl gradient_type crossdiagonal"><img src="./img/crossdiagonal.png"></a>
|
|
<a href="run://obtctl gradient_type pyramid"><img src="./img/pyramid.png"></a>
|
|
</p>
|
|
<p class="padding">More than 300 beautifull pre-defined gradients are available from Colorizer OBtheme menu.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
<section id="Jgmenu" class="container tab" style="display:none;min-height:100vh">
|
|
<main class="grid">
|
|
<div class="gi4 gi4r left-align"><h2>Menu / Side panels</h2>
|
|
<p>Menu / Side panels and numerous Mabox tools were created based on jgmenu. You can easily adapt them to your needs - both <strong>appearance</strong> and <strong>functionality</strong></p>
|
|
<br />
|
|
<p><hr /></p>
|
|
<div class="pale-red leftbar border-red">
|
|
After each change, the menu will be shown.<br />
|
|
Use <kbd>Esc</kbd> or click outside the menu to close it!
|
|
</div>
|
|
|
|
<p><hr /></p>
|
|
<div class="pale-green leftbar border-green">
|
|
If you need a full set of options, precise color tuning and transparency - use the advanced dynamic menu<br />
|
|
<a class="button small amber" href="run://colorizer-menus -s"> Menu</a>
|
|
</div>
|
|
</div>
|
|
<div class="gi2 dark"><span>Generate themes...</span></div>
|
|
<div class="gi2 dark"><strong>Monochrome</strong><br /><em>pick color from screen</em><br />
|
|
<a class="button padding-small dark-grey" href="run://jgctl mono pick dark"><span class="large"></span><br />Dark</a>
|
|
<a class="button padding-small grey" href="run://jgctl mono pick light"><span class="large"></span><br />Light</a>
|
|
<br />
|
|
</div>
|
|
<div class="gi2 dark"><strong>Wallpaper colors</strong><br /><em>choose variant</em><br />
|
|
<a class="button padding-small dark-grey" href="run://w2theme menu dark show"><span class="large"></span><br />Dark</a>
|
|
<a class="button padding-small grey" href="run://w2theme menu light show"><span class="large"></span><br />Light</a>
|
|
</div>
|
|
<div class="dark">
|
|
<a class="button padding-small amber" href="run://randomizer menu show"><span class="large"></span><br />Random</a>
|
|
</div>
|
|
<div class="dark">
|
|
<a class="button padding-small teal hover-red" href="run://jgctl resetMBcolors show"><span class="large"></span><br /> Reset </a>
|
|
</div>
|
|
</main>
|
|
<p><hr /></p>
|
|
<main class="grid" style="grid-template-columns: auto auto auto;">
|
|
<div class="dark"><strong>Menu size</strong> <em>presets</em><br />
|
|
<a class="tag small amber" href="run://jgctl tweak sizing tight menu">tight</a>
|
|
<a class="tag small pale-red" href="run://jgctl tweak sizing normal menu">normal</a>
|
|
<a class="tag small green" href="run://jgctl tweak sizing wide menu">wide</a>
|
|
</div>
|
|
<div class="gi2 gi2r attribs dark">
|
|
<strong>Padding</strong>
|
|
<p>
|
|
<a class="tag dark-grey" href="run://jgctl padding 0">0</a><a class="tag dark-grey" href="run://jgctl padding 1">1</a><a class="tag dark-grey" href="run://jgctl padding 2">2</a><a class="tag dark-grey" href="run://jgctl padding 3">3</a><a class="tag dark-grey" href="run://jgctl padding 4">4</a><a class="tag dark-grey" href="run://jgctl padding 6">6</a><a class="tag dark-grey" href="run://jgctl padding 8">8</a><a class="tag dark-grey" href="run://jgctl padding 12">12</a><a class="tag dark-grey" href="run://jgctl padding 16">16</a><a class="tag dark-grey" href="run://jgctl padding 20">20</a>
|
|
</p>
|
|
<hr />
|
|
<strong>Menu Border</strong>
|
|
<p><a class="tag dark-grey" href="run://jgctl border 0">0</a><a class="tag dark-grey" href="run://jgctl border 1">1</a><a class="tag dark-grey" href="run://jgctl border 2">2</a><a class="tag dark-grey" href="run://jgctl border 3">3</a><a class="tag dark-grey" href="run://jgctl border 4">4</a><a class="tag dark-grey" href="run://jgctl border 6">6</a><a class="tag dark-grey" href="run://jgctl border 8">8</a><a class="tag dark-grey" href="run://jgctl border 12">12</a>
|
|
</p>
|
|
<hr />
|
|
<strong>Submenu spacing</strong>
|
|
<p><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=-20">-20</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=-16">-16</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=-10">-10</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=-6">-6</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=-2">-2</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=0">0</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=1">1</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=2">2</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=4">4</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=8">8</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=12">12</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=16">16</a><a class="tag dark-grey" href="menu://mb-setvar submenu_spacing=20">20</a></p>
|
|
<hr />
|
|
<strong>Item height</strong>
|
|
<p><a class="tag dark-grey" href="menu://mb-setvar item_height_factor=160">80%</a><a class="tag dark-grey" href="menu://mb-setvar item_height_factor=180">90%</a><a class="tag dark-grey" href="menu://mb-setvar item_height_factor=200">100%</a><a class="tag dark-grey" href="menu://mb-setvar item_height_factor=220">110%</a><a class="tag dark-grey" href="menu://mb-setvar item_height_factor=240">120%</a><a class="tag dark-grey" href="menu://mb-setvar item_height_factor=280">140%</a></p>
|
|
</div>
|
|
<div class="dark">
|
|
<a class="tag small purple" href="run://mb-jgtools main ipc"> Main menu</a> settings<br />
|
|
<p class="dark-gray"><kbd>Super</kbd> key, <i>left-click</i> on desktop or from Mabox icon in panel</p>
|
|
<p class="left-align">
|
|
<a class="tag small purple" href="run://jgctl t_search_field"></a> Search field<br />
|
|
<a class="tag small purple" href="run://jgctl t_apps_in_submenu"></a> Apps in rootmenu (or submenu)
|
|
<a class="tag small purple" href="run://jgctl t_icons"></a> Icons<br />
|
|
</p>
|
|
<hr />
|
|
<strong>Edit commands</strong>
|
|
<p>
|
|
<a class="tag small amber" href="config://.config/mabox/favorites.csv"> on top (Favorites)</a>
|
|
<a class="tag small amber" href="config://.config/mabox/mainmenu_below_apps.csv"> on bottom</a><br /></p>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section id="Conky" class="container tab" style="display:none;min-height:100vh;">
|
|
<main class="grid">
|
|
<div class="gi4 gi4r left-align"><h2>Conky</h2>
|
|
<p>Mabox provides several Conky configurations. <i>click names below to toggle</i></p>
|
|
<p class="center">
|
|
System Info<br />
|
|
<a class="tag small teal" href="run://conkyctl toggleone sysinfo_mbcolor">Default</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone sysinfo_graph">with Graph</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone mabox_info">Mini</a><br />
|
|
<a class="tag small teal" href="run://conkyctl toggleone CPU">CPU</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone RAM">RAM</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone mount_points">Discs</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone Network">Network</a><br />
|
|
Educational</br />
|
|
<a class="tag small teal" href="run://conkyctl toggleone shortcuts_mbcolor">Shortcuts</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone PCmanFM">PCmanFM</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone tiling_terminal">Terminal</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone mabox_tools_">Mabox Tools</a><br />
|
|
Clock and others<br />
|
|
<a class="tag small teal" href="run://conkyctl toggleone clock_mbcolor">Clock</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone clock_and_date">Clock and Date</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone quoter_">Quotes</a>
|
|
<a class="tag small teal" href="run://conkyctl toggleone logo_">Logo</a>
|
|
</p>
|
|
<p><hr /></p>
|
|
<div class="pale-green leftbar border-green">
|
|
For more options use dynamic menu <a class="button amber" href="run://colorizer-conky -s"> Conky Manager & Colorizer</a>
|
|
</div>
|
|
</div>
|
|
<div class="gi2 dark"><span>Generate themes...</span></div>
|
|
<div class="gi2 dark"><strong>Monochrome</strong><br /><em>pick color from screen</em><br />
|
|
<a class="button padding-small dark-grey" href="run://conkyctl mono pick dark"><span class="large"></span><br />Dark</a>
|
|
<a class="button padding-small grey" href="run://conkyctl mono pick light"><span class="large"></span><br />Light</a>
|
|
<br />
|
|
</div>
|
|
<div class="gi2 dark"><strong>Wallpaper colors</strong><br /><em>choose variant</em><br />
|
|
<a class="button padding-small dark-grey" href="run://w2theme conky dark show"><span class="large"></span><br />Dark</a>
|
|
<a class="button padding-small grey" href="run://w2theme conky light show"><span class="large"></span><br />Light</a>
|
|
</div>
|
|
<div class="dark">
|
|
<a class="button padding-small amber" href="run://randomizer conky"><span class="large"></span><br />Random</a>
|
|
</div>
|
|
<div class="dark">
|
|
<a class="button padding-small teal hover-red" href="run://conkyctl resetcolorsall"><span class="large"></span><br /> Reset </a>
|
|
</div>
|
|
</main>
|
|
<p><hr /></p>
|
|
|
|
<p>Conky in Mabox has been equipped with additional powers not available in any other Linux distribution!</p>
|
|
<h5>Easy on screen arranging</h5>
|
|
<p>
|
|
<a class="tag small black" href="run://conkyctl makemoveableall"> Make Moveable all </a> and change Conkys position by dragging one by one. (Hold <kbd>Alt</kbd> while dragging)
|
|
</p>
|
|
<h5>Right mouse click for customization context menu</h5>
|
|
<p>Click <strong>right mouse button</strong> on any Conky for <strong>context menu</strong>, which allows you to:
|
|
<ul>
|
|
<li>apply one of the ready-made color themes for the selected Conky</li>
|
|
<li>set text colors, borders, shadow or outline effects</li>
|
|
<li>manually change the background color or make it transparent</li>
|
|
<li>disable (kill), reload or edit Conky</li>
|
|
<li>add or edit custom commands for left click (see below)</li>
|
|
</ul>
|
|
</p>
|
|
<h5>Own command(s) Launcher (or menu) on left click on Conky</h5>
|
|
<p>You can add <strong>your own commands</strong> to each Conky, which will be shown on <strong>left mouse click</strong>.</p>
|
|
<p>To edit commands, right-click on a single Conky and select -> <strong>Edit cmd...</strong> from the menu.</p>
|
|
<p>If only one command is defined, Conky will act like a launcher (icon) - firing up command immediately after left click.
|
|
If you add more commands, a menu will be shown.</p>
|
|
|
|
<p><a class="tag small teal" href="run://conkyctl toggleone sysinfo_mbcolor">Default</a> and <a class="tag small teal" href="run://conkyctl toggleone logo_">Logo</a> Conky already have predefined commands, left-click on them to see this feature in action.</p>
|
|
<p>Syntax for adding commands is very simple, see blog post: <a href="https://blog.maboxlinux.org/how-to-add-custom-commands-to-menu-and-sidepanels/">How to add custom commands to Menu and SidePanels</a></p>
|
|
<h5>Tips</h5>
|
|
|
|
<div class="panel dark-grey rightbar border-black border">
|
|
<p>Click actions on any Conky:</p>
|
|
<p><kbd>right click</kbd> to access <strong>context menu</strong></p>
|
|
<p><kbd>left click</kbd> to <strong>run command</strong> or <strong>show menu</strong> (if defined)</p>
|
|
<p><kbd>Super</kbd> + <kbd>left click</kbd> will make all Conkies moveable</p>
|
|
<p>Global shortcut:</p>
|
|
<p><kbd>Super</kbd> + <kbd>C</kbd> - <strong>toggle Conky session</strong> - start/stop all Conkies</p>
|
|
</div>
|
|
|
|
</section>
|
|
<section id="Wall2theme" class="container tab" style="display:none;min-height:100vh;">
|
|
<h2>Generating themes from wallpaper</h2>
|
|
<div class="row">
|
|
<div class="twothird">
|
|
<p>Colorizer generates a color palette based on the currently set wallpaper</p>
|
|
<p>Based on such a color palette, it is possible to use two versions of themes (dark and light) for:
|
|
<ul>
|
|
<li>OpenBox window decoration</li>
|
|
<li>Menus, Panels</li>
|
|
<li>Conky</li>
|
|
</ul>
|
|
</p>
|
|
<p>Try how it works...</p>
|
|
</div>
|
|
|
|
<div class="third">
|
|
<div class="card round padding deep-purple"><span class="right xxlarge"></span>
|
|
<p><br /><strong>Set Wallpaper</strong></p>
|
|
<div class="bar-block grey">
|
|
<a class="button bar-item tiny" href="run://pcmanwp">Select</a>
|
|
<a class="button bar-item tiny" href="run://nitrogen --random /usr/share/backgrounds --set-scaled --save">Random System Wallpaper</a>
|
|
<a class="button bar-item tiny" href="run://nitrogen --random wallpapers --set-scaled --save">Random User Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="third">
|
|
<div class="card round padding dark-grey"><span class="right xxlarge"> </span>
|
|
<p><br /><strong>Window decorations</strong></p>
|
|
<div class="bar-block grey">
|
|
<a class="button bar-item tiny" href="run://w2theme ob dark">Dark</a>
|
|
<a class="button bar-item tiny" href="run://w2theme ob light">Light</a>
|
|
|
|
</div>
|
|
<div class="bar-block grey" style="margin-top:1px;">
|
|
<a class="button bar-item tiny hover-green" href="run://colorizer-ob -s"><span class="right large"> </span> Customize</a>
|
|
</div>
|
|
<div class="bar-block grey" style="margin-top:1px;">
|
|
<a class="button bar-item tiny hover-red" href="run://obtctl resetonlycolors"><span class="right large"></span >Reset</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="third">
|
|
<div class="card round padding blue-gray"><span class="right xxlarge"></span>
|
|
<p><br /><strong>Menu, Panels</strong></p>
|
|
<div class="bar-block grey">
|
|
<a class="button bar-item tiny" href="run://w2theme menu dark show">Dark</a>
|
|
<a class="button bar-item tiny" href="run://w2theme menu light show">Light</a>
|
|
</div>
|
|
<div class="bar-block grey" style="margin-top:1px;">
|
|
<a class="button bar-item tiny hover-green" href="run://colorizer-menus -s"><span class="right large"> </span> Customize</a>
|
|
</div>
|
|
<div class="bar-block grey" style="margin-top:1px;">
|
|
<a class="button bar-item tiny hover-red" href="run://jgctl resetMBcolors show"><span class="right large"></span>Reset</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="third">
|
|
<div class="card round padding brown"><span class="right xxlarge"></span>
|
|
<p><br/><strong>Conky</strong></p>
|
|
<div class="bar-block grey">
|
|
<a class="button bar-item tiny" href="run://w2theme conky dark">Dark</a>
|
|
<a class="button bar-item tiny" href="run://w2theme conky light">Light</a>
|
|
</div>
|
|
<div class="bar-block grey" style="margin-top:1px;">
|
|
<a class="button bar-item tiny hover-green" href="run://colorizer-conky -s"><span class="right large"> </span> Customize</a>
|
|
</div>
|
|
<div class="bar-block grey" style="margin-top:1px;">
|
|
<a class="button bar-item tiny hover-red" href="run://conkyctl resetcolorsall"><span class="right large"></span >Reset</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h5>How to change wallpaper in Mabox?</h5>
|
|
<p>The recommended method is to use the context menu in the file manager.</p>
|
|
<p>Click <a class="tag small amber" href="run://pcmanwp"> Select wallpaper</a> - the file manager will be launched with all defined wallpaper directories in tabs. Use the context menu to set the selected wallpaper.
|
|
<kbd>Ctrl + 3</kbd> allows you to change the view mode to Thumbnails</p>
|
|
<p>You can define multiple directories where you store wallpapers<br />
|
|
<a class="tag small amber" href="config://.config/mabox/wallp_dirs.conf"> Configure directories</a></p>
|
|
</section>
|
|
<section id="fonts" class="container tab" style="display:none;min-height:100vh">
|
|
<div class="fixed">
|
|
<div class="bar">
|
|
<a class="button bar-item small grey hover-amber right" href="run://colorizer-fonts -s"> Fonts - dynamic menu</a>
|
|
</div>
|
|
</div>
|
|
<h2>Fonts</h2>
|
|
<p> To set fonts for Openbox window decorations, GTK, Conky and Menu/Panels...<br />
|
|
use dynamic menu <a class="button amber" href="run://colorizer-fonts -s"> Fonts</a>
|
|
</p>
|
|
|
|
</section>
|
|
<section id="pyradiocava" class="container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed">
|
|
<div class="bar">
|
|
<a class="button bar-item small grey hover-amber right" href="run://colorizer-cava -s"> Colorizer Cava</a>
|
|
</div>
|
|
</div>
|
|
<h3>Cava - Audio Visualizer</h3>
|
|
<p><strong>Cava</strong> is a bar spectrum audio visualizer for terminal.<br />
|
|
In Mabox you can easily run Cava in a transparent* terminal - which gives an interesting effect...</p>
|
|
<p><a class="tag small amber" href="run://mb-music cavastart"> Start</a>
|
|
<a class="tag small red" href="run://mb-music cavakill"> Kill</a>
|
|
<a class="tag small green" href="run://cavactl info"> Info</a> </p>
|
|
<p>*) compositor is required for transparency, toggle <a class="tag small purple" href="run://compton_toggle"> Picom</a></p>
|
|
|
|
<div class="row-padding stretch">
|
|
<div class="third center colors">
|
|
<p><strong>Color</strong></p>
|
|
<a class="tag large" style="background-color:#DDDDDD" href="run://cavactl foreground #DDDDDD"> </a>
|
|
<a class="tag large" style="background-color:#a4c400" href="run://cavactl foreground #a4c400"> </a>
|
|
<a class="tag large" style="background-color:#60a917" href="run://cavactl foreground #60a917"> </a>
|
|
<a class="tag large" style="background-color:#008a00" href="run://cavactl foreground #008a00"> </a>
|
|
<a class="tag large" style="background-color:#00aba9" href="run://cavactl foreground #00aba9"> </a>
|
|
<a class="tag large" style="background-color:#1ba1e2" href="run://cavactl foreground #1ba1e2"> </a>
|
|
<a class="tag large" style="background-color:#3e65ff" href="run://cavactl foreground #3e65ff"> </a>
|
|
<a class="tag large" style="background-color:#0050ef" href="run://cavactl foreground #0050ef"> </a>
|
|
<a class="tag large" style="background-color:#6a00ff" href="run://cavactl foreground #6a00ff"> </a>
|
|
<a class="tag large" style="background-color:#aa00ff" href="run://cavactl foreground #aa00ff"> </a>
|
|
<a class="tag large" style="background-color:#f472d0" href="run://cavactl foreground #f472d0"> </a>
|
|
<a class="tag large" style="background-color:#d80073" href="run://cavactl foreground #d80073"> </a>
|
|
<a class="tag large" style="background-color:#a20025" href="run://cavactl foreground #a20025"> </a>
|
|
<a class="tag large" style="background-color:#e51400" href="run://cavactl foreground #e51400"> </a>
|
|
<a class="tag large" style="background-color:#fa6800" href="run://cavactl foreground #fa6800"> </a>
|
|
<a class="tag large" style="background-color:#f0a30a" href="run://cavactl foreground #f0a30a"> </a>
|
|
<a class="tag large" style="background-color:#e3c800" href="run://cavactl foreground #e3c800"> </a>
|
|
<a class="tag large" style="background-color:#825a2c" href="run://cavactl foreground #825a2c"> </a>
|
|
<a class="tag large" style="background-color:#6d8764" href="run://cavactl foreground #6d8764"> </a>
|
|
<a class="tag large" style="background-color:#647687" href="run://cavactl foreground #647687"> </a>
|
|
<a class="tag large" style="background-color:#76608a" href="run://cavactl foreground #76608a"> </a>
|
|
<a class="tag large" style="background-color:#87794e" href="run://cavactl foreground #87794e"> </a>
|
|
<a class="tag large" style="background-color:#a0522d" href="run://cavactl foreground #a0522d"> </a>
|
|
<a class="tag large" style="background-color:#222222" href="run://cavactl foreground #222222"> </a>
|
|
<p><a class="tag dark-gray" href="run://mbclr pixelcolor cavactl foreground"><big></big> Pick from screen</a></p>
|
|
</div>
|
|
<!--<div class="col m1 center">
|
|
<p> </p>
|
|
|
|
</div>//-->
|
|
<div class="third center dark colors">
|
|
<p><strong>Bar width (px)</strong></p>
|
|
<p>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 1">1</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 2">2</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 3">3</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 4">4</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 5">5</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 6">6</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 8">8</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 10">10</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 12">12</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 16">16</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_width 20">20</a>
|
|
</p>
|
|
<p><strong>Spacing (px)</strong></p>
|
|
<p>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 0">0</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 1">1</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 2">2</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 3">3</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 4">4</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 5">5</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 6">6</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 8">8</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 10">10</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 12">12</a>
|
|
<a class="tag dark-gray" href="run://cavactl bar_spacing 16">16</a>
|
|
</p>
|
|
</div>
|
|
<!--<div class="col m1 center">
|
|
<p> </p>
|
|
</div>//-->
|
|
<div class="col m4 center colors">
|
|
<p><strong>Height (px)</strong></p>
|
|
width: 100%
|
|
<p><a class="tag dark-gray" href="run://mb-music cavastart 50 full">50</a> <a class="tag dark-gray" href="run://mb-music cavastart 100 full">100</a> <a class="tag dark-gray" href="run://mb-music cavastart 200 full">200</a></p>
|
|
width: 50%
|
|
<p><a class="tag dark-gray" href="run://mb-music cavastart 50 half">50</a> <a class="tag dark-gray" href="run://mb-music cavastart 100 half">100</a> <a class="tag dark-gray" href="run://mb-music cavastart 200 half">200</a></p>
|
|
</div>
|
|
</div>
|
|
<p>Use dynamic menu <a class="tag small orange" href="run://colorizer-cava -s"> Cava</a> to fine-tune colors, use gradients.</p>
|
|
<div class="panel dark-grey rightbar border-black border" style="margin-top:-2px;">
|
|
<p><a class="tag teal" href="run://mb-music -s"> Music & Sound</a> dynamic menu can serve as basic, lightweight music player (mpv-based) you might like to try. <i>Also available from panel's volume icon - right click</i></p>
|
|
</div>
|
|
|
|
<h3>PyRadio - Internet Radio</h3>
|
|
|
|
<div class="row">
|
|
<div class="twothird">
|
|
<p>PyRadio is advanced command line internet radio player.</p>
|
|
<p>You can turn on <strong>PyRadio</strong> <kbd>super</kbd>+<kbd>r</kbd></p>
|
|
<p>Colorizer can generate pyradio themes based on palette of currently used wallpaper.</p>
|
|
<p>Use Colorizer <a class="tag small orange" href="run://colorizer-pyradio -s"> PyRadio module </a> to fine-tune colors.</p>
|
|
</div>
|
|
|
|
<div class="third">
|
|
<div class="card round padding teal"><span class="right xxlarge"></span>
|
|
<p><br /><strong>PyRadio</strong></p>
|
|
<div class="bar-block grey">
|
|
<a class="button bar-item tiny" href="run://w2theme pyradio dark">Dark</a>
|
|
<a class="button bar-item tiny" href="run://w2theme pyradio light">Bright</a>
|
|
</div>
|
|
<div class="bar-block grey" style="margin-top:1px;">
|
|
<a class="button bar-item tiny hover-green" href="run://colorizer-pyradio -s"><span class="right large"> </span> Customize</a>
|
|
</div>
|
|
<div class="bar-block grey" style="margin-top:1px;">
|
|
<a class="button bar-item tiny hover-red" href="run://prtctl resettheme"><span class="right large"></span>Reset</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="Terminal" class="container tab" style="display:none;min-height:100vh">
|
|
<div class="fixed">
|
|
<div class="bar">
|
|
<a class="button bar-item small grey hover-amber right" href="termo://theme.sh -i2"> Terminal theme selector</a>
|
|
</div>
|
|
</div>
|
|
<h2>Terminal theme</h2>
|
|
<p>Mabox comes with many terminal themes available (~400)</p>
|
|
<p>The interactive selector will help you find a suitable theme (<kbd>Enter</kbd>/<kbd>Esc</kbd> - use selected theme, <kbd>Ctrl</kbd>+<kbd>c</kbd> - cancel)</p>
|
|
<p>You can run terminal theme selector any time from cli by <strong>th</strong> alias</p>
|
|
<h5>Different colors for root and SSH sessions</h5>
|
|
<img src="img/theme.sh.webp" />
|
|
<p>To change theme for <strong>ssh</strong> and <strong>root sessions</strong> edit <tt>~/.bashrc</tt></p>
|
|
<h5>Terminator and Quake-like terminal</h5>
|
|
<p>Terminator is default terminal in Mabox. Use <kbd>super + t</kbd> to run it in normal window or <kbd>F12</kbd> to start as quake-terminal (press <kbd>F12</kbd> again to show/hide it).</p>
|
|
<p>Terminator is a tiling terminal. You can run <a class="tag small teal" href="run://conkyctl toggleone tiling_terminal">educational Conky</a> showing you some shortcuts useful when working with terminator.</p>
|
|
</section>
|
|
|
|
<section id="Tint2" class="container tab" style="display:none;min-height:100vh;">
|
|
<h2>Tint2 panel</h2>
|
|
<p>Colorizer module for Tint2 panel is not available yet - currently in <strong>active development!</strong></p>
|
|
<p class="center"><em>You can support development if you like...</em></p><p class="center"><a class="button blue hover-indigo" href="https://ko-fi.com/maboxlinux"><span class="large"> </span> Buy me a coffee</a></p>
|
|
<p>For now... use quite powerfull Tint2 config menu.</p>
|
|
<p><a class="button inline round small lime hover-yellow " href="run://jgtint2-pipe -s"> Tint2 configuration menu</a></p>
|
|
|
|
<p><a class="button inline round small lime hover-yellow" href="run://jgtint2launcher -s"> Add/Remove Launchers to panel</a></p>
|
|
</section>
|
|
|
|
<section id="Save" class="container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed"><a class="button round small lime hover-yellow margin display-topright" href="run://mb-obthemes"> Theme Manager</a></div>
|
|
<h2>Save and Restore</h2>
|
|
<p>If you are satisfied with your configuration, you can save it as a meta-theme so that you can restore it later.</p>
|
|
<p>Theme Manager will save:
|
|
<ul>
|
|
<li>Openbox Theme (window decoration)</li>
|
|
<li>GTK and Icon Theme</li>
|
|
<li>Wallpaper</li>
|
|
<li>Conkies</li>
|
|
<li>Terminal theme</li>
|
|
<li>Menu / Sidepanels colors</li>
|
|
<li>Tint2 panel</li>
|
|
</ul>
|
|
</p><a class="button round small lime hover-yellow margin" href="run://mb-obthemes"> Theme Manager</a>
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function openTab(evt, tabName) {
|
|
var i, x, tablinks;
|
|
x = document.getElementsByClassName("tab");
|
|
for (i = 0; i < x.length; i++) {
|
|
x[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tablink");
|
|
for (i = 0; i < x.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" bg", "");
|
|
}
|
|
document.getElementById(tabName).style.display = "block";
|
|
evt.currentTarget.className += " bg";
|
|
}
|
|
function myFunction() {
|
|
var input, filter, table, tr, td, i;
|
|
input = document.getElementById("myInput");
|
|
filter = input.value.toUpperCase();
|
|
table = document.getElementById("myTable");
|
|
tr = table.getElementsByTagName("tr");
|
|
for (i = 0; i < tr.length; i++) {
|
|
td = tr[i].getElementsByTagName("td")[0];
|
|
if (td) {
|
|
txtValue = td.textContent || td.innerText;
|
|
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
|
tr[i].style.display = "";
|
|
} else {
|
|
tr[i].style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|