diff --git a/dist/core-styles.rt.elevator-light.css b/dist/core-styles.rt.elevator-light.css new file mode 100644 index 000000000..ca835d178 --- /dev/null +++ b/dist/core-styles.rt.elevator-light.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 2.23.1+ | MIT | github.com/TACC/Core-Styles */@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@2.23.1/dist/core-styles.settings.css");@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@2.23.1/dist/core-styles.theme.default.css");body:not(.darkmode){#footer{background-color:var(--global-color-primary--xx-dark)}#main-navigation .sf-menu.toplevel.sf-arrows>li>a.sf-with-ul:after{filter:invert(100%) brightness(200%)}button,input.button{border-style:solid;border-width:var(--global-border-width--normal)}button.btn-primary:not(:hover,:focus,:active,:disabled,.disabled),input.button.btn-primary:not(:hover,:focus,:active,:disabled,.disabled){background-color:var(--global-color-accent--normal);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-light)}button.btn-primary:hover,input.button.btn-primary:hover{background-color:var(--global-color-accent--dark);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-light)}button.btn-primary:active:not(:disabled,.disabled),input.button.btn-primary:active:not(:disabled,.disabled){background-color:var(--global-color-accent--x-dark);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-light);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}button.btn-primary:focus:not(:active),input.button.btn-primary:focus:not(:active){background-color:var(--global-color-accent--normal);border-color:var(--global-color-primary--xx-light);color:var(--global-color-primary--xx-light);outline:var(--global-border-width--normal) solid var(--global-color-accent--light)}button.btn-primary:is(:focus,.focus),button.btn-primary:not(:disabled,.disabled):active:focus,input.button.btn-primary:is(:focus,.focus),input.button.btn-primary:not(:disabled,.disabled):active:focus{box-shadow:none}.button,.custom-file-label,.custom-file-label:after,.form-control,button,input[class=button],input[type=reset],input[type=submit]{border-radius:0}#topactions form:where([id*=-search],[class*=-search]){input{background-color:var(--header-search-bkgd-color);border:var(--global-border-width--normal) solid var(--header-search-brdr-color);border-radius:5px;color:var(--header-text-color);padding-right:0}input::-moz-placeholder{color:var(--header-text-color);opacity:.5}input::placeholder{color:var(--header-text-color);opacity:.5}}}div#quickbar{background:#222;border:none;color:#fff}#logo .rtname,#main-navigation #app-nav.sf-shadow>li,#main-navigation #app-nav.sf-shadow>li>a,#prefs-menu>li,#prefs-menu>li>a{color:#fff}input[class=button],input[type=reset],input[type=submit]{background:#039;color:#fff}input[class=button]:hover,input[type=reset]:hover,input[type=submit]:hover{background:#026;color:#fff}table.collection-as-table th.collection-as-table a{color:#039} \ No newline at end of file diff --git a/src/lib/_imports/core-styles.rt.elevator-light.css b/src/lib/_imports/core-styles.rt.elevator-light.css new file mode 100644 index 000000000..450936ab2 --- /dev/null +++ b/src/lib/_imports/core-styles.rt.elevator-light.css @@ -0,0 +1,136 @@ +/* TACC CUSTOM STYLES (Based on https://github.com/TACC/Core-Styles) */ +/* IMPORTANT: Test all changes on all themes */ +/* https://docs.bestpractical.com/rt/5.0.5/customizing/styling_rt.html#Selecting-a-Theme */ + +/* To load TACC/Core-Styles variables */ +@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@2.23.1/dist/core-styles.settings.css"); +@import url("https://cdn.jsdelivr.net/npm/@tacc/core-styles@2.23.1/dist/core-styles.theme.default.css"); + +/* To apply custom styles only for light theme */ +/* FAQ: The elevator-dark theme is poorly written ∴ cumbersome to overwrite */ +/* CAVEAT: Older major browsers may not apply these styles */ +/* https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector */ +body:not(.darkmode) { + + /* To match footer to header */ + #footer { + background-color: var(--global-color-primary--xx-dark); /* i.e. #222222 */ + } + + /* To re-color top-level header link arrows */ + #main-navigation .sf-menu.toplevel.sf-arrows > li > a.sf-with-ul::after { + /* https://github.com/bestpractical/rt/blob/rt-5.0.5/share/static/css/elevator-light/nav.css#L367-L392 */ + filter: invert(100%) brightness(200%); + } + + /* To style buttons like TACC website */ + /* https://github.com/TACC/Core-Styles/blob/v2.23.1/src/lib/_imports/components/c-button.css */ + button, input.button { + & { + border-width: var(--global-border-width--normal); + border-style: solid; + } + &.btn-primary:not( :hover, :focus, :active, :disabled, .disabled ) { + color: var(--global-color-primary--xx-light); + background-color: var(--global-color-accent--normal); + border-color: var(--global-color-accent--normal); + } + &.btn-primary:hover { + color: var(--global-color-primary--xx-light); + background-color: var(--global-color-accent--dark); + border-color: var(--global-color-accent--dark); + } + &.btn-primary:active:not( :disabled, .disabled ) { + color: var(--global-color-primary--xx-light); + background-color: var(--global-color-accent--x-dark); + border-color: var(--global-color-accent--dark); + + outline: var(--global-border-width--normal) solid var(--global-color-accent--dark); + } + &.btn-primary:focus:not( :active ) { + color: var(--global-color-primary--xx-light); + background-color: var(--global-color-accent--normal); + border-color: var(--global-color-primary--xx-light); + + outline: var(--global-border-width--normal) solid var(--global-color-accent--light); + } + /* To overwrite RT elevator-light theme */ + &.btn-primary:is( :focus, .focus ), + &.btn-primary:not( :disabled, .disabled ):active:focus { + box-shadow: none; + } + } + + /* To minimally style input like TACC */ + /* To overwrite RT elevator-light theme */ + .button, input[type=reset], input[type=submit], input[class=button], button, + .custom-file-label, .custom-file-label::after, + .form-control { + border-radius: 0; + } + + /* To make any search bar dark */ + #topactions form:where( + [id*="-search"], /* e.g. Articles search */ + [class*="-search"] /* e.g. Tickets search */ + ) { + /* https://github.com/TACC/Core-Styles/blob/v2.23.1/src/lib/_imports/trumps/tacc-search-bar.css */ + input { + color: var(--header-text-color); + background-color: var(--header-search-bkgd-color); + border: var(--global-border-width--normal) solid var(--header-search-brdr-color); + border-radius: 5px; + + padding-right: 0; /* to offer maximum space before characters are cut off */ + } + input::placeholder { + color: var(--header-text-color); + opacity: 0.5; + } + } + +} + + + + + +/* RT THEME EDITOR (Basic Customization) */ +/* https://docs.bestpractical.com/rt/5.0.5/customizing/styling_rt.html#RT-Theme-Editor */ +/* Edits here should ONLY be Automatic via "Logo and Colors" form: + https://docs.bestpractical.com/rt/5.0.5/customizing/styling_rt.html#Logo-and-Colors */ + +/* Page */ +body {} +div#body {} + +/* Menu bar */ +div#quickbar { background: #222222; color: #fff; border: none; } +#main-navigation #app-nav.sf-shadow > li, #main-navigation #app-nav.sf-shadow > li > a, #prefs-menu > li, #prefs-menu > li > a, #logo .rtname { color: #fff } + +/* Title bar */ +div#header {} + +/* Page title */ +div#header h1 {} + +/* Page content */ +div#body, .body-content-class {} + +/* Buttons */ +input[type="reset"], input[type="submit"], input[class="button"] { background: #003399; color: #fff } + +/* Button hover */ +input[type="reset"]:hover, input[type="submit"]:hover, input[class="button"]:hover { background: #002266; color: #fff } + +/* Search results */ +table.collection-as-table th.collection-as-table a { color: #003399 } + +/* Portlet Text */ +.titlebox .titlebox-title .left a, .titlebox .titlebox-title .left {} + +/* Selected bubble */ +.selectize-control.multi .selectize-input [data-value] {} + +/* Selected bubble (active) */ +.selectize-control.multi .selectize-input [data-value].active {}