earthnut 0.0.0 → 0.0.2

package/styles/common.css

@@ -0,0 +1,360 @@
+@charset "UTF-8";
+:root {
+  --primary-white: #ffffff;
+  --primary-black: #1b1b1b;
+  --primary-dust: #6f6f6f;
+  --primary-red: #d30038;
+  --primary-green: #007936;
+  --primary-blue: #0069c2;
+  --primary-yellow: #746a00;
+  --primary-super-yellow: #ffff00;
+  --text-primary: #1b1b1b;
+  --text-secondary: #4e4e4e;
+  --text-invert: var(--primary-white);
+  --text-muted: var(--primary-dust);
+  --text-link: #0069c2;
+  --text-visited: #551a8b;
+  --text-hover: var(--primary-red);
+  --text-visited: #551a8b;
+  --text-active: #858585;
+  --text-inactive: #9e9e9ea6;
+  --background-primary: var(--primary-white);
+  --background-tab-level-1: var(--primary-black);
+  --background-tab-level-2: var(--primary-dust);
+  --background-tab-transparent: #6666;
+  --table-border-color: #000;
+  --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
+  --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
+  --box-shadow: 1px 1px 12px #6666;
+  --box-shadow-primary: 1px 1px 12px #6666;
+  --box-shadow-primary-small: 1px 1px 3px #6666;
+  --box-shadow-primary-large: 1px 1px 24px #6666;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not(.en-light):not(.en-dark) {
+    --primary-white: #ffffff;
+    --primary-black: #1b1b1b;
+    --primary-dust: #6f6f6f;
+    --primary-red: #d30038;
+    --primary-green: #007936;
+    --primary-blue: #0069c2;
+    --primary-yellow: #746a00;
+    --primary-super-yellow: #ffff00;
+    --text-primary: #1b1b1b;
+    --text-secondary: #4e4e4e;
+    --text-invert: var(--primary-white);
+    --text-muted: var(--primary-dust);
+    --text-link: #0069c2;
+    --text-visited: #551a8b;
+    --text-hover: var(--primary-red);
+    --text-visited: #551a8b;
+    --text-active: #858585;
+    --text-inactive: #9e9e9ea6;
+    --background-primary: var(--primary-white);
+    --background-tab-level-1: var(--primary-black);
+    --background-tab-level-2: var(--primary-dust);
+    --background-tab-transparent: #6666;
+    --table-border-color: #000;
+    --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
+    --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
+    --box-shadow: 1px 1px 12px #6666;
+    --box-shadow-primary: 1px 1px 12px #6666;
+    --box-shadow-primary-small: 1px 1px 3px #6666;
+    --box-shadow-primary-large: 1px 1px 24px #6666;
+    color-scheme: light;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.en-light):not(.en-dark) {
+    --primary-white: #ffffff;
+    --primary-black: #1b1b1b;
+    --primary-dust: #858585;
+    --primary-red: #ff97a0;
+    --primary-green: #00d061;
+    --primary-blue: #8cb4ff;
+    --primary-yellow: #c7b700;
+    --text-primary: #fff;
+    --text-secondary: #cdcdcd;
+    --text-invert: var(--primary-black);
+    --text-muted: var(--primary-dust);
+    --text-link: #8cb4ff;
+    --text-visited: #ffadff;
+    --text-hover: var(--primary-red);
+    --text-active: #858585;
+    --text-inactive: #cdcdcda6;
+    --background-primary: var(--primary-black);
+    --background-tab-level-1: #666666;
+    --background-tab-level-2: var(--primary-dust);
+    --background-tab-transparent: #6666;
+    --table-border-color: #ff3663;
+    --box-shadow: 1px 1px 12px #6666;
+    --box-shadow-primary: 1px 1px 12px #6666;
+    --box-shadow-primary-small: 1px 1px 3px #6666;
+    --box-shadow-primary-large: 1px 1px 24px #6666;
+    color-scheme: dark;
+  }
+}
+.en-light {
+  --primary-white: #ffffff;
+  --primary-black: #1b1b1b;
+  --primary-dust: #6f6f6f;
+  --primary-red: #d30038;
+  --primary-green: #007936;
+  --primary-blue: #0069c2;
+  --primary-yellow: #746a00;
+  --primary-super-yellow: #ffff00;
+  --text-primary: #1b1b1b;
+  --text-secondary: #4e4e4e;
+  --text-invert: var(--primary-white);
+  --text-muted: var(--primary-dust);
+  --text-link: #0069c2;
+  --text-visited: #551a8b;
+  --text-hover: var(--primary-red);
+  --text-visited: #551a8b;
+  --text-active: #858585;
+  --text-inactive: #9e9e9ea6;
+  --background-primary: var(--primary-white);
+  --background-tab-level-1: var(--primary-black);
+  --background-tab-level-2: var(--primary-dust);
+  --background-tab-transparent: #6666;
+  --table-border-color: #000;
+  --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
+  --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
+  --box-shadow: 1px 1px 12px #6666;
+  --box-shadow-primary: 1px 1px 12px #6666;
+  --box-shadow-primary-small: 1px 1px 3px #6666;
+  --box-shadow-primary-large: 1px 1px 24px #6666;
+  color-scheme: light;
+}
+
+.en-dark {
+  --primary-white: #ffffff;
+  --primary-black: #1b1b1b;
+  --primary-dust: #858585;
+  --primary-red: #ff97a0;
+  --primary-green: #00d061;
+  --primary-blue: #8cb4ff;
+  --primary-yellow: #c7b700;
+  --text-primary: #fff;
+  --text-secondary: #cdcdcd;
+  --text-invert: var(--primary-black);
+  --text-muted: var(--primary-dust);
+  --text-link: #8cb4ff;
+  --text-visited: #ffadff;
+  --text-hover: var(--primary-red);
+  --text-active: #858585;
+  --text-inactive: #cdcdcda6;
+  --background-primary: var(--primary-black);
+  --background-tab-level-1: #666666;
+  --background-tab-level-2: var(--primary-dust);
+  --background-tab-transparent: #6666;
+  --table-border-color: #ff3663;
+  --box-shadow: 1px 1px 12px #6666;
+  --box-shadow-primary: 1px 1px 12px #6666;
+  --box-shadow-primary-small: 1px 1px 3px #6666;
+  --box-shadow-primary-large: 1px 1px 24px #6666;
+  color-scheme: dark;
+}
+
+.en-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/** 文本显示一行，超出点点点 */
+.en-text-in-one-line {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.en-text-in-one-line-hide {
+  white-space: nowrap;
+  text-overflow: clip;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+/** 文本显示两行，超出点点点 */
+.en-text-in-two-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/*  彩色字 */
+.en-color-text {
+  color: transparent;
+  background-image: linear-gradient(45deg, #ff0, #0f0, #f00, #0ff, #00f, #f0f, #ff0);
+  background-position: 0% 0%;
+  background-size: 400% 200%;
+  background-clip: text;
+  animation: 6s ease-in 0s infinite colorText alternate;
+}
+
+.en-red-bg {
+  background-color: #f12;
+}
+
+.en-float-left {
+  float: left;
+}
+
+.en-float-right,
+.en-float {
+  float: right;
+}
+
+.en-clear-float,
+.en-clear {
+  clear: both;
+}
+
+.en-loading {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  background-image: radial-gradient(#f00, #f00 50%, transparent 50%, transparent), radial-gradient(#af1, #af1 50%, transparent 50%, transparent), radial-gradient(#0ff, #0ff 50%, transparent 50%, transparent), radial-gradient(#f0f, #f0f 50%, transparent 50%, transparent);
+  background-repeat: no-repeat;
+  animation: 2.4s ease-in-out 0s infinite loading;
+}
+
+.en-text-center {
+  text-align: center;
+}
+
+.en-text-right {
+  text-align: end;
+}
+
+.en-text-small {
+  font-size: 0.6rem;
+}
+
+@keyframes loading {
+  100%, 0% {
+    background-size: 10% 10%, 10% 10%, 10% 10%, 10% 10%;
+    background-position: 25% 45%, 41.7% 45%, 58.3% 45%, 75% 45%;
+  }
+  20%, 80% {
+    background-size: 2.5% 2.5%;
+    background-position: 25% 45%;
+  }
+  22% {
+    background-size: 3.75% 3.75%, 2.5% 2.5%, 2.5% 2.5%, 2.5% 2.5%;
+    background-position: 25.85% 38.53%, 25% 45%, 25% 45%, 25% 45%;
+  }
+  24% {
+    background-size: 5% 5%, 2.5% 2.5%, 2.5% 2.5%, 2.5% 2.5%;
+    background-position: 28.35% 32.5%, 25% 45%, 25% 45%, 25% 45%;
+  }
+  26% {
+    background-size: 6.25% 6.25%, 2.5% 2.5%, 2.5% 2.5%, 2.5% 2.5%;
+    background-position: 32.32% 27.32%, 25% 45%, 25% 45%, 25% 45%;
+  }
+  28% {
+    background-size: 7.5% 7.5%, 3.75% 3.75%, 2.5% 2.5%, 2.5% 2.5%;
+    background-position: 37.5% 23.35%, 25.85% 38.53%, 25% 45%, 25% 45%;
+  }
+  30% {
+    background-size: 8.75% 8.75%, 5% 5%, 2.5% 2.5%, 2.5% 2.5%;
+    background-position: 43.53% 20.85%, 28.35% 32.5%, 25% 45%, 25% 45%;
+  }
+  32% {
+    background-size: 10% 10%, 6.25% 6.25%, 3.75% 3.75%, 2.5% 2.5%;
+    background-position: 50% 20%, 32.32% 27.32%, 25.85% 38.53%, 25% 45%;
+  }
+  34% {
+    background-size: 10% 10%, 7.5% 7.5%, 5% 5%, 2.5% 2.5%;
+    background-position: 56.47% 20.85%, 37.32% 23.35%, 28.35% 32.5%, 25.85% 38.53%;
+  }
+  36% {
+    background-position: 62.4999992265% 23.3493644588%, 43.5295233332% 20.8518544873%, 32.3223302335% 27.3223307072%, 25.8518543139% 38.5295239803%;
+  }
+  38% {
+    background-position: 67.6776688192% 27.3223297598%, 49.9999993301% 20%, 37.4999996132% 23.3493651287%, 28.3493647937% 32.5000001934%;
+  }
+  40% {
+    background-position: 71.6506345364% 32.4999990331%, 56.4704753727% 20.8518541405%, 43.5295233332% 20.8518544873%, 32.3223302335% 27.3223307072%;
+  }
+  42% {
+    background-position: 74.1481453394% 38.5295226862%, 62.4999992265% 23.3493644588%, 49.9999993301% 20%, 37.4999996132% 23.3493651287%;
+  }
+  44% {
+    background-position: 75% 44.9999986603%, 67.6776688192% 27.3223297598%, 56.4704753727% 20.8518541405%, 43.5295233332% 20.8518544873%;
+  }
+  46% {
+    background-position: 74.1481460329% 51.4704747256%, 71.6506345364% 32.4999990331%, 62.4999992265% 23.3493644588%, 49.9999993301% 20%;
+  }
+  48% {
+    background-position: 71.6506358761% 57.4999986464%, 74.1481453394% 38.5295226862%, 67.6776688192% 27.3223297598%, 56.4704753727% 20.8518541405%;
+  }
+  50% {
+    background-position: 67.6776707138% 62.6776683455%, 75% 44.9999986603%, 71.6506345364% 32.4999990331%, 62.4999992265% 23.3493644588%;
+  }
+  52% {
+    background-position: 62.500001547% 66.6506342014%, 74.1481460329% 51.4704747256%, 74.1481453394% 38.5295226862%, 67.6776688192% 27.3223297598%;
+  }
+  54% {
+    background-position: 56.4704779609% 69.148145166%, 71.6506358761% 57.4999986464%, 75% 44.9999986603%, 71.6506345364% 32.4999990331%;
+  }
+  56% {
+    background-position: 50.0000020096% 70%, 67.6776707138% 62.6776683455%, 74.1481460329% 51.4704747256%, 74.1481453394% 38.5295226862%;
+  }
+  58% {
+    background-position: 43.5295259214% 69.1481462062%, 62.500001547% 66.6506342014%, 71.6506358761% 57.4999986464%, 75% 44.9999986603%;
+  }
+  60% {
+    background-position: 37.5000019338% 66.6506362111%, 56.4704779609% 69.148145166%, 67.6776707138% 62.6776683455%, 74.1481460329% 51.4704747256%;
+  }
+  62% {
+    background-position: 32.3223321282% 62.6776711875%, 50.0000020096% 70%, 62.500001547% 66.6506342014%, 71.6506358761% 57.4999986464%;
+  }
+  64% {
+    background-position: 28.3493661335% 57.5000021271%, 43.5295259214% 69.1481462062%, 56.4704779609% 69.148145166%, 67.6776707138% 62.6776683455%;
+  }
+  66% {
+    background-position: 25.8518550074% 51.4704786079%, 37.5000019338% 66.6506362111%, 50.0000020096% 70%, 62.500001547% 66.6506342014%;
+  }
+  68% {
+    background-size: 10% 10%, 7.5% 7.5%, 5% 5%, 2.5% 2.5%;
+    background-position: 25% 45%, 28.35% 57.45%, 37.45% 66.65%, 48% 70%;
+  }
+  70% {
+    background-size: 8.75% 8.75%, 7.5% 7.5%, 5% 5%, 2.5% 2.5%;
+    background-position: 25% 45%, 25.85% 51.47%, 32.32% 62.68%, 43.53% 69.15%;
+  }
+  72% {
+    background-size: 7.5% 7.5%, 7.5% 7.5%, 5% 5%, 2.5% 2.5%;
+    background-position: 25% 45%, 25% 45%, 28.35% 57.45%, 37.45% 66.65%;
+  }
+  74% {
+    background-size: 6.25% 6.25%, 6.25% 6.25%, 5% 5%, 2.5% 2.5%;
+    background-position: 25% 45%, 25% 45%, 25.85% 51.47%, 32.32% 62.68%;
+  }
+  76% {
+    background-size: 5% 5%, 5% 5%, 5% 5%, 2.5% 2.5%;
+    background-position: 25% 45%, 25% 45%, 25% 45%, 28.35% 57.45%;
+  }
+  78% {
+    background-size: 3.75% 3.75%, 3.75% 3.75%, 3.75% 3.75%, 2.5% 2.5%;
+    background-position: 25% 45%, 25% 45%, 25% 45%, 25.85% 51.47%;
+  }
+}
+@keyframes colorText {
+  0% {
+    background-position: 400% 0%;
+  }
+  100% {
+    background-position: 0% 0%;
+  }
+}