mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added switch toggle
This commit is contained in:
Pax1601
@@ -51,7 +51,7 @@
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
width: 240px;
|
||||
width: 320px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
||||
@@ -50,6 +50,7 @@ button {
|
||||
cursor: pointer;
|
||||
font-weight: var(--font-weight-bolder);
|
||||
padding: 6px;
|
||||
column-gap: 5px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
@@ -61,6 +62,13 @@ button[disabled="disabled"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button>svg:first-child,
|
||||
button>img:first-child {
|
||||
position: relative;
|
||||
aspect-ratio: initial;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -121,10 +129,10 @@ form>div {
|
||||
}
|
||||
|
||||
.ol-panel hr {
|
||||
background-color: var(--secondary-light-grey);
|
||||
background-color: var(--secondary-transparent-white);
|
||||
border: none;
|
||||
height: 1px;
|
||||
margin: 20px 0;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -356,6 +364,12 @@ h4 {
|
||||
button.ol-button-warning {
|
||||
border: 1px solid var(--primary-red);
|
||||
color: var(--primary-red);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button.ol-button-warning>svg:first-child {
|
||||
stroke: var(--primary-red);
|
||||
fill: var(--primary-red);
|
||||
}
|
||||
|
||||
nav.ol-panel {
|
||||
@@ -482,16 +496,16 @@ nav.ol-panel> :last-child {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
.ol-slider-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider-container:not(:first-of-type) {
|
||||
.ol-slider-container:not(:first-of-type) {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider {
|
||||
.ol-slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #d3d3d3;
|
||||
@@ -505,34 +519,51 @@ nav.ol-panel> :last-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider:hover {
|
||||
.ol-slider:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
.ol-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: gray;
|
||||
background: var(--background-grey);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.active .slider::-webkit-slider-thumb {
|
||||
background: #5ca7ff;
|
||||
.active .ol-slider::-webkit-slider-thumb {
|
||||
background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, color-mix(in srgb, var(--accent-light-blue), transparent 66%) 50%);
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
background: gray;
|
||||
.ol-slider::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
border: 0px solid transparent;
|
||||
background: var(--background-grey);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.active .slider::-moz-range-thumb {
|
||||
background: #5ca7ff;
|
||||
.active .ol-slider::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, color-mix(in srgb, var(--accent-light-blue), transparent 66%) 50%);
|
||||
}
|
||||
|
||||
.ol-slider-min-max {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--secondary-light-grey);
|
||||
}
|
||||
|
||||
.ol-slider-min-max::before {
|
||||
content: attr(data-min-value);
|
||||
}
|
||||
|
||||
.ol-slider-min-max::after {
|
||||
content: attr(data-max-value);
|
||||
}
|
||||
|
||||
.main-logo {
|
||||
@@ -848,12 +879,8 @@ dl.ol-data-grid {
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
dl.ol-data-grid dt {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
dl.ol-data-grid dd {
|
||||
width: 40%;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
dl.ol-data-grid dt.icon {
|
||||
@@ -1056,25 +1083,26 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
.ol-switch {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-input {
|
||||
.ol-switch-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-fill {
|
||||
.ol-switch-fill {
|
||||
border-radius: 999px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
transition: background-color 0.2s;
|
||||
height: var(--height);
|
||||
width: var(--width);
|
||||
}
|
||||
|
||||
.toggle-fill::after {
|
||||
.ol-switch-fill::after {
|
||||
aspect-ratio : 1 / 1;
|
||||
background-clip: content-box;
|
||||
background-color: #ffffff;
|
||||
@@ -1082,7 +1110,29 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
height: 100%;
|
||||
padding: 2px;
|
||||
padding: 3px;
|
||||
position: absolute;
|
||||
transition: transform 0.2s;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.ol-switch-fill::before {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
height: 100%;
|
||||
padding: 0px 7px;
|
||||
position: absolute;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.ol-switch[data-value="false"]>.ol-switch-fill::before {
|
||||
transform: translateX(calc(var(--width) - 100%));
|
||||
|
||||
}
|
||||
|
||||
.ol-switch[data-value="true"]>.ol-switch-fill::after {
|
||||
transform: translateX(calc(var(--width) - var(--height)));
|
||||
}
|
||||
@@ -109,11 +109,11 @@
|
||||
border-top-right-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
#context-menu-switch .toggle-fill {
|
||||
#context-menu-switch .ol-switch-fill {
|
||||
width: 40;
|
||||
}
|
||||
|
||||
[data-active-coalition="blue"].toggle-fill,
|
||||
[data-active-coalition="blue"].ol-switch-fill,
|
||||
[data-active-coalition="blue"].unit-spawn-button:hover,
|
||||
[data-active-coalition="blue"].unit-spawn-button.is-open,
|
||||
[data-active-coalition="blue"]#active-coalition-label,
|
||||
@@ -122,7 +122,7 @@
|
||||
background-color: var(--primary-blue)
|
||||
}
|
||||
|
||||
[data-active-coalition="red"].toggle-fill,
|
||||
[data-active-coalition="red"].ol-switch-fill,
|
||||
[data-active-coalition="red"].unit-spawn-button:hover,
|
||||
[data-active-coalition="red"].unit-spawn-button.is-open,
|
||||
[data-active-coalition="red"]#active-coalition-label,
|
||||
@@ -131,7 +131,7 @@
|
||||
background-color: var(--primary-red)
|
||||
}
|
||||
|
||||
[data-active-coalition="neutral"].toggle-fill,
|
||||
[data-active-coalition="neutral"].ol-switch-fill,
|
||||
[data-active-coalition="neutral"].unit-spawn-button:hover,
|
||||
[data-active-coalition="neutral"].unit-spawn-button.is-open,
|
||||
[data-active-coalition="neutral"]#active-coalition-label,
|
||||
@@ -158,15 +158,15 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
[data-active-coalition="blue"].toggle-fill::after {
|
||||
[data-active-coalition="blue"].ol-switch-fill::after {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
[data-active-coalition="red"].toggle-fill::after {
|
||||
[data-active-coalition="red"].ol-switch-fill::after {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
[data-active-coalition="neutral"].toggle-fill::after {
|
||||
[data-active-coalition="neutral"].ol-switch-fill::after {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,12 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#unit-control-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
#unit-control-panel h3 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@@ -24,42 +30,27 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
font-size: 11px;
|
||||
height: 32px;
|
||||
margin-right: 5px;
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
width: calc(100% - 5px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button::before {
|
||||
background-color: var(--primary-neutral);
|
||||
#unit-control-panel #selected-units-container button::after {
|
||||
border-radius: 999px;
|
||||
content: attr(data-short-label);
|
||||
color: var(--secondary-semitransparent-white);
|
||||
content: attr(data-label);
|
||||
font-size: 10px;
|
||||
margin: 2px 4px;
|
||||
max-width: 30px;
|
||||
min-width: 20px;
|
||||
overflow: hidden;
|
||||
padding: 4px 6px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: fit-content;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button:hover::before {
|
||||
background-color: black;
|
||||
#unit-control-panel #selected-units-container button:hover::after {
|
||||
max-width: 100%;
|
||||
text-overflow: unset;
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button[data-coalition="blue"]::before {
|
||||
background-color: var(--accent-light-blue);
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button[data-coalition="red"]::before {
|
||||
background-color: var(--accent-light-red);
|
||||
color: var(--secondary-red-outline)
|
||||
}
|
||||
|
||||
#unit-control-panel #selected-units-container button::after {
|
||||
#unit-control-panel #selected-units-container button::before {
|
||||
border-radius: var(--border-radius-sm);
|
||||
content: attr(data-callsign);
|
||||
display: block;
|
||||
@@ -76,40 +67,10 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#unit-control-panel #threat,
|
||||
#unit-control-panel #roe,
|
||||
#unit-control-panel #emissions-countermeasures {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-settings]) #general-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-tasking]) #tasking {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-tanker]) #tanker-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-AWACS]) #AWACS-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-TACAN]) #TACAN-options {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-radio]) #radio-options {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog>.ol-dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -149,60 +110,155 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
#altitude-type-switch>.toggle-fill {
|
||||
background-color: var(--background-offwhite);
|
||||
height: 15px;
|
||||
width: 40px;
|
||||
#flight-data .ol-slider {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
#altitude-type-switch>.toggle-fill::before {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding: 0px 5px;
|
||||
color: var(--background-steel);
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
transition: transform 0.2s;
|
||||
height: 15px;
|
||||
.ol-slider-container dd {
|
||||
column-gap: 5px;
|
||||
}
|
||||
|
||||
#altitude-type-switch[data-altitude-type="agl"]>.toggle-fill::before {
|
||||
#flight-data .ol-switch {
|
||||
height: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#flight-data .ol-switch-fill {
|
||||
background-color: var(--accent-light-blue);
|
||||
}
|
||||
|
||||
#flight-data .ol-switch-fill::after {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#altitude-type-switch[data-value="true"]>.ol-switch-fill::before {
|
||||
content: "AGL";
|
||||
}
|
||||
|
||||
#altitude-type-switch[data-altitude-type="asl"]>.toggle-fill::before {
|
||||
#altitude-type-switch[data-value="false"]>.ol-switch-fill::before {
|
||||
content: "ASL";
|
||||
transform: translateX(calc(40px - 28px));
|
||||
}
|
||||
|
||||
#altitude-type-switch>.toggle-fill::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: var(--background-steel);
|
||||
width: 15px;
|
||||
top: 0px;
|
||||
#airspeed-type-switch[data-value="true"]>.ol-switch-fill::before {
|
||||
content: "GS";
|
||||
}
|
||||
|
||||
#altitude-type-switch[data-altitude-type="asl"]>.toggle-fill::after {
|
||||
transform: translateX(0);
|
||||
#airspeed-type-switch[data-value="false"]>.ol-switch-fill::before {
|
||||
content: "CAS";
|
||||
}
|
||||
|
||||
#altitude-type-switch[data-altitude-type="agl"]>.toggle-fill::after {
|
||||
transform: translateX(calc(40px - 15px));
|
||||
#unit-control-panel .ol-slider-value {
|
||||
color: var(--accent-light-blue);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#altitude-slider dt {
|
||||
width: 40%;
|
||||
#ai-on-off {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1.35fr 0.65fr ;
|
||||
}
|
||||
|
||||
#altitude-slider dd {
|
||||
#ai-on-off>*:nth-child(2) {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
#ai-on-off>*:nth-child(3) {
|
||||
color: var(--secondary-semitransparent-white);
|
||||
}
|
||||
|
||||
#ai-on-off h4 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#on-off-switch {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#on-off-switch>.ol-switch-fill {
|
||||
background-color: var(--accent-light-blue);
|
||||
}
|
||||
|
||||
#on-off-switch>.ol-switch-fill::after {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#on-off-switch[data-value="true"]>.ol-switch-fill::before {
|
||||
content: "ON";
|
||||
}
|
||||
|
||||
#on-off-switch[data-value="false"]>.ol-switch-fill::before {
|
||||
content: "OFF";
|
||||
}
|
||||
|
||||
#advanced-settings-div {
|
||||
display: flex;
|
||||
column-gap: 5px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#altitude-slider dd>*:nth-child(2) {
|
||||
width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
#advanced-settings-div>*:nth-child(2) {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#advanced-settings-div button {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* Element visibility control */
|
||||
#unit-control-panel:not([data-show-categories-tooltip]) #categories-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#unit-control-panel:not([data-show-airspeed-slider]) #airspeed-slider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#unit-control-panel:not([data-show-altitude-slider]) #altitude-slider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#unit-control-panel:not([data-show-roe]) #roe {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#unit-control-panel:not([data-show-threat]) #threat {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#unit-control-panel:not([data-show-emissions-countermeasures]) #emissions-countermeasures {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#unit-control-panel:not([data-show-on-off]) #ai-on-off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#unit-control-panel:not([data-show-advanced-settings-button]) #advanced-settings-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-settings]) #general-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-tasking]) #tasking {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-tanker]) #tanker-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-AWACS]) #AWACS-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-TACAN]) #TACAN-options {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#advanced-settings-dialog:not([data-show-radio]) #radio-options {
|
||||
display: none;
|
||||
}
|
||||
|
||||
1
client/public/themes/olympus/images/icons/bomb-solid.svg
Normal file
1
client/public/themes/olympus/images/icons/bomb-solid.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.1 52.4L442.6 6.5C440.7 2.6 436.5 0 432.1 0s-8.5 2.6-10.4 6.5L405.2 52.4l-46 16.8c-4.3 1.6-7.3 5.9-7.2 10.4c0 4.5 3 8.7 7.2 10.2l45.7 16.8 16.8 45.8c1.5 4.4 5.8 7.5 10.4 7.5s8.9-3.1 10.4-7.5l16.5-45.8 45.7-16.8c4.2-1.5 7.2-5.7 7.2-10.2c0-4.6-3-8.9-7.2-10.4L459.1 52.4zm-132.4 53c-12.5-12.5-32.8-12.5-45.3 0l-2.9 2.9C256.5 100.3 232.7 96 208 96C93.1 96 0 189.1 0 304S93.1 512 208 512s208-93.1 208-208c0-24.7-4.3-48.5-12.2-70.5l2.9-2.9c12.5-12.5 12.5-32.8 0-45.3l-80-80zM200 192c-57.4 0-104 46.6-104 104v8c0 8.8-7.2 16-16 16s-16-7.2-16-16v-8c0-75.1 60.9-136 136-136h8c8.8 0 16 7.2 16 16s-7.2 16-16 16h-8z"/></svg>
|
||||
|
After Width: | Height: | Size: 854 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M499.6 11.3c6.7-10.7 20.5-14.5 31.7-8.5s15.8 19.5 10.6 31L404.8 338.6c2.2 2.3 4.3 4.7 6.3 7.1l97.2-54.7c10.5-5.9 23.6-3.1 30.9 6.4s6.3 23-2.2 31.5l-87 87H378.5c-13.2-37.3-48.7-64-90.5-64s-77.4 26.7-90.5 64H117.8L42.3 363.7c-9.7-6.7-13.1-19.6-7.9-30.3s17.4-15.9 28.7-12.4l97.2 30.4c3-3.9 6.1-7.7 9.4-11.3L107.4 236.3c-6.1-10.1-3.9-23.1 5.1-30.7s22.2-7.5 31.1 .1L246 293.6c1.5-.4 3-.8 4.5-1.1l13.6-142.7c1.2-12.3 11.5-21.7 23.9-21.7s22.7 9.4 23.9 21.7l13.5 141.9L499.6 11.3zM64 448v0H512v0h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64zM288 0c13.3 0 24 10.7 24 24V72c0 13.3-10.7 24-24 24s-24-10.7-24-24V24c0-13.3 10.7-24 24-24z"/></svg>
|
||||
|
After Width: | Height: | Size: 908 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>
|
||||
|
After Width: | Height: | Size: 875 B |
@@ -32,6 +32,8 @@
|
||||
--secondary-dark-steel: #181e25;
|
||||
--secondary-gunmetal-grey: #2f2f2f;
|
||||
--secondary-light-grey: #797e83;
|
||||
--secondary-semitransparent-white: #FFFFFFAA;
|
||||
--secondary-transparent-white: #FFFFFF30;
|
||||
--secondary-yellow: #ffd46893;
|
||||
|
||||
--background-hover: #f2f2f333;
|
||||
|
||||
Reference in New Issue
Block a user