ObjToSchematic/styles.css

308 lines
5.5 KiB
CSS
Raw Normal View History

2021-09-20 03:23:43 +08:00
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400&display=swap');
:root {
2022-01-17 03:52:35 +08:00
--properties-width: max(400px, 20%);
--canvas-width: calc(100% - var(--properties-width));
--pill-radius: 6px;
2022-01-17 03:52:35 +08:00
--prim-color: hsl(190, 100%, 27%);
--prim-color-hover: hsl(190, 100%, 35%);
--prim-color-disabled: hsl(190, 100%, 15%);
--prop-bg-color: #1A1A1A;
2021-07-04 23:02:20 +08:00
}
2021-10-05 07:32:03 +08:00
body {
margin: 0px;
background-color: rgb(25, 25, 25);
font-family: 'Lexend', sans-serif;
overflow: hidden;
user-select: none;
2021-07-07 06:18:24 +08:00
}
.column-properties {
background-color: var(--prop-bg-color);
position: absolute;
width: var(--properties-width);
height: 100%;
2022-01-17 03:52:35 +08:00
border-right: 2px solid #252525;
overflow: auto;
2021-08-14 23:34:35 +08:00
}
.column-canvas {
position: absolute;
margin-left: var(--properties-width);
padding-left: 1.5px;
width: 80%;
height: 100%;
2021-08-14 23:34:35 +08:00
}
canvas {
position: absolute;
width: 100%;
height: 100%;
2021-10-05 07:32:03 +08:00
}
2021-09-20 03:23:43 +08:00
2021-10-05 07:32:03 +08:00
.menu {
2021-09-20 03:23:43 +08:00
display: flex;
flex-direction: column;
2022-01-17 03:52:35 +08:00
width: calc(100%);
background-color: #1A1A1A;
2021-09-20 03:23:43 +08:00
}
.container {
display: flex;
flex-direction: column;
margin: 10px;
border-radius: 10px;
2022-01-17 03:52:35 +08:00
/*background-color: #1A1A1A;*/
/*box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;*/
/*border: 2px solid rgba(255, 255, 255, 0.075);*/
2021-09-20 03:23:43 +08:00
}
.item {
padding: 0px 0px;
color: white;
display: flex;
flex-direction: row;
align-items: center;
color: #A8A8A8;
2021-10-05 07:32:03 +08:00
}
.item-header {
background-color: #2F2F2F;
color: #C6C6C6;
font-weight: 500;
padding: 10px 20px;
2021-10-05 07:32:03 +08:00
}
2021-09-20 03:23:43 +08:00
.sub-left {
align-self: center;
2022-01-17 03:52:35 +08:00
padding: 0px 10px;
width: 125px;
2021-09-20 03:23:43 +08:00
}
.sub-left-disabled {
color: #535353 !important;
2021-09-20 03:23:43 +08:00
}
.sub-left-alt {
align-self: center;
2022-01-17 03:52:35 +08:00
padding: 0px 0px 0px 0px;
color: #303030;
font-weight: 400;
font-size: 85%;
2022-01-17 03:52:35 +08:00
letter-spacing: 4px;
2021-09-20 03:23:43 +08:00
}
.sub-right {
flex-grow: 1;
2022-01-17 03:52:35 +08:00
padding: 0px 10px;
2021-09-20 03:23:43 +08:00
}
.item-body {
font-size: 85%;
margin: 0px 0px;
min-height: 30px;
2022-01-17 03:52:35 +08:00
padding: 5px 0px;
2021-09-20 03:23:43 +08:00
}
.item-body-sunken {
background-color: #141414;
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px 0px inset;
border-radius: 5px;
color: #8C8C8C80;
font-weight: 300;
font-size: 90%;
padding: 12px 18px;
line-height: 180%;
min-height: 22px;
border: 1.5px solid #141414;
transition-duration: 1s;
overflow-wrap: anywhere;
2021-09-20 03:23:43 +08:00
}
.round-top {
border-radius: 8.5px 8.5px 0px 0px;
2021-10-05 07:32:03 +08:00
}
.round-bottom {
border-radius: 0px 0px 10px 10px;
border-width: 0.5px 0px 0px 0px;
2021-10-05 07:32:03 +08:00
}
code {
border-radius: 3px;
padding: 0px 5px;
margin: 0px 5px;
background-color: rgb(15, 15, 15);
font-size: 110%;
2021-10-05 07:32:03 +08:00
}
select {
width: 100%;
height: 30px;
padding-left: 10px;
border-radius: 5px;
border: none;
font-family: 'Lexend', sans-serif;
font-weight: 300;
color: #A8A8A8;
background-color: #2F2F2F;
2021-09-20 03:23:43 +08:00
}
select:hover {
color: #C6C6C6;
background-color: #383838;
2021-09-20 03:23:43 +08:00
}
select:disabled {
background-color: #282828 !important;
color: #535353;
}
2021-09-20 03:23:43 +08:00
.file-input {
border-radius: 5px;
border: 1px solid rgb(255, 255, 255, 0);
font-family: 'Lexend', sans-serif;
font-weight: 300;
background-color: #2F2F2F;
padding: 0px 16px;
2021-10-05 07:32:03 +08:00
cursor: pointer;
height: 40px;
2021-09-20 03:23:43 +08:00
}
.file-input:hover {
border: 1px solid rgb(255, 255, 255, 0.1);
2021-09-20 03:23:43 +08:00
}
.slider-value {
align-self: center;
font-weight: 300;
font-size: 85%;
margin-right: 8px;
color: #A8A8A8;
width: 20px;
text-align: center;
}
.slider-value-disabled {
color: #535353;
}
.new-slider {
border-radius: 5px;
font-family: 'Lexend', sans-serif;
font-weight: 300;
background-color: #2F2F2F;
cursor: ew-resize;
height: 30px;
font-size: 90%;
}
.new-slider-bar {
border-radius: 5px;
height: 28px;
background-color: var(--prim-color);
border: 1px solid rgb(255, 255, 255, 0.0);
}
.new-slider-bar:hover {
border: 1px solid rgb(255, 255, 255, 0.2);
2022-01-17 03:52:35 +08:00
background-color: var(--prim-color-hover);
}
.new-slider-disabled {
background-color: #242424;
cursor: default !important;
}
.new-slider-bar-disabled {
background-color: var(--prim-color-disabled) !important;
cursor: default !important;
border: 1px solid rgb(255, 255, 255, 0.0) !important;
2021-09-20 03:23:43 +08:00
}
.button {
background-color: var(--prim-color);
border-radius: 5px;
height: 25px;
2021-10-05 07:32:03 +08:00
color: white;
text-align: center;
padding: 5px 0px 0px 0px;
border: 1px solid rgb(255, 255, 255, 0);
cursor: pointer;
2021-09-20 03:23:43 +08:00
}
.button:hover {
border: 1px solid rgb(255, 255, 255, 0.2);
background-color: var(--prim-color-hover);
cursor: pointer;
}
.button-disabled {
cursor: default !important;
background-color: var(--prim-color-disabled) !important;
border: 1px solid rgb(255, 255, 255, 0) !important;
color: #808080 !important;
2021-10-05 07:32:03 +08:00
}
.input-text {
background-color: #2F2F2F;
border-radius: 5px;
height: 24px;
font-weight: 300;
padding: 6px 0px 0px 10px;
border: 1px solid rgb(255, 255, 255, 0);
}
.input-text:hover {
border: 1px solid rgb(255, 255, 255, 0.2);
background-color: #383838;
cursor: pointer;
}
.input-text-disabled {
background-color: rgb(156, 27, 27) !important;
2021-10-05 07:32:03 +08:00
}
.h-div {
2022-01-17 03:52:35 +08:00
height: 2px;
border-radius: 2px;
background-color: #252525;
2021-10-05 07:32:03 +08:00
}
.divider {
width: 2px;
border-radius: 1px;
background-color: #252525;
align-self: stretch;
2021-10-05 07:32:03 +08:00
}
.disabled {
opacity: 0.5;
cursor: default !important;
2021-10-05 07:32:03 +08:00
}
::-webkit-scrollbar {
width: 10px;
2021-10-05 07:32:03 +08:00
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
2021-10-05 07:32:03 +08:00
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
2021-10-05 07:32:03 +08:00
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
.border-warning {
border: 1.5px solid orange;
transition-duration: 1s;
color: orange;
}
.border-error {
border: 1.5px solid rgb(156, 27, 27);
transition-duration: 1s;
color: rgb(156, 27, 27);
2021-07-01 23:16:32 +08:00
}