/* * Componenti condivisi del portale (ReeVo e Cloudzzle). * Classi introdotte al posto degli stili inline ripetuti nelle view: qui hanno gli stessi valori che * avevano inline, cosi' l'aspetto non cambia per chi non carica il tema; reevo-theme.css le ridisegna * per ReeVo. */ /* riquadri delle risorse nelle dashboard dei servizi (Iaas, VCC, CloudBox, Mailbox, ParentResources...) */ .rv-res-title { line-height: 30px; } .rv-res-badge { line-height: 20px; } .rv-res-icon { font-size: 44px; } .rv-res-spacer { line-height: 10px; } /* ---------- release note (Views/ReleaseNote/Index): timeline ---------- Colori dalle variabili del tema ReeVo (anche in modalita' scura), con valori di riserva per Cloudzzle */ .rv-rn-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .rv-rn-search { position: relative; flex: 0 1 360px; } .rv-rn-search .fa { position: absolute; left: 12px; top: 11px; color: var(--rv-muted, #888); } .rv-rn-toolbar .rv-rn-search .form-control { padding-left: 34px; } /* piu' specifica della regola dei campi del tema */ .rv-rn-count { color: var(--rv-muted, #888); font-size: 12.5px; } .rv-rn-year { font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--rv-muted, #888); margin: 6px 0 12px; padding-left: 4px; } .rv-rn-item { display: grid; grid-template-columns: 112px 28px minmax(0, 1fr); column-gap: 14px; } .rv-rn-meta { text-align: right; padding-top: 16px; } .rv-rn-version { display: inline-block; font-weight: 700; font-size: 15px; color: var(--rv-text, #333); } .rv-rn-date { display: block; font-size: 12px; color: var(--rv-muted, #888); margin-top: 2px; } .rv-rn-rail { position: relative; } .rv-rn-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--rv-border, #e7eaec); } .rv-rn-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; margin: 20px auto 0; background: var(--rv-surface, #fff); border: 2px solid var(--rv-border-strong, #ccc); } .rv-rn-item.is-current .rv-rn-dot { background: var(--rv-brand, #00a3da); border-color: var(--rv-brand, #00a3da); box-shadow: 0 0 0 4px var(--rv-primary-soft, rgba(0, 163, 218, .15)); } .rv-rn-card.ibox { margin-bottom: 16px; } .rv-rn-card .ibox-content { padding: 14px 18px; } .rv-rn-head { margin-bottom: 6px; } .rv-rn-list { margin: 0; padding-left: 18px; } .rv-rn-list li { margin: 4px 0; line-height: 1.5; } .rv-rn-list li::marker { color: var(--rv-brand, #00a3da); } .rv-rn-summary { color: var(--rv-muted, #888); margin: 0 0 4px; } .rv-rn-more { font-size: 12.5px; font-weight: 600; } .rv-rn-more .rv-rn-more-hide, .rv-rn-more:not(.collapsed) .rv-rn-more-show { display: none; } .rv-rn-more:not(.collapsed) .rv-rn-more-hide { display: inline; } .rv-rn-card.is-open .rv-rn-summary { display: none; } /* durante la ricerca le release trovate mostrano tutte le modifiche */ .rv-rn-card.is-searching .rv-rn-collapse { display: block; height: auto !important; } .rv-rn-card.is-searching .rv-rn-summary, .rv-rn-card.is-searching .rv-rn-more { display: none; } @media (max-width: 767px) { .rv-rn-item { grid-template-columns: minmax(0, 1fr); } .rv-rn-rail { display: none; } .rv-rn-meta { text-align: left; padding-top: 0; margin-bottom: 6px; } .rv-rn-date { display: inline; margin-left: 8px; } } /* ---------- elenco dei cloud (Views/Administration/Clouds): matrice compatta dei servizi ---------- Colonne strette con l'icona nell'intestazione; nelle celle un segno di spunta se il servizio e' attivo. Le frecce di ordinamento di DataTables coprirebbero l'icona: si nascondono e l'icona della colonna ordinata prende il colore dei link. Selettori con una classe in piu' per prevalere su DataTables e tema. */ table.dataTable thead > tr > th.rv-svc-col.rv-svc-col, table.dataTable tbody > tr > td.rv-svc-col.rv-svc-col { width: 44px; padding-left: 4px; padding-right: 4px; text-align: center; } table.dataTable thead > tr > th.rv-svc-col.rv-svc-col { color: var(--rv-muted, #888); font-size: 14px; cursor: pointer; } table.dataTable thead > tr > th.rv-svc-col.rv-svc-col::before, table.dataTable thead > tr > th.rv-svc-col.rv-svc-col::after { display: none; } table.dataTable thead > tr > th.rv-svc-col.sorting_asc, table.dataTable thead > tr > th.rv-svc-col.sorting_desc { color: var(--rv-link, #0079ad); } .rv-svc-check { color: var(--rv-success, #16a36a); font-size: 15px; } html[data-theme="dark"] .rv-svc-check { color: var(--rv-success-text, #5fd3a0); } /* ---------- caricamento a tutta pagina (Block/NavigationBlock di Scripts/Commons.js) ---------- Solo per l'overlay di blockUI a tutta pagina (figlio diretto del body del portale): login, pagine dell'account e blocchi su singoli riquadri restano come sono. Velo e box compaiono dopo 300 ms: l'overlay blocca subito i clic, ma resta invisibile se l'operazione e' rapida. */ body.cloudportal > .blockUI.blockOverlay { background-color: rgba(13, 36, 51, .16) !important; -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); animation: rv-loading-in .15s ease-out .3s both; } html[data-theme="dark"] body.cloudportal > .blockUI.blockOverlay { background-color: rgba(0, 0, 0, .35) !important; } body.cloudportal > .blockUI.blockMsg { animation: rv-loading-in .15s ease-out .3s both; } /* navigazione: nessun velo, solo la barra in cima */ body.cloudportal.rv-navigating > .blockUI.blockOverlay { background-color: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .rv-loading-box { min-width: 220px; max-width: 320px; padding: 22px 28px 20px; text-align: center; background: var(--rv-surface, #fff); color: var(--rv-text, #333); border: 1px solid var(--rv-card-border, transparent); border-radius: var(--rv-card-radius, 8px); box-shadow: var(--rv-shadow-lg, 0 10px 30px rgba(16, 38, 56, .16)); } .rv-spinner { display: inline-block; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; border: 3px solid var(--rv-primary-soft, #e6f5fb); border-top-color: var(--rv-brand, #00a3da); animation: rv-spin .8s linear infinite; } .rv-loading-text { font-size: 13.5px; font-weight: 500; } .rv-nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20005; pointer-events: none; } .rv-nav-progress::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--rv-brand, #00a3da), #4cc3ef); box-shadow: 0 0 8px rgba(0, 163, 218, .6); border-radius: 0 3px 3px 0; animation: rv-nav-progress 8s cubic-bezier(.1, .7, .3, 1) forwards; } @keyframes rv-loading-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rv-spin { to { transform: rotate(360deg); } } /* avanza veloce all'inizio e rallenta, senza arrivare in fondo: la pagina nuova la sostituisce */ @keyframes rv-nav-progress { 0% { width: 0; } 15% { width: 40%; } 50% { width: 70%; } 100% { width: 92%; } } @media (prefers-reduced-motion: reduce) { .rv-spinner { animation-duration: 2s; } .rv-nav-progress::before { animation: none; width: 70%; } } /* ---------- griglie dati: convenzioni comuni (.rv-grid sulla ) ---------- Prima applicazione: Views/VCC/Tenants. Da usare per tutte le griglie, cosi' restano uniformi: - celle e intestazioni su una riga (il nome non va mai a capo; se non c'e' spazio, scorrimento orizzontale) - intestazione a gruppi: sopra le etichette brevi, .rv-grid-sep tra i gruppi - colonna fissa a sinistra durante lo scorrimento: .rv-sticky su
e (anche con scrollX di DataTables) - valori numerici centrati (.rv-num), uso con barra sottile (.rv-usage), trattino per i valori assenti */ table.rv-grid th, table.rv-grid td { white-space: nowrap; } table.rv-grid thead tr.rv-grid-group th { text-align: center; font-size: 11.5px; letter-spacing: .5px; color: var(--rv-link, #0079ad); border-bottom: 2px solid var(--rv-border-strong, #ccc) !important; } table.rv-grid thead tr.rv-grid-group th.rv-sticky { text-align: left; color: inherit; } table.rv-grid .rv-grid-sep { border-left: 1px solid var(--rv-border, #e7eaec) !important; } table.rv-grid td.rv-num { text-align: center; font-variant-numeric: tabular-nums; } table.rv-grid .rv-grid-name { font-weight: 500; } /* grassetti nelle celle (es. nome della VM in ) piu' leggeri: il nome si distingue senza appesantire la colonna */ table.rv-grid td strong, table.rv-grid td b { font-weight: 500; } table.rv-grid .rv-grid-muted { color: var(--rv-muted, #888); } table.rv-grid .rv-grid-warning { color: var(--rv-warning, #c77c02); margin-right: 6px; } table.rv-grid .rv-muted-dash { color: var(--rv-disabled, #aaa); } /* colonna fissa: DataTables imposta position: relative sulle intestazioni ordinabili, qui serve sticky */ table.rv-grid .rv-sticky { left: 0; z-index: 2; background: var(--rv-surface, #fff); box-shadow: 1px 0 0 var(--rv-border, #e7eaec); } table.rv-grid thead > tr > th.rv-sticky.rv-sticky, table.rv-grid tbody > tr > td.rv-sticky.rv-sticky { position: sticky; } table.rv-grid thead .rv-sticky { z-index: 3; background: var(--rv-thead, #f5f5f6); } table.rv-grid.table-striped > tbody > tr:nth-of-type(odd) > td.rv-sticky { background: var(--rv-stripe, #f9f9f9); } table.rv-grid.table-hover > tbody > tr:hover > td.rv-sticky { background: var(--rv-row-hover, #f5f5f5); } /* cella fissa con un menu aperto: sopra le celle fisse delle altre righe (grid-defaults.js) */ table.rv-grid td.rv-menu-open.rv-menu-open { z-index: 10; } /* colonna fissa a destra (es. Operazioni): .rv-sticky-end */ table.rv-grid .rv-sticky-end { right: 0; z-index: 2; background: var(--rv-surface, #fff); box-shadow: -1px 0 0 var(--rv-border, #e7eaec); } table.rv-grid thead > tr > th.rv-sticky-end.rv-sticky-end, table.rv-grid tbody > tr > td.rv-sticky-end.rv-sticky-end { position: sticky; } table.rv-grid thead .rv-sticky-end { z-index: 3; background: var(--rv-thead, #f5f5f6); } table.rv-grid.table-striped > tbody > tr:nth-of-type(odd) > td.rv-sticky-end { background: var(--rv-stripe, #f9f9f9); } table.rv-grid.table-hover > tbody > tr:hover > td.rv-sticky-end { background: var(--rv-row-hover, #f5f5f5); } /* colonne di soli pulsanti o menu (es. Operazioni, grid-defaults.js): larghe quanto il pulsante; !important perche' DataTables scrive la larghezza calcolata nello stile della cella */ table.rv-grid th.rv-grid-actions, table.rv-grid td.rv-grid-actions { width: 1% !important; white-space: nowrap; } /* barra d'uso sottile sotto il valore (verde, gialla oltre il 70%, rossa oltre il 90%) */ .rv-usage { display: block; width: 72px; height: 4px; margin: 5px auto 0; border-radius: 2px; background: var(--rv-track, #e9eef3); overflow: hidden; } .rv-usage > span { display: block; height: 100%; border-radius: 2px; background: var(--rv-success, #16a36a); } .rv-usage.is-warning > span { background: #e39a12; } .rv-usage.is-danger > span { background: var(--rv-danger, #d93a3f); } /* applicate a tutte le griglie da Scripts/grid-defaults.js */ .rv-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.rv-grid th.rv-grid-wrap, table.rv-grid td.rv-grid-wrap { white-space: normal; min-width: 220px; } /* barre d'uso di Bootstrap dentro le griglie: stessa barra sottile di .rv-usage, senza strisce; colori invariati */ table.rv-grid td .progress { height: 4px; width: 72px; margin: 5px 0 0; border-radius: 2px; background: var(--rv-track, #e9eef3); box-shadow: none; } table.rv-grid td .progress .progress-bar { background-image: none; box-shadow: none; border-radius: 2px; background-color: var(--rv-success, #16a36a); } table.rv-grid td .progress .progress-bar-warning { background-color: #e39a12; } table.rv-grid td .progress .progress-bar-danger { background-color: var(--rv-danger, #d93a3f); } table.rv-grid td.text-center .progress, table.rv-grid td.rv-num .progress { margin-left: auto; margin-right: auto; } table.rv-grid td.text-left .rv-usage { margin-left: 0; } /* Voci dei menu "Operazioni" fatte con