diff options
Diffstat (limited to 'kartik/views/menu.css')
| -rwxr-xr-x | kartik/views/menu.css | 248 |
1 files changed, 248 insertions, 0 deletions
diff --git a/kartik/views/menu.css b/kartik/views/menu.css new file mode 100755 index 0000000..f9697a7 --- /dev/null +++ b/kartik/views/menu.css @@ -0,0 +1,248 @@ +.services li .item { + padding: 4px; + font-size: 20px; + width: 300px; + border-color: transparent; + margin-right: auto !important; + display: block; + text-align: left; + border-left-width: 3px; + border-left-style: solid; + border-color: transparent; +} + +.services { + position: fixed; + left: 0; + bottom: 0; + right: 0; + top: 150px; + padding-top: 50px; +} + +.services li { + color: transparent; + margin-top: 5px; + margin-bottom: 5px; +} + +.services li .item a { + color: white !important; + text-decoration: none; + transition: color 200ms; +} + +.services li.selected .item a { + text-decoration: none; +} + +.services:not(.services-settings) li.selected .item { + background-color: rgba(0, 255, 153, 0.25); + backdrop-filter: blur(10px); + border-radius: 10px; + animation-direction: alternate-reverse; + position: relative; + z-index: 9999999999; + animation-duration: 3s; + animation-name: border-overlay; + animation-fill-mode: both; + animation-iteration-count: infinite; +} + +.services.services-settings li.selected .item { + border-color: #00ff99; + background-color: rgba(0, 255, 153, 0.25); + animation-direction: alternate-reverse; + animation-duration: 3s; + animation-name: border-overlay2; + animation-fill-mode: both; + animation-iteration-count: infinite; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; +} + +@keyframes border-overlay { + 0% { + background-color: rgba(0, 255, 102, 0.25); + } + 100% { + background-color: rgba(0, 204, 255, 0.25); + } +} + +@keyframes border-overlay2 { + 0% { + border-color: #00ff66; + background-color: rgba(0, 255, 102, 0.25); + } + 100% { + border-color: #00ccff; + background-color: rgba(0, 204, 255, 0.25); + } +} + +.services li .item { + margin-left: 12.5px; + transition: margin-left 200ms, background-color 200ms, border 200ms; +} + +.services li .help { + color: white; + margin-left: 5px; + display: inline-block; + font-size: 12px; + position: relative; + top: -2.5px; + opacity: 0; + transition: opacity 200ms; +} + +.services li .help.exit { + color: #ff6969; +} + +.services li.selected .help { + opacity: 1; +} + +#copyright { + color: rgba(255, 255, 255, .5); + position: fixed; + bottom: 30px; + right: 30px; + text-align: right; + font-size: 12px; +} + +.setting-status { + float: right; +} + +#notice { + color: white; + position: fixed; + top: 20px; + right: 20px; + width: 180px; + text-align: right; + font-size: 14px; +} + +#scroll { + display: block; + text-align: center; + color: white; + padding-top: 100vh; + padding-bottom: 100vh; +} + +.cred-title { + color: yellow; +} + +.cred-content { + color: white; +} + +.technical { + color: cyan; +} + +.item-icon { + filter: invert(1); + vertical-align: middle; + display: inline-block; + margin-top: 3px; + margin-bottom: -1px; +} + +div.services.home { + top: 115px; + padding: 0; + display: flex; + align-items: center; + bottom: 70px; + z-index: 9999; +} + +div.services.home > div.items > ul > li > span.item { + width: 216px; + border-radius: 0; +} + +div.services.home > div.items > ul > li > span.item > a { + margin-left: 10px; + margin-right: 10px; + width: 100%; + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +div.services.home > div.items { + width: 256px; +} + +div.services.home > div.items > ul { + padding: 0; +} + +div.services.home > div.items > ul > li { + list-style: none; +} + +div.services.home > div.items > ul > li > span.item { + margin-left: 10vw; + transition: none; +} + +img[alt="full-logo"] { + margin-left: calc(10vw + 37.5px) !important; + margin-top: 55px !important; + height: 56px !important; + z-index: 99999; + position: fixed; +} + +span#copyright { + bottom: 46px; + left: 10vw; + z-index: 9999; + color: rgba(255, 255, 255, 0.75); + right: unset; + width: 227px; + text-align: center; +} + +#services-background { + position: fixed; + top: 0; + bottom: 0; + width: 227px; + z-index: 9; + backdrop-filter: blur(10px); + background: rgba(0, 0, 0, 0.5); + left: 10vw; +} + +.item-text { + vertical-align: middle; + margin-top: 8px; + display: inline-block; +} + +@media (max-height: 600px) { + img[alt="full-logo"][src="../logo/full.png"].full-logo { + margin-top: 16px !important; + } + + span#copyright.copyright { + bottom: 14px !important; + } +} + +body { + height: calc(100vh / 1.2); + overflow: hidden; +}
\ No newline at end of file |