diff options
Diffstat (limited to 'guides/Transparency/theme3-transparency/index.html')
| -rw-r--r-- | guides/Transparency/theme3-transparency/index.html | 1358 |
1 files changed, 1358 insertions, 0 deletions
diff --git a/guides/Transparency/theme3-transparency/index.html b/guides/Transparency/theme3-transparency/index.html new file mode 100644 index 00000000..6a6a7695 --- /dev/null +++ b/guides/Transparency/theme3-transparency/index.html @@ -0,0 +1,1358 @@ + +<!doctype html> +<html lang="en" class="no-js"> + <head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + + + + + <link rel="prev" href="../../../themes/themes/"> + + + <link rel="next" href="../../Positioning/theme3-positioning/"> + + <link rel="icon" href="../../../assets/images/favicon.png"> + <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.6"> + + + + <title>Transparency - Rofi Documentation</title> + + + + <link rel="stylesheet" href="../../../assets/stylesheets/main.558e4712.min.css"> + + + <link rel="stylesheet" href="../../../assets/stylesheets/palette.2505c338.min.css"> + + + + + + + + + + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"> + <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style> + + + + <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script> + + + + + + + </head> + + + + + + + + <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent=""> + + + + <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> + <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> + <label class="md-overlay" for="__drawer"></label> + <div data-md-component="skip"> + + + <a href="#transparency-within-rofi" class="md-skip"> + Skip to content + </a> + + </div> + <div data-md-component="announce"> + + </div> + + + + +<header class="md-header" data-md-component="header"> + <nav class="md-header__inner md-grid" aria-label="Header"> + <a href="../../.." title="Rofi Documentation" class="md-header__button md-logo" aria-label="Rofi Documentation" data-md-component="logo"> + + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> + + </a> + <label class="md-header__button md-icon" for="__drawer"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> + </label> + <div class="md-header__title" data-md-component="header-title"> + <div class="md-header__ellipsis"> + <div class="md-header__topic"> + <span class="md-ellipsis"> + Rofi Documentation + </span> + </div> + <div class="md-header__topic" data-md-component="header-topic"> + <span class="md-ellipsis"> + + Transparency + + </span> + </div> + </div> + </div> + + + + + <div class="md-header__source"> + <a href="https://github.com/davatorium/rofi/" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg> + </div> + <div class="md-source__repository"> + GitHub + </div> +</a> + </div> + + </nav> + +</header> + + <div class="md-container" data-md-component="container"> + + + + + + + <main class="md-main" data-md-component="main"> + <div class="md-main__inner md-grid"> + + + + <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + + + +<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0"> + <label class="md-nav__title" for="__drawer"> + <a href="../../.." title="Rofi Documentation" class="md-nav__button md-logo" aria-label="Rofi Documentation" data-md-component="logo"> + + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> + + </a> + Rofi Documentation + </label> + + <div class="md-nav__source"> + <a href="https://github.com/davatorium/rofi/" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg> + </div> + <div class="md-source__repository"> + GitHub + </div> +</a> + </div> + + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + + <li class="md-nav__item"> + <a href="../../../COPYING/" class="md-nav__link"> + License + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="https://github.com/davatorium/rofi/issues" class="md-nav__link"> + Issue Tracker + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="https://github.com/davatorium/rofi/discussions" class="md-nav__link"> + Discussions Forum + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../downloads/" class="md-nav__link"> + Downloads + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../INSTALL/" class="md-nav__link"> + Installation + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../CONFIG/" class="md-nav__link"> + Configuration + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../themes/themes/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + + + + + <li class="md-nav__item md-nav__item--active md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_8" type="checkbox" id="__nav_8" checked> + + + + <label class="md-nav__link" for="__nav_8" tabindex="0" aria-expanded="true"> + Guides + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="Guides" data-md-level="1"> + <label class="md-nav__title" for="__nav_8"> + <span class="md-nav__icon md-icon"></span> + Guides + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + + <li class="md-nav__item md-nav__item--active"> + + <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc"> + + + + <label class="md-nav__link md-nav__link--active" for="__toc"> + Transparency + <span class="md-nav__icon md-icon"></span> + </label> + + <a href="./" class="md-nav__link md-nav__link--active"> + Transparency + </a> + + + +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> + + + + + <label class="md-nav__title" for="__toc"> + <span class="md-nav__icon md-icon"></span> + Table of contents + </label> + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#transparency-within-rofi" class="md-nav__link"> + Transparency within rofi + </a> + +</li> + + <li class="md-nav__item"> + <a href="#transparency-on-the-window" class="md-nav__link"> + Transparency on the window + </a> + + <nav class="md-nav" aria-label="Transparency on the window"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#no-transparency-or-real" class="md-nav__link"> + No transparency or "real" + </a> + +</li> + + <li class="md-nav__item"> + <a href="#fake-transparency-or-screenshot" class="md-nav__link"> + Fake transparency or "screenshot" + </a> + +</li> + + <li class="md-nav__item"> + <a href="#background-transparency-or-background" class="md-nav__link"> + Background transparency or "background" + </a> + +</li> + + <li class="md-nav__item"> + <a href="#picture" class="md-nav__link"> + Picture + </a> + +</li> + + </ul> + </nav> + +</li> + + </ul> + +</nav> + + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../Positioning/theme3-positioning/" class="md-nav__link"> + Positioning + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../Plugins/2017-04-19-rofi-140-sneak-preview-plugins/" class="md-nav__link"> + Plugins + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../DynamicThemes/dynamic_themes/" class="md-nav__link"> + Dynamic Theme + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_9" type="checkbox" id="__nav_9" > + + + + <label class="md-nav__link" for="__nav_9" tabindex="0" aria-expanded="false"> + Current + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="Current" data-md-level="1"> + <label class="md-nav__title" for="__nav_9"> + <span class="md-nav__icon md-icon"></span> + Current + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_10" type="checkbox" id="__nav_10" > + + + + <label class="md-nav__link" for="__nav_10" tabindex="0" aria-expanded="false"> + 1.7.5 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.5" data-md-level="1"> + <label class="md-nav__title" for="__nav_10"> + <span class="md-nav__icon md-icon"></span> + 1.7.5 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_11" type="checkbox" id="__nav_11" > + + + + <label class="md-nav__link" for="__nav_11" tabindex="0" aria-expanded="false"> + 1.7.4 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.4" data-md-level="1"> + <label class="md-nav__title" for="__nav_11"> + <span class="md-nav__icon md-icon"></span> + 1.7.4 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_12" type="checkbox" id="__nav_12" > + + + + <label class="md-nav__link" for="__nav_12" tabindex="0" aria-expanded="false"> + 1.7.3 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.3" data-md-level="1"> + <label class="md-nav__title" for="__nav_12"> + <span class="md-nav__icon md-icon"></span> + 1.7.3 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_13" type="checkbox" id="__nav_13" > + + + + <label class="md-nav__link" for="__nav_13" tabindex="0" aria-expanded="false"> + 1.7.2 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.2" data-md-level="1"> + <label class="md-nav__title" for="__nav_13"> + <span class="md-nav__icon md-icon"></span> + 1.7.2 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.2/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.2/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.2/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_14" type="checkbox" id="__nav_14" > + + + + <label class="md-nav__link" for="__nav_14" tabindex="0" aria-expanded="false"> + 1.7.1 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.1" data-md-level="1"> + <label class="md-nav__title" for="__nav_14"> + <span class="md-nav__icon md-icon"></span> + 1.7.1 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.1/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.1/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.1/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_15" type="checkbox" id="__nav_15" > + + + + <label class="md-nav__link" for="__nav_15" tabindex="0" aria-expanded="false"> + 1.7.0 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.0" data-md-level="1"> + <label class="md-nav__title" for="__nav_15"> + <span class="md-nav__icon md-icon"></span> + 1.7.0 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.0/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.0/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.0/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + </ul> +</nav> + </div> + </div> + </div> + + + + <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" > + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + + +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> + + + + + <label class="md-nav__title" for="__toc"> + <span class="md-nav__icon md-icon"></span> + Table of contents + </label> + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#transparency-within-rofi" class="md-nav__link"> + Transparency within rofi + </a> + +</li> + + <li class="md-nav__item"> + <a href="#transparency-on-the-window" class="md-nav__link"> + Transparency on the window + </a> + + <nav class="md-nav" aria-label="Transparency on the window"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#no-transparency-or-real" class="md-nav__link"> + No transparency or "real" + </a> + +</li> + + <li class="md-nav__item"> + <a href="#fake-transparency-or-screenshot" class="md-nav__link"> + Fake transparency or "screenshot" + </a> + +</li> + + <li class="md-nav__item"> + <a href="#background-transparency-or-background" class="md-nav__link"> + Background transparency or "background" + </a> + +</li> + + <li class="md-nav__item"> + <a href="#picture" class="md-nav__link"> + Picture + </a> + +</li> + + </ul> + </nav> + +</li> + + </ul> + +</nav> + </div> + </div> + </div> + + + + <div class="md-content" data-md-component="content"> + <article class="md-content__inner md-typeset"> + + + + + + + + + <h1>Transparency</h1> + +<h2 id="transparency-within-rofi">Transparency within rofi</h2> +<blockquote> +<p>The images in this guide are outdated, but the principals still hold.</p> +</blockquote> +<p><strong>Rofi</strong> window is build up by first drawing the background, and then each +widget above it, with the correct transparency factor.</p> +<p>Remember the general widget structure:</p> +<p><img alt="structure" src="../structure.svg" /></p> +<p>This means if you set every widget to be 30% transparent on a white background: +it will look like: </p> +<p><img alt="images" src="../rofi-transp.png" /></p> +<p>The transparency applies one on top of the other, so while they |