colored pannels added

parrot-theme/css/general.css

@@ -172,3 +172,328 @@ blockquote {
     margin: 5px 0px;
     font-weight: bold;
 }
+
+.panel {
+    color: var(--panel-body-fg);
+    margin-bottom: 27px;
+    background-color: var(--panel-body-bg);
+    border: 1px solid transparent;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+    box-shadow:0 1px 1px rgba(0, 0, 0, .05)
+}
+
+.panel-body {
+    padding:15px
+}
+
+.panel-body:after, .panel-body:before {
+    content: " ";
+    display:table
+}
+
+.panel-body:after {
+    clear:both
+}
+
+.panel-heading {
+    display: flex;
+    align-items: center;
+    padding: 10px 15px;
+    border-bottom: 1px solid transparent;
+    border-top-right-radius: 3px;
+    border-top-left-radius:3px
+}
+
+.panel-heading > .dropdown .dropdown-toggle, .panel-title {
+    color:inherit
+}
+
+.panel-heading > p {
+    margin: 0;
+}
+
+.panel-title {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size:21px
+}
+
+.panel-title > .small, .panel-title > .small > a, .panel-title > a, .panel-title > small, .panel-title > small > a {
+    color:inherit
+}
+
+.panel-footer {
+    padding: 10px 15px;
+    background-color: #f5f5f5;
+    border-top: 1px solid #ddd;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius:3px
+}
+
+.panel > .list-group, .panel > .panel-collapse > .list-group {
+    margin-bottom:0
+}
+
+.panel > .list-group .list-group-item, .panel > .panel-collapse > .list-group .list-group-item {
+    border-width: 1px 0;
+    border-radius:0
+}
+
+.panel > .list-group:first-child .list-group-item:first-child, .panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
+    border-top: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius:3px
+}
+
+.panel > .list-group:last-child .list-group-item:last-child, .panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius:3px
+}
+
+.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
+    border-top-right-radius: 0;
+    border-top-left-radius:0
+}
+
+.list-group + .panel-footer, .panel-heading + .list-group .list-group-item:first-child {
+    border-top-width:0
+}
+
+.panel > .panel-collapse > .table, .panel > .table, .panel > .table-responsive > .table {
+    margin-bottom:0
+}
+
+.panel > .panel-collapse > .table caption, .panel > .table-responsive > .table caption, .panel > .table caption {
+    padding-left: 15px;
+    padding-right:15px
+}
+
+.panel > .table-responsive:first-child > .table:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child, .panel > .table:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child, .panel > .table:first-child > thead:first-child > tr:first-child {
+    border-top-right-radius: 3px;
+    border-top-left-radius:3px
+}
+
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, .panel > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table:first-child > thead:first-child > tr:first-child th:first-child {
+    border-top-left-radius:3px
+}
+
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, .panel > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table:first-child > thead:first-child > tr:first-child th:last-child {
+    border-top-right-radius:3px
+}
+
+.panel > .table-responsive:last-child > .table:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child, .panel > .table:last-child, .panel > .table:last-child > tbody:last-child > tr:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius:3px
+}
+
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child, .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
+    border-bottom-left-radius:3px
+}
+
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child, .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
+    border-bottom-right-radius:3px
+}
+
+.panel > .panel-body + .table, .panel > .panel-body + .table-responsive, .panel > .table + .panel-body, .panel > .table-responsive + .panel-body {
+    border-top:1px solid #ddd
+}
+
+.panel > .table > tbody:first-child > tr:first-child td, .panel > .table > tbody:first-child > tr:first-child th {
+    border-top:0
+}
+
+.panel > .table-bordered, .panel > .table-responsive > .table-bordered {
+    border:0
+}
+
+.panel > .table-bordered > tbody > tr > td:first-child, .panel > .table-bordered > tbody > tr > th:first-child, .panel > .table-bordered > tfoot > tr > td:first-child, .panel > .table-bordered > tfoot > tr > th:first-child, .panel > .table-bordered > thead > tr > td:first-child, .panel > .table-bordered > thead > tr > th:first-child, .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child, .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, .panel > .table-responsive > .table-bordered > thead > tr > td:first-child, .panel > .table-responsive > .table-bordered > thead > tr > th:first-child {
+    border-left:0
+}
+
+.panel > .table-bordered > tbody > tr > td:last-child, .panel > .table-bordered > tbody > tr > th:last-child, .panel > .table-bordered > tfoot > tr > td:last-child, .panel > .table-bordered > tfoot > tr > th:last-child, .panel > .table-bordered > thead > tr > td:last-child, .panel > .table-bordered > thead > tr > th:last-child, .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child, .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, .panel > .table-responsive > .table-bordered > thead > tr > td:last-child, .panel > .table-responsive > .table-bordered > thead > tr > th:last-child {
+    border-right:0
+}
+
+.panel > .table-bordered > tbody > tr:first-child > td, .panel > .table-bordered > tbody > tr:first-child > th, .panel > .table-bordered > tbody > tr:last-child > td, .panel > .table-bordered > tbody > tr:last-child > th, .panel > .table-bordered > tfoot > tr:last-child > td, .panel > .table-bordered > tfoot > tr:last-child > th, .panel > .table-bordered > thead > tr:first-child > td, .panel > .table-bordered > thead > tr:first-child > th, .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th, .panel > .table-responsive > .table-bordered > thead > tr:first-child > td, .panel > .table-responsive > .table-bordered > thead > tr:first-child > th {
+    border-bottom:0
+}
+
+.panel > .table-responsive {
+    border: 0;
+    margin-bottom:0
+}
+
+.panel-group {
+    margin-bottom:27px
+}
+
+.panel-group .panel {
+    margin-bottom: 0;
+    border-radius:4px
+}
+
+.panel-group .panel + .panel {
+    margin-top:5px
+}
+
+.panel-group .panel-heading {
+    border-bottom:0
+}
+
+.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
+    border-top:1px solid #ddd
+}
+
+.panel-group .panel-footer {
+    border-top:0
+}
+
+.panel-group .panel-footer + .panel-collapse .panel-body {
+    border-bottom:1px solid #ddd
+}
+
+.panel-default {
+    border-color:#ddd
+}
+
+.panel-default > .panel-heading {
+    color: #333;
+    background-color: #f5f5f5;
+    border-color:#ddd
+}
+
+.panel-default > .panel-heading + .panel-collapse > .panel-body {
+    border-top-color:#ddd
+}
+
+.panel-default > .panel-heading .badge {
+    color: #f5f5f5;
+    background-color:#333
+    margin-right: 3px;
+}
+
+.panel-default > .panel-footer + .panel-collapse > .panel-body {
+    border-bottom-color:#ddd
+}
+
+.panel-primary {
+    border-color:#6b4fbb
+}
+
+.panel-primary > .panel-heading {
+    color: #fff;
+    background-color: #6b4fbb;
+    border-color:#6b4fbb
+}
+
+.panel-primary > .panel-heading + .panel-collapse > .panel-body {
+    border-top-color:#6b4fbb
+}
+
+.panel-primary > .panel-heading .badge {
+    color: #6b4fbb;
+    background-color:#fff
+    margin-right: 3px;
+}
+
+.panel-primary > .panel-footer + .panel-collapse > .panel-body {
+    border-bottom-color:#6b4fbb
+}
+
+.panel-success {
+    border-color: var(--success-bg);
+}
+
+.panel-success > .panel-heading {
+    color: var(--success);
+    background-color: var(--success-bg);
+    border-color: var(--success-bg);
+}
+
+.panel-success > .panel-heading + .panel-collapse > .panel-body {
+    border-top-color:#d6e9c6
+}
+
+.panel-success > .panel-heading .badge {
+    color: var(--success);
+    background-color: var(--success-bg);
+    margin-right: 3px;
+}
+
+.panel-success > .panel-footer + .panel-collapse > .panel-body {
+    border-bottom-color:#d6e9c6
+}
+
+.panel-info {
+    border-color: var(--info-bg);
+}
+
+.panel-info > .panel-heading {
+    color: var(--info);
+    background-color: var(--info-bg);
+    border-color:var(--info-bg);
+}
+
+.panel-info > .panel-heading + .panel-collapse > .panel-body {
+    border-top-color:#bce8f1
+}
+
+.panel-info > .panel-heading .badge {
+    color: var(--info);
+    background-color:var(--info-bg);
+    margin-right: 3px;
+}
+
+.panel-info > .panel-footer + .panel-collapse > .panel-body {
+    border-bottom-color:#bce8f1
+}
+
+.panel-warning {
+    border-color: var(--warning-bg);
+}
+
+.panel-warning > .panel-heading {
+    color: var(--warning);
+    background-color: var(--warning-bg);
+    border-color: var(--warning-bg);
+}
+
+.panel-warning > .panel-heading + .panel-collapse > .panel-body {
+    border-top-color:#faebcc
+}
+
+.panel-warning > .panel-heading .badge {
+    color: var(--warning);
+    background-color:var(--warning-bg);
+    margin-right: 3px;
+}
+
+.panel-warning > .panel-footer + .panel-collapse > .panel-body {
+    border-bottom-color:#faebcc
+}
+
+.panel-danger {
+    border-color: var(--danger-bg);
+}
+
+.panel-danger > .panel-heading {
+    color: var(--danger);
+    background-color: var(--danger-bg);
+    border-color: var(--danger-bg);
+}
+
+.panel-danger > .panel-heading + .panel-collapse > .panel-body {
+    border-top-color:#ebccd1
+}
+
+.panel-danger > .panel-heading .badge {
+    color: var(--danger);
+    margin-right: 3px;
+    background-color:var(--danger-bg);
+}
+
+.panel-danger > .panel-footer + .panel-collapse > .panel-body {
+    border-bottom-color:#ebccd1
+}

parrot-theme/css/variables.css

-
 /* Globals */
 
 :root {
@@ -48,6 +47,18 @@
     --searchresults-border-color: #888;
     --searchresults-li-bg: #252932;
     --search-mark-bg: #e3b171;
+
+    --success: #2da160;
+    --info: #6c9ed0;
+    --warning: #c17d10;
+    --danger: #ec5941;
+    --success-bg: #315240;
+    --info-bg: #374d62;
+    --warning-bg: #5b4829;
+    --danger-bg: #673e37;
+    
+    --panel-body-bg: var(--sidebar-bg);
+    --panel-body-fg: var(--sidebar-fg);
 }
 
 .coal {
@@ -88,6 +99,18 @@
     --searchresults-border-color: #98a3ad;
     --searchresults-li-bg: #2b2b2f;
     --search-mark-bg: #355c7d;
+
+    --success: #2da160;
+    --info: #6c9ed0;
+    --warning: #c17d10;
+    --danger: #ec5941;
+    --success-bg: #315240;
+    --info-bg: #374d62;
+    --warning-bg: #5b4829;
+    --danger-bg: #673e37;
+
+    --panel-body-bg: var(--sidebar-bg);
+    --panel-body-fg: var(--sidebar-fg);
 }
 
 .light {
@@ -128,6 +151,18 @@
     --searchresults-border-color: #888;
     --searchresults-li-bg: #e4f2fe;
     --search-mark-bg: #a2cff5;
+
+    --success: #084726;
+    --info: #2c4a67;
+    --warning: #ab6100;
+    --danger: #7a302e;
+    --success-bg: #108548;
+    --warning-bg: #f2ce62;
+    --danger-bg: #dd2b0e;
+    --info-bg: #81bfff;
+
+    --panel-body-bg: var(--sidebar-bg);
+    --panel-body-fg: var(--sidebar-fg);
 }
 
 .navy {
@@ -168,6 +203,18 @@
     --searchresults-border-color: #5c5c68;
     --searchresults-li-bg: #242430;
     --search-mark-bg: #a2cff5;
+
+    --success: #2da160;
+    --info: #6c9ed0;
+    --warning: #c17d10;
+    --danger: #ec5941;
+    --success-bg: #315240;
+    --info-bg: #374d62;
+    --warning-bg: #5b4829;
+    --danger-bg: #673e37;
+
+    --panel-body-bg: var(--sidebar-bg);
+    --panel-body-fg: var(--sidebar-fg);
 }
 
 .rust {
@@ -208,6 +255,17 @@
     --searchresults-border-color: #888;
     --searchresults-li-bg: #dec2a2;
     --search-mark-bg: #e69f67;
+
+    --success: #084726;
+    --info: #2c4a67;
+    --warning: #ab6100;
+    --danger: #7a302e;
+    --success-bg: #108548;
+    --warning-bg: #f2ce62;
+    --danger-bg: #dd2b0e;
+    --info-bg: #81bfff;
+    --panel-body-bg: #cfcfc8;
+    --panel-body-fg: var(--fg);
 }
 
 .parrot {
@@ -248,6 +306,18 @@
     --searchresults-border-color: #57cbcc;
     --searchresults-li-bg: #57cbcc;
     --search-mark-bg: #57cbcc;
+
+    --success: #2da160;
+    --info: #6c9ed0;
+    --warning: #c17d10;
+    --danger: #ec5941;
+    --success-bg: #315240;
+    --info-bg: #374d62;
+    --warning-bg: #5b4829;
+    --danger-bg: #673e37;
+
+    --panel-body-bg: var(--sidebar-bg);
+    --panel-body-fg: var(--sidebar-fg);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -289,5 +359,17 @@
         --searchresults-border-color: #98a3ad;
         --searchresults-li-bg: #2b2b2f;
         --search-mark-bg: #355c7d;
-    }
+
+	--success: #084726;
+        --info: #2c4a67;
+        --warning: #ab6100;
+        --danger: #7a302e;
+        --success-bg: #108548;
+        --warning-bg: #f2ce62;
+        --danger-bg: #dd2b0e;
+        --info-bg: #81bfff;
+    
+        --panel-body-bg: var(--sidebar-bg);
+        --panel-body-fg: var(--sidebar-fg);
+     }
 }

src/en/04.- What is Live Mode.md

@@ -5,7 +5,23 @@ to load a fully working system environment without the need to install it.
 
 This is possible because the system is not loaded onto the system's hard drive, instead it is loaded into memory.
 
-Parrot OS offers the ability to install the OS while in the live environment, use all of its tools and even create a [**Persistent Live Environment**](<./07.- Parrot USB Live Persistence.md>).
+<div class="panel panel-info">
+  <div class="panel-heading">
+    <span class="material-icons badge">
+      lightbulb
+    </span>
+
+**Loading from USB**
+
+  </div>
+  <div class="panel-body">
+
+Parrot OS offers the ability to install the OS while in the live environment, use all of its tools and even create a **Persistent Live Environment**.
+
+  </div>
+</div>
+
+---
 
 ## Default username and password ##