) or an environment tag (.snap-env)
+ */
+$(document).on('click', '.snap-container', function (e) {
+ // Ignore clicks on links, environment tags/containers, or the checkbox itself
+ if ($(e.target).closest('a, .snap-env-container, .snap-env, input[name="checkbox-repo"]').length) {
+ return;
+ }
+
+ // Find the checkbox inside this container and toggle it
+ var checkbox = $(this).find('input[name="checkbox-repo"]');
+
+ if (checkbox.length) {
+ checkbox.click();
+ }
+});
+
+/**
+ * Event: toggle selected state on snap-container when checkbox is checked/unchecked
+ */
+$(document).on('change', 'input[name="checkbox-repo"]', function () {
+ var container = $(this).closest('.snap-container');
+
+ if ($(this).is(':checked')) {
+ container.addClass('snap-selected');
+ } else {
+ container.removeClass('snap-selected');
+ }
+});
+
/**
* Event: when a checkbox is checked/unchecked
*/
@@ -153,14 +184,15 @@ $(document).on('click',"input[name=checkbox-repo]",function () {
/**
* Count the number of checked checkboxes
*/
- var count_checked = $('.reposList').find('input[name=checkbox-repo]:checked').length;
+ var count_checked = $('#repositories-list').find('input[name=checkbox-repo]:checked').length;
/**
* If all checkboxes are unchecked then we hide all action buttons
*/
if (count_checked == 0) {
myconfirmbox.close();
- $('.reposList').find('input[name=checkbox-repo]').removeAttr('style');
+ $('#repositories-list').find('input[name=checkbox-repo]').removeAttr('style');
+ $('#repositories-list').find('.snap-container').removeClass('snap-selected');
$('.repos-list-group[group-id=' + groupId + ']').find('.repos-list-group-select-all-btns').hide();
return;
}
@@ -296,8 +328,8 @@ $(document).on('click',"input[name=checkbox-repo]",function () {
* If there is at least 1 checkbox checked then we display all the other checkboxes
* All checked checkboxes are set to opacity = 1
*/
- $('.reposList').find('input[name=checkbox-repo]').css("visibility", "visible");
- $('.reposList').find('input[name=checkbox-repo]:checked').css("opacity", "1");
+ $('#repositories-list').find('input[name=checkbox-repo]').css("visibility", "visible");
+ $('#repositories-list').find('input[name=checkbox-repo]:checked').css("opacity", "1");
});
function executeAction(action)
@@ -307,7 +339,7 @@ function executeAction(action)
/**
* Loop through all checked repos and retrieve their id
*/
- $('.reposList').find('input[name=checkbox-repo]:checked').each(function () {
+ $('#repositories-list').find('input[name=checkbox-repo]:checked').each(function () {
var obj = {};
/**
@@ -355,25 +387,23 @@ function executeAction(action)
* Event: Click on 'select all latest snapshots' button
*/
$(document).on('click',".repos-list-group-select-all-btns",function () {
- /**
- * Retrieve group Id
- */
- var groupId = $(this).attr('group-id');
+ // Retrieve group Id
+ const groupId = $(this).attr('group-id');
/**
* Retrieve all repos in the group
*/
- var reposCheckboxes = $('.repos-list-group[group-id=' + groupId + ']').find('input[name=checkbox-repo]');
+ const reposCheckboxes = $('.repos-list-group[group-id=' + groupId + ']').find('input[name=checkbox-repo]');
/**
* Retrieve select status
*/
- var selectStatus = $(this).attr('status');
+ const status = $(this).attr('status');
/**
* If current status is not 'selected', then select all the latest snaps
*/
- if (selectStatus != 'selected') {
+ if (status != 'selected') {
/**
* Loop through all checkboxes and check the latest snap
* The latest snap is the first snap in the list (the first checkbox of each repo)
@@ -604,8 +634,8 @@ $(document).on('submit','#task-form',function (e) {
mypanel.close();
// Uncheck all checkboxes and remove all styles JQuery could have applied
- $('.reposList').find('input[name=checkbox-repo]').prop('checked', false);
- $('.reposList').find('input[name=checkbox-repo]').removeAttr('style');
+ $('#repositories-list').find('input[name=checkbox-repo]').prop('checked', false);
+ $('#repositories-list').find('input[name=checkbox-repo]').removeAttr('style');
});
return false;
diff --git a/www/public/resources/styles/common.css b/www/public/resources/styles/common.css
index a596d5c3d..4b7744b4f 100644
--- a/www/public/resources/styles/common.css
+++ b/www/public/resources/styles/common.css
@@ -54,7 +54,7 @@ h1, h2, h3, h4 {
h3 {
width: max-content;
font-size: 18px;
- margin: 50px 0 40px 0;
+ margin: 40px 0 40px 0;
border-bottom: 1px solid #15bf7f;
}
@@ -253,7 +253,7 @@ pre.codeblock {
.margin-top-0 {margin-top: 0px !important}.margin-top-5 {margin-top: 5px !important}.margin-top-8{margin-top:8px!important}.margin-top-10 {margin-top: 10px !important}.margin-top-15 {margin-top: 15px !important}.margin-top-20 {margin-top: 20px !important}.margin-top-30 {margin-top: 30px !important}.margin-top-40 {margin-top: 40px !important}.margin-top-50{margin-top:50px !important}
.margin-bottom-0 {margin-bottom: 0px !important}.margin-bottom-5 {margin-bottom: 5px !important}.margin-bottom-8{margin-bottom:8px!important}.margin-bottom-10 {margin-bottom: 10px !important}.margin-bottom-15 {margin-bottom: 15px !important}.margin-bottom-20 {margin-bottom: 20px !important}.margin-bottom-30 {margin-bottom: 30px !important}.margin-bottom-40 {margin-bottom: 40px !important} .margin-bottom-50{margin-bottom:50px!important}
.min-height-100{min-height:100px!important}.min-height-120{min-height:120px!important}.min-height-150{min-height:150px!important}.min-height-200{min-height:200px!important}.min-height-300{min-height:300px!important}.min-height-400{min-height:400px!important}.min-height-500{min-height:500px!important}.min-height-600{min-height:600px!important}.min-height-700{min-height:700px!important}.min-height-800{min-height:800px!important}.min-height-900{min-height:900px!important}.min-height-1000{min-height:1000px!important}
-.min-width-100 {min-width: 100px}.min-width-200 {min-width: 200px}.min-width-300 {min-width: 300px}.min-width-400 {min-width: 400px}.min-width-500 {min-width: 500px}.min-width-600 {min-width: 600px}.min-width-700 {min-width: 700px}.min-width-800 {min-width: 800px}.min-width-900 {min-width: 900px}.min-width-1000 {min-width: 1000px}
+.min-width-100 {min-width: 100px}.min-width-150{min-width: 150px}.min-width-200 {min-width: 200px}.min-width-300 {min-width: 300px}.min-width-400 {min-width: 400px}.min-width-500 {min-width: 500px}.min-width-600 {min-width: 600px}.min-width-700 {min-width: 700px}.min-width-800 {min-width: 800px}.min-width-900 {min-width: 900px}.min-width-1000 {min-width: 1000px}
.min-height-50vh{min-height:50vh}.min-height-90vh{min-height:90vh}.min-height-100vh{min-height:100vh}
.min-width-100vw{min-width:100vw}
.width-100{width:100%}
@@ -299,40 +299,48 @@ code {
display: flex;
align-items: center;
justify-content: center;
- min-width: 35px;
+ min-width: 32px;
height: 30px;
- border: none;
- border-radius: 60px;
- color: white;
+ border: 1px solid #2d5575;
+ border-radius: 6px;
+ color: #97a5b4;
text-align: center;
text-decoration: none;
- font-size: 14px;
+ font-size: 13px;
cursor: pointer;
- background-color: #15bf7f;
- border-radius: 0;
+ background-color: transparent;
+ margin: 0 2px;
+ transition: all 0.15s ease;
}
[class*=' pagination-btn']:hover,[class^='pagination-btn']:hover {
- background-color: #12a16a;
+ background-color: rgba(34, 56, 79, 0.6);
+ border-color: #3d7aab;
+ color: #ffffff;
}
.pagination-btn-current {
- background-color: #12a16a;
- border: 1px solid #10885a;
+ background-color: rgba(21, 191, 127, 0.15);
+ border-color: #15bf7f;
+ color: #15bf7f;
+}
+
+.pagination-btn-current:hover {
+ background-color: rgba(21, 191, 127, 0.25);
+ border-color: #15bf7f;
+ color: #15bf7f;
}
.pagination-btn-first {
- border-top-left-radius: 60px;
- border-bottom-left-radius: 60px;
+ border-radius: 6px;
}
.pagination-btn-last {
- border-top-right-radius: 60px;
- border-bottom-right-radius: 60px;
+ border-radius: 6px;
}
.pagination-btn-previous, .pagination-btn-next {
- width: 40px;
+ width: 35px;
}
.round-item {
diff --git a/www/public/resources/styles/components/card.css b/www/public/resources/styles/components/card.css
new file mode 100644
index 000000000..0eb3a1a15
--- /dev/null
+++ b/www/public/resources/styles/components/card.css
@@ -0,0 +1,60 @@
+.kpi-card {
+ display: flex;
+ align-items: center;
+ column-gap: 12px;
+ width: auto;
+ padding: 14px;
+ background-color: #182b3e;
+ border: 1px solid #24405c;
+ border-radius: 20px;
+ box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
+}
+
+.kpi-value {
+ font-family: 'Archivo';
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1;
+ transition: transform 0.2s ease;
+ transform-origin: left;
+}
+
+.kpi-card:hover .kpi-value {
+ transform: scale(1.10);
+}
+
+.storage-card {
+ max-width: 100vw;
+}
+
+.storage-meter {
+ width: 100%;
+ height: 9px;
+ overflow: hidden;
+ background-color: #0e1e2f;
+ border: 1px solid #24405c;
+ border-radius: 20px;
+}
+
+.storage-meter span {
+ display: block;
+ height: 100%;
+ min-width: 3px;
+ background-color: #15bf7f;
+ border-radius: 20px;
+}
+
+.kpi-container > .kpi-card,
+.kpi-container > .storage-card {
+ flex: 1 1 calc(50% - 10px);
+ box-sizing: border-box;
+}
+
+/* Desktop configuration */
+@media (min-width:1025px) {
+ .kpi-container > .kpi-card,
+ .kpi-container > .storage-card {
+ flex: 1 1 0;
+ min-width: 0;
+ }
+}
diff --git a/www/public/resources/styles/components/confirmbox.css b/www/public/resources/styles/components/confirmbox.css
index 7c2f16a24..18f4c893b 100644
--- a/www/public/resources/styles/components/confirmbox.css
+++ b/www/public/resources/styles/components/confirmbox.css
@@ -7,20 +7,17 @@
align-items: flex-start;
visibility: hidden;
min-height: 20px;
- padding: 20px 0px 20px 0px;
+ padding: 20px 0px;
font-size: 16px;
position: fixed;
- bottom: 0;
- right: -1000px;
bottom: 50px;
+ right: -1000px;
z-index: 1000;
- background-color: #22384F;
- box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
+ background-color: #182b3e;
+ border: 1px solid #24405c;
+ border-radius: 20px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
color: white;
- border-radius: 20px 0 0 20px;
- border-left: 5px solid #15bf7f;
- border-top: 1px solid #d1d1d11f;
- border-bottom: 1px solid #d1d1d11f;
}
.confirm-box-cancel-btn {
@@ -30,6 +27,30 @@
cursor: pointer;
}
+.confirm-box .confirm-box-btn {
+ padding: 10px 5px;
+ border-radius: 12px;
+ border: 1px solid #2e5275;
+ background-color: rgba(34, 56, 79, 0.6);
+ box-shadow: none;
+ transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.confirm-box .confirm-box-btn:hover {
+ background-color: rgba(79, 195, 247, 0.12);
+ border-color: rgba(79, 195, 247, 0.4);
+}
+
+.confirm-box .confirm-box-btn.btn-auto-red {
+ border-color: #F32F63;
+ background-color: rgba(243, 47, 99, 0.1);
+}
+
+.confirm-box .confirm-box-btn.btn-auto-red:hover {
+ background-color: #F32F63;
+ border-color: #F32F63;
+}
+
/* Desktop configuration */
@media (min-width:1025px) {
.confirm-box {
diff --git a/www/public/resources/styles/components/label.css b/www/public/resources/styles/components/label.css
index b61b9e1fa..f1aa78429 100644
--- a/www/public/resources/styles/components/label.css
+++ b/www/public/resources/styles/components/label.css
@@ -3,14 +3,15 @@
font-size: 13px;
vertical-align: middle;
display: inline-block;
- padding: 6px;
+ padding: 6px 10px;
min-width: 12px;
min-height: 12px;
line-height: 12px !important;
text-align: center;
- border-radius: 60px;
- color: white;
- box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
+ border-radius: 20px;
+ background: transparent;
+ border: 1.5px solid currentColor;
+ box-shadow: none;
}
.label-icon-tr {
display: grid;
@@ -28,29 +29,30 @@
border: 1px solid #24405c;
color: white;
text-align: left;
- box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
-}
-.label-black {
- background-color: rgb(46, 54, 58);
- box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
+ box-shadow: none;
}
-.label-white {
- background-color: white;
- color: #000000d9;
+
+.label-white, .label-black {
+ color: #c0d0e2;
+ border-color: #c0d0e2;
}
.label-green {
- background-color: #15bf7f;
+ color: #15bf7f;
+ border-color: #15bf7f;
}
.label-blue {
- background-color: #5473e8;
+ color: #5473e8;
+ border-color: #5473e8;
}
.label-red {
- background-color: #F32F63;
+ color: #F32F63;
+ border-color: #F32F63;
}
.label-yellow {
- background-color: #ffb536;
+ color: #ffb536;
+ border-color: #ffb536;
}
.label-tr {
- background-color: initial;
- border: 1px solid #24405c;
+ color: #8A99AA;
+ border-color: #24405c;
}
diff --git a/www/public/resources/styles/components/layout.css b/www/public/resources/styles/components/layout.css
index c761c141d..d7bcf7572 100644
--- a/www/public/resources/styles/components/layout.css
+++ b/www/public/resources/styles/components/layout.css
@@ -12,12 +12,21 @@ body {
}
.div-generic-blue {
- position: relative;
+ /* position: relative; */
padding: 15px;
margin-bottom: 30px;
border-radius: 20px;
background-color: #182b3e;
box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
+ border: 1px solid #1a4a6a;
+}
+
+.div-generic-blue.repo-accent-deb {
+ border-left: 2px solid #F32F63;
+}
+
+.div-generic-blue.repo-accent-rpm {
+ border-left: 2px solid #5473e8;
}
.div-generic-blue h3 {
diff --git a/www/public/resources/styles/main.css b/www/public/resources/styles/main.css
index 70f7d9264..8aaba6716 100644
--- a/www/public/resources/styles/main.css
+++ b/www/public/resources/styles/main.css
@@ -10,40 +10,20 @@ header {
margin-bottom: 20px;
position: relative;
}
+
#menu {
- width: 100%;
- height: 66px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
- -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
- box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
-}
-#menu-inline {
display: none;
visibility: hidden;
+ width: 0px;
}
+
#menu-burger {
display: flex;
align-items: center;
justify-content: flex-end;
- padding: 0 20px 0 0;
+ padding: 0 0 20px 0;
}
-#title {
- position: relative;
- margin-left: 20px;
- margin-top: 0px;
- margin-bottom: 0px;
- padding: 0px 25px 0px 0px;
- color: white;
-}
-#title span {
- font-family: 'ethnocentric';
- font-size: 18px;
-}
#devel {
font-size: 8px !important;
position: absolute;
@@ -52,26 +32,7 @@ header {
background-color: #15bf7f;
border-radius: 60px;
}
-[class^="menu-sub-container"] {
- height: 99%;
- display: flex;
- align-items: center;
- margin-left: 25px;
- margin-right: 25px;
-}
-.menu-sub-container a {
- opacity: 0.50;
-}
-.menu-sub-container-underline {
- border-bottom: 1px solid #15bf7f;
- opacity: 1;
-}
-.menu-sub-container:hover a {
- opacity: 1;
-}
-.menu-tab-title {
- display: none;
-}
+
#header-refresh {
position: relative;
}
@@ -134,14 +95,20 @@ header {
align-items: center;
}
-/* Les articles constituent le container principal des sections section-left et section-right. */
article {
- width: auto;
+ width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
- margin: auto 20px auto 20px;
+ align-content: flex-start;
+ padding: 25px 25px;
}
+
+#virtual-space {
+ display: none;
+ visibility: hidden;
+}
+
.section-left, .section-right {
width: 100%;
vertical-align: top;
@@ -175,6 +142,9 @@ article {
#repos-list-container {
width: 100%;
font-size: 14px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 15px;
}
.repos-list-group-select-all-btns {
@@ -388,11 +358,291 @@ article {
column-gap: 10px;
}
-input::placeholder {
- color: #ffffff9e;
+/* Task list items */
+.task-item {
+ display: grid;
+ grid-template-columns: 1fr auto auto;
+ align-items: center;
+ column-gap: 20px;
+ padding: 14px 20px;
+ background: linear-gradient(135deg, #121f30, #162a3e);
+ border: 1px solid #1e3a54;
+ border-left: 3px solid #1e3a54;
+ border-radius: 10px;
+ transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.task-item:hover {
+ border-color: #2d5575;
+ background: linear-gradient(135deg, #152538, #1a2f44);
+}
+
+.task-accent-green {
+ border-left-color: #15bf7f;
+}
+
+.task-accent-red {
+ border-left-color: #F32F63;
+}
+
+.task-accent-running {
+ border-left-color: #4fc3f7;
+}
+
+.task-accent-yellow {
+ border-left-color: #ffb536;
+}
+
+.task-accent-orange {
+ border-left-color: #e8851e;
+}
+
+/* .task-item-icon {
+ width: 20px;
+ height: 20px;
+ opacity: 0.6;
+} */
+
+.task-item-date {
+ font-family: 'archivo';
+ font-size: 14px;
+ font-weight: 500;
+ color: #b8c8d8;
+ letter-spacing: 0.3px;
+}
+
+.task-item-schedule {
+ font-size: 12px;
+}
+
+.task-item-action {
+ font-size: 13px;
+}
+
+.task-item-repo {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.task-item-repo-name {
+ font-size: 13px;
+ font-family: 'archivo';
+ font-weight: 600;
+ color: #c0d0e2;
+ letter-spacing: 0.2px;
+}
+
+.task-item-status {
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+}
+
+.task-checkbox-input {
+ display: none;
+}
+
+.task-item.task-selected {
+ border-color: #15bf7f;
+ border-left-color: #15bf7f;
+ background: linear-gradient(135deg, #0f2a1f, #132f28);
+}
+
+/* Group headers */
+.group-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 14px 20px 14px 5px;
+}
+
+.group-header-left {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.group-header-icon {
+ width: 22px;
+ height: 22px;
+}
+
+.group-header-name {
+ font-family: 'archivo';
+ font-size: 18px;
+ font-weight: 700;
+ color: #f0f4f8;
+ letter-spacing: 0.3px;
+}
+
+.group-header-count {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 24px;
+ height: 24px;
+ padding: 0 8px;
+ font-family: 'archivo';
+ font-size: 12px;
+ font-weight: 700;
+ color: #4fc3f7;
+ background-color: rgba(79, 195, 247, 0.12);
+ border: 1px solid rgba(79, 195, 247, 0.35);
+ border-radius: 12px;
+}
+
+.group-header-right {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+/* Group content wrapper */
+.group-content {
+ margin-left: 12px;
+ padding-left: 20px;
+ border-left: 2px solid #1e3a54;
+}
+
+/* Repo name within a group */
+.group-repo-name {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-top: 10px;
+ margin-bottom: 8px;
+ padding-left: 0;
+}
+
+.group-repo-name-icon {
+ width: 18px;
+ height: 18px;
+ opacity: 0.7;
+ filter: invert(70%) sepia(60%) saturate(600%) hue-rotate(160deg) brightness(1.05);
+}
+
+.group-repo-name span {
+ font-family: 'archivo';
+ font-size: 16px;
+ font-weight: 600;
+ color: #c0d0e2;
+ letter-spacing: 0.2px;
+}
+
+/* new ui */
+.snap-container {
+ width: auto;
+ display: grid;
+ /* grid-template-columns: 36px 20px auto 30px 16px auto 16px auto 1fr; */
+ /* grid-template-columns: 1fr 1fr; */
+ align-items: center;
+ column-gap: 6px;
+ row-gap: 20px;
+ padding: 16px 24px;
+ background: linear-gradient(135deg, #121f30, #162a3e);
+ border: 1px solid #1e3a54;
+ border-radius: 10px;
+ transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.snap-container:hover {
+ border-color: #2d5575;
+ background: linear-gradient(135deg, #152538, #1a2f44);
+}
+
+.snap-separator {
+ width: 1px;
+ height: 24px;
+ background-color: #2a4562;
+ justify-self: center;
+}
+
+.snap-checkbox {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.snap-checkbox input[type="checkbox"] {
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+}
+
+.snap-checkbox-input {
+ display: none;
+}
+
+.snap-container.snap-selected {
+ border-color: #15bf7f;
+ background: linear-gradient(135deg, #0f2a1f, #132f28);
+}
+
+.snap-icon {
+ width: 18px;
+ height: 18px;
+}
+
+.snap-date {
+ font-family: 'archivo';
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: 0.3px;
+}
+
+.snap-size {
+ font-size: 12px;
+ letter-spacing: 0.8px;
+}
+
+.snap-signed {
+ font-size: 12px;
+ letter-spacing: 0.8px;
+}
+
+.snap-envs {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ column-gap: 8px;
+ row-gap: 20px;
+}
+
+.snap-env {
+ padding: 5px 14px !important;
+ font-size: 12px;
+ font-family: 'archivo';
+ font-weight: 600;
+ letter-spacing: 0.3px;
+ border-radius: 20px;
+ background: transparent !important;
+ border: 1.5px solid currentColor !important;
+ box-shadow: none;
+ margin-left: 0;
+}
+
+.snap-env-container {
+ position: relative;
+ cursor: pointer;
+ border-radius: 20px;
+ transition: box-shadow 0.2s ease;
+}
+
+.snap-env-container .select-env-checkbox {
+ display: none;
+}
+
+.snap-env-container.env-selected .snap-env {
+ background-color: rgba(21, 191, 127, 0.15) !important;
+ border-color: #15bf7f !important;
+ color: #15bf7f !important;
+ box-shadow: 0 0 8px rgba(21, 191, 127, 0.3);
}
-/* Etiquettes d'environnements */
+
+/* Env labels */
.env, .last-env, .env-fit, .last-env-fit {
font-size: 13px;
padding-left: 10px;
@@ -403,22 +653,26 @@ input::placeholder {
border-radius: 16px;
}
.env, .env-fit {
- background-color: white;
- color: #000000d9;
+ background: transparent;
+ color: #a0b0c0;
+ border: 1.5px solid currentColor;
+ box-shadow: none;
}
.env-fit, .last-env-fit {
text-align: center;
display: block;
}
.env-fit:hover, .last-env-fit:hover {
- background-color: #e6e6e6;
+ opacity: 0.8;
}
.last-env, .last-env-fit {
- color: white;
- background-color: #F32F63;
+ color: #F32F63;
+ background: transparent;
+ border: 1.5px solid #F32F63;
+ box-shadow: none;
}
.last-env:hover, .last-env-fit:hover {
- background-color: #dc0044;
+ opacity: 0.8;
}
[class^="label-pkg"] {
@@ -442,116 +696,24 @@ input::placeholder {
footer {
display: flex;
- flex-direction: column;
+ align-items: center;
justify-content: space-between;
- row-gap: 40px;
- width: auto;
- height: 300px;
- flex-grow: 1;
- margin-top: 200px;
- padding: 40px 25px 50px 25px;
- box-shadow:
- 0px 1px 1px 0px rgba(0, 0, 0, 0.5) inset,
- 0px 2px 2px 0px rgba(109, 109, 109, 0.2);
- background-color:#182b3e;
-}
-
-footer #github img { width: 25px; }
-
-.circle-div-container div {
- display: inline-block;
- vertical-align: middle;
- margin: 5px 10px 5px 0px;
-}
-
-.circle-div-container-count, .circle-div-container-count-green, .circle-div-container-count-yellow, .circle-div-container-count-red {
- position: relative;
- border-radius: 50%;
- border: 4px solid #5473e8;
- text-align: center;
- display: inline-block;
- padding: 10px;
- width: 25px;
- height: 25px;
- -webkit-box-shadow: 0px 10px 13px -12px #000000, 0px 0px 10px 2px rgb(0 0 0 / 15%);
- box-shadow: 0px 10px 13px -12px #000000, 0px 0px 10px 2px rgb(0 0 0 / 15%);
-}
-.circle-div-container-count span, .circle-div-container-count-green span, .circle-div-container-count-yellow span, .circle-div-container-count-red span {
- position: absolute;
- top: 50%;
- left: 50%;
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- font-size: 13.5px;
-}
-.circle-div-container-count-green { border: 4px solid #15bf7f; }
-.circle-div-container-count-yellow { border: 4px solid #ffb536; }
-.circle-div-container-count-red { border: 4px solid #F32F63; }
-
-#repo-storage-chart {
- min-height: 18px !important;
- height: 18px !important;
- width: 18px !important;
-}
-
-.donut-chart-container {
- width: 120px;
- height: 120px;
- position: relative;
- margin: auto;
-}
-
-.donut-chart {
- position: absolute;
- z-index: 20;
- display: block;
- width: 100% !important;
- height: 100% !important;
-}
-
-.donut-chart-container .donut-legend {
- position: absolute;
- text-align: center;
- font-size: 13px;
- top: 40%;
- left: 50%;
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-.donut-legend-title {
- position: absolute;
- text-align: center;
- font-size: 13px;
- top: 33%;
- left: 50%;
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-.donut-legend-content {
- width: 100%;
- position: absolute;
- text-align: center;
- font-size: 18px;
- top: 60%;
- left: 50%;
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-
-.profiles-container {
- columns: 1;
- column-count: 1;
+ flex-wrap: wrap;
+ row-gap: 20px;
width: 100%;
-}
-
-.profiles-container > div {
- break-inside: avoid;
+ margin-top: 80px;
+ padding: 30px 0;
}
.header-blue, .header-blue-min { background-color: #22384F; }
.header-light-red, .header-light-red-min { background-color: #ff3369 !important; }
.header-light-blue, .header-light-blue-min { background-color: #2b4d6e !important; }
+/* Disable scroll when maintenance mode is active */
+body:has(#maintenance-container) {
+ overflow: hidden;
+}
+
#maintenance-container {
position: fixed;
top: 0;
@@ -593,30 +755,199 @@ footer #github img { width: 25px; }
/* Desktop configuration */
@media (min-width:1500px) {
- #menu {
- justify-content: flex-start;
+ #menu-burger {
+ display: none;
}
- #menu-inline {
- height: 100%;
+
+ #menu
+ {
+ display: flex !important;
+ visibility: visible !important;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ row-gap: 10px;
+ width: 60px;
+ height: 100vh;
+ background: red;
+ }
+
+ #menu-fixed {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100vh;
+ max-height: 100vh;
+ width: 60px;
display: flex;
- visibility: visible;
+ flex-direction: column;
+ align-items: center;
justify-content: space-between;
- flex-grow: 1;
+ row-gap: 10px;
+ background-color: #182b3e;
+ border-right: 1px solid #24405c;
+ padding: 20px 0px;
+ box-sizing: border-box;
+ z-index: 500;
}
- #menu-burger {
- display: none !important;
- visibility: hidden !important;
+
+ #menu img {
+ width: 24px;
+ height: 24px;
+ }
+
+ /* Menu items hover & active state */
+ .menu-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 12px;
+ transition: background-color 0.2s ease, transform 0.15s ease;
+ }
+
+ .menu-item > a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ border-radius: inherit;
+ }
+
+ .menu-item img {
+ opacity: 0.55;
+ transition: opacity 0.2s ease, filter 0.2s ease;
+ }
+
+ .menu-item:hover {
+ background-color: rgba(79, 195, 247, 0.08);
+ transform: scale(1.08);
+ }
+
+ .menu-item-tasks:hover {
+ transform: none;
+ }
+
+ .menu-item:hover img {
+ opacity: 1;
+ filter: drop-shadow(0 0 3px rgba(79, 195, 247, 0.4));
+ }
+
+ .menu-item-active {
+ background-color: rgba(21, 191, 127, 0.12);
+ position: relative;
+ }
+
+ .menu-item-active::before {
+ content: '';
+ position: absolute;
+ left: -10px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 3px;
+ height: 24px;
+ background-color: #15bf7f;
+ border-radius: 0 3px 3px 0;
+ }
+
+ .menu-item-active img {
+ opacity: 1;
+ filter: brightness(1.2) drop-shadow(0 0 2px rgba(21, 191, 127, 0.3));
+ }
+
+ .menu-item-active:hover {
+ background-color: rgba(21, 191, 127, 0.16);
+ }
+
+ /* Running tasks badge on sidebar menu */
+ .menu-item-tasks {
+ position: relative;
}
- .menu-tab-title {
+
+ .menu-task-badge {
+ position: absolute;
+ top: -4px;
+ right: -4px;
+ width: 16px;
+ height: 16px;
+ line-height: 16px !important;
+ border-radius: 50%;
+ background-color: #F32F63;
+ color: white;
+ text-align: center;
+ font-size: 9px;
+ font-family: monospace;
+ pointer-events: none;
+ z-index: 2;
+ }
+
+ .menu-task-popup {
+ display: none;
+ position: absolute;
+ left: calc(100% + 12px);
+ top: 50%;
+ transform: translateY(-50%);
+ min-width: max-content;
+ background-color: #182b3e;
+ border: 1px solid #24405c;
+ border-radius: 12px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+ padding: 6px;
+ z-index: 400;
+ }
+
+ .menu-task-popup::before {
+ content: '';
+ position: absolute;
+ left: -12px;
+ top: 0;
+ width: 12px;
+ height: 100%;
+ }
+
+ .menu-item-tasks:hover .menu-task-popup {
display: block;
- font-family: 'Archivo';
- font-weight: 600;
- font-size: 16px;
+ }
+
+ .menu-task-popup-item {
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+ padding: 8px 12px;
+ border-radius: 8px;
+ white-space: nowrap;
+ transition: background-color 0.15s ease;
+ }
+
+ .menu-task-popup-item:hover {
+ background-color: rgba(79, 195, 247, 0.08);
+ font-weight: normal;
+ }
+
+ .menu-task-popup-item span {
+ font-size: 13px;
+ color: #97a5b4;
+ }
+
+ .menu-task-popup-repo {
+ font-size: 13px;
+ color: white !important;
+ background-color: #F32F63;
+ padding: 2px 8px;
+ border-radius: 50px;
}
article {
flex-direction: row;
flex-wrap: wrap;
+ padding: 10px 0;
+ }
+
+ #virtual-space {
+ display: block;
+ visibility: visible;
}
.section-main {
@@ -639,4 +970,16 @@ footer #github img { width: 25px; }
.repos-list-group-flex-div {
grid-template-columns: 350px 55px auto auto auto 55px 1fr 40px;
}
+
+ .repo-toolbar {
+ flex-wrap: nowrap;
+ }
+
+ .repo-toolbar #repo-search-input {
+ min-width: 150px;
+ }
+
+ .snap-envs {
+ justify-content: flex-end;
+ }
}
\ No newline at end of file
diff --git a/www/public/resources/styles/run.css b/www/public/resources/styles/run.css
index 3fdf5d64f..6bc0a0ace 100644
--- a/www/public/resources/styles/run.css
+++ b/www/public/resources/styles/run.css
@@ -1,20 +1,24 @@
-#log-refresh-container {
+#task-refresh-container {
flex: 0 0 100%;
position: relative;
min-height: 90vh;
}
-#log-refresh-container h3 {
+#task-refresh-container h3 {
margin-top: 0 !important;
margin-bottom: 0 !important;
border: none;
}
-#log-refresh-container h6 {
+#task-refresh-container #task-details h6 {
+ margin-bottom: 5px;
+}
+
+#task-refresh-container h6 {
margin-top: 30px;
}
-#log-refresh-container pre { /* empecher le contenu des de dépasser */
+#task-refresh-container pre { /* empecher le contenu des de dépasser */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
@@ -39,14 +43,15 @@
line-height: 2 !important;
}
-/* Boutons Top et Down pour atteindre le haut ou le bas de page */
#scroll-btns-container {
- display: none;
+ display: block;
+ position: fixed;
+ right: 20px;
+ bottom: 20px;
+ z-index: 1000;
}
-/* Les boutons scroll sont fixes à l'intérieur du container */
+/* Les boutons scroll sont affichés en colonne */
#scroll-btns {
- position: sticky;
- top: 570px;
display: flex;
flex-direction: column;
row-gap: 5px;
@@ -169,15 +174,10 @@
/* Desktop configuration */
@media (min-width:1500px) {
- #log-refresh-container {
+ #task-refresh-container {
flex: 0 0 94%;
}
- #scroll-btns-container {
- display: block;
- order: 2;
- }
-
.task-step-content {
grid-template-columns: 96% 4%;
}
diff --git a/www/public/resources/styles/stats-hosts.css b/www/public/resources/styles/stats-hosts.css
index 3e60cb60a..cffb719b9 100644
--- a/www/public/resources/styles/stats-hosts.css
+++ b/www/public/resources/styles/stats-hosts.css
@@ -69,6 +69,92 @@
break-inside: avoid;
}
+/* Host group header (aligned with repos group-header style) */
+.hosts-group-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 14px 20px 14px 5px;
+}
+
+.hosts-group-header-left {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.hosts-group-header-name {
+ font-family: 'archivo';
+ font-size: 18px;
+ font-weight: 700;
+ color: #f0f4f8;
+ letter-spacing: 0.3px;
+}
+
+.hosts-group-header-count {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 24px;
+ height: 24px;
+ padding: 0 8px;
+ font-family: 'archivo';
+ font-size: 12px;
+ font-weight: 700;
+ color: #4fc3f7;
+ background-color: rgba(79, 195, 247, 0.12);
+ border: 1px solid rgba(79, 195, 247, 0.35);
+ border-radius: 12px;
+}
+
+/* Host group content (aligned with repos group-content style) */
+.hosts-group-content {
+ margin-left: 12px;
+ padding-left: 20px;
+ border-left: 2px solid #1e3a54;
+}
+
+/* Host line item (aligned with task-item / snap-container style) */
+.host-line {
+ display: grid;
+ grid-template-columns: 1fr;
+ align-items: center;
+ column-gap: 20px;
+ padding: 14px 20px;
+ background: linear-gradient(135deg, #121f30, #162a3e);
+ border: 1px solid #1e3a54;
+ border-left: 3px solid #1e3a54;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.host-line:hover {
+ border-color: #2d5575;
+ background: linear-gradient(135deg, #152538, #1a2f44);
+}
+
+.host-line.host-selected {
+ border-color: #15bf7f;
+ background: linear-gradient(135deg, #0f2a1f, #132f28);
+}
+
+.host-line .js-host-checkbox {
+ display: none;
+}
+
+.host-accent-green {
+ border-left-color: #15bf7f;
+}
+
+.host-accent-red {
+ border-left-color: #F32F63;
+}
+
+.host-accent-yellow {
+ border-left-color: #ffb536;
+}
+
.searchInput-container {
width: 100%;
margin-bottom: 50px;
@@ -255,4 +341,55 @@
column-gap: 10px;
row-gap: 15px;
}
+}
+
+/**
+ * Host detail page items (packages, events, requests)
+ */
+.host-package-item,
+.host-event-item,
+.host-request-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 18px;
+ background: linear-gradient(135deg, #121f30, #162a3e);
+ border: 1px solid #1e3a54;
+ border-left: 3px solid #1e3a54;
+ border-radius: 10px;
+ transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.host-package-item:hover,
+.host-event-item:hover,
+.host-request-item:hover {
+ border-color: #2d5575;
+ background: linear-gradient(135deg, #152538, #1a2f44);
+}
+
+/* Selectable packages */
+.host-package-item.pointer {
+ cursor: pointer;
+}
+
+.host-package-item .available-package-checkbox {
+ display: none;
+}
+
+.host-package-item.host-package-selected {
+ border-color: #15bf7f;
+ background: linear-gradient(135deg, #0f2a1f, #132f28);
+}
+
+/* Request status accents */
+.host-request-item.request-accent-green {
+ border-left-color: #15bf7f;
+}
+
+.host-request-item.request-accent-red {
+ border-left-color: #F32F63;
+}
+
+.host-request-item.request-accent-yellow {
+ border-left-color: #ffb536;
}
\ No newline at end of file
diff --git a/www/update/database/5.x.x.php b/www/update/database/5.x.x.php
new file mode 100644
index 000000000..8c4deccf5
--- /dev/null
+++ b/www/update/database/5.x.x.php
@@ -0,0 +1,13 @@
+db->columnExist('repos_snap', 'Pkg_translation')) {
+ try {
+ $this->db->exec("ALTER TABLE repos_snap DROP COLUMN Pkg_translation");
+ } catch (Exception $e) {
+ throw new Exception('could not delete Pkg_translation column from repos_snap table');
+ }
+}
diff --git a/www/views/includes/containers/header/debug-mode.inc.php b/www/views/includes/containers/header/debug-mode.inc.php
index 24e976643..4a442d8f6 100644
--- a/www/views/includes/containers/header/debug-mode.inc.php
+++ b/www/views/includes/containers/header/debug-mode.inc.php
@@ -1,4 +1,4 @@
-
+
-
+
diff --git a/www/views/includes/containers/header/general-error-messages.inc.php b/www/views/includes/containers/header/general-error-messages.inc.php
index 907892fe9..0fb028118 100644
--- a/www/views/includes/containers/header/general-error-messages.inc.php
+++ b/www/views/includes/containers/header/general-error-messages.inc.php
@@ -1,4 +1,4 @@
-
+
-
+
diff --git a/www/views/includes/containers/header/general-log-messages.inc.php b/www/views/includes/containers/header/general-log-messages.inc.php
index acac98b91..87525d4a9 100644
--- a/www/views/includes/containers/header/general-log-messages.inc.php
+++ b/www/views/includes/containers/header/general-log-messages.inc.php
@@ -1,4 +1,4 @@
-
+
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/www/views/includes/containers/header/menu.inc.php b/www/views/includes/containers/header/menu.inc.php
index 7d45ec77d..8c4b953ce 100644
--- a/www/views/includes/containers/header/menu.inc.php
+++ b/www/views/includes/containers/header/menu.inc.php
@@ -1,197 +1,105 @@
-
-
');
+ $(element).replaceWith('