Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: new client RT (Request Tracker) #300

Draft
wants to merge 14 commits into
base: main
Choose a base branch
from
Draft
1 change: 1 addition & 0 deletions dist/core-styles.rt.elevator-light.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

136 changes: 136 additions & 0 deletions src/lib/_imports/core-styles.rt.elevator-light.css
Original file line number Diff line number Diff line change
@@ -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/[email protected]/dist/core-styles.settings.css");
@import url("https://cdn.jsdelivr.net/npm/@tacc/[email protected]/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 {}
Loading