/* **************************************************************** */ /* Background */ body, #container, #column_l, .deviceBarCheckbox, .deviceBarIcon, .baricon, .card, .night #container, .night #column_l, .night .deviceBarCheckbox, .night .deviceBarIcon, .night .baricon, .night .card{ background-color: unset !important; } #container, #p30html2 > table>*>*>* { background-color: #f3f3f3 !important; } .night #container, .night #p30html2 > table>*>*>* { background-color: #1c1e1e !important; } /* .deviceBarIcon .j1 { margin-top: 2px !important; margin-left: 6px !important; } */ a, div[id^="dialog"] a { text-decoration: none !important; } .DevSt a, td.DevSt a, #xdevices div a, div[id^="p10html"]:not([id="p10html"]) a { text-decoration: none !important; padding: 11px !important; font-size: smaller !important; } /* **************************************************************** */ /* Columns and List View */ /* Columns view */ span[id^="DevxHeader"] { font-size: small !important; font-weight: 300 !important; } span[class^="devHeaderx"] { font-size: small !important; font-weight: 300 !important; color: #999; } /* Agent, Powered, AMT text */ .e2t > div > span { font-size: x-small !important; color: #999 !important; } .e2t > div { font-size: x-small !important; padding-top: 0px !important; padding-left: 6% !important; } div.e1t { margin-bottom: 0px !important; width: unset !important; padding-right: 6% !important; padding-left: 6% !important; font-size: small !important; padding-bottom: 0% !important; } .e2t { background-color: transparent !important; width: unset !important; max-width: 170px !important; } /* box - little left box */ .g1t { background-image: none !important; background-color: transparent !important; display: none !important; } /* box - little Right box */ .g2t { display: none !important; } /* box hover */ .e2s { background-color: #c9c9c91c !important; } .night .e2s { background-color: #33333336 !important; } #xdevices > [id^="DevxCol"] > [id^="xv1node"] { width: 250px !important; margin-right: 2% !important; } /* List view */ /* box */ .style10 { background-color: transparent !important; } #p3 .p3eventsTable tbody tr td:first-child, #p31 .p3eventsTable tbody tr td:first-child { background-color: unset !important; cursor: pointer; } #p31 > table > tbody > tr > td.h1, #p31 > table > tbody > tr > td.h2 { display: none; } .bar18 { background-color: transparent !important; } /* box - little left box */ .g1 { background-image: none !important; background-color: transparent !important; } /* box - little Right box */ .g2 { display: none !important; } /* Custom H1 size */ h1 { font-size: x-large; } #NoMeshesPanel { margin: 25px !important; } #getStarted1 { margin-left: 25px !important; } #getStarted2 { margin-left: 25px !important; } .DevSt { border-bottom-width: 4px !important; border-bottom-color: #DDDDDD00 !important; padding-right: 20px; color: var(--bs-body-color); } span[cmenu="meshContextMenu"] { margin-left: 15px !important; margin-right: 15px !important; font-size: medium !important; color: var(--bs-body-color); !important; } #xdevices > [id^="DevxCol"] { margin-bottom: 30px !important; margin-left: 50px !important; } #xdevices div[style*="border-top-style:solid"][style*="border-top-width:1px"] { border-top-color: #DDDDDD40 !important; } td.DevSt #MxMESH { margin-left: 15px !important; margin-right: 15px !important; font-size: medium !important; } table tr td div[id^="DevxCol"] { margin-bottom: 30px !important; margin-left: 50px !important; } /* List view devices with alternate colors - panreyes suggestion */ #xdevices table:has(span[id^="MxMESH"]) tr:nth-child(odd) { background: #f7fafc0f !important; } #xdevices table:has(span[id^="MxMESH"]) tr:nth-child(even) { background: #9393930f !important; } .night #xdevices table:has(span[id^="MxMESH"]) tr:nth-child(odd) { background: #81818112 !important; } .night #xdevices table:has(span[id^="MxMESH"]) tr:nth-child(even) { background: #3333330f !important; } #xdevices table:has(span[id^="MxMESH"]) tr:hover { background-color: color-mix(in lab, currentColor 7%, transparent) !important; transition: background-color 0.2s ease; } .night #xdevices table:has(span[id^="MxMESH"]) tr:hover { background-color: color-mix(in lab, currentColor 12%, transparent) !important; transition: background-color 0.2s ease; } /* List View - adjustments for Daan Selen */ tr[name="xxdevice2"] { height: 2rem !important; position: relative !important; } #devs td { padding: 0 !important; vertical-align: middle !important; position: relative !important; height: 2rem !important; border: none !important; } #devs.bar18 { width: 100% !important; height: 100% !important; min-height: 2rem !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; padding: 0 2px !important; font-size: medium !important; cursor: pointer !important; /* position: relative !important; */ pointer-events: auto !important; background: transparent !important; z-index: 1 !important; } #devs table[onmouseup^="gotoDevice"] { width: 100% !important; height: 100% !important; min-height: 2rem !important; display: table !important; table-layout: fixed !important; border-collapse: collapse !important; cursor: pointer !important; } #devs table[onmouseup^="gotoDevice"] td { height: 100% !important; min-height: 2rem !important; padding: 0 !important; border: none !important; vertical-align: middle !important; } #devs .style10 { flex: 1 !important; min-width: 0 !important; height: 100% !important; min-height: 2rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 0.75rem !important; cursor: pointer !important; overflow: hidden !important; box-sizing: border-box !important; font-size: 14px !important; white-space: nowrap !important; text-overflow: ellipsis !important; pointer-events: auto !important; background: transparent !important; } #xdevices table:has(span[id^="MxMESH"]) tr:nth-child(odd) { background: #f7fafc0f !important; } #xdevices table:has(span[id^="MxMESH"]) tr:nth-child(even) { background: #9393930f !important; } .night #xdevices table:has(span[id^="MxMESH"]) tr:nth-child(odd) { background: #81818112 !important; } .night #xdevices table:has(span[id^="MxMESH"]) tr:nth-child(even) { background: #3333330f !important; } #xdevices table:has(span[id^="MxMESH"]) tr:hover { background-color: color-mix(in lab, currentColor 7%, transparent) !important; transition: background-color 0.2s ease; z-index: 2 !important; } .night #xdevices table:has(span[id^="MxMESH"]) tr:hover { background-color: color-mix(in lab, currentColor 12%, transparent) !important; transition: background-color 0.2s ease; } #devs .deviceBarCheckbox, #devs .deviceBarIcon, #devs .style10, #devs .style10 > .flex-grow-1, #devs .style10 > div[style*="float:right"], #devs .bar18, #devs .g1, #devs .g2 { background: transparent !important; background-color: transparent !important; } .night #devs .deviceBarCheckbox, .night #devs .deviceBarIcon, .night #devs .style10, .night #devs .style10 * { background: transparent !important; } .deviceBarCheckbox { display: flex !important; align-items: center !important; justify-content: center !important; width: 2.5rem !important; height: 100% !important; min-height: 2rem !important; flex-shrink: 0 !important; } .deviceBarCheckbox input { margin: 0 !important; width: 1rem !important; height: 1rem !important; } .deviceBarIcon { display: flex !important; align-items: center !important; justify-content: center !important; width: 2.5rem !important; height: 100% !important; min-height: 2rem !important; flex-shrink: 0 !important; cursor: pointer !important; } .deviceBarIcon > div { margin: 0 !important; width: 1rem !important; height: 1rem !important; } #devs .g1, #devs .g2 { display: none !important; } #devs .bar18 { height: 100% !important; min-height: 2rem !important; } #devs tr[name="xxdevice2"], #devs, #devs .style10, #devs .deviceBarIcon, #devs .deviceBarCheckbox, #devs table[onmouseup^="gotoDevice"], #devs table[onmouseup^="gotoDevice"] td { pointer-events: auto !important; cursor: pointer !important; } /* Normalize fonts specifically for the #xdevices list view */ #xdevices table th, #xdevices table td, #xdevices .style10 { /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important; */ font-size: smaller !important; line-height: 1.4 !important; font-weight: normal !important; } /* Ensure consistent font in table headers */ #xdevices table th { font-weight: 400 !important; text-transform: none !important; } /* Override inline font sizes in device bars and cells */ #xdevices .style10[style*="font-size"], #xdevices td[style*="font-size"] { font-size: smaller !important; font-family: inherit !important; } /* Target spans inside cells for consistency */ #xdevices td span { font-size: inherit; font-family: inherit !important; } .tagSpan { background-color: lightgray; padding: 2px 7px; border-radius: 3px; font-size: x-small !important; } /* Mobile Toolbar - For My Devices Page (Select All, Group Action, Filter & OS Name CheckBox) */ @media (max-width: 900px) { #devListToolbarSpan { flex-wrap: wrap; gap: 8px; } #devListToolbar, #kvmListToolbar { flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; } #devListToolbarSpan > .d-flex.ms-auto { flex-basis: 100%; flex-wrap: wrap; gap: 8px; justify-content: flex-start; } #SearchInput, #KvmSearchInput { flex: 1 1 220px; min-width: 0; max-width: 100%; } #DevFilterSelect, #viewselect, #sizeselect, #sortselect { flex: 0 1 200px; max-width: 100%; } #devListToolbar .form-check, #kvmListToolbar .form-check { flex: 0 0 auto; } #devListToolbar .btn, #kvmListToolbar .btn { flex: 0 0 auto; } } /* **************************************************************** */ /* Device Details */ #p17info2 .table.table-hover { --bs-table-bg: unset !important; --bs-table-hover-bg: unset !important; } #p17info2 > table > tbody > tr > td * { border: none !important; cursor: default; } @media (min-width: 769px) { #p17info2 > table > tbody > tr > td > div:nth-child(2) { margin-left: 40px !important; margin-right: 40px !important; } #p17graph > table > tbody > tr > td:nth-child(2) > div:nth-child(2) { width:calc(100% - 56px) !important; } .col-md-8 { flex: 0 0 auto; width: 360px !important; padding-left: 32px; } .col-md-4 { flex: 0 0 auto; width: auto; /* width: 65% !important; */ } } .col-md-4 { text-align: left !important; } #p17info2 > table > tbody > tr > td > div{ margin-bottom: 2.3rem !important; } #p17graph table > tbody > tr > td > img, #p17info2 > table > tbody > tr > td > img, #p17info2 > table > tbody > tr > img { transform: translateY(-20px); filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.45)); } .night #p17graph table > tbody > tr > td > img, .night #p17info2 > table > tbody > tr > td > img, .night #p17info2 > table > tbody > tr > img { filter: drop-shadow(6px 6px 6px rgba(189, 185, 185, 0.25)); } #p17graph table, #p17info2 > table { background-color: #e5e5e582; border-radius: 40px; max-width: 1000px !important; margin-left: auto; margin-right: auto; margin-top: 50px; } @supports (corner-shape: squircle) or (corner-shape: superellipse) { #p17graph table, #p17info2 > table { border-radius: 120px; corner-shape: squircle; } } .night #p17graph table, .night #p17info2 > table { background-color: #8181810f; } #p17info2 table > tbody > tr > td > div > div:hover { background-color: color-mix(in lab, currentColor 7%, transparent) !important; transition: background-color 0.2s ease; } .night #p17info2 table > tbody > tr > td > div > div:hover { background-color: color-mix(in lab, currentColor 12%, transparent) !important; transition: background-color 0.2s ease; } #devListToolbarViewIcons3 { margin-right: 25px; } #p17info { caption-side: bottom; border-collapse: collapse; vertical-align: inherit; unicode-bidi: isolate; overflow-wrap: break-word; align-items: center; display: block !important; margin-left: auto !important; margin-right: auto !important; } #p17info2 > table > tbody > tr > td > div.DevSt { line-height: 4rem; margin-bottom: unset !important; } #p17info2 .row.mb-1 { width: 100%; margin-right: unset !important; margin-left: unset !important; } #p17info2 > table > tbody > tr > td:nth-child(2) > div > table > tbody > tr > td > div { padding: unset !important; --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; } #p17info2 > table > tbody > tr > td * { color: var(--bs-body-color); } .night #p17info2 > table > tbody > tr > td * { color: #BBB; } #p17info2 > table { margin-bottom: 10px; } #p17info2 > table > tbody > tr > td:nth-child(1) { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; pointer-events: none; } /* device details animation */ #p17graph > table, #p17info2 > table { animation: p17-pop-in 0.4s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(0.2s * sibling-index()); } @keyframes p17-pop-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* **************************************************************** */ /* Device - General Page customization */ #p10 span[tabindex="0"], #p10 span[onclick="showEditNodeValueDialog(3)"], #p10 span[onclick="showEditNodeValueDialog(2)"] { color: #69B !important; } #p10 #p10deviceName svg.fa-pencil, #p10 #p10info svg.fa-pencil { display: none !important; } #p10 .fs-4.fw-bold { font-size: 0 !important; } #p10deviceName { font-size: 1.5rem !important; font-weight: bold !important; } /* notes panel */ #notesPanel table { color: #212529; background-color: #efefef; border-radius: 20px; overflow: hidden; } .night #notesPanel table { color: #DEE2E6; background-color: #242323; } #notesPanel thead tr { background-color: #e4e3e3; } .night #notesPanel thead tr { background-color: #292929; } #notesPanel > table > tbody > tr > td { padding: 0px 0 10px 10px; font-size: small; } #notesPanel th { text-align: center; } /* **************************************************************** */ /* Drop down context menu */ .contextMenu { border-radius: 10px !important; border: unset !important; box-shadow: 0 0 12px #0000004d !important; padding: 4px; /* color: #CCC !important; */ background-color: rgba(242, 242, 242, 0.75) !important; backdrop-filter: blur(12px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(1.1) !important; overflow: hidden; } .night .contextMenu { box-shadow: 0 0 12px #050505ba !important; /* color: #CCC !important; */ background-color: rgba(41, 44, 44, 0.75) !important; } hr#cxmgroupsplit { margin: 2px 0px !important; /* margin-bottom: 6px !important; */ } .cmtext:hover { background-color: color-mix(in lab, currentcolor 5%, transparent) !important; transition: background-color 0.2s ease; } .cmtext { width: 100% !important; font-size: smaller !important; color: unset !important; padding: 6px 12px; overflow: unset !important; border-radius: 7px !important; } #cxinfo > b { font-weight: normal !important; } .dropdown-menu.show { border-radius: 10px !important; border: unset !important; background-color: #f2f2f2 !important; box-shadow: 0 0 12px #0000004d !important; font-size: smaller !important; padding: 4px; background-color: rgba(242, 242, 242, 0.75) !important; backdrop-filter: blur(12px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(12px saturate(120%) brightness(1.1)) !important; overflow: hidden; } .night .dropdown-menu.show { background-color: #292c2c !important; box-shadow: 0 0 12px #050505ba !important; background-color: rgba(41, 44, 44, 0.75) !important; } .dropdown-menu.show > li > a { color: var(--bs-body-color) !important; } .dropdown-item, .dropdown-item { border-radius: 7px !important; } .dropdown-item:focus, .dropdown-item:hover { background-color: color-mix(in lab, currentcolor 5%, transparent) !important; transition: background-color 0.2s ease; border-radius: 7px !important; } /* **************************************************************** */ /* History Tabs */ #masthead { position: relative !important; overflow: visible !important; } #history-tabs-wrapper { position: absolute; bottom: 0; /* left: 1%; */ width: auto; max-width: 100% !important; height: 22px; display: flex; align-items: end; padding: 0 10px; /* background: transparent; */ /* border-top: none; */ overflow-x: auto; scrollbar-width: none; z-index: 100; justify-content: flex-start; overflow-y: hidden; white-space: nowrap; /* padding-left: 32px; */ /* opacity: unset; */ left: 50%; transform: translateX(-50%); } #history-tabs-wrapper::before, #history-tabs-wrapper::after { content: ""; flex: 1 0 auto; } #history-tabs-wrapper::-webkit-scrollbar { display: none; } #history-tabs-wrapper { will-change: transform; } .history-tab { background: #c1c1c1; color: #212529; height: 100%; padding: 0 0 0 10px; border-radius: 14px 14px 0 0; font-size: 9px; font-weight: 100; cursor: default; display: inline-flex; align-items: center; transition: all 0.2s ease; border-bottom: none; user-select: none; /*margin-bottom: 0;*/ overflow: hidden; box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 25%), inset 1px 0 0 0 rgb(0 0 0 / 25%), inset -1px 0 0 0 rgb(0 0 0 / 25%); flex: 0 0 auto; position: relative; margin: 0 1px; /* z-index: 10; */ --history-tab-base-width: 130px; --history-tab-width: var(--history-tab-base-width); --history-tab-min-width: var(--history-tab-base-width); --history-tab-max-width: var(--history-tab-base-width); width: var(--history-tab-width); min-width: var(--history-tab-min-width); max-width: var(--history-tab-max-width); transform: translateY(7px); } .night .history-tab { background: #2a3434; color: #cdcdcd; } .history-tab.active { background: #F3F3F3; font-size: 10px; font-weight: 400; box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 45%), inset 1px 0 0 0 rgb(0 0 0 / 25%), inset -1px 0 0 0 rgb(0 0 0 / 25%), 0 15px 8px 9px #00000047 !important; opacity: 1; z-index: 1; transform: translateY(2px); } .night .history-tab.active { background: #1c1e1e; color: #f4f4f4; } .history-tab.dragging { cursor: grabbing; z-index: 1000; } .history-tab.placeholder { background: #9f3434; border: 1px dashed rgba(255,255,255,0.4); margin: 0 2px; width: calc(var(--history-tab-width) + 20px); min-width: calc(var(--history-tab-min-width) + 20px); max-width: calc(var(--history-tab-max-width) + 20px); transition: all 0.2s ease; } /* Clear All Button - X style, positioned at start */ .history-clear-btn { height: 70%; width: 22px; min-width: 22px; display: flex; align-items: center; justify-content: center; border-radius: 4px 4px 0 0; background: #9f343457; color: transparent; font-size: 7px; font-family: Arial, sans-serif; font-weight: bold; /*cursor: pointer;*/ margin-right: 3px; margin-left: 0; transition: all 0.2s; box-shadow: inset 0 1px 0 0 rgb(255 50 50 / 38%), inset 1px 0 0 0 rgb(255 50 50 / 38%), inset -1px 0 0 0 rgb(255 50 50 / 38%); z-index: 2; transform: translateY(100%); transition: all 1s ease 0.4s; } #history-tabs-wrapper:hover .history-clear-btn { transform: translateY(30%); } .history-clear-btn:hover { background: #ff5353; color: #f4f4f4; box-shadow: inset 0 1px 0 0 rgb(255 50 50 / 38%), inset 1px 0 0 0 rgb(255 50 50 / 38%), inset -1px 0 0 0 rgb(255 50 50 / 38%), 0px 1px 4px 2px #00000047; transform: translateY(0) !important; transition: all ease 0.4s; } .history-tab span:first-child { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding-right: 0; padding-left: 5px; } @supports (mask-image: linear-gradient(black, transparent)) { .history-tab span:first-child { mask-image: linear-gradient( to right, black 0%, black calc(100% - 28px), transparent 95% ); } .history-tab span:first-child::after { display: none; } } .history-tab:hover { background: #F3F3F3; opacity: 1; box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 25%), inset 1px 0 0 0 rgb(0 0 0 / 25%), inset -1px 0 0 0 rgb(0 0 0 / 25%), 0 15px 8px 9px #00000047 !important; z-index: 2; transform: translateY(0); } .night .history-tab:hover { background: #1c1e1e; } .history-tab:not(.active):hover { font-weight: 400; } /* Close Button (x) */ .history-tab .close-btn { opacity: 0; color: inherit; font-size: 7px; line-height: 1; width: 24px; height: 100%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-out; margin-left: 1px; overflow: hidden; position: absolute; top: 0; right: 0; z-index: 2; } .history-tab:hover .close-btn{ opacity: 0.6; } .history-tab .close-btn:hover { background: #ff5353; box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 25%), inset -1px 0 0 0 rgb(0 0 0 / 25%); opacity: 1; overflow: hidden; color: #f4f4f4; } @media (min-width: 1600px) { #history-tabs-wrapper { height: 26px; } .history-tab { font-size: 11px; --history-tab-width: calc(var(--history-tab-base-width) + 30px); --history-tab-min-width: calc(var(--history-tab-base-width) + 30px); --history-tab-max-width: calc(var(--history-tab-base-width) + 30px); } .history-tab.active { font-size: 12px; } } /* **************************************************************** */ /* Left Bar Custom Icons */ #LeftMenuMyAccount svg, #LeftMenuMyEvents svg, #LeftMenuMyFiles svg, #LeftMenuMyUsers svg, #LeftMenuMyServer svg, #LeftMenuMyDevices svg { background-repeat: no-repeat; background-position: center; background-size: contain; width: 1em !important; height: 1em !important; display: inline-block !important; } #LeftMenuMyAccount svg path, #LeftMenuMyEvents svg path, #LeftMenuMyFiles svg path, #LeftMenuMyUsers svg path, #LeftMenuMyServer svg path, #LeftMenuMyDevices svg path { display: none !important; } /* Individual icons */ #LeftMenuMyDevices svg { background-image: url(/images/icons/LeftMenuMyDevices.png) } #LeftMenuMyAccount svg { background-image: url(/images/icons/LeftMenuMyAccount.png) } #LeftMenuMyEvents svg { background-image: url(/images/icons/LeftMenuMyEvents.png) } #LeftMenuMyFiles svg { background-image: url(/images/icons/LeftMenuMyFiles.png) } #LeftMenuMyUsers svg { background-image: url(/images/icons/LeftMenuMyUsers.png) } #LeftMenuMyServer svg { background-image: url(/images/icons/LeftMenuMyServer.png) } /* **************************************************************** */ /* Left Bar shrink */ #page_leftbar { width: 70px !important; overflow-x: hidden !important; } .fullscreen #container { grid-template-columns: 70px auto; } .nav { --bs-nav-link-padding-x: 19px !important; } .fullscreen #p15agentConsoleText { width: calc(100vw - 100px); } #page_leftbar > div:first-of-type { display: none !important; } /* left Bar Custom Colors */ #page_leftbar { /* background: linear-gradient(to bottom, #35445a 10%, #3b4c64 100%) !important; /* Melo */ background: linear-gradient(to bottom, var(--bs-primary-bg-subtle) 66%, var(--bs-primary) 180%) !important; } #page_leftbar .nav-link { border-radius: 5px 0px 0px 5px !important; transition: all 0.2s ease; } #page_leftbar .nav-link .svg-inline--fa { transition: all 0.2s ease; } #page_leftbar .nav-link:hover .svg-inline--fa { transform: scale(1.2); } #page_leftbar .nav-link { --hover-bg: color-mix(in lab, #fff 50%, transparent); } .night #page_leftbar .nav-link { --hover-bg: color-mix(in lab, #fff 8%, transparent); } #page_leftbar .nav-link:not([class*="lbbuttonsel"]):hover { background-color: var(--hover-bg) !important; } /* **************************************************************** */ /* Little Stuff */ #container { background-color: #f3f3f3 !important; } .night #container { background-color: #1c1e1e !important; } #p30info { overflow-x: hidden !important; } #p30info > .row { margin-right: calc(1.5 * var(--bs-gutter-x)) !important; } #p30html2, #p30html3, #p3users, #p51info { padding-right: 15px !important; } #p3users table, #p16events .table.table-hover.p3eventsTable, table.table.table-hover.p3usersTable { --bs-table-bg: unset !important; } #p20info .table.table-hover.table-striped, #p20info2 .table.table-hover.table-striped { --bs-table-bg: unset !important; --bs-table-striped-bg: unset !important; /* --bs-table-hover-bg: unset !important; */ } #p20info .table.table-hover.table-striped tr, #p20info2 .table.table-hover.table-striped tr { background-color: unset !important; } #DeskTools { font-size: smaller !important; width: 314px !important; } #deskToolsAreaTop { background-color: #f2f2f2 !important; } .night #deskToolsAreaTop { background-color: #919191ba !important; } .pwState.pwsBlack { background: linear-gradient(to bottom right, #7ce25b 15%, #217957 85%); } #p10html4 > table > tbody > tr { background-color: var(--bs-table-bg) !important; } #dialog2 > div { overflow-wrap: break-word; } #dialog2 .col.col-md-2.col-lg-2 { overflow-wrap: normal !important; } #dialog2 > .dialogText { font-size: smaller; } .deskToolsBar:hover { background-color: color-mix(in lab, currentcolor 5%, transparent) !important; transition: background-color 0.2s ease; } .night .deskToolsBar:hover { background-color: #414141 !important; } /* Scrollbars */ /* Target the scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } /* Scrollbar track (background) */ ::-webkit-scrollbar-track { background: transparent !important; border-radius: 10px; } /* Scrollbar thumb (the draggable part) */ ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); */ transition: all 0.3s ease; background-color: color-mix(in lab, currentcolor 15%, transparent) !important; } /* Hover effect on thumb */ ::-webkit-scrollbar-thumb:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); background-color: color-mix(in lab, currentcolor 30%, transparent) !important; } /* Active/clicking state */ ::-webkit-scrollbar-thumb:active { background-color: color-mix(in lab, currentcolor 30%, transparent) !important; } /* Modals */ #dialogHeader { background-color: unset !important; cursor: default !important; color: #CCCCCC !important; } .modal-header { padding: 9px 9px 9px 16px !important; border-bottom: unset !important; } .modal-title { color: #212529 !important; } .night .modal-title { color: #BBBBBB !important; } .h5, h5 { font-size: 1.05rem !important; } .modal-header .btn-close { background-size: 0.7em auto !important; background-repeat: no-repeat !important; background-position: center !important; width: 1.7em !important; height: 1.7em !important; margin: calc(-0.6 * var(--bs-modal-header-padding-y)) calc(-0.6 * var(--bs-modal-header-padding-x)) calc(-0.6 * var(--bs-modal-header-padding-y)) auto !important; border-radius: unset !important; opacity: 1 !important; cursor: default !important; background-color: transparent !important; } .night .modal-header .btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; filter: none !important; } .modal-header .btn-close:hover { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; background-color: #c42b1c !important; opacity: 1 !important; } .modal-content { background-color: rgba(242, 242, 242, 0.6) !important; backdrop-filter: blur(16px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(16px) saturate(120%) brightness(1.1) !important; overflow: hidden; border-radius: 14px !important; border: 1px solid rgb(0 0 0 / 11%); box-shadow: inset 0 -1px 13px 1px rgb(255 255 255 / 11%) !important; } .modal-content * { user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } #d2ServerErrorsLogPre { user-select: text !important; -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; } .night .modal-content { background-color: rgba(41, 44, 44, 0.6) !important; border: 1px solid rgb(255 255 255 / 28%); /* box-shadow: 0 0 12px #0000004d !important; */ /* box-shadow: inset 0 0 18px #fefefe36 !important; */ box-shadow: inset 0 -1px 13px 1px rgb(255 255 255 / 7%) !important; } .modal-backdrop { background: unset !important; background-color: rgba(242, 242, 242, 0.5) !important; /* background-color: rgba(41, 44, 44, 0.15) !important; */ /* background-color: rgba(41, 44, 44, 0.3) !important; */ backdrop-filter: blur(3px) !important; opacity: 1 !important; /* transition: opacity 1.3s linear !important; */ overflow: hidden !important; } .night .modal-backdrop { background-color: rgba(41, 44, 44, 0.3) !important; } .modal { --bs-modal-padding: 2rem; overflow: hidden !important; } .form-control, .form-control-sm, .form-select, .form-select-sm, .btn-group-sm>.btn, .btn-sm, #d2ServerErrorsLogPre { border: 1px solid #7d7d7d3d !important; border-radius: 5px !important; } #dialog2 input[type="radio"] { margin-right: 10px !important; } .modal-footer { border-top: unset; padding: 15px 20px 20px 20px !important; gap: 10px; } .night #agins_linux_area, .night #agins_linux_area_un, .night #d2notifyMsg, .night #d2devNotes, .night #d2devEvent, .night #d2runcmd, .night #d2devMessage, .night #d2smsText, .night #d2emailSubject, .night #d2emailText, .night #broadcastMessage, .night #d2ServerErrorsLogPre, .night textarea#d2notifyMsg, .night input#dp2notifyTitle { background-color: #262626cc !important; } #agins_linux_area, #agins_linux_area_un, #d2notifyMsg, #d2devNotes, #d2devEvent, #d2runcmd, #d2devMessage, #d2smsText, #d2emailSubject, #d2emailText, #broadcastMessage, #d2ServerErrorsLogPre, textarea#d2notifyMsg, input#dp2notifyTitle { background-color: #f4f4f45e !important; border: 1px solid #7d7d7d3d !important; border-radius: 5px !important; } #d4editorarea { border: 1px solid #7d7d7d3d !important; border-radius: 5px !important; background-color: #f4f4f45e; } .night #d4editorarea { background-color: #262626cc !important; } #dialog2 > textarea#d2devNotes.form-control { resize: vertical !important; } /* forms */ .form-floating > .form-select { background: rgba(242, 242, 242, 0.01) !important; border: 1px solid #7d7d7d3d !important; } .night .form-floating > .form-select { background: rgba(41, 44, 44, 0.01) !important; } .form-floating > .form-select { -webkit-appearance: none; appearance: none; } .form-select::-webkit-calendar-picker-indicator { /*filter: invert(1); /* opcional: inverte seta */ } .form-select option, .form-select optgroup { background: rgba(242, 242, 242, 0.6) !important; /* color: #fff !important; */ backdrop-filter: blur(8px); } .night .form-select option, .night .form-select optgroup { background: rgba(41, 44, 44, 0.95) !important; /* color: #fff !important; */ backdrop-filter: blur(8px); } .form-floating>.form-select~label::after { background-color: unset !important; } #d7otherset, #d7otherset2, #d7rdpflags { border-radius: 5px !important; border: 1px solid #7d7d7d3d !important; max-height: 350px; } #theme-switcher { padding: 15px; margin-top: var(--bs-modal-margin); background: rgba(242, 242, 242, 0.01) !important; border: 1px solid #7d7d7d3d !important; border-radius: 5px !important; } .night #theme-switcher { background: rgba(41, 44, 44, 0.01) !important; } .form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label { font-size: small; } .form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after { background-color: unset; } .form-floating>.form-control-plaintext, .form-floating>.form-control-plaintext, .form-floating>.form-control, .form-floating>.form-control { background: rgba(242, 242, 242, 0.01) !important; } .night .form-floating>.form-control-plaintext, .night .form-floating>.form-control-plaintext, .night .form-floating>.form-control, .night .form-floating>.form-control { background: rgba(41, 44, 44, 0.01) !important; color: var(--bs-body-color); } :root { --sub-menu-color: #7d7d7d3d; } .form-select { background: rgba(242, 242, 242, 0.01) !important; /* padding: 15px; */ /* margin-bottom: var(--bs-modal-margin) !important; */ background: rgba(242, 242, 242, 0.01) !important; border: 1px solid #7d7d7d3d !important; border-radius: 5px !important; } .night .form-select { background: rgba(41, 44, 44, 0.01) !important; } #d2cmdtype, #d2cmduser, #d2cmdsource { padding-top: 1rem; padding-bottom: 1rem; padding: 15px; margin-bottom: var(--bs-modal-margin) !important; /*background: rgba(242, 242, 242, 0.01) !important;*/ border: 1px solid #7d7d7d3d !important; border-radius: 5px !important; appearance: none; } #d3serverfiles, #d2serverfiles { background-color: #f4f4f45e; height: 350px; border: 1px solid #7d7d7d3d !important; border-radius: 5px !important; padding-left: 10px; } .night #d3serverfiles, .night #d2serverfiles { background-color: #262626cc; } #d3serveraction, #d2serveraction { background-color: unset; } .form-control[type=file]:not(:disabled):not([readonly]) { cursor: pointer; background-color: #f4f4f45e; } .night .form-control[type=file]:not(:disabled):not([readonly]) { cursor: pointer; background-color: #262626cc; } input#dp2notifyTitle, select#d2notifyTimeout, select#d2deviceop, span.select2-selection.select2-selection--multiple, select#d2devTimeout { padding: 15px; margin-bottom: var(--bs-modal-margin) !important; border: 1px solid #7d7d7d3d !important; border-radius: 5px !important; appearance: none; } input#d2devurl { padding: 15px; margin-bottom: var(--bs-modal-margin) !important; border: 1px solid #7d7d7d3d !important; border-radius: 5px !important; appearance: none; } #SearchInput.search, #KvmSearchInput.search { background-color: #f3f3f3; } #devListToolbarSpan #SearchInput, #devListToolbarSpan #KvmSearchInput { width: 170px; } img#MainComputerImage { transition: transform 0.3s ease, background-color 0.3s ease; transform-origin: bottom right; z-index: 0; position: relative; } #p10deviceBattery, .deviceNotifyLargeDot { z-index: 1; } img#MainComputerImage:hover { transform: scale(1.02); } #dialog2 > div > div[onclick^="p10setIcon"] { transition: transform 0.3s ease, filter 0.3s ease; transform-origin: bottom center; } #dialog2 > div > div[onclick^="p10setIcon"]:hover { transform: scale(1.2); filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.45)); } #dialog2 > div > div[onclick^="p10setIcon"] { margin: 17px !important; filter: drop-shadow(4px 2px 2px rgba(0, 0, 0, 0.15)); } #dialog2 > div > div[onclick^="p10setIcon"]:hover { transform: scale(1.2); filter: drop-shadow(4px 16px 7px rgba(0, 0, 0, 0.15)); } .night #dialog2 > div > div[onclick^="p10setIcon"] { margin: 17px !important; filter: drop-shadow(4px 2px 2px rgba(110 110 110 / 30%)); } .night #dialog2 > div > div[onclick^="p10setIcon"]:hover { transform: scale(1.2); filter: drop-shadow(4px 16px 7px rgb(110 110 110 / 30%)); } .select2-container--bootstrap-5 .select2-selection { background: rgba(242, 242, 242, 0.01) !important; } .night .select2-container--bootstrap-5 .select2-selection { background: rgba(41, 44, 44, 0.01) !important; } .suggestionBox { background-color: #CCC; } .suggestionBoxItem { background-color: #707070; color: white; font-size: smaller; padding: 10px; } .suggestionBoxItem:hover Specificity: (0,2,0) { background-color: var(--bs-primary); } .form-select { color: var(--bs-body-color); } /* form-checks-input radio buttons */ .form-check-input { color: #000; border: 1px solid color-mix(in lab, currentcolor 30%, transparent) !important; border-radius: 50% !important; pointer-events: auto !important; cursor: pointer !important; opacity: 0.9; /* background-size: unset !important; */ background-size: contain !important; } .night .form-check-input { color: #FFF; } .form-check-input:hover { transform: scale(1.15); transition: transform 0.3s ease 0s, background-color 0.6s ease 0s; background-color: color-mix(in lab, var(--bs-primary) 20%, transparent) !important; opacity: 1.0; } .form-check-input:focus { box-shadow: 0px 0px 2px 0.15rem color-mix(in lab, var(--bs-secondary) 20%, transparent); background-color: color-mix(in lab, var(--bs-primary) 20%, transparent) !important; /*transform: scale(1.15);*/ transition: transform 0.3s ease 0s, background-color 0.6s ease 0s; } .form-check-input:checked { background-color: var(--bs-primary) !important; background-image: var(--bs-form-check-bg-image) !important; } .form-check-input:not(:checked), .form-check-input:not(:disabled) { background: transparent; background-color: color-mix(in lab, var(--bs-secondary) 0%, transparent); } .form-check-input:disabled { opacity: 0.4; border: 1px solid color-mix(in lab, currentcolor 40%, transparent); } /* fullscreen session position */ #deskarea0 { left: 0 !important; } .fsize { width: 210px !important; } #footer { background: linear-gradient( 90deg, var(--bs-primary-bg-subtle) 66%, var(--bs-secondary) 233% ) } /* p0 message server disconnected */ #p0message u { text-decoration: none; font-weight: 600; } #p0 { position: fixed; text-align: center; cursor: default; top: 50%; left: 50%; transform: translate(-50%, -50%); } #p0::after { content: ""; position: absolute; bottom: -10px; left: 50%; width: 30px; height: 30px; box-shadow: 0px 6px 12px #ff4646, 0px -6px 12px #8949ff, 6px 0px 12px #ff07fb, -6px 0px 12px #ff07fb; border-radius: 50%; transform: translate(-50%, -50%) rotate(0deg); animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } div[id$="BackButton"] { color: var(--bs-primary); } /* plugins page */ #p42tbl .gradTable1, #p42tbl .gradTable3 { background-image: unset; } #p42tbl .gradTable2 { background-color: unset; } #pluginRestartNotice.areaHead { color: #212529; !important; background: unset !important; background-color: #dfcd6b !important; } /* **************************************************************** */ /* Login Page */ #body.arg_hide.login { background: linear-gradient(to bottom right, #3b5376 0%, #222f42 40%) !important; cursor: default !important; user-select: none !important; } #body.arg_hide.login input[type="text"], #body.arg_hide.login input[type="password"], #body.arg_hide.login input[type="email"], #body.arg_hide.login textarea { cursor: text !important; user-select: text !important; } /* #body.arg_hide.login input[type="button"], #body.arg_hide.login button, #body.arg_hide.login a, #body.arg_hide.login [onclick] { cursor: pointer !important; } */ /*Update "background-image" below to Change the Logo on Login Screen. */ #backgroundImage { opacity: 0.02 !important; /*background-image: url(/images/login/DevRyanBearVector.png) !important;*/ } #loginpanel, #createpanel, #resetpanel, #tokenpanel, #resettokenpanel, #resetpasswordpanel, #checkemailpanel, #waitpushpanel { padding: 50px 70px 18px 70px !important; margin: 0 !important; background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 15px !important; box-shadow: 0 8px 32px rgb(174 177 230 / 37%) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; color: #f0f0f0 !important; } @supports (corner-shape: squircle) or (corner-shape: superellipse) { #loginpanel, #createpanel, #resetpanel, #tokenpanel, #resettokenpanel, #resetpasswordpanel, #checkemailpanel, #waitpushpanel { border-radius: 60px !important; corner-shape: squircle; } } #loginpanel:hover, #createpanel:hover, #resetpanel:hover, #tokenpanel:hover, #resettokenpanel:hover, #resetpasswordpanel:hover, #checkemailpanel:hover, #waitpushpanel:hover { /* transform: translateY(-2px) !important; */ box-shadow: 0 12px 40px rgba(31, 38, 135, 0.5) !important; } #welcomeText { position: absolute !important; top: -40px !important; left: 50% !important; transform: translateX(-50%) !important; color: rgba(255, 255, 255, 0.9) !important; font-size: 1.2rem !important; text-align: center !important; z-index: 10 !important; background: rgba(26, 26, 46, 0.8) !important; padding: 8px 16px !important; border-radius: 8px !important; white-space: nowrap !important; } #loginpanelform, #createpanel form, #resetpanel form, #tokenpanel form, #resettokenpanel form, #resetpasswordpanel form, #checkemailpanel form, #waitpushpanel form { display: flex; flex-direction: column !important; gap: 20px !important; } #loginuserpassdiv table, #createpanel table, #resetpanel table, #tokenpanel table, #resettokenpanel table, #resetpasswordpanel table, #checkemailpanel table, #waitpushpanel table { display: flex; flex-direction: column !important; gap: 40px !important; width: 100% !important; } #loginuserpassdiv table tr, #createpanel table tr, #resetpanel table tr, #tokenpanel table tr, #resettokenpanel table tr, #resetpasswordpanel table tr, #checkemailpanel table tr, #waitpushpanel table tr { display: block; } #loginuserpassdiv table td, #createpanel table td, #resetpanel table td, #tokenpanel table td, #resettokenpanel table td, #resetpasswordpanel table td, #checkemailpanel table td, #waitpushpanel table td { display: block; width: 100% !important; } #loginpanel #password { position: relative !important; background-color: #dbdbdb !important; padding: 15px 40px 15px 15px !important; border-radius: 10px !important; border: none !important; font-size: 1rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #loginpanel #password:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.3) !important; background: rgba(219, 219, 219, 0.9) !important; transform: scale(1.02) !important; } #loginpanel #password::after { content: '👁️' !important; position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 1.2rem !important; color: #666 !important; cursor: pointer !important; pointer-events: none !important; transition: opacity 0.3s !important; } #loginpanel #password:focus::after { opacity: 0.7 !important; } #body.arg_hide.login #resettokenpanel input#resetTokenOkButton, #body.arg_hide.login #tokenpanel input#tokenOkButton, #body.arg_hide.login #resetpanel input#eresetButton, #body.arg_hide.login #loginpanel input#loginButton, #body.arg_hide.login #checkemailpanel input#changeEmailButton, #body.arg_hide.login #checkemailpanel input#checkEmailButton2, #body.arg_hide.login #resetpasswordpanel table td input#resetPassButton, #body.arg_hide.login #createpanel table td input#createButton { width: 100% !important; margin-top: 35px !important; padding: 15px !important; background: linear-gradient(135deg, #0f3460, #0f4c75); color: white; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; border: none !important; border-radius: 10px !important; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #body.arg_hide.login #resettokenpanel input#resetTokenOkButton:not(:disabled):hover, #body.arg_hide.login #tokenpanel input#tokenOkButton:not(:disabled):hover, #body.arg_hide.login #resetpanel input#eresetButton:not(:disabled):hover, #body.arg_hide.login #loginpanel input#loginButton:not(:disabled):hover, #body.arg_hide.login #checkemailpanel input#changeEmailButton:not(:disabled):hover, #body.arg_hide.login #checkemailpanel input#checkEmailButton2:not(:disabled):hover, #body.arg_hide.login #resetpasswordpanel table td input#resetPassButton:not(:disabled):hover, #body.arg_hide.login #createpanel table td input#createButton:not(:disabled):hover { background: linear-gradient(135deg, #0f4c75, #0f3460) !important; /* transform: translateY(-1px) !important; */ box-shadow: 0 4px 12px rgba(15, 52, 96, 0.4) !important; } #loginpanel #showPassHintLink { background-color: #dbdbdb !important; text-align: center !important; cursor: pointer !important; color: #0f3460 !important; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; padding: 15px !important; border-radius: 10px !important; } #loginpanel #showPassHintLink:hover { background: rgba(219, 219, 219, 0.8) !important; } #body.arg_hide.login #resetAccountDiv { color: #f0f0f0 !important; text-align: center !important; padding: 10px 0 !important; font-size: 0.9rem !important; } #body.arg_hide.login #resetAccountDiv a { color: #f0f0f0 !important; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #body.arg_hide.login #resetAccountDiv a:hover { color: white !important; text-decoration: underline !important; } #body.arg_hide.login a { color: #f0f0f0 !important; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #body.arg_hide.login a:hover { color: white !important; text-decoration: underline !important; } #loginpanel input[id], #createpanel input[id], #resetpanel input[id], #tokenpanel input[id], #resettokenpanel input[id], #resetpasswordpanel input[id], #checkemailpanel input[id], #waitpushpanel input[id] { background-color: #dbdbdb !important; padding: 15px !important; border-radius: 10px !important; border: none !important; font-size: 1rem !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #loginpanel input[id]:focus, #createpanel input[id]:focus, #resetpanel input[id]:focus, #tokenpanel input[id]:focus, #resettokenpanel input[id]:focus, #resetpasswordpanel input[id]:focus, #checkemailpanel input[id]:focus, #waitpushpanel input[id]:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.3) !important; /* background: rgba(219, 219, 219, 0.9) !important; */ transform: scale(1.02) !important; } #body.arg_hide.login td#bottomLanguageSelect > select#d2langselect { background-color: #dbdbdb !important; padding: 10px !important; border-radius: 5px !important; border: none !important; } #body.arg_hide.login #authStrategies a { display: ruby; } #body.arg_hide.login #authStrategies a { /*margin: 5px !important;*/ border-radius: 50% !important; /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow: hidden !important; } #body.arg_hide.login #authStrategies a:hover { /* transform: translateY(-20px) !important; */ box-shadow: 0 10px 12px rgba(0, 0, 0, 0.4) !important; } #body.arg_hide.login #authStrategies img { margin: 5px !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; display: block !important; transform: scale(0.8); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #body.arg_hide.login #authStrategies img:hover { transform: scale(0.9) translateY(-5px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #body.arg_hide.login #authStrategies hr { width: 100% !important; border: none !important; height: 1px !important; background: rgba(255, 255, 255, 0.2) !important; margin-bottom: 15px !important; } #body.arg_hide.login #authStrategies div { text-align: center !important; width: 100% !important; margin-bottom: 10px !important; color: rgba(255, 255, 255, 0.8) !important; font-size: 0.9rem !important; } /* Optional Hide Terms & Privacy Link on Login Page. */ /* #flink { display: none !important; } */ @media (max-width: 480px) { #loginpanel, #createpanel, #resetpanel, #tokenpanel, #resettokenpanel, #resetpasswordpanel, #checkemailpanel, #waitpushpanel { padding: 30px 20px 18px 20px !important; border-radius: 15px !important; } #loginpanel input[id], #createpanel input[id], #resetpanel input[id], #tokenpanel input[id], #resettokenpanel input[id], #resetpasswordpanel input[id], #checkemailpanel input[id], #waitpushpanel input[id] { padding: 12px !important; } input#loginButton, input#eresetButton { padding: 12px !important; } #authStrategies img { width: 35px !important; height: 35px !important; } } @media (resolution: 1.25dppx) and (min-resolution: 120dpi) { #loginpanel, #createpanel, #resetpanel, #tokenpanel, #resettokenpanel, #resetpasswordpanel, #checkemailpanel, #waitpushpanel { backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } } #resetpasswordpanel table td:not(:has(input)), #createpanel table td:not(:has(input)), #resettokenpanel table td:not(:has(input)) { text-align: left !important; color: #f0f0f0 !important; margin-top: 15px; } #body.arg_hide.login #newAccountCaptchaImg > td:nth-child(2) { text-align: unset !important; margin-top: unset !important; } #body.arg_hide.login tr#newAccountCaptchaImg { background-color: #ffffff12; border-radius: 14px; } #body.arg_hide.login #passwordPolicyCallout, #body.arg_hide.login #rpasswordPolicyCallout { width: 140px; background-color: #747474; font-size: 13px; } #body.arg_hide.login input[type="button" i]:disabled { background: linear-gradient(135deg, #9ea6af, #8d9da780) !important; cursor: default !important; color: #00000029 !important; } /* **************************************************************** */ /* Masthead */ /* Masthead Custom Colors */ @media (min-width: 769px) { #masthead { /* background-color: #222f42 !important; /* Melo */ background-image: url(../logo.png), linear-gradient(90deg, var(--bs-primary) 66%, var(--bs-secondary) 133%); } } @media (max-width: 768px) { #masthead { position: relative; background: linear-gradient( 90deg, var(--bs-primary) 66%, var(--bs-secondary) 133% ); overflow: visible; background-size: unset !important; } #masthead::before { content: ""; position: absolute; top: 50%; left: 0; width: 18rem; height: 2.5rem; transform: translateY(-50%); background-image: url(../logo.png); background-repeat: no-repeat; background-position: left center; pointer-events: none; background-size: 18rem 2.5rem; } } /* Masthead Company name size */ #masthead .title { font-family: "Segoe UI", Roboto, sans-serif; font-weight: 600; font-size: 1.7rem !important; letter-spacing: 0.6px; } #masthead .title2 { font-family: "Segoe UI", Roboto, sans-serif; font-weight: 300; font-size: 0.7rem !important; letter-spacing: 0.2px; } /* Welcome & logout position */ #masthead p { font-size: 11px !important; color: #fff !important; /* margin: 45px 35px 0 !important; /* non compatible with MC 1.1.53 new dropdown menu */ } /* **************************************************************** */ /* MenuIcons - Replace FontAwesome with Custom SVG Icons */ #devListToolbarViewIcons, #devListToolbarViewIcons2 { cursor: default !important; display: flex !important; align-items: center !important; margin-top: -2px; /* margin-right: 15px; */ } #devListToolbarViewIcons span[id^="devViewButton"] > svg, #devListToolbarViewIcons div[id^="devViewPageButton"] > div[class^="viewSelector"], #devListToolbarViewIcons div[id^="devViewPageButton"] > svg { display: none !important; } #devListToolbarViewIcons span[id^="devViewButton"][style*="display: block"], #devListToolbarViewIcons span[id^="devViewButton"][style*="display: inline"], #devListToolbarViewIcons span[id^="devViewButton"]:not([style*="display"]), #devListToolbarViewIcons div[id^="devViewPageButton"][style*="display: block"], #devListToolbarViewIcons div[id^="devViewPageButton"][style*="display: inline"], #devListToolbarViewIcons div[id^="devViewPageButton"]:not([style*="display"]) { position: relative !important; display: inline-flex !important; align-items: center; justify-content: center; width: 26.66px !important; height: 26.66px !important; cursor: pointer !important; border-radius: 5px !important; transition: all 0.2s ease !important; color: #666; background: transparent; overflow: hidden !important; opacity: 1 !important; margin-left: 10px; } @supports (corner-shape: squircle) or (corner-shape: superellipse) { #devListToolbarViewIcons span[id^="devViewButton"][style*="display: block"], #devListToolbarViewIcons span[id^="devViewButton"][style*="display: inline"], #devListToolbarViewIcons span[id^="devViewButton"]:not([style*="display"]), #devListToolbarViewIcons div[id^="devViewPageButton"][style*="display: block"], #devListToolbarViewIcons div[id^="devViewPageButton"][style*="display: inline"], #devListToolbarViewIcons div[id^="devViewPageButton"]:not([style*="display"]) { border-radius: 60px !important; corner-shape: squircle; } } #devListToolbarViewIcons span[id^="devViewButton"][style*="display: block"]::before, #devListToolbarViewIcons span[id^="devViewButton"][style*="display: inline"]::before, #devListToolbarViewIcons span[id^="devViewButton"]:not([style*="display"])::before, #devListToolbarViewIcons div[id^="devViewPageButton"][style*="display: block"]::before, #devListToolbarViewIcons div[id^="devViewPageButton"][style*="display: inline"]::before, #devListToolbarViewIcons div[id^="devViewPageButton"]:not([style*="display"])::before { content: '' !important; position: absolute !important; width: 24px !important; height: 24px !important; background-color: currentColor !important; -webkit-mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-size: contain !important; mask-repeat: no-repeat !important; mask-position: center !important; transition: background-color 0.2s ease !important; z-index: 1 !important; /* transform: scale(0.8) !important; */ } #devListToolbarViewIcons #devViewPageButton1[style*="display: block"]::before, #devListToolbarViewIcons #devViewPageButton1[style*="display: inline"]::before, #devListToolbarViewIcons #devViewPageButton1:not([style*="display"])::before, #devListToolbarViewIcons #devViewPageButton4[style*="display: block"]::before, #devListToolbarViewIcons #devViewPageButton4[style*="display: inline"]::before, #devListToolbarViewIcons #devViewPageButton4:not([style*="display"])::before { width: 19px !important; height: 19px !important; } #devListToolbarViewIcons #devViewPageButton4[style*="display: block"], #devListToolbarViewIcons #devViewPageButton4[style*="display: inline"], #devListToolbarViewIcons #devViewPageButton4:not([style*="display"]) { margin-right: 56px !important; } #devListToolbarViewIcons #devViewPageState { margin-right: 22px !important; font-size: 13px !important; cursor: default !important; color: #666 !important; } #devListToolbarViewIcons #devViewButton1[style*="display: block"]::before, #devListToolbarViewIcons #devViewButton1[style*="display: inline"]::before, #devListToolbarViewIcons #devViewButton1:not([style*="display"])::before { -webkit-mask-image: url('/images/icons/AppsListDetail.svg') !important; mask-image: url('/images/icons/AppsListDetail.svg') !important; } #devListToolbarViewIcons #devViewButton2[style*="display: block"]::before, #devListToolbarViewIcons #devViewButton2[style*="display: inline"]::before, #devListToolbarViewIcons #devViewButton2:not([style*="display"])::before { -webkit-mask-image: url('/images/icons/TextColumnTwoLeft.svg') !important; mask-image: url('/images/icons/TextColumnTwoLeft.svg') !important; } #devListToolbarViewIcons #devViewButton3[style*="display: block"]::before, #devListToolbarViewIcons #devViewButton3[style*="display: inline"]::before, #devListToolbarViewIcons #devViewButton3:not([style*="display"])::before { -webkit-mask-image: url('/images/icons/Grid.svg') !important; mask-image: url('/images/icons/Grid.svg') !important; } #devListToolbarViewIcons #devViewButton4[style*="display: block"]::before, #devListToolbarViewIcons #devViewButton4[style*="display: inline"]::before, #devListToolbarViewIcons #devViewButton4:not([style*="display"])::before { -webkit-mask-image: url('/images/icons/Map.svg') !important; mask-image: url('/images/icons/Map.svg') !important; } #devListToolbarViewIcons #devViewButton5[style*="display: block"]::before, #devListToolbarViewIcons #devViewButton5[style*="display: inline"]::before, #devListToolbarViewIcons #devViewButton5:not([style*="display"])::before { -webkit-mask-image: url('/images/icons/Glance.svg') !important; mask-image: url('/images/icons/Glance.svg') !important; } #devListToolbarViewIcons #devViewPageButton1[style*="display: block"]::before, #devListToolbarViewIcons #devViewPageButton1[style*="display: inline"]::before, #devListToolbarViewIcons #devViewPageButton1:not([style*="display"])::before { -webkit-mask-image: url('/images/icons/ArrowPrevious.svg') !important; mask-image: url('/images/icons/ArrowPrevious.svg') !important; } #devListToolbarViewIcons #devViewPageButton2[style*="display: block"]::before, #devListToolbarViewIcons #devViewPageButton2[style*="display: inline"]::before, #devListToolbarViewIcons #devViewPageButton2:not([style*="display"])::before { -webkit-mask-image: url('/images/icons/IosArrowLeft.svg') !important; mask-image: url('/images/icons/IosArrowLeft.svg') !important; } #devListToolbarViewIcons #devViewPageButton3[style*="display: block"]::before, #devListToolbarViewIcons #devViewPageButton3[style*="display: inline"]::before, #devListToolbarViewIcons #devViewPageButton3:not([style*="display"])::before { -webkit-mask-image: url('/images/icons/IosArrowRight.svg') !important; mask-image: url('/images/icons/IosArrowRight.svg') !important; } #devListToolbarViewIcons #devViewPageButton4[style*="display: block"]::before, #devListToolbarViewIcons #devViewPageButton4[style*="display: inline"]::before, #devListToolbarViewIcons #devViewPageButton4:not([style*="display"])::before { -webkit-mask-image: url('/images/icons/ArrowNext.svg') !important; mask-image: url('/images/icons/ArrowNext.svg') !important; } /* === HOVER & ACTIVE === */ #devListToolbarViewIcons span[id^="devViewButton"]:not(.viewSelectorSel)[style*="display: block"]:hover, #devListToolbarViewIcons span[id^="devViewButton"]:not(.viewSelectorSel)[style*="display: inline"]:hover, #devListToolbarViewIcons span[id^="devViewButton"]:not(.viewSelectorSel):not([style*="display"]):hover, #devListToolbarViewIcons div[id^="devViewPageButton"][style*="display: block"]:hover, #devListToolbarViewIcons div[id^="devViewPageButton"][style*="display: inline"]:hover, #devListToolbarViewIcons div[id^="devViewPageButton"]:not([style*="display"]):hover { transform: scale(1.2) !important; background-color: color-mix(in lab, currentColor 5%, transparent) !important; color: color-mix(in lab, currentColor 80%, black) !important; } .viewSelectorSel { background-color: color-mix(in lab, currentColor 9%, transparent) !important; transform: scale(1.2) !important; color: color-mix(in lab, currentColor 80%, black) !important; } .night .viewSelectorSel { background-color: color-mix(in lab, currentColor 40%, transparent) !important; } /* === fullscreen button === */ #devListToolbarViewIcons > svg[role="button"], #devListToolbarViewIcons2 > svg[role="button"] { width: 36px !important; height: 36px !important; padding: 6px !important; box-sizing: border-box !important; cursor: pointer !important; border: 1px solid #ccc !important; border-radius: 5px !important; background-color: transparent !important; transition: all 0.2s ease !important; color: #666 !important; fill: currentColor !important; overflow: hidden !important; } #devListToolbarViewIcons > svg[role="button"] > path, #devListToolbarViewIcons > svg[role="button"] > title, #devListToolbarViewIcons2 > svg[role="button"] > path, #devListToolbarViewIcons2 > svg[role="button"] > title { display: none !important; } #devListToolbarViewIcons > svg[role="button"], #devListToolbarViewIcons2 > svg[role="button"] { background-color: black !important; -webkit-mask-image: url('/images/icons/FullScreenMaximize.svg') !important; mask-image: url('/images/icons/FullScreenMaximize.svg') !important; -webkit-mask-size: 66% !important; -webkit-mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-size: 66% !important; mask-repeat: no-repeat !important; mask-position: center !important; } .night #devListToolbarViewIcons > svg[role="button"], .night #devListToolbarViewIcons2 > svg[role="button"] { background-color: white !important; } #devListToolbarViewIcons > svg[role="button"]:hover, #devListToolbarViewIcons2 > svg[role="button"]:hover { background-color: var(--bs-primary) !important; } /* === COLLAPSE / EXPAND (fa-layers) === */ #devListToolbarSpan #CollapseAllButton, #devListToolbarSpan #CollapseAllButton2, #devListToolbarSpan #ExpandAllButton, #devListToolbarSpan #ExpandAllButton2 { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; cursor: pointer; border-radius: 6px; transition: all 0.2s ease; color: currentColor; background: transparent; overflow: hidden; } #devListToolbarSpan #CollapseAllButton svg, #devListToolbarSpan #ExpandAllButton svg, #devListToolbarSpan #CollapseAllButton2 svg, #devListToolbarSpan #ExpandAllButton2 svg { display: none !important; } #devListToolbarSpan #CollapseAllButton:not([style*="display: none"])::before, #devListToolbarSpan #ExpandAllButton:not([style*="display: none"])::before, #devListToolbarSpan #CollapseAllButton2:not([style*="display: none"])::before, #devListToolbarSpan #ExpandAllButton2:not([style*="display: none"])::before { content: ''; position: absolute; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-size: contain; mask-repeat: no-repeat; mask-position: center; z-index: 1; } #devListToolbarSpan #CollapseAllButton:not([style*="display: none"])::before, #devListToolbarSpan #CollapseAllButton2:not([style*="display: none"])::before { -webkit-mask-image: url('/images/icons/ArrowMinimizeVertical.svg'); mask-image: url('/images/icons/ArrowMinimizeVertical.svg'); } #devListToolbarSpan #ExpandAllButton:not([style*="display: none"])::before, #devListToolbarSpan #ExpandAllButton2:not([style*="display: none"])::before { -webkit-mask-image: url('/images/icons/ArrowMaximizeVertical.svg'); mask-image: url('/images/icons/ArrowMaximizeVertical.svg'); } /* === devListToolbarSettings === */ #devListToolbarSpan #devListToolbarSettings:not([style*="display: none"], [style*="display:none"]) { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; cursor: pointer; border-radius: 6px; transition: all 0.2s ease; color: currentColor; background: transparent; overflow: hidden; fill: none !important; stroke: none !important; margin-right: 15px; /* === SVG === */ background-color: currentColor; -webkit-mask-image: url('/images/icons/TextGrammarSettings.svg'); -webkit-mask-size: 24px 24px; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url('/images/icons/TextGrammarSettings.svg'); mask-size: 24px 24px; mask-repeat: no-repeat; mask-position: center; } /* === hide original === */ #devListToolbarSpan #devListToolbarSettings:not([style*="display: none"]) path { display: none !important; } #p11 > div:nth-child(4):has(> div[id$="lock"]) { right: 60px !important; margin-top: -28px !important; font-size: xx-small !important; } #p11capslock, #p11scrolllock, #p11numlock { margin-left: 12px !important; background-color: rgb(218, 218, 218) !important; background-color: lightgray !important; padding: 2px 7px !important; border-radius: 3px !important; font-size: xx-small !important; } #p1title { margin-top: -13px !important; margin-right: 15px; } /* **************************************************************** */ /* Mobile Styles */ @media (max-width: 769px) { #p15agentConsole { height: calc(100vh - 288px) !important; max-height: calc(100vh - 288px) !important; } #p15agentConsoleText { height: calc(100vh - 291px) !important; max-height: calc(100vh - 291px) !important; } .menu_stack.fullscreen #p15agentConsole { height: calc(100vh - 317px) !important; max-height: calc(100vh - 317px) !important; } .menu_stack.fullscreen #p15agentConsoleText { height: calc(100vh - 317px) !important; max-height: calc(100vh - 317px) !important; } #deskarea3x { height: calc(100vh - 288px) !important; max-height: calc(100vh - 288px) !important; } .room4submenu #deskarea3x { height: calc(100vh - 314px) !important; max-height: calc(100vh - 314px) !important; } .fulldesk #deskarea3x { height: calc(100vh - 65px) !important; max-height: calc(100vh - 65px) !important; } #termarea3x { height: calc(100vh - 350px) !important; max-height: calc(100vh - 350px) !important; } .room4submenu #termarea3x { height: calc(100vh - 314px) !important; max-height: calc(100vh - 314px) !important; } #p13filetable { height: calc(100vh - 350px) !important; max-height: calc(100vh - 350px) !important; } .room4submenu #p13filetable { height: calc(100vh - 376px) !important; max-height: calc(100vh - 376px) !important; } #Term { height: calc(100vh - 350px) !important; max-height: calc(100vh - 350px) !important; } .room4submenu #Term { height: calc(100vh - 376px) !important; max-height: calc(100vh - 376px) !important; } #termarea3xdiv { height: calc(100vh - 350px) !important; max-height: calc(100vh - 350px) !important; } .room4submenu #termarea3xdiv { height: calc(100vh - 376px) !important; max-height: calc(100vh - 376px) !important; } #p13toolbar .areaHead2 { flex-wrap: wrap !important; gap: 4px !important; max-height: 80px !important; overflow: visible !important; width: 100% !important; display: flex !important; } #p13toolbar .areaHead2 input[type="button"] { font-size: 12px !important; padding: 4px 8px !important; margin: 2px !important; flex-shrink: 0 !important; white-space: nowrap !important; min-width: fit-content !important; } #p13toolbar .areaHead2 .d-flex { flex-wrap: wrap !important; width: 100% !important; max-width: 100% !important; } #p13toolbar .areaHead2 input[value="Cut"], #p13toolbar .areaHead2 input[value="Copy"], #p13toolbar .areaHead2 input[value="Paste"], #p13toolbar .areaHead2 input[value="Zip"], #p13toolbar .areaHead2 input[value="Unzip"], #p13toolbar .areaHead2 input[value="Find"], #p13toolbar .areaHead2 input[value="GoTo"], #p13toolbar .areaHead2 input[value="Open"] { display: none !important; } #p13toolbarBottom .style6 { background-color: transparent !important; border: none !important; padding: 2px !important; } #p13toolbarBottom td:has(#p13bottomstatus) { background-color: transparent !important; background: none !important; } #p13bottomstatus { color: #666 !important; font-size: 12px !important; } .fulldesk #termarea3x[style*="height"] { height: calc(100vh - 120px) !important; max-height: calc(100vh - 120px) !important; max-width: none !important; } .fulldesk #termarea3xdiv[style*="height"] { height: calc(100vh - 120px) !important; max-height: calc(100vh - 120px) !important; } .fulldesk #Term[style*="height"] { height: calc(100vh - 120px) !important; max-height: calc(100vh - 120px) !important; } #termarea3x[style*="calc(-55px + 100vh)"] { height: calc(100vh - 120px) !important; max-height: calc(100vh - 120px) !important; max-width: none !important; } #termarea3xdiv[style*="calc(-55px + 100vh)"] { height: calc(100vh - 120px) !important; max-height: calc(100vh - 120px) !important; } #p11 #p11title #devListToolbarViewIcons, #devListToolbarViewIcons2, #devListToolbarViewIcons3, #idx_deskFullBtn2, #idx_termFullBtn2, .fa-maximize { display: none !important; } .notifiyBox { top: 67px !important; right: 10px !important; } } /* **************************************************************** */ /* My Account */ #p2info { overflow-x: hidden !important; } #p2meshes { margin-right: 15px !important; } #p2 .col-10 { padding: 25px 10px 10px 0; width: 70%; } #p2 .col-2 { flex: 0 0 auto; width: 30%; padding: 10px; } /* #p2meshes { margin-right: 15px !important; max-width: 930px; } */ #p2 .card { background: rgba(245, 250, 255, 0.8) !important; } .night #p2 .card { background: rgba(30, 35, 50, 0.65) !important; } #p2meshes .row { --bs-gutter-x: unset; --bs-gutter-y: unset; display: flex; flex-wrap: wrap; margin-top: unset; margin-right: unset; margin-left: unset; } #p2meshes .mb-2 { margin-bottom: unset !important; margin-right: .5rem !important; } #p2meshes .col-lg-4 { flex: 0 0 auto; width: unset !important; } #p2meshes .card { width: 300px; height: 24px; margin-bottom: 4px !important; vertical-align: middle; border-spacing: 0; color: var(--bs-secondary-color); position: relative; overflow: hidden; display: flex !important; flex-direction: column; justify-content: center; border-radius: 16px; padding: 24px 16px; transition: background-color 0.25s ease, backdrop-filter 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(100, 120, 255, 0.2); min-height: 110px; } @supports (corner-shape: squircle) or (corner-shape: superellipse) { #p2meshes .card { border-radius: 60px; corner-shape: squircle; } } #p2meshes .card:hover { transform: translateY(-6px); background-color: color-mix(in srgb, var(--bs-secondary) 14%, transparent) !important; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); } #p2 .card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70% ); opacity: 0; transform: translateX(-60%); transition: opacity 0.3s ease, transform 0.5s ease; pointer-events: none; } #p2 .card:hover::before { opacity: 1; transform: translateX(60%); } canvas#p2canvas, #p2AccountImage, #p2AccountImage2, #MainUserImageEx { box-shadow: unset !important; background: unset !important; border: unset !important; } .card, #p2AccountImage, #MainUserImageEx, picture#MainUserImage { background: unset !important; transition: transform 0.3s ease, background-color 0.3s ease; transform-origin: bottom center; } #p2canvas { background: unset !important; transition: transform 0.3s ease, background-color 0.3s ease; } .card:hover, #p2AccountImage:hover, #p2canvas:hover, #MainUserImageEx:hover, picture#MainUserImage:hover { transform: scale(1.02); background: unset !important; } #p2canvas { display: block !important; margin-left: auto !important; margin-right: auto !important; margin-top: 50px !important; } input#p2FolderUp { min-width: 82px; margin-right: 15px; } /* cards animation */ #p2meshes > .row > div { animation: p2-pop-in 0.26s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(0.1s * sibling-index()); } @keyframes p2-pop-in { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /* **************************************************************** */ /* My Events - Remove horizontal scrolling in the Events view */ #MainMenuMyEvents.fullselect ~ div #container, #EventsSubMenu ~ div .style1 table, #page_leftbar + div table tbody tr td:last-child { white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; max-width: 300px; padding-right: 8px; } #container .style1, #EventsSubMenu .row .col table { overflow-x: hidden !important; } @media (max-width: 1024px) { #container table td { padding: 4px 2px !important; font-size: 0.85em; } } #p20main { padding-right: 15px; } /* **************************************************************** */ /* My Server */ /* Main container - transparent and centered */ #p6 #serverStats { /* font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; */ /* max-width: 1200px; */ margin: 0 auto; /* padding: 20px; */ color: #2d3748; transition: all 0.3s ease; } .night #p6 #serverStats { color: #e0e0e0; } /* Pie chart line - centered and with spacing */ #p6 #serverStats > div[id$="ChartView"] { display: inline-flex !important; align-items: center; justify-content: center; gap: 24px; padding: 40px 28px; border-radius: 18px; margin: 15px 0px; transition: all 0.3s ease; min-width: 450px; flex: 1; /* max-width: 420px; */ } /* Graphic card background */ #p6 #serverStats > div[id$="ChartView"] { background: rgba(240, 245, 255, 0.7); border: 1px solid rgba(100, 120, 255, 0.2); } .night #p6 #serverStats > div[id$="ChartView"] { background: rgba(30, 35, 50, 0.65); border: 1px solid rgba(100, 120, 255, 0.2); } #p6 #serverStats > div[id$="ChartView"]:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15); } .night #p6 #serverStats > div[id$="ChartView"]:hover { background: rgba(40, 45, 70, 0.85); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45); } /* Center the two cards on the line */ #p6 #serverStats > div[id^="serverCpuChartView"], #p6 #serverStats > div[id^="serverMemoryChartView"] { display: inline-flex; margin-left: 5px; } #p6 #serverStats::before { content: ''; display: block; text-align: center; } /* Increase the size of the pie charts */ #p6 .chartViewCanvas canvas { width: 80px !important; height: 80px !important; } #p6 .chartViewCanvas { height: unset !important; } /* Chart texts */ #p6 .chartViewText { text-align: left; width: 280px !important; margin: 0px; padding-left: 0px; } #p6 .chartViewText > div:first-child { font-weight: 600; font-size: 16px; /*margin-bottom: 10px;*/ color: #4c51bf; } #p6 .night .chartViewText > div:first-child { color: #a0a8ff; } #p6 .chartViewText b { font-weight: 700; padding: 4px 9px; border-radius: 8px; font-size: 14px; background: rgba(100, 120, 255, 0.18); margin-right: 4px; color: #2d3748; } .night #p6 .chartViewText b { background: rgba(80, 100, 255, 0.25); color: #ffffff; } /* Increased spacing before Server State */ #p6 #serverStatsTable { /* margin-top: 50px; /* Large spacing between graphs and Server State */ max-width: 930px; } /* Server State Title */ #p6 .userTableHeader, #p6 #p6info > strong, #p6 #p2ServerActions > p > strong { font-size: 19px; font-weight: 600; margin-bottom: 20px !important; padding-bottom: 10px; border-bottom: 1px solid rgba(100, 120, 255, 0.3); color: #4a5568; text-align: left; } .night #p6 .userTableHeader, .night #p6 #p6info > strong, .night #p6 #p2ServerActions > p > strong { color: #c0c8ff; border-bottom-color: rgba(100, 120, 255, 0.4); } /* Grid with more cells per row */ #p6 #serverStatsTable > div:not(:first-child) { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-top: 12px; } /* Statistics cards – glass + light reflection */ #p6 .serverStateTableCell { position: relative; overflow: hidden; display: flex !important; flex-direction: column; justify-content: center; align-items: center; background: rgba(245, 250, 255, 0.8); border-radius: 16px; padding: 24px 16px; text-align: center; transition: background-color 0.25s ease, backdrop-filter 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(100, 120, 255, 0.2); min-height: 110px; } @supports (corner-shape: squircle) or (corner-shape: superellipse) { #p6 .serverStateTableCell { border-radius: 60px; corner-shape: squircle; } } .night #p6 .serverStateTableCell { background: rgba(30, 35, 50, 0.65); border: 1px solid rgba(100, 120, 255, 0.2); } /* Light reflection */ #p6 .serverStateTableCell::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70% ); opacity: 0; transform: translateX(-60%); transition: opacity 0.3s ease, transform 0.5s ease; pointer-events: none; } /* Hover – glass effect */ #p6 .serverStateTableCell:hover { transform: translateY(-6px); background-color: color-mix(in srgb, var(--bs-secondary) 14%, transparent); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); } .night #p6 .serverStateTableCell:hover { background-color: color-mix(in srgb, var(--bs-secondary) 18%, transparent); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); } /* Activate reflection on hover */ #p6 .serverStateTableCell:hover::before { opacity: 1; transform: translateX(60%); } /* Large, centered number */ #p6 .serverStateTableCell span:last-child { display: block; font-size: 40px !important; font-weight: 800; margin-bottom: 8px; color: #2d3748; background: none !important; padding: 0 !important; float: none !important; line-height: 1; } .night #p6 .serverStateTableCell span:last-child { color: #ffffff; } /* Label below and centered */ #p6 .serverStateTableCell span:first-child { display: block; font-size: 14px; font-weight: 500; color: #4a5568; opacity: 0.95; float: none !important; } .night #p6 .serverStateTableCell span:first-child { color: #b0b8ff; } /* Remove

*/ #p6 #serverStats > br { display: none; } /* Responsive */ @media (max-width: 900px) { #p6 #serverStats > div[id$="ChartView"] { display: flex; width: 100%; max-width: none; margin: 15px 0; } #p6 #serverStatsTable > div:not(:first-child) { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } @media (max-width: 600px) { #p6 #serverStatsTable > div:not(:first-child) { grid-template-columns: 1fr 1fr; } #p6 .chartViewCanvas canvas { width: 70px !important; height: 70px !important; } #p6 .serverStateTableCell span:last-child { font-size: 36px !important; } } @media (max-width: 400px) { #p6 #serverStatsTable > div:not(:first-child) { grid-template-columns: 1fr; } } #p6 { cursor: default; } /* Animated border */ #p6 #serverStats > div[id^="serverCpuChartView"], #p6 #serverStats > div[id^="serverMemoryChartView"] { position: relative; display: inline-flex; z-index: 0; overflow: visible; border-radius: 14px; } @supports (corner-shape: squircle) or (corner-shape: superellipse) { #p6 #serverStats > div[id^="serverCpuChartView"], #p6 #serverStats > div[id^="serverMemoryChartView"] { border-radius: 80px; corner-shape: squircle; } } #p6 #serverStats > div[id^="serverCpuChartView"]::after { content: ""; position: absolute; inset: -2px; border-radius: 14px; background: conic-gradient( from var(--angle), #00e5ff, #e6e6e691, #7c4dff, #00e5ff ); animation: borderSpin 4s linear infinite; z-index: -1; /* border mask */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px; } @supports (corner-shape: squircle) or (corner-shape: superellipse) { #p6 #serverStats > div[id^="serverCpuChartView"]::after { border-radius: 80px; corner-shape: squircle; } } #p6 #serverStats > div[id^="serverMemoryChartView"]::after { content: ""; position: absolute; inset: -2px; border-radius: 14px; background: conic-gradient( from var(--angle), #7c4dff, #00e5ff, #e6e6e691, #7c4dff ); animation: borderSpin 4s linear infinite; z-index: -1; /* border mask */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px; } @supports (corner-shape: squircle) or (corner-shape: superellipse) { #p6 #serverStats > div[id^="serverMemoryChartView"]::after { border-radius: 80px; corner-shape: squircle; } } @property --angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes borderSpin { to { --angle: 360deg; } } /* **************************************************************** */ /* Notifications */ .deviceNotifyDotSub { height: 20px !important; width: 20px !important; } .deviceNotifyDotSub, .deviceNotifySmallDotSub { background-color: #48cb45 !important; box-shadow: unset !important; } .deviceNotifyDotSub:hover { background-color: color-mix(in lab, currentcolor 5%, transparent) !important; transition: background-color 0.2s ease; box-shadow: 1px 1px 5px #00000091 !important; } .notifiyBox { border: unset !important; color: var(--bs-body-color) !important; background-color: #f3f3f3 !important; width: 240px !important; font-size: small !important; top: 58px !important; right: 10px !important; max-height: 250px !important; box-shadow: 0 0 12px #0000004d !important; padding: 4px; } .night .notifiyBox { background-color: #1c1e1e !important; box-shadow: 0 0 12px #050505ba !important; } .notifiyBox::before, .notifiyBox::after { content: unset !important; border: unset !important; } #notifiyBox .notification .unselectable { color: var(--bs-body-color) !important; } .notification:hover { background-color: color-mix(in lab, currentcolor 5%, transparent) !important; transition: background-color 0.2s ease; } #notifyRemoveAll:hover { background-color: color-mix(in lab, currentcolor 5%, transparent) !important; transition: background-color 0.2s ease; } .notification { border-top: 1px solid var(--bs-border-color-translucent) !important; border-radius: 7px !important; } #notifiyBox .customScroll > .notification:first-child { border-top: unset !important; } /* Notification flex */ #notifiyBox .customScroll { display: flex; flex-direction: column; position: relative; overflow-y: auto; overflow-x: hidden; max-height: 240px !important; margin: unset !important; padding: 0; } /* "Clear all" sticky on top */ #notifyRemoveAll { order: -1; position: sticky !important; top: 0 !important; z-index: 10 !important; margin: 0 !important; text-align: center !important; padding: 3px 0 !important; background-color: #f3f3f3; width: 100% !important; box-sizing: border-box !important; flex-shrink: 0 !important; border-top: unset !important; border-bottom: 1px solid var(--bs-border-color-translucent) !important; color: #ff5353 !important; font-size: small !important; border-radius: 7px !important; } .night #notifyRemoveAll { background-color: #1c1e1e; } #notifyRemoveAll:hover { background-color: #f6d3d3 !important; } .night #notifyRemoveAll:hover { background-color: #652c2c !important; } #notifiyBox .notification { display: block; position: relative; cursor: pointer; border-top: 1px solid var(--bs-border-color-translucent) !important; margin: 0; padding: 0; min-height: auto; overflow: visible; } #notifiyBox .notification .j1 { float: left; margin: 5px; display: block; } #notifiyBox .notification div[onclick*="notificationDelete"] { float: right; margin: 5px; display: block; } #notifiyBox .notification > div[onclick*="notificationSelected"]:not(.j1) { margin: 5px; display: block !important; overflow: visible; width: auto; } #notifiyBox .notification > div:last-child { clear: both; margin-left: 5px; margin-bottom: 5px; color: gray; font-size: 10px; display: block !important; width: 100%; } #notifiyBox .notification::after { content: ""; display: block; clear: both; height: 0; } /* Notifications - do not disturb when fullscreen */ :fullscreen #notifiyBox { display: none !important; } /* bell hover animation */ .notification-icon:hover .fa-bell { animation: bellRing 0.9s both; } /* bell ringing animation keyframes*/ @keyframes bellRing { 0%, 100% { transform-origin: top; } 15% { transform: rotateZ(10deg); } 30% { transform: rotateZ(-10deg); } 45% { transform: rotateZ(5deg); } 60% { transform: rotateZ(-5deg); } 75% { transform: rotateZ(2deg); } } /* **************************************************************** */ /* TopBar - Hide and raise device list */ #column_l { margin-top: 0 !important; padding: 15px 0 0 15px !important; } /* #p1 { margin-right: -15px; } #devListToolbarSpan .d-flex.align-items-center.ms-auto { margin-right: 15px; }*/ body.fullscreen:not(.menu_stack) #column_l:has( #p1:not([style*="display: none"], [style*="display:none"]), #p2:not([style*="display: none"], [style*="display:none"]), #p5:not([style*="display: none"], [style*="display:none"]) ) { margin-top: -24px !important; } @media (max-width: 768px) { body.fullscreen:not(.menu_stack) #column_l:has( #p1:not([style*="display: none"], [style*="display:none"]), #p2:not([style*="display: none"], [style*="display:none"]), #p5:not([style*="display: none"], [style*="display:none"]) ) { margin-top: unset !important; } } #xdevices { /* height: calc(-165px + 100vh) !important; */ max-height: calc(-145px + 100vh) !important; margin-left: 4px !important; } #p2info { height: calc(-122px + 100vh) !important; max-height: calc(-122px + 100vh) !important; } #p3events { height: calc(-183px + 100vh) !important; } #p10info { height: calc(-145px + 100vh) !important; max-height: calc(-145px + 100vh) !important; padding-right: 15px; } #xdevicesmap { height: calc(100vh - 145px) !important; max-height: calc(100vh - 145px) !important; } /* Topbar colors */ .style3, .style3x, #MainSubMenuSpan, #MeshSubMenuSpan, #EventsSubMenuSpan, #UserSubMenuSpan, #UsersSubMenuSpan, #ServerSubMenuSpan, #MainMenuSpan, #MainSubMenu, #MeshSubMenu, #UserSubMenu, #ServerSubMenu, #UserDummyMenu, #PluginSubMenu { background: unset !important; background-color: var(--bs-secondary-bg) !important; font-weight: lighter; } .style3sel, .fullselect, #EventsSubMenu .style3sel { /* background-color: var(--bs-secondary-bg) !important; */ color: var(--bs-emphasis-color) !important; background-color: #f3f3f3 !important; border-right: 2px solid var(--bs-secondary-border-subtle) !important; border-left: 2px solid var(--bs-secondary-border-subtle) !important; } .night .style3sel, .night .fullselect, .night #EventsSubMenu .style3sel { background-color: #1c1e1e !important; } #EventsSubMenu .style3x, .style3x { /* background-color: #0000003b !important; */ border-right: 1px solid #97979740 !important; background: #dddddd2e !important; /* font-weight: normal; */ } #EventsSubMenu .style3x:hover, .style3x:hover { background-color: color-mix(in lab, currentcolor 5%, transparent) !important; transition: background-color 0.2s ease; } /* Event tabs Gap */ #EventsSubMenu .col { /* margin: 0 !important; */ padding-left: 0 !important; padding-right: 0 !important; /* width: auto !important; */ } #uiMenuButton{ top: -20px; } /* **************************************************************** */ /* TopMenu */ #userDropdownMenuContainer, #uiSubmenu { padding: 4px; } #userDropdown { background: unset !important; } #userDropdownName { font-size: 0.8rem; } #userDropdownMenu, .userDropdownSubmenu { color: var(--bs-body-color) !important; font-size: small !important; border-radius: 10px !important; box-shadow: 0 0 12px #0000004d; backdrop-filter: blur(12px) saturate(120%) brightness(1.1) !important; -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(1.1) !important; overflow: visible !important; isolation: isolate !important; transform: translateZ(0) !important; } .night #userDropdownMenu, .night .userDropdownSubmenu { box-shadow: 0 0 12px #050505ba !important; } #userDropdownMenu { background-color: rgba(242, 242, 242, 0.75) !important; } .night #userDropdownMenu { background-color: rgba(41, 44, 44, 0.75) !important; } .userDropdownSubmenu { background-color: rgba(242, 242, 242, 0.95) !important; } .night .userDropdownSubmenu { background-color: rgba(41, 44, 44, 0.95) !important; } .userDropdownMenuItem, .userDropdownSubmenuItem { border-radius: 7px !important; } @media (min-width: 769px) { .userDropdownMenuItem:hover, .userDropdownSubmenuItem:hover, #userDropdownMenuContainer:has(#uiSubmenu:hover) .userDropdownUISettings { background-color: color-mix(in lab, currentcolor 5%, transparent) !important; transition: background-color 0.2s ease; } } .userDropdownMenuItem span, .userDropdownMenuItem { color: unset !important; font-size: small !important; } #userDropdownMenuDivider { border-top: var(--bs-border-width) solid !important; opacity: .25 !important; } #uiSubmenu { right: 100% !important; margin-right: -4px !important; } @media (max-width: 769px) { .userDropdownSubmenu { /* background-color: rgba(242, 242, 242, 0.75) !important; */ background-color: unset !important; box-shadow: unset !important; backdrop-filter: unset !important; } .night .userDropdownSubmenu { /* background-color: rgba(41, 44, 44, 0.75) !important; */ background-color: unset !important; box-shadow: unset !important; backdrop-filter: unset !important; } } /* hover */ @media (min-width: 769px) { #uiSubmenu { display: block !important; opacity: 0 !important; transform: translateX(12px) !important; transition: opacity 0.18s ease 0s, transform 0.3s ease 0s; pointer-events: none !important; transition-delay: 0.1s !important; } #userDropdownMenuContainer:has(#uiSubmenu:hover) .userDropdownUISettings { background-color: color-mix(in lab, currentcolor 5%, transparent) !important; transition: background-color 0.2s ease; } .userDropdownUISettings:hover + #uiSubmenu, #uiSubmenu:hover { display: block !important; opacity: 1 !important; transform: translateX(0) !important; pointer-events: auto !important; transition-delay: 0.4s !important; } #userDropdownMenuContainer:has(.userDropdownUISettings:hover) .fa-chevron-right, #userDropdownMenuContainer:has(#uiSubmenu:hover) .fa-chevron-right { transform: rotate(90deg) !important; transition-delay: 0.3s !important; } } .userDropdownMenuIcon { width: 15px !important; height: 15px !important; } #userDropdownMenuContainer .fa-chevron-right { width: 12px !important; height: 12px !important; } .userDropdownMenuItem[onclick="handleUserMenuItem('logout')"] { color: #ff5353 !important; } .userDropdownMenuItem[onclick="handleUserMenuItem('logout')"]:hover { background-color: #f6d3d3 !important; } .night .userDropdownMenuItem[onclick="handleUserMenuItem('logout')"]:hover { background-color: #652c2c !important; }