Skip to content

Commit

Permalink
Merge pull request #498 from ACCESS-Hive/davide/terminal-animations
Browse files Browse the repository at this point in the history 
Merging after sprint meeting
  • Loading branch information
@atteggiani
atteggiani authored Aug 4, 2023
2 parents 47e2fba + 24a23af commit 5e90b3f
Show file tree
Hide file tree
Showing 22 changed files with 218 additions and 1,147 deletions.
Binary file added docs/assets/terminal_animation_switch_active.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/terminal_animation_switch_inactive.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 32 additions & 20 deletions docs/css/access-nri.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
--tab-text-color: 235, 235, 235; /* Color for text of top tab and back to top button */
--tab-text: rgb(var(--tab-text-color)); /* Main text in navigation tab */
--tab-text-light: rgba(var(--tab-text-color),.7); /* Main text in navigation tab inactive */
--default-bg-color: 46, 51, 62; /* Color for main background */
--default-bg-color: 53, 54, 58; /* Color for main background */
--md-default-bg-color: rgb(var(--default-bg-color)); /* Main background */
--md-default-bg-color--light: rgba(var(--default-bg-color),.7);
--md-default-bg-color--lighter: rgba(var(--default-bg-color),.3);
Expand All @@ -38,8 +38,8 @@
--md-accent-fg-color: var(--nri-blue); /* link text hover */
--md-accent-fg-color--transparent: rgba(var(--nri-blue-color),.05); /* navigation bar little arrows hover */
--md-accent-bg-color: rgb(var(--tab-text-color)); /* back to top button text hover */
--md-code-fg-color: rgb(213, 217, 226); /* code element text */
--md-code-bg-color: #242428; /* code element background */
--md-code-fg-color: var(--md-default-fg-color); /* code element text */
--md-code-bg-color: rgb(41, 41, 41); /* code element background */
--md-code-hl-color: rgba(255,255,0,.5);
--md-code-hl-number-color: #d52a2a;
--md-code-hl-special-color: #db1457;
Expand Down Expand Up @@ -76,9 +76,11 @@
--card-shadows-hover: #00000090; /* Shadows hover on cards and other elements */
--white-background: rgb(255, 255, 255); /* Background for transparent images */
--darker-background-hover: rgba(28, 28, 28, 0.185); /* Darker background on hover */
--terminal-animation-directory: var(--nri-green);
--terminal-animation-buttons: var(--nri-orange);
--terminal-animation-buttons-hover: var(--nri-blue);
--animated-terminal-directory: var(--nri-green);
--animated-terminal-buttons: var(--nri-orange);
--animated-terminal-buttons-hover: var(--nri-blue);
--animated-terminal-text: rgb(235, 235, 235);
--animated-terminal-background: var(--md-primary-fg-color);
--note: var(--card-borders); /* Note border and icon */
--note-bg: rgba(var(--nri-orange-color),.05); /* Note background */
}
Expand Down Expand Up @@ -154,9 +156,11 @@
--card-shadows-hover: #00000090; /* Shadows hover on cards and other elements */
--white-background: rgb(255, 255, 255); /* Background for transparent images */
--darker-background-hover: rgba(28, 28, 28, 0.185); /* Darker background on hover */
--terminal-animation-directory: var(--nri-dark-blue);
--terminal-animation-buttons: var(--nri-orange);
--terminal-animation-buttons-hover: var(--nri-blue);
--animated-terminal-directory: var(--nri-dark-blue);
--animated-terminal-buttons: var(--nri-orange);
--animated-terminal-buttons-hover: var(--nri-blue);
--animated-terminal-text: rgb(235, 235, 235);
--animated-terminal-background: var(--md-primary-fg-color);
--note: var(--card-borders); /* Note border and icon */
--note-bg: rgba(var(--nri-orange-color),.05); /* Note background */
}
Expand Down Expand Up @@ -621,28 +625,28 @@ pre:has(code):hover > button {
/* ===============================================================
Terminal animations
*/
::part(terminal-container) {
background-color: var(--md-code-bg-color);
color: var(--md-code-fg-color);
::part(terminal-window) {
background-color: var(--animated-terminal-background);
color: var(--animated-terminal-text);
font-family: var(--md-code-font-family);
font-weight: unset;
}

::part(input-character) {
color: var(--terminal-animation-buttons);
color: var(--animated-terminal-buttons);
}

::part(directory) {
color: var(--terminal-animation-directory);
color: var(--animated-terminal-directory);
}

::part(fast-button), ::part(restart-button) {
color: var(--terminal-animation-buttons);
::part(fast-button), ::part(restart-button), ::part(img-icon) {
color: var(--animated-terminal-buttons);
font-weight: 700;
}

::part(fast-button):hover, ::part(restart-button):hover {
color: var(--terminal-animation-buttons-hover);
::part(fast-button):hover, ::part(restart-button):hover, ::part(img-icon):hover {
color: var(--animated-terminal-buttons-hover);
}

/* Try to format like the output of `ls` command */
Expand All @@ -651,6 +655,15 @@ pre:has(code):hover > button {
word-break: normal;
}

#terminalSwitch {
float: right;
height: 1.1rem;
margin: 0.5rem 0.2rem;
}

#terminalSwitch:hover {
cursor: pointer;
}
/* ===============================================================
General styling for html tabs
*/
Expand All @@ -659,7 +672,6 @@ pre:has(code):hover > button {
box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
display: flex;
width: fit-content;
/* max-width: 100%; */
overflow: auto;
margin-top: 1em;
}
Expand Down Expand Up @@ -689,7 +701,7 @@ pre:has(code):hover > button {
/* Create an active/current tablink class */
.tabLabels button.activeTab {
color: var(--md-primary-fg-color--dark);
border-bottom: solid 2px var(--md-primary-fg-color--dark);
border-bottom: solid 2px var(--nri-orange);
transition: border-bottom .2s;
}

Expand Down
14 changes: 14 additions & 0 deletions docs/fontello/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,20 @@
"search": [
"key"
]
},
{
"uid": "7523e449ad0bd4432eec68980a7815da",
"css": "group-1",
"code": 59397,
"src": "custom_icons",
"selected": true,
"svg": {
"path": "M1342.9 0C1390.3 0 1428.6 38.3 1428.6 85.7V914.3C1428.6 961.7 1390.3 1000 1342.9 1000H85.7C38.3 1000 0 961.7 0 914.3V85.7C0 38.3 38.3 0 85.7 0ZM207.7 136.9C193.4 130 176.6 136.3 169.7 150.6 163.1 164.9 169.1 182 183.7 188.6L417.4 297.7 185.1 406C170.9 412.6 164.6 429.4 171.1 443.7 178 458 194.9 464.3 209.1 457.7L498 323.1C512.3 316.3 518.3 299.4 511.7 285.1 507.7 276.6 500 270.9 491.4 269.1ZM605.7 402.9C590 402.9 577.1 415.7 577.1 431.4 577.1 447.1 590 460 605.7 460H924.3C940 460 952.9 447.1 952.9 431.4 952.9 415.7 940 402.9 924.3 402.9Z",
"width": 1429
},
"search": [
"group-1"
]
}
]
}
1 change: 1 addition & 0 deletions docs/fontello/css/fontello-codes.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@
.icon-cc-by:before { content: '\e802'; } /* '' */
.icon-logout:before { content: '\e803'; } /* '' */
.icon-key:before { content: '\e804'; } /* '' */
.icon-group-1:before { content: '\e805'; } /* '' */
Loading

0 comments on commit 5e90b3f

Please sign in to comment.