summaryrefslogtreecommitdiff
path: root/assets/css/pages/mstartpage-index.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/pages/mstartpage-index.css')
-rw-r--r--assets/css/pages/mstartpage-index.css361
1 files changed, 361 insertions, 0 deletions
diff --git a/assets/css/pages/mstartpage-index.css b/assets/css/pages/mstartpage-index.css
new file mode 100644
index 0000000..67eac23
--- /dev/null
+++ b/assets/css/pages/mstartpage-index.css
@@ -0,0 +1,361 @@
+:root {
+ --main-text-color: #ddd;
+ --border-color: #C8A977;
+ --search-input-color: black;
+ --link-color: #FF0000;
+ --background-color: #111;
+ --menu-background: #222;
+ }
+
+ * {
+ box-sizing: border-box;
+ }
+
+ html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ background-color: var(--background-color);
+ font-family: 'Source Code Pro', "MS Gothic", IPAMonaGothic, IPAGothic, "BIZ UDGothic", HGGothicM, "Noto Sans Mono CJK JP", "Noto Sans Mono", monospace;
+ font-size: 14px;
+ color: var(--main-text-color);
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+ overflow-x: hidden;
+ }
+
+ a {
+ color: var(--link-color);
+ background-color: transparent;
+ text-decoration: none;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ /* Header and menu */
+ .header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ background-color: var(--background-color);
+ padding: 10px;
+ border-bottom: 1px solid var(--border-color);
+ }
+
+ .menu-toggle {
+ display: block;
+ width: 100%;
+ padding: 12px;
+ background-color: black;
+ color: var(--link-color);
+ border: 1px solid var(--link-color);
+ border-radius: 4px;
+ text-align: center;
+ font-weight: bold;
+ margin-bottom: 10px;
+ cursor: pointer;
+ }
+
+ .main-menu {
+ display: none;
+ flex-direction: column;
+ background-color: var(--menu-background);
+ border: 1px solid var(--link-color);
+ border-radius: 4px;
+ padding: 10px;
+ margin-bottom: 15px;
+ }
+
+ .main-menu.show {
+ display: flex;
+ }
+
+ .main-menu a {
+ padding: 10px;
+ border-bottom: 1px solid #333;
+ }
+
+ .main-menu a:last-child {
+ border-bottom: none;
+ }
+
+ /* Search box */
+ .search-container {
+ width: 100%;
+ padding: 10px;
+ background-color: var(--background-color);
+ margin-bottom: 15px;
+ }
+
+ .search-form {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .search-input {
+ color: var(--link-color);
+ background-color: #3A3A3A;
+ border: 1px solid var(--link-color);
+ padding: 12px;
+ margin-bottom: 10px;
+ text-align: center;
+ border-radius: 4px;
+ font-size: 16px; /* Larger for touch */
+ }
+
+ input[type="submit"] {
+ color: var(--link-color);
+ background-color: black;
+ padding: 12px;
+ border: 1px solid var(--link-color);
+ cursor: pointer;
+ border-radius: 4px;
+ font-weight: bold;
+ font-size: 16px;
+ }
+
+ /* Content sections */
+ .content-section {
+ margin-bottom: 20px;
+ padding: 0 10px;
+ }
+
+ .section-title {
+ color: var(--link-color);
+ font-size: 1.2em;
+ border-bottom: 1px solid var(--border-color);
+ padding-bottom: 5px;
+ margin-bottom: 10px;
+ }
+
+ .link-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+ gap: 10px;
+ }
+
+ .link-item {
+ padding: 10px;
+ background-color: #1a1a1a;
+ border: 1px solid #333;
+ border-radius: 4px;
+ text-align: center;
+ }
+
+ /* Gallery items for mobile */
+ .gallery-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 15px;
+ padding: 10px;
+ }
+
+ .gallery-item {
+ border: 2px ridge var(--border-color);
+ border-radius: 4px;
+ overflow: hidden;
+ }
+
+ .gallery-item:hover {
+ border: 2px ridge var(--link-color);
+ }
+
+ .gallery-item img {
+ width: 100%;
+ height: auto;
+ display: block;
+ }
+
+ .gallery-desc {
+ padding: 8px;
+ text-align: center;
+ font-size: 0.9em;
+ color: var(--link-color);
+ background-color: #1a1a1a;
+ }
+
+ /* Date and time */
+ .datetime {
+ padding: 10px;
+ text-align: center;
+ margin: 15px 0;
+ }
+
+ #realtime-date, #realtime-clock {
+ color: var(--link-color);
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+ margin: 5px 0;
+ }
+
+ /* Footer */
+ .footer {
+ padding: 15px;
+ text-align: center;
+ border-top: 1px solid #333;
+ margin-top: 20px;
+ }
+
+ .footer-links {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .footer-links a {
+ padding: 5px;
+ }
+
+ /* Collapsible sections */
+ .collapsible {
+ background-color: #1a1a1a;
+ color: var(--link-color);
+ cursor: pointer;
+ padding: 12px;
+ width: 100%;
+ border: 1px solid var(--border-color);
+ text-align: left;
+ outline: none;
+ font-size: 1em;
+ font-weight: bold;
+ margin-bottom: 5px;
+ border-radius: 4px;
+ }
+
+ .active, .collapsible:hover {
+ background-color: #222;
+ }
+
+ .collapsible-content {
+ padding: 0 10px;
+ display: none;
+ overflow: hidden;
+ background-color: #1a1a1a;
+ margin-bottom: 10px;
+ border-radius: 0 0 4px 4px;
+ }
+
+ /* XXX Verification Modal */
+ .xxx-modal {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.9);
+ z-index: 1000;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .xxx-modal-content {
+ background-color: var(--menu-background);
+ padding: 20px;
+ border-radius: 8px;
+ border: 2px solid var(--link-color);
+ text-align: center;
+ max-width: 90%;
+ width: 350px;
+ }
+
+ .xxx-logo {
+ width: 80px;
+ height: 80px;
+ margin: 0 auto 15px;
+ background-color: #333;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px;
+ color: var(--link-color);
+ border: 2px solid var(--link-color);
+ }
+
+ .xxx-buttons {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+ }
+
+ .xxx-button {
+ padding: 10px 20px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: bold;
+ }
+
+ .xxx-confirm {
+ background-color: #4CAF50;
+ color: white;
+ }
+
+ .xxx-deny {
+ background-color: #f44336;
+ color: white;
+ }
+
+ /* XXX Section */
+ .xxx-section {
+ margin: 20px 0;
+ text-align: center;
+ }
+
+ .xxx-toggle {
+ padding: 12px 20px;
+ background-color: #333;
+ color: var(--link-color);
+ border: 1px solid var(--link-color);
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: bold;
+ margin-bottom: 15px;
+ }
+
+ .xxx-list {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ background-color: var(--menu-background);
+ border: 1px solid var(--link-color);
+ border-radius: 8px;
+ padding: 10px;
+ max-width: 200px;
+ display: none;
+ z-index: 999;
+ }
+
+ .xxx-list-title {
+ color: var(--link-color);
+ font-weight: bold;
+ margin-bottom: 8px;
+ text-align: center;
+ border-bottom: 1px solid #444;
+ padding-bottom: 5px;
+ }
+
+ .xxx-list-item {
+ margin: 5px 0;
+ text-align: center;
+ }
+
+ /* Responsive adjustments */
+ @media (min-width: 768px) {
+ body {
+ font-size: 16px;
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ .link-grid {
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ }
+
+ .gallery-container {
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ }
+ }
generated by cgit v1.2.3 (git 2.39.1) at 2026-02-04 08:10:13 +0000