diff options
Diffstat (limited to 'assets/logo/custom-2023.css')
-rw-r--r-- | assets/logo/custom-2023.css | 965 |
1 files changed, 965 insertions, 0 deletions
diff --git a/assets/logo/custom-2023.css b/assets/logo/custom-2023.css new file mode 100644 index 0000000..6ead16e --- /dev/null +++ b/assets/logo/custom-2023.css @@ -0,0 +1,965 @@ +img { + image-rendering: pixelated !important; +} + +.modal-dialog { + margin-bottom: 3.5rem !important; +} + +#admin-page { + margin-left: 32px; +} + +.debug-hidden { + display: none; +} + +#system-banner-container, #member-banner-container { + z-index: -1; +} + +.debug-outer:hover .debug-hidden { + display: inline-block; +} + +.modal { + backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px); +} + +nav.navbar { + background-color: rgba(0, 0, 0, .75) !important; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, .25); +} + +.hpd-item-card:hover { + background-color: rgba(255, 255, 255, .15) !important; +} + +.hpd-item-card:active, .hpd-item-card:focus { + background-color: rgba(255, 255, 255, .2) !important; +} + +.hpd-system { + transition: opacity 200ms; +} + +.hpd-item-card { + outline-style: solid; + outline-width: 0; + transition: background-color 200ms, outline-width 200ms; +} + +.hpd-item-card:hover { + outline-style: solid; + outline-width: 4px; +} + +.hpd-item-card:active { + outline-style: solid; + outline-width: 6px; +} + +.hpd-system:hover { + opacity: .9 !important; +} + +.hpd-system:active, .hpd-system:focus { + opacity: .8 !important; +} + +.hpd-link:hover { + background-color: rgba(255, 255, 255, .15) !important; +} + +.hpd-link:active, .hpd-link:focus { + background-color: rgba(255, 255, 255, .2) !important; +} + +.list-separator-mobile { + display: none; +} + +@media (max-width: 991px) { + #hpd-cloudburst > div, #hpd-raindrops > div, #hpd-legacy > div, #hpd-other > div { + grid-template-columns: repeat(3, 1fr) !important; + } + + .list-separator-desktop { + display: none; + } + + span.list-separator-mobile { + display: inline; + } +} + +@media (max-width: 768px) { + #hpd-cloudburst > div, #hpd-raindrops > div, #hpd-legacy > div, #hpd-other > div { + grid-template-columns: repeat(2, 1fr) !important; + } +} + +@media (max-width: 575px) { + #hpd-cloudburst > div, #hpd-raindrops > div, #hpd-legacy > div, #hpd-other > div { + grid-template-columns: repeat(1, 1fr) !important; + } + + .hpd-item-card img { + display: inline-block !important; + margin-right: 5px !important; + height: 32px !important; + width: 32px !important; + } + + #hpd-cloudburst > div, #hpd-raindrops > div, #hpd-legacy > div, #hpd-other > div { + grid-gap: 5px !important; + } + + .hpd-item-card div { + display: inline-block !important; + } + + .hpd-item-card div:nth-child(3)::before { + content: "("; + padding-left: 5px; + color: white !important; + } + + .hpd-item-card div:nth-child(3)::after { + content: ")"; + color: white !important; + } +} + +.dropdown-menu { + background-color: #222 !important; +} + +.dropdown-item:hover { + background-color: rgba(255, 255, 255, .1) !important; +} + +.dropdown-item:active, .dropdown-item:focus { + background-color: rgba(255, 255, 255, .2) !important; +} + +.dropdown-item { + color: white !important; +} + +.dropdown-icon { + filter: invert(1) !important; +} + +.dropdown-toggle .dropdown-icon { + opacity: .5; !important; + transition: 200ms opacity !important; +} + +.dropdown-toggle:hover .dropdown-icon, .dropdown-toggle:active .dropdown-icon, .dropdown-toggle:focus .dropdown-icon { + opacity: .75 !important; +} + +dd { + margin-left: 20px; +} + +#system-info a { + color: white !important; +} + +#system-info a:hover { + opacity: .75; +} + +#system-info a:active, #system-info a:focus { + opacity: .5; +} + +@media (max-width: 991px) { + #member-card { + grid-template-columns: repeat(3, 1fr) !important; + } + + .species-name { + display: none; + } +} + +.member-small-only { + display: none; +} + +@media (max-width: 767px) { + #member-card { + grid-template-columns: 1fr !important; + text-align: left; + } + + #member-icon-mobile { + display: inline-block !important; + } + + #mobile-left { + text-align: left !important; + } + + #mobile-species { + display: inline-block !important; + } + + #system-info { + grid-template-columns: 1fr !important; + } + + #member-icon, #member-icon-outer { + display: none !important; + } + + #member-relations { + grid-template-columns: 1fr !important; + text-align: left; + } + + .member-small-separator { + display: none; + } + + .member-small-only { + display: inline-block; + } +} + +#page-content a { + color: #afd0ff; +} + +#page-content .btn-outline-light:hover { + color: black !important; +} + +#page-content a:hover { + opacity: .75; +} + +#page-content a:active, #page-content a:focus { + opacity: .5; +} + +.tooltip.show { + opacity: 1; +} + +.tooltip-inner { + background: #151515; + box-shadow: 3px 4px 10px #ffffff26; +} + +.alert { + filter: invert(1) hue-rotate(180deg); +} + +.member-link { + color: white !important; + text-decoration: none !important; +} + +.system-action { + border-radius: 10px; + color: white !important; + text-decoration: none !important; + cursor: pointer; + transition: background 200ms; +} + +.system-action:hover { + background: rgba(255, 255, 255, .1); +} + +.table-dark { + --bs-table-bg: #000000; +} + +.comparison { + display: grid; + grid-template-columns: 3fr 1.5fr 1.5fr 2fr repeat(4, 1fr); +} + +.comparison-header { + border-bottom: 2px solid rgba(255, 255, 255, .25); + font-weight: bold; +} + +.comparison-item { + padding: 5px 10px; + text-align: center; +} + +.comparison-item-clickable:hover { + background-color: rgba(255, 255, 255, .1); +} + +.comparison-item-clickable:active, .comparison-item-clickable:focus { + background-color: rgba(255, 255, 255, .25); +} + +@media (min-width: 1400px) { + .comparison-header-l0 { + display: inline; + } + .comparison-header-l1 { + display: none; + } + .comparison-header-l2 { + display: none; + } + .comparison-header-l3 { + display: none; + } + .comparison-header-l4 { + display: none; + } + .comparison-header-l5 { + display: none; + } + .comparison-name-full { + display: inline; + } + .comparison-name-small { + display: none; + } + .comparison-colors { + display: inline; + } + .comparison-relations-count { + display: none; + } + .comparison-relations-full { + display: inline; + } +} + +@media (max-width: 1399px) { + .comparison-header-l0 { + display: none; + } + .comparison-header-l1 { + display: inline; + } + .comparison-header-l2 { + display: none; + } + .comparison-header-l3 { + display: none; + } + .comparison-header-l4 { + display: none; + } + .comparison-header-l5 { + display: none; + } + .comparison-name-full { + display: inline; + } + .comparison-name-small { + display: none; + } + .comparison-colors { + display: inline; + } + .comparison-relations-count { + display: none; + } + .comparison-relations-full { + display: inline; + } +} + +@media (max-width: 1199px) { + .comparison-header-l0 { + display: none; + } + .comparison-header-l1 { + display: none; + } + .comparison-header-l2 { + display: initial; + } + .comparison-header-l3 { + display: none; + } + .comparison-header-l4 { + display: none; + } + .comparison-header-l5 { + display: none; + } + .comparison-name-full { + display: none; + } + .comparison-name-small { + display: inline; + } + .comparison-colors { + display: inline; + } + .comparison-relations-count { + display: inline; + } + .comparison-relations-full { + display: none; + } +} + +@media (max-width: 991px) { + .comparison-header-l0 { + display: none; + } + .comparison-header-l1 { + display: none; + } + .comparison-header-l2 { + display: none; + } + .comparison-header-l3 { + display: initial; + } + .comparison-header-l4 { + display: none; + } + .comparison-header-l5 { + display: none; + } + .comparison-name-full { + display: none; + } + .comparison-name-small { + display: inline; + } + .comparison-colors { + display: none !important; + } + .comparison-relations-count { + display: inline; + } + .comparison-relations-full { + display: none; + } +} + +@media (max-width: 767px) { + .comparison-header-l0 { + display: none; + } + .comparison-header-l1 { + display: none; + } + .comparison-header-l2 { + display: none; + } + .comparison-header-l3 { + display: none; + } + .comparison-header-l4 { + display: initial; + } + .comparison-header-l5 { + display: none; + } + .comparison-name-full { + display: none; + } + .comparison-name-small { + display: none; + } + .comparison-colors { + display: none !important; + } + .comparison-relations-count { + display: inline; + } + .comparison-relations-full { + display: none; + } +} + +@media (max-width: 575px) { + .comparison-header-l0 { + display: none; + } + .comparison-header-l1 { + display: none; + } + .comparison-header-l2 { + display: none; + } + .comparison-header-l3 { + display: none; + } + .comparison-header-l4 { + display: none; + } + .comparison-header-l5 { + display: initial; + } + .comparison-name-full { + display: none; + } + .comparison-name-small { + display: none; + } + .comparison-colors { + display: none !important; + } + .comparison { + grid-template-columns: repeat(4, 2fr) repeat(4, 1fr) !important; + } + .comparison-relations-count { + display: inline; + } + .comparison-relations-full { + display: none; + } +} + +.tree-first-separator { + height: 14px !important; + top: 0 !important; +} + +.tree-l0-separator { + display: inline-block; + width: 20px; + margin-left: 35px; + border-bottom: 1px solid white; + border-left: 1px solid white; + height: 26px; + position: relative; + top: -12px; +} + +.tree-l1 .tree-l0-separator { + border-bottom: none !important; +} + +.tree-l1-separator { + display: inline-block; + width: 20px; + margin-left: 35px; + border-bottom: 1px solid white; + border-left: 1px solid white; + height: 26px; + position: relative; + top: -12px; + left: -10px; +} + +.tree-l1 .tree-l0-separator { + width: 30px; +} + +.tree-l1 .tree-inner { + position: relative; + left: -10px; +} + +.tree-l1 .tree-l0-separator { + border-bottom: none !important; +} + +.tree-l2-separator { + display: inline-block; + width: 20px; + margin-left: 35px; + border-bottom: 1px solid white; + border-left: 1px solid white; + height: 26px; + position: relative; + top: -12px; + left: -10px; +} + +.tree-l2 .tree-l1-separator { + width: 30px; +} + +.tree-l2 .tree-l0-separator { + width: 30px; +} + +.tree-l2 .tree-inner { + position: relative; + left: -10px; +} + +.tree-inner { + display: inline-block; +} + +.navbar-collapse.collapse.show, .navbar-collapse.collapsing { + background: black; + margin: 7px -12px; + padding: 0 12px; + border-bottom: 1px solid rgba(255, 255, 255, .25); +} + +.new-homepage-system-title:hover { + opacity: .85; +} + +#new-homepage-systems { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 20px; +} + +@media (max-width: 991px) { + #new-homepage-systems { + grid-template-columns: 1fr !important; + } +} + +.new-homepage-system-list { + background-color: rgba(255, 255, 255, .1); + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + display: grid; +} + +.new-homepage-link-last { + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} + +.new-homepage-link:hover { + opacity: .85; +} + +.new-homepage-link:active { + opacity: .75; +} + +.new-homepage-system-title:active { + opacity: .75; +} + +peh-muted { + --bs-text-opacity: 1; + color: #6c757d!important; +} + +.dropdown-toggle::after { + margin-bottom: -3px !important; +} + +.navbar-nav { + width: 100%; +} + +.card { + background-color: #111 !important; + border: 1px solid rgba(255, 255, 255, .125) !important; +} + +#member-banner-container > #member-banner > #system-info { + border-bottom-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +#member-details { + background: rgba(255, 255, 255, .1); + border: 1px solid transparent; + border-top: none; + padding: 10px 20px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + display: grid; + grid-template-columns: repeat(4, 1fr); + text-align: center; +} + +#member-details.member-details-loggedIn { + border-radius: 0; + padding-bottom: 0 !important; +} + +#member-details-2 { + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + padding: 10px 20px; + text-align: center; + display: grid; + grid-template-columns: repeat(4, 1fr); + background: rgba(255, 255, 255, .1); + border: 1px solid transparent; + border-top: none; +} + +.navbar-collapse.show { + z-index: 99999; +} + +@media (max-width: 991px) { + div#member-details.member-details-loggedIn, div#member-details.member-details-loggedIn2 { + grid-template-columns: repeat(3, 1fr) !important; + text-align: center; + } + + #member-details { + grid-template-columns: 1fr !important; + text-align: left; + } +} + +@media (max-width: 767px) { + div#member-details.member-details-loggedIn, div#member-details.member-details-loggedIn2 { + grid-template-columns: repeat(2, 1fr) !important; + text-align: left; + } + + #member-details-2 { + grid-template-columns: repeat(2, 1fr) !important; + text-align: left; + } + + .member-detail-desktop { + display: none !important; + } + + .member-detail-mobile { + display: initial !important; + } +} + +.member-detail-desktop { + display: initial; +} + +.member-detail-mobile { + display: none; +} + +.linked-card { + opacity: 1 !important; + color: white !important; + text-decoration: none !important; +} + +.linked-card:hover { + opacity: .75 !important; +} + +.linked-card:active { + opacity: .5 !important; +} + +.navbar-brand { + position: relative; + z-index: 9999; +} + +html, body { + overflow-x: hidden; +} + +.form-check-input { + filter: invert(1) hue-rotate(180deg); +} + +body { + margin: 0 !important; +} + +#app { + background-color: var(--palette-0); + position: fixed; + top: 52px; + right: 10px; + bottom: 10px; + overflow: auto; + left: 64px; + border-radius: 15px; +} + +#app > #member-banner-container, #system-banner-container { + top: 52px !important; + width: calc(100% - 74px) !important; + border-top-left-radius: 15px !important; + border-top-right-radius: 15px !important; +} + +div#member-banner-inner, div#system-banner-inner { + border-top-left-radius: 15px !important; + border-top-right-radius: 15px !important; + background: linear-gradient(180deg, rgba(var(--palette-0-rgb),0) 0%, rgba(var(--palette-0-rgb),.25) 50%, rgba(var(--palette-0-rgb),1) 100%) !important; +} + +.alert, .btn-close, .text-danger, .text-success, .form-select, .ck-toolbar, .system-action img, #member-designs-inner img, .list-group-item img { + filter: none !important; +} + +@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) { + .dark-only { + display: none !important; + } +} + +@media (prefers-color-scheme: dark) { + .light-only { + display: none !important; + } +} + +hr { + border-color: var(--bs-link-color) !important; +} + +.modal { + z-index: 9999999 !important; +} + +.modal-backdrop { + display: none !important; +} + +:root { + /* Overrides the border radius setting in the theme. */ + --ck-border-radius: 4px !important; + + /* Overrides the default font size in the theme. */ + --ck-font-size-base: 14px !important; + + /* Helper variables to avoid duplication in the colors. */ + --ck-custom-background: var(--bs-tertiary-bg) !important; + --ck-custom-foreground: var(--palette-5) !important; + --ck-custom-border: var(--palette-3) !important; + --ck-custom-white: hsl(0, 0%, 100%) !important; + + /* -- Overrides generic colors. ------------------------------------------------------------- */ + + --ck-color-base-foreground: var(--ck-custom-background) !important; + --ck-color-focus-border: hsl(208, 90%, 62%) !important; + --ck-color-text: var(--palette-6) !important; + --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2) !important; + --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1) !important; + + /* -- Overrides the default .ck-button class colors. ---------------------------------------- */ + + --ck-color-button-default-background: var(--ck-custom-background) !important; + --ck-color-button-default-active-shadow: hsl(270, 2%, 23%) !important; + --ck-color-button-default-disabled-background: var(--ck-custom-background) !important; + + --ck-color-button-on-background: var(--ck-custom-foreground) !important; + --ck-color-button-on-active-background: hsl(255, 4%, 14%) !important; + --ck-color-button-on-active-shadow: hsl(240, 3%, 19%) !important; + --ck-color-button-on-disabled-background: var(--ck-custom-foreground) !important; + + --ck-color-button-action-background: hsl(168, 76%, 42%) !important; + --ck-color-button-action-hover-background: hsl(168, 76%, 38%) !important; + --ck-color-button-action-active-background: hsl(168, 76%, 36%) !important; + --ck-color-button-action-active-shadow: hsl(168, 75%, 34%) !important; + --ck-color-button-action-disabled-background: hsl(168, 76%, 42%) !important; + --ck-color-button-action-text: var(--ck-custom-white) !important; + + --ck-color-button-save: hsl(120, 100%, 46%) !important; + --ck-color-button-cancel: hsl(15, 100%, 56%) !important; + + /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */ + + --ck-color-dropdown-panel-background: var(--ck-custom-background) !important; + --ck-color-dropdown-panel-border: var(--ck-custom-foreground) !important; + + /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */ + + --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background) !important; + --ck-color-split-button-hover-border: var(--ck-custom-foreground) !important; + + /* -- Overrides the default .ck-input class colors. ----------------------------------------- */ + + --ck-color-input-background: var(--ck-custom-background) !important; + --ck-color-input-border: hsl(257, 3%, 43%) !important; + --ck-color-input-text: hsl(0, 0%, 98%) !important; + --ck-color-input-disabled-background: hsl(255, 4%, 21%) !important; + --ck-color-input-disabled-border: hsl(250, 3%, 38%) !important; + --ck-color-input-disabled-text: hsl(0, 0%, 78%) !important; + + /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */ + + --ck-color-labeled-field-label-background: var(--ck-custom-background) !important; + + /* -- Overrides the default .ck-list class colors. ------------------------------------------ */ + + --ck-color-list-background: var(--ck-custom-background) !important; + --ck-color-list-button-hover-background: var(--palette-5) !important; + --ck-color-list-button-on-background: var(--palette-5) !important; + --ck-color-list-button-on-text: var(--ck-color-base-background) !important; + + /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */ + + --ck-color-panel-background: var(--ck-custom-background) !important; + --ck-color-panel-border: var(--ck-custom-border) !important; + + /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */ + + --ck-color-toolbar-background: var(--ck-custom-background) !important; + --ck-color-toolbar-border: var(--ck-custom-border) !important; + + /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */ + + --ck-color-tooltip-background: hsl(252, 7%, 14%) !important; + --ck-color-tooltip-text: hsl(0, 0%, 93%) !important; + + /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */ + + --ck-color-image-caption-background: var(--bs-body-bg) !important; + --ck-color-image-caption-text: var(--bs-body-color) !important; + + /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */ + + --ck-color-widget-blurred-border: hsl(0, 0%, 87%) !important; + --ck-color-widget-hover-border: hsl(43, 100%, 68%) !important; + --ck-color-widget-editable-focus-background: var(--ck-custom-white) !important; + + /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */ + + --ck-color-link-default: hsl(190, 100%, 75%) !important; + + /* CUSTOM OPTIONS */ + --ck-color-button-on-color: var(--bs-link-color) !important; + --ck-color-button-on-hover-background: var(--palette-3) !important; + --ck-color-button-default-hover-background: var(--palette-4) !important; + --ck-color-list-button-on-background-focus: var(--palette-1) !important; + --ck-color-base-background: transparent !important; + --ck-color-button-default-active-background: var(--palette-2) !important; +} + +:root { + --ck-color-base-border: var(--bs-secondary-bg) !important; + --ck-focus-outer-shadow: transparent !important; + --ck-focus-ring: 1px solid transparent !important; +} + +.ck.ck-button.ck-on.ck-button_with-text { + color: var(--bs-body-color) !important; +} + +.ck.ck-content { + background-color: var(--bs-body-bg) !important; + color: var(--bs-body-color) !important; +} + +.ck.ck-content.ck-focused { + border-color: var(--bs-link-color) !important; +} + +.relation { + background-color: var(--palette-1) !important; +} + +.relation-intro { + background-color: var(--palette-2) !important; + border-right: 1px solid var(--palette-3) !important; +}
\ No newline at end of file |