DodoApp: Cache static resources.
Change-Id: Ib1f800ea052c5f3b7929a1d325b351dfa0a6633e
diff --git a/core/installer/welcome/stat/launcher.css b/core/installer/welcome/stat/launcher.css
new file mode 100644
index 0000000..af8b293
--- /dev/null
+++ b/core/installer/welcome/stat/launcher.css
@@ -0,0 +1,348 @@
+:root:not([data-theme]) {
+ --pico-background-color: unset;
+ --pico-color: unset;
+}
+
+:root {
+ --bg: #d6d6d6;
+ --bodyBg: #3a3a3a;
+ --text: #3a3a3a;
+ --formText: #d6d6d6;
+ --button: #7f9f7f;
+ --logo: #d4888d;
+ --fontSize: 14px;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: Hack, monospace;
+ display: flex;
+ height: 100vh;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ background-color: var(--bodyBg);
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+#left-panel {
+ width: 80px;
+ background-color: var(--bg);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.app-list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding-top: 3px;
+ width: 95% !important;
+}
+
+.scrollbar-custom {
+ scrollbar-width: thin;
+ scrollbar-color: var(--bodyBg) var(--bg);
+}
+
+.scrollbar-custom::-webkit-scrollbar {
+ width: 6px;
+}
+
+.scrollbar-custom::-webkit-scrollbar-track {
+ background-color: var(--bg) !important;
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb {
+ background-color: var(--bodyBg) !important;
+ border-radius: 4px !important;
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb:hover {
+ background-color: var(--bodyBg);
+}
+
+#right-panel {
+ flex: 1;
+ background-color: none !important;
+ padding: 0 0 0 2px;
+}
+
+.appFrame {
+ border-radius: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+}
+
+.app-icon {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 80px !important;
+ height: 50px !important;
+ margin-bottom: 10px !important;
+ cursor: pointer !important;
+}
+
+@keyframes pulsate {
+ from { opacity: 1; }
+ 10% { opacity: 0; }
+ 20% { opacity: 1; }
+ 30% { opacity: 0; }
+ 40% { opacity: 1; }
+ 50% { opacity: 0; }
+ 60% { opacity: 1; }
+ 70% { opacity: 0; }
+ 80% { opacity: 1; }
+ 90% { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes fadeout {
+ /* TODO(gio): figure out why animating from 1 does not work */
+ from { opacity: 0.999; }
+ to { opacity: 0; }
+}
+
+.pulsate {
+ animation: pulsate 5s linear;
+}
+
+.fadeout {
+ animation: fadeout 2s ease-in;
+}
+
+.tooltip {
+ position: absolute;
+ width: 200px;
+ left: 80px;
+ transform: translateY(-50%);
+ background-color: var(--bodyBg);
+ padding: 5px;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ visibility: hidden;
+ opacity: 0;
+ cursor: auto;
+ font-size: 16px;
+ box-shadow: 2px 2px 5px var(--bodyBg);
+}
+
+.help-button {
+ margin-top: 5px !important;
+ padding: 0 !important;
+ border: 0 !important;
+ margin-bottom: 1px !important;
+ width: 100% !important;
+ background-color: var(--button) !important;
+ color: var(--bodyBg) !important;
+ border-radius: 0 !important;
+ cursor: pointer !important;
+ font-size: 16px !important;
+}
+
+.tooltip p {
+ color: var(--formText);
+ margin: 0;
+ cursor: auto;
+ font-size: var(--fontSize);
+}
+
+.app-icon:hover {
+ transform: scale(1.15);
+}
+
+.modal-left {
+ overflow-y: auto;
+ float: left;
+ margin-left: 0px;
+ padding-right: 10px;
+ background-color: #fbfcfc;
+ border-radius: 2px;
+}
+
+.modal-right {
+ flex: 1;
+ overflow-y: auto;
+ float: right;
+ margin-left: 2px;
+ color: var(--bg);
+ padding-left: 10px;
+ padding-right: 10px;
+ font-size: 16px !important;
+}
+
+.app-help-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.app-help-modal-article {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ max-width: 100%;
+ min-height: 97%;
+ max-height: 97%;
+ overflow: hidden;
+}
+
+.app-info-modal-article header {
+ flex: 0 0 auto;
+}
+
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ margin-bottom: 2px !important;
+ background-color: var(--bodyBg) !important;
+}
+
+header h4 {
+ color: var(--formText) !important;
+ padding-left: 10px;
+}
+
+.close-button {
+ padding: 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+ outline: none;
+ width: 1.5em;
+ height: 1.5em;
+ position: absolute;
+ top: 11px;
+ right: 28px;
+}
+
+.modal-article {
+ min-width: 80% !important;
+ max-width: 80% !important;
+ min-height: 90% !important;
+ max-height: 90% !important;
+ overflow: hidden;
+ padding-left: 5px !important;
+ padding-right: 5px !important;
+}
+
+.help-content {
+ display: none;
+}
+
+.circle {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-color: var(--bodyBg);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 2px;
+}
+
+#user-initial {
+ font-size: 24px;
+ text-align: center;
+ line-height: 50px;
+ margin: 0;
+ position: relative;
+ display: inline-block;
+ color: var(--logo);
+}
+
+.user-circle {
+ min-width: 80px !important;
+ max-width: 80px !important;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.separator {
+ margin-top: 2px !important;
+ margin-bottom: 4px !important;
+ border-width: 2px !important;
+ border-color: var(--bodyBg) !important;
+ width: 100% !important;
+}
+
+.modal-left ul {
+ padding-inline-start: 0px !important;
+ margin-bottom: 0px;
+ list-style: none;
+ font-size: 14px;
+}
+
+.modal-left ul li {
+ list-style: none !important;
+ padding-inline-start: 10px !important;
+ margin-bottom: 0px;
+ font-size: 16px !important;
+}
+
+.modal-left ul li a {
+ --pico-text-decoration: none;
+ cursor: pointer;
+}
+.modal-left ul li a[aria-current] {
+ color: var(--pico-primary);
+}
+
+.tooltip-user {
+ position: absolute;
+ top: 38.7px;
+ left: 80px;
+ transform: translateY(-50%);
+ width: 234px;
+ background-color: var(--bodyBg);
+ padding: 5px;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ visibility: hidden;
+ opacity: 0;
+ cursor: auto;
+ box-shadow: 2px 2px 5px var(--bodyBg);
+}
+
+#logout-button {
+ margin-top: 5px !important;
+ padding: 0 !important;
+ border: 0 !important;
+ margin-bottom: 5px !important;
+ width: 100% !important;
+ cursor: pointer !important;
+ font-size: 19px !important;
+ border-radius: 0;
+ background-color: var(--button);
+ color: var(--text) !important;
+}
+
+.tooltip-user p {
+ color: white;
+ margin: 0;
+ cursor: auto;
+ font-size: 19px;
+ color: var(--logo);
+}