Malthbern/CVR_Return-green-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Compare commits

base: Malthbern:842372b66097ebb2af3e96a574162c7e0131131c
Branches Tags
Malthbern:main Malthbern:bigmenu Malthbern:keyboard
Malthbern:0.1.1 Malthbern:0.1.0
...
compare: Malthbern:main
Branches Tags
Malthbern:main Malthbern:bigmenu Malthbern:keyboard
Malthbern:0.1.1 Malthbern:0.1.0

6 Commits
842372b660 ... main

Author SHA1 Message Date
Malthbern
fb89f7bd10 Fixed Bigmenu lot loading REAL 2025-08-28 05:09:05 -05:00
Malthbern
32ed74bfd3 Fixed Bigmenu lot loading 2025-08-28 05:07:58 -05:00
Malthbern
7daa84abd5 Update README.md 2025-08-27 23:53:45 +00:00
Malthbern
eb596354ed Delete ui.css 2025-08-27 23:52:56 +00:00
Malthbern
c84f48ef09 MenuCSSLoader prep 2025-08-27 23:52:31 +00:00
Malthbern
8bcd811c05 Update README.md 2025-08-27 11:44:58 +00:00
3 changed files with 430 additions and 2 deletions
Expand all files Collapse all files

424
Keyboard/OGGreen.css Executable file
View File

@@ -0,0 +1,424 @@
@import "../Common/vars.css";
:root {
--menu-bg-colour: 55, 48, 33;
--keyboard-key-colour: 55, 48, 33;
--menu-opacity: 1;
--collapsed: flex;
}
body {
margin: 0;
background-color: transparent !important;
opacity: var(--menu-opacity);
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
coh-partitioned: on;
text-shadow: 2px 2px 8px #000;
color: white;
font-family: var(--standard-font-family);
}
.wrapper .keyboard {
width: 100%;
border-radius: 0.5em;
box-sizing: border-box;
padding: 5px;
background-color: rgb(var(--menu-bg-colour));
filter: drop-shadow(0 0 2rem black);
text-align: center;
display: flex;
flex-direction: column;
align-self: flex-end;
position: relative;
}
.wrapper .keyboard .hide {
visibility: hidden;
animation-name: fadeOut;
animation-duration: 0.1s;
}
@keyframes fadeOut {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
}
}
.wrapper .keyboard .show {
visibility: visible;
animation-name: fadeIn;
animation-duration: 0.1s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.wrapper .keyboard .settings {
width: 60%;
height: 325px;
z-index: 10;
position: absolute;
bottom: 50px;
left: 20%;
background-color: rgb(var(--menu-bg-colour));
border-radius: 0.5em;
filter: drop-shadow(0 0 2rem black);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0.5em;
/* The switch - the box around the slider */
}
.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper {
margin: 2.1em 0 0 !important;
}
.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper .guic-horizontal-rangeslider {
background-color: rgba(255, 255, 255, 0.3) !important;
}
.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper .guic-rangeslider-horizontal-grid-pol {
background-color: white;
}
.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper .guic-rangeslider-horizontal-grid-text {
visibility: hidden;
}
.wrapper .keyboard .settings .setting-container {
display: flex;
margin-bottom: 5px;
}
.wrapper .keyboard .settings .setting-container h3 {
flex: 1;
text-align: left;
margin-bottom: 0.2em;
margin-top: 0.2em;
align-self: center;
}
.wrapper .keyboard .settings .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
/* The slider */
/* Rounded sliders */
}
.wrapper .keyboard .settings .switch input {
opacity: 0;
width: 0;
height: 0;
}
.wrapper .keyboard .settings .switch .checked {
background-color: #2196F3 !important;
box-shadow: 0 0 1px #2196F3;
}
.wrapper .keyboard .settings .switch .checked:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.wrapper .keyboard .settings .switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
}
.wrapper .keyboard .settings .switch .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
}
.wrapper .keyboard .settings .switch .round {
border-radius: 34px;
}
.wrapper .keyboard .settings .switch .round:before {
border-radius: 50%;
}
.wrapper .keyboard .settings .separator {
border-top: 5px solid #bbb;
border-radius: 5px;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.wrapper .keyboard .settings .header {
text-align: left;
width: 100%;
display: flex;
}
.wrapper .keyboard .settings .header .close-btn {
width: 2em;
}
.wrapper .keyboard .settings .header .close-btn:hover {
filter: brightness(0.8) !important;
}
.wrapper .keyboard .settings .header .close-btn img {
position: relative;
width: 2em;
height: 2em;
filter: invert(1);
}
.wrapper .keyboard .settings .header h2 {
margin-top: 0;
margin-bottom: 0;
flex: 1;
}
.wrapper .keyboard .in {
left: 5%;
transition: left 0.2s linear;
}
.wrapper .keyboard .out {
left: 100%;
transition: left 0.2s linear;
}
.wrapper .keyboard .collapsible {
display: var(--collapsed) !important;
}
.wrapper .keyboard .keyboard-row {
width: 100%;
display: flex;
}
.wrapper .keyboard .keyboard-row .spacer {
flex: 1.4;
}
.wrapper .keyboard .keyboard-row .special-keys {
flex: 0.5 !important;
border: 0 !important;
background-color: transparent !important;
}
.wrapper .keyboard .keyboard-row .special-keys:hover {
filter: brightness(0.8) !important;
}
.wrapper .keyboard .keyboard-row .keyboard-key,
.wrapper .keyboard .keyboard-row .keyboard-mod,
.wrapper .keyboard .keyboard-row .keyboard-func {
flex: 1;
min-height: 2.5em;
font-size: 1.61em;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #59885d;
margin: 2px;
border-radius: 0.25em;
background-color: rgb(var(--keyboard-key-colour));
}
.wrapper .keyboard .keyboard-row .keyboard-key span,
.wrapper .keyboard .keyboard-row .keyboard-mod span,
.wrapper .keyboard .keyboard-row .keyboard-func span {
width: 1em;
display: block;
pointer-events: none;
}
.wrapper .keyboard .keyboard-row .keyboard-key img,
.wrapper .keyboard .keyboard-row .keyboard-mod img,
.wrapper .keyboard .keyboard-row .keyboard-func img {
position: relative;
width: 1.5em;
height: 1.5em;
margin-left: -0.5em;
margin-right: -0.5em;
filter: invert(1);
pointer-events: none;
}
.wrapper .keyboard .keyboard-row .keyboard-key .flip-icon,
.wrapper .keyboard .keyboard-row .keyboard-mod .flip-icon,
.wrapper .keyboard .keyboard-row .keyboard-func .flip-icon {
transform: rotate(180deg);
}
.wrapper .keyboard .keyboard-row .keyboard-key:hover,
.wrapper .keyboard .keyboard-row .keyboard-mod:hover,
.wrapper .keyboard .keyboard-row .keyboard-func:hover,
.wrapper .keyboard .keyboard-row .keyboard-key:active,
.wrapper .keyboard .keyboard-row .keyboard-mod:active,
.wrapper .keyboard .keyboard-row .keyboard-func:active {
background-color: #1b5037;
}
.wrapper .keyboard .keyboard-row .active {
background-color: #1b5037;
}
.wrapper .keyboard .keyboard-row .wide {
flex: 1.5;
}
.wrapper .keyboard .keyboard-row .wider {
flex: 2;
}
.wrapper .keyboard .keyboard-row .widest {
flex: 2.5;
}
.wrapper .keyboard .keyboard-row .space {
flex: 10;
}
.wrapper .keyboard .keyboard-row .cancel-key {
background: #E43600;
}
.wrapper .keyboard .keyboard-row .cancel-key:hover {
background-color: #E43600;
filter: brightness(80%);
}
.wrapper .keyboard .keyboard-row .submit-key {
background: #37BD3C;
}
.wrapper .keyboard .keyboard-row .submit-key span {
width: 4em;
display: block;
}
.wrapper .keyboard .keyboard-row .submit-key:hover {
background-color: #37BD3C;
filter: brightness(80%);
}
.wrapper .keyboard .keyboard-input-block {
width: unset;
flex: 10;
position: relative;
margin-left: 4px;
margin-right: 4px;
}
.wrapper .keyboard .keyboard-input-block .textarea-info {
position: absolute;
background-color: rgb(var(--menu-bg-colour));
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
right: 10px;
top: -20px;
padding: 5px;
}
.wrapper .keyboard .keyboard-input-block .textarea-title {
position: absolute;
display: none;
background-color: rgb(var(--menu-bg-colour));
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
left: 10px;
top: -20px;
padding: 5px;
}
.wrapper .keyboard .keyboard-input-block .textarea-background {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
background-color: rgb(var(--menu-bg-colour));
border-radius: 0.5em;
}
.wrapper .keyboard .keyboard-input-block .textarea-container {
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 12px;
bottom: 0;
width: 100%;
}
.wrapper .keyboard .keyboard-input-block .textarea-container .input-container {
background-color: white;
border-radius: 0.5em;
border-top-width: initial;
border-left-width: initial;
border-bottom-width: initial;
border-right-width: initial;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #999999;
border-left-color: #999999;
border-right-color: #ededed;
border-bottom-color: #ededed;
background-color: #ffffff;
position: relative;
display: block;
padding-left: 4px;
padding-right: 4px;
width: 100%;
overflow-x: auto;
}
.wrapper .keyboard .keyboard-input-block .textarea-container .input-container .inputLineBlock {
text-align: left;
font-size: 2em;
color: black;
background-color: transparent;
width: 100%;
white-space: pre-wrap;
text-shadow: 0 0 0 #00000000;
}
.wrapper .keyboard .keyboard-input-block .textarea-container .input-container .input {
text-align: left;
font-size: 2em;
color: black;
margin: 0;
border: 0;
background-color: transparent;
position: relative;
white-space: nowrap;
overflow-wrap: normal;
height: inherit;
display: flex;
min-height: 0;
min-width: 0;
width: initial;
overflow-x: auto;
caret-color: transparent;
font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif;
}
.wrapper .keyboard .keyboard-input-block .textarea-container .input_mirror {
text-align: left;
height: 100%;
width: 100%;
color: transparent !important;
display: flex;
font-size: 2em;
padding-left: 6px;
padding-right: 4px;
text-shadow: 0 0 0 #00000000;
position: absolute;
white-space: pre-wrap;
top: 10px;
pointer-events: none;
overflow: auto;
z-index: 2;
}
.wrapper .keyboard .keyboard-input-block .textarea-container .input_mirror span {
margin: 0;
display: inline;
}
.wrapper .keyboard .keyboard-input-block .textarea-container .input_mirror .cursor {
font-size: 1em;
color: black;
border: 0.1px solid transparent;
margin-left: -8px;
display: block;
position: relative;
align-self: flex-end;
padding-bottom: 6px;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
.wrapper .keyboard .keyboard-input-block .placeholder {
display: block;
font-size: 2em;
color: dimgrey;
z-index: 2;
position: absolute;
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
padding-bottom: 8%;
align-self: flex-start;
padding-left: 12px;
bottom: 0;
}

2
ui.css → MainMenu/OGGreen.css
View File

@@ -11,7 +11,7 @@
:root {
--menu-opacity: 0.9;
/* Malth is a nerd btw */
--menu-bg-colour: 55, 48, 33;
--menu-bg-colour: 34, 34, 34;
}
html {

6
README.md
View File

@@ -4,9 +4,13 @@
Just a repo where i'll keep updated CSS to return the green UI colors to the current iteration of CVR's UI
## usage
replace ui.css you download from [here](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/raw/branch/nerdbranch-dev/ui.css)
replace ui.css you download from [here](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/src/branch/bigmenu/ui.css)
in < Steam Root >/common/ChilloutVR/ChilloutVR_Data/StreamingAssets/Cohtml/UIResources/CVRTest/
also replace Keyboard.css from the [Keyboard](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/src/branch/keyboard/) branch or [here](https://gitea.malthbern.com/Malthbern/CVR_Return-green-UI/src/branch/keyboard/Keyboard.css)
place this into < Steam Root >/common/ChilloutVR/ChilloutVR_Data/StreamingAssets/Cohtml/UIResources/KeyboardUI/
### Obligatory disclaimer
I, Malthbern and this modification are in no affiliation with ABI and not supported by ABI.