/* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ /* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ /* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ /* 88 */ /* dP */ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); @import url("/css/defaults/transparent.css"); * { outline: none !important; } h1, h2, h3, h4, h5, h6 { color: var(--text-hover); } body, .logged-out-modal guac-modal { background: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; color: var(--text) !important; } div.displayMiddle { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } /* LOGIN MENU */ div.login-ui { background: inherit; } .login-ui div.login-dialog { background: var(--transparency-dark-25); border: none; } input[type="submit"], button, a.button { background-color: var(--button-color); border: none; outline: none; } input[type="submit"]:hover, button:hover, a.button:hover { background-color: var(--button-color-hover); border: none; cursor: pointer; } select { background: var(--transparency-dark-10); color: var(--text); border-color: transparent; } select:focus { background-color: var(--drop-down-menu-bg); color: var(--text); } .login-ui .login-fields .labeled-field input:focus { outline: none; } .login-ui .login-fields .labeled-field.empty input { outline: none; background: rgba(0, 0, 0, 0.15); caret-color: var(--text); } .login-ui .login-fields .labeled-field.empty input:focus { outline: none; color: black; } .login-ui .login-dialog .login-fields input { background: white; color: black !important; } div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea { color: var(--text-hover); } input[type=checkbox], input[type=number], input[type=text], input[type=email], input[type=radio], textarea { color: var(--text-hover); } .login-ui .login-dialog .login-fields input { background: white; color: black !important; } /* HOME MENU */ .header h2 { color: rgb(var(--accent-color)); } .connection .icon.vnc, .connection .icon.rdp { background-image: url(/resources/guacamole/guac-monitor.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .connection .icon.ssh, .connection .icon.telnet { background-image: url(/resources/guacamole/guac-text.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .user-menu .menu-dropdown .menu-title { background-image: url(/resources/guacamole/guac-user.png); background-color: transparent; background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .user-menu .menu-dropdown .menu-contents li a[href="#/"] { background-image: url(/resources/guacamole/guac-home-dark.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .user-menu .menu-dropdown .menu-contents li a[href="#/settings/users"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/connections"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] { background-image: url(/resources/guacamole/guac-config-dark.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .user-menu .menu-dropdown .menu-contents li a.logout { background-image: url(/resources/guacamole/guac-logout-dark.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .icon.user { background-image: url(/resources/guacamole/guac-user.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .pager .icon.first-page { background-image: url(/resources/guacamole/guac-first-page.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .pager .icon.prev-page { background-image: url(/resources/guacamole/guac-prev-page.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .pager .icon.next-page { background-image: url(/resources/guacamole/guac-next-page.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .pager .icon.last-page { background-image: url(/resources/guacamole/guac-last-page.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .loading::before { background-image: url('/resources/guacamole/cog.png'); } table.sorted th.sort-primary.sort-descending:after { background-image: url(/resources/guacamole/up.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .menu-dropdown .menu-indicator { background-image: url(/resources/guacamole/down.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .menu-dropdown .menu-indicator:hover { background-image: url(/resources/guacamole/down.png); color: #f9be03; background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } table.sorted th.sort-primary:after { background-image: url(/resources/guacamole/down.png); background-repeat: no-repeat; background-size: 1em; background-position: 0.75em; padding-left: 2.5em; } .form-field .password-field input[type=password]~.icon.toggle-password { filter: invert(1); } thead { color: var(--text-hover); } table.sorted th, table.sorted td { border: 1px solid rgb(255 255 255 / 15%); } .settings table.session-list tr.session:hover { background: var(--transparency-light-15); } .menu-dropdown.open, .menu-dropdown.open:hover { background: var(--transparency-dark-25) } .menu-dropdown .menu-contents li a { display: block; cursor: pointer; color: var(--text); text-decoration: none; padding: .75em; } .menu-dropdown .menu-contents li a.current, .menu-dropdown .menu-contents li a.current:hover { color: var(--text-hover) } .menu-dropdown .menu-contents li a:hover { background: var(--transparency-dark-25); color: var(--text-hover); } .menu-dropdown:hover { background: var(--transparency-dark-25); color: var(--text-hover); } .menu-dropdown .menu-contents { background: var(--drop-down-menu-bg); } .header .filter input { -moz-border-radius: 0; -webkit-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; border: 0; border-left: 1px solid rgba(0, 0, 0, 0.125); background-color: transparent; color: var(--text-hover); } .filter .search-string { background-image: url(/resources/guacamole/magnifier.png) !important; background-repeat: no-repeat !important; background-size: 1.75em !important; background-position: .25em center !important; padding: .5em !important; padding-left: 2.25em !important; width: 100%; max-width: none; background: var(--transparency-dark-25); border: 0; } div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea { color: var(--text-hover); } .user a:visited, .connection a:visited, .connection-group a:visited { text-decoration: none; color: var(--link-color-hover); } .recent-connections .connection:hover { background: var(--transparency-dark-10); color: var(--link-color-hover); } .list-item:not(.selected) .caption:hover { background: var(--transparency-dark-10); color: var(--link-color-hover); } .list-item .name { color: var(--link-color); } .list-item:not(.selected) .caption:hover .name { color: var(--link-color-hover); } /* SIDE MENU */ .menu, .menu .header { background: var(--modal-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; box-shadow: none; } .menu-content, .menu-content .header, .menu-body { background: var(--modal-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } .clipboard, .clipboard-service-target { background: var(--transparency-dark-25); color: var(--text-hover); } /* NOTIFICATION BOX */ .notification.error { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; color: var(--text-hover); } .notification { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; color: var(--text-hover); } /* SETTINGS */ .page-tabs .page-list li a[href]:visited { color: var(--text-hover); } .page-tabs .page-list li a[href] { color: var(--text-hover); } .page-tabs .page-list li a[href]:hover { background: var(--transparency-dark-25); } .user a:visited, .connection a:visited, .connection-group a:visited { text-decoration: none; color: var(--link-color); } .user a:hover, .user-group a:hover, .connection a:hover, .connection-group a:hover, a.ng-binding:hover:not(.add-user):not(.button) { color: var(--link-color-hover) !important; } .user a, .connection a, .connection-group a, a.ng-binding:not(.add-user):not(.button) { text-decoration: none; color: var(--link-color); } div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea { border: 0; background: var(--transparency-dark-25) } .location-chooser .dropdown { background: #666; } /* USER SETTINGS */ .page-tabs .page-list li a[href], .section-tabs li a { color: var(--text) !important; } .page-tabs .page-list li a[href].current, .page-tabs .page-list li a[href].current:hover, .section-tabs li a.current, .section-tabs li a.current:hover { background: var(--transparency-dark-25); cursor: default; color: rgb(var(--accent-color)) !important; } .page-tabs .page-list li a[href]:hover, .section-tabs li a:hover { background: var(--transparency-dark-10); color: var(--text-hover) !important; } .manage-user .page-tabs .page-list li.linked a[href]:before { background-image: url(/resources/guacamole/checkmark.png); } .manage-user .page-tabs .page-list li.read-only a[href]:before { background-image: url(/resources/guacamole/lock.png); } .manage-user .notice.read-only { background: var(--transparency-dark-10); } /* DUA 2FA PAGE */ .duo-signature-response-field { background: var(--modal-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } .base-wrapper { border: 1px solid transparent !important; background: var(--modal-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } .base-body { background-color: #333 !important; } h1.spacious-frame-view { color: var(--text-hover) !important; } @media screen and (-webkit-max-device-pixel-ratio: 1.25), screen and (max-resolution: 120dpi) { h1, .h1 { color: var(--text-hover) !important; } } .white-wrapper { background-color: #333 !important; color: var(--text) !important; } form:not(.inline) fieldset { background-color: #333 !important; } label span { color: var(--text-hover) !important; } input[type=radio] { border: 1px solid var(--text-hover) !important; } /* Connection */ #connection-warning { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; color: var(--text); } /* File Transfer */ #file-transfer-dialog .transfer-manager { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } .transfer.error { background: rgba(244, 67, 54, 0.5); } .transfer-manager .header h2 { background-color: transparent; } .transfer .in-progress .progress { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } .related-objects .abbreviated-related-objects ul li { display: inline-block; margin: .25em; padding: .25em; border: 1px solid rgb(var(--accent-color)); background: rgb(var(--accent-color)); } .related-objects .abbreviated-related-objects ul li label span { color: var(--label-text-color) !important; } .attributes .form h3, .header { background: var(--transparency-dark-25) } .connection-parameters .form .fields { border-left: 3px solid rgb(var(--accent-color)); }