fix: manager in dark mode

fix #98
pull/105/head
sualko 2020-11-24 11:45:06 +01:00
parent 0cfb7d155d
commit 8aa663fbca
5 changed files with 28 additions and 35 deletions

View File

@ -22,7 +22,7 @@
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
id="metadata16"><rdf:RDF><cc:Work id="metadata16"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs14"> id="defs14">
@ -42,8 +42,8 @@
id="namedview12" id="namedview12"
showgrid="false" showgrid="false"
inkscape:zoom="7.375" inkscape:zoom="7.375"
inkscape:cx="-10.440678" inkscape:cx="-25.382767"
inkscape:cy="22.536696" inkscape:cy="21.85873"
inkscape:window-x="2079" inkscape:window-x="2079"
inkscape:window-y="754" inkscape:window-y="754"
inkscape:window-maximized="0" inkscape:window-maximized="0"
@ -52,18 +52,18 @@
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path4" id="path4"
d="M 1.6106477,14.304691 C 0.37646569,13.696761 -0.23146473,12.202751 0.08110589,10.516091 0.21990279,9.7688085 2.4445395,7.3359764 3.3833617,6.8846089 3.9912922,6.6064599 5.9205691,6.5026398 5.9205691,6.7452568 c 0,0.2259613 -1.2863697,1.3729789 -1.6683388,1.494565 C 4.044035,8.3092203 3.3661509,8.882729 2.7226885,9.5434023 1.6806014,10.638787 1.5762261,10.812006 1.5762261,11.472679 c 0,0.938267 0.6256964,1.563964 1.5817295,1.563964 0.5907196,0 0.8166809,-0.138797 1.8770892,-1.147018 0.6773289,-0.625696 1.2680485,-1.30358 1.3380022,-1.511776 0.121586,-0.40029 1.2508376,-1.6855493 1.494565,-1.6855493 0.2087505,0 0.1743289,1.8071353 -0.034977,2.3623233 -0.243172,0.626807 -2.5027855,2.937498 -3.2156464,3.268389 -0.7467273,0.364759 -2.2762692,0.347548 -3.0063409,-0.01832 z" d="M 1.6106477,14.304691 C 0.37646569,13.696761 -0.23146473,12.202751 0.08110589,10.516091 0.21990279,9.7688085 2.4445395,7.3359764 3.3833617,6.8846089 3.9912922,6.6064599 5.9205691,6.5026398 5.9205691,6.7452568 c 0,0.2259613 -1.2863697,1.3729789 -1.6683388,1.494565 C 4.044035,8.3092203 3.3661509,8.882729 2.7226885,9.5434023 1.6806014,10.638787 1.5762261,10.812006 1.5762261,11.472679 c 0,0.938267 0.6256964,1.563964 1.5817295,1.563964 0.5907196,0 0.8166809,-0.138797 1.8770892,-1.147018 0.6773289,-0.625696 1.2680485,-1.30358 1.3380022,-1.511776 0.121586,-0.40029 1.2508376,-1.6855493 1.494565,-1.6855493 0.2087505,0 0.1743289,1.8071353 -0.034977,2.3623233 -0.243172,0.626807 -2.5027855,2.937498 -3.2156464,3.268389 -0.7467273,0.364759 -2.2762692,0.347548 -3.0063409,-0.01832 z"
style="stroke-width:0.55518758" /><path style="stroke-width:0.55518758;fill:#ffffff" /><path
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path6" id="path6"
d="M 4.704153,9.9081605 C 4.5131685,9.717176 4.3566056,9.4734487 4.3566056,9.3524178 c 0,-0.1221413 1.0776191,-1.2863697 2.3984104,-2.607161 C 8.752581,4.7465814 9.2056141,4.3818232 9.5353955,4.4684324 10.022295,4.5900185 10.264357,5.0247304 10.091138,5.4760979 9.9173646,5.9102546 5.520834,10.255153 5.2598958,10.255153 5.1383097,10.255708 4.8951376,10.099145 4.704153,9.9081605 Z" d="M 4.704153,9.9081605 C 4.5131685,9.717176 4.3566056,9.4734487 4.3566056,9.3524178 c 0,-0.1221413 1.0776191,-1.2863697 2.3984104,-2.607161 C 8.752581,4.7465814 9.2056141,4.3818232 9.5353955,4.4684324 10.022295,4.5900185 10.264357,5.0247304 10.091138,5.4760979 9.9173646,5.9102546 5.520834,10.255153 5.2598958,10.255153 5.1383097,10.255708 4.8951376,10.099145 4.704153,9.9081605 Z"
style="stroke-width:0.55518758" /><path style="stroke-width:0.55518758;fill:#ffffff" /><path
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path8" id="path8"
d="m 8.7020589,7.8578527 c 0,-0.2437273 1.2852593,-1.3729789 1.6849941,-1.494565 0.208751,-0.069398 0.886635,-0.660118 1.512331,-1.3380021 1.007666,-1.0604083 1.147018,-1.2858145 1.147018,-1.8770893 0,-0.9554778 -0.625697,-1.5817294 -1.564519,-1.5817294 -0.660673,0 -0.833336,0.1043752 -1.9292767,1.1470175 C 8.8930435,3.3563917 8.3189795,4.0342757 8.249581,4.2430263 8.127995,4.6249953 6.9804222,5.9108098 6.755016,5.9108098 6.5112887,5.9108098 6.6156639,3.9820881 6.8938129,3.3908133 7.2241496,2.6785076 9.5353955,0.41889409 10.160537,0.17572192 10.872842,-0.08521625 12.315775,-0.03302862 12.993659,0.28009719 14.245052,0.8885828 14.853538,2.3831478 14.540412,4.0859082 14.40106,4.8331907 12.176423,7.2665779 11.238711,7.7185007 10.62967,7.9972048 8.7020589,8.1010249 8.7020589,7.8578527 Z" d="m 8.7020589,7.8578527 c 0,-0.2437273 1.2852593,-1.3729789 1.6849941,-1.494565 0.208751,-0.069398 0.886635,-0.660118 1.512331,-1.3380021 1.007666,-1.0604083 1.147018,-1.2858145 1.147018,-1.8770893 0,-0.9554778 -0.625697,-1.5817294 -1.564519,-1.5817294 -0.660673,0 -0.833336,0.1043752 -1.9292767,1.1470175 C 8.8930435,3.3563917 8.3189795,4.0342757 8.249581,4.2430263 8.127995,4.6249953 6.9804222,5.9108098 6.755016,5.9108098 6.5112887,5.9108098 6.6156639,3.9820881 6.8938129,3.3908133 7.2241496,2.6785076 9.5353955,0.41889409 10.160537,0.17572192 10.872842,-0.08521625 12.315775,-0.03302862 12.993659,0.28009719 14.245052,0.8885828 14.853538,2.3831478 14.540412,4.0859082 14.40106,4.8331907 12.176423,7.2665779 11.238711,7.7185007 10.62967,7.9972048 8.7020589,8.1010249 8.7020589,7.8578527 Z"
style="stroke-width:0.55518758" /> style="stroke-width:0.55518758;fill:#ffffff" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.80278206px;line-height:125%;font-family:AnjaliOldLipi;-inkscape-font-specification:AnjaliOldLipi;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.20026076px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.80278206px;line-height:125%;font-family:AnjaliOldLipi;-inkscape-font-specification:AnjaliOldLipi;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.20026076px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
x="9.0422382" x="9.0422382"
y="17.006468" y="17.006468"
id="text4560"><tspan id="text4560"><tspan
@ -71,5 +71,6 @@
id="tspan4558" id="tspan4558"
x="9.0422382" x="9.0422382"
y="17.006468" y="17.006468"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arimo;-inkscape-font-specification:'Arimo Bold';stroke-width:1.20026076px">+</tspan></text> style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arimo;-inkscape-font-specification:'Arimo Bold';stroke-width:1.20026076px;fill:#ffffff;">+</tspan></text>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

@ -1,6 +1,10 @@
.icon-add-shortcut { .icon-add-shortcut {
background-image: url('../../img/chain-plus-dark.svg');
.dark & {
background-image: url('../../img/chain-plus.svg'); background-image: url('../../img/chain-plus.svg');
} }
}
.oc-dialog.bbb-dialog { .oc-dialog.bbb-dialog {
max-height: calc(100% - 70px); max-height: calc(100% - 70px);
@ -37,7 +41,7 @@ pre {
#bbb-warning { #bbb-warning {
padding: 1em; padding: 1em;
background-color: rgb(255, 255, 123); background-color: var(--color-warning);
display: inline-block; display: inline-block;
.icon { .icon {
@ -47,7 +51,7 @@ pre {
#bbb-success { #bbb-success {
padding: 1em; padding: 1em;
background-color: rgb(176, 252, 132); background-color: var(--color-success);
display: inline-block; display: inline-block;
.icon { .icon {
@ -112,7 +116,7 @@ pre {
} }
th { th {
border-bottom: 1px #ddd solid; border-bottom: 1px var(--color-background-darker) solid;
cursor: pointer; cursor: pointer;
.sort_arrow { .sort_arrow {
@ -135,20 +139,12 @@ pre {
} }
.action-rename { .action-rename {
&::after { .icon-rename {
display: inline-block;
position: relative;
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
background: url('../../img/rename.svg') no-repeat center;
opacity: 0; opacity: 0;
&:hover {
opacity: 1;
} }
&:hover .icon-rename {
opacity: 1;
} }
} }
@ -188,21 +184,17 @@ pre {
height: 20px; height: 20px;
&:active { &:active {
background-color: rgba(0, 128, 0, 0.445); background-color: var(--color-success);
} }
} }
.selected-row,
.recordings-row {
border-left: 3px solid #888;
}
.selected-row { .selected-row {
background-color: #f0f0f0; background-color: var(--color-background-dark);
} }
.recordings-row { .recordings-row {
background-color: #f7f7f7; background-color: var(--color-background-hover);
box-shadow: inset 0px -5px 7px -7px var(--color-box-shadow);
&> td { &> td {
padding: 0; padding: 0;

View File

@ -51,7 +51,7 @@ const EditableValue: React.FC<EditableValueProps> = ({ setValue, field, value: c
return <span>{currentValue}</span>; return <span>{currentValue}</span>;
} }
return <a className="action-rename" onClick={onClick}>{currentValue}</a>; return <a className="action-rename" onClick={onClick}>{currentValue} <span className="icon icon-rename icon-visible"></span></a>;
}; };
export default EditableValue; export default EditableValue;

View File

@ -225,7 +225,7 @@ const RoomRow: React.FC<Props> = (props) => {
</td> </td>
</tr> </tr>
{showRecordings && <tr className="recordings-row"> {showRecordings && <tr className="recordings-row">
<td colSpan={10}> <td colSpan={11}>
<table> <table>
<tbody> <tbody>
{recordings?.map(recording => <RecordingRow key={recording.id} recording={recording} deleteRecording={deleteRecording} storeRecording={storeRecording} />)} {recordings?.map(recording => <RecordingRow key={recording.id} recording={recording} deleteRecording={deleteRecording} storeRecording={storeRecording} />)}

View File

@ -9,7 +9,7 @@ $(() => {
} }
function generateSuccessElement(message: string) { function generateSuccessElement(message: string) {
return $(`<div id="bbb-success"><span class="icon icon-checkmark-color icon-visible"></span> ${message}</div>`); return $(`<div id="bbb-success"><span class="icon icon-checkmark icon-visible"></span> ${message}</div>`);
} }
async function checkServer(url: string, secret: string) { async function checkServer(url: string, secret: string) {