-- Leo's gemini proxy
-- Connecting to git.thebackupbox.net:1965...
-- Connected
-- Sending request
-- Meta line: 20 text/gemini
repo: janusweb action: commit revision: path_from: revision_from: cd4f4c341e06b7b36bd15aee17c55817ca5193fc: path_to: revision_to:
commit cd4f4c341e06b7b36bd15aee17c55817ca5193fc Author: James Baicoianu <james_github@baicoianu.com> Date: Sat Jun 13 00:18:32 2020 -0700 CSS tweaks (notificationbutton, spinner, h2) diff --git a/media/assets/webui/themes/default.css b/media/assets/webui/themes/default.css
--- a/media/assets/webui/themes/default.css +++ b/media/assets/webui/themes/default.css @@ -17,7 +17,7 @@ body { margin: 0; padding: 0; } -h2 { +div[data-elation-component="janusweb.client"] h2 { border: 1px solid black; background: #4cb96f; padding: 0 .2em; @@ -755,12 +755,13 @@ ui-dropdownbutton:active>ui-button { /* <ui-notificationbutton> */ ui-notificationbutton { position: relative; - padding: .5em; + padding: 0; + transform: scale(1, 1); + transition: transform 125ms ease-out; } ui-notificationbutton ui-indicator { - position: absolute; + display: inline-block; min-width: 1em; - height: 1em; top: -.8em; right: -.8em; font-size: .8em; @@ -770,7 +771,10 @@ ui-notificationbutton ui-indicator { text-align: center; vertical-align: middle; box-shadow: 0 0 5px rgba(0,0,0,.8); - padding: .2em; + padding: 0 .2em; +} +ui-notificationbutton[count="0"] { + transform: scale(0, 0); } ui-notificationbutton[hover] { } @@ -1099,3 +1103,100 @@ ui-treeview ul li.state_selected li { } */ + + +/* Rotating CSS loading spinner by Don Sammut - http://codepen.io/domsammut/pen/eJbly */ +@keyframes rotate-loading { + 0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);} + 100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);} +} + +@keyframes rotate-loading { + 0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);} + 100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);} +} + +@keyframes loading-text-opacity { + 0% {opacity: 0} + 20% {opacity: 0} + 50% {opacity: 1} + 100%{opacity: 0} +} + +ui-spinner .loading-container, +ui-spinner .loading { + height: 100px; + position: relative; + width: 100px; + border-radius: 100%; +} + + +ui-spinner .loading-container { + overflow: hidden; + margin: 0px auto; +} + +ui-spinner .loading { + border: 2px solid transparent; + border-color: transparent #fff transparent #FFF; + -moz-animation: rotate-loading 1.5s linear 0s infinite normal; + -moz-transform-origin: 50% 50%; + -o-animation: rotate-loading 1.5s linear 0s infinite normal; + -o-transform-origin: 50% 50%; + -webkit-animation: rotate-loading 1.5s linear 0s infinite normal; + -webkit-transform-origin: 50% 50%; + animation: rotate-loading 1.5s linear 0s infinite normal; + transform-origin: 50% 50%; +} + +ui-spinner .loading-container:hover .loading { + border-color: transparent #E45635 transparent #E45635; +} +ui-spinner .loading-container:hover .loading, +ui-spinner .loading-container .loading { + -webkit-transition: all 0.5s ease-in-out; + -moz-transition: all 0.5s ease-in-out; + -ms-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +ui-spinner .loading-text { + -moz-animation: loading-text-opacity 2s linear 0s infinite normal; + -o-animation: loading-text-opacity 2s linear 0s infinite normal; + -webkit-animation: loading-text-opacity 2s linear 0s infinite normal; + animation: loading-text-opacity 2s linear 0s infinite normal; + color: #ffffff; + font-family: "Helvetica Neue, "Helvetica", ""arial"; + font-size: 10px; + font-weight: bold; + margin-top: 45px; + opacity: 0; + position: absolute; + text-align: center; + text-transform: uppercase; + top: 0; + width: 100px; +} + + +ui-spinner .loading-container.dark .loading { + border-color: transparent #000 transparent #000; +} +ui-spinner .loading-container.dark:hover .loading { + border-color: transparent #E45635 transparent #E45635; +} +ui-spinner .loading-container.dark .loading-text { + color: #000; +} +/* end css loading spinner */ + +ui-spinner[full] { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0,0,0,.1); +}
-----END OF PAGE-----
-- Response ended
-- Page fetched on Sun Jun 2 14:38:46 2024