105 lines
1.8 KiB
CSS
105 lines
1.8 KiB
CSS
.camera-remote-layout {
|
|
max-width: 1100px;
|
|
}
|
|
|
|
.camera-remote-main {
|
|
min-height: 0;
|
|
}
|
|
|
|
.camera-remote-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-xl);
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.camera-remote-heading h1 {
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
|
|
.camera-remote-heading p {
|
|
margin: 0;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.camera-power-control {
|
|
min-width: 180px;
|
|
}
|
|
|
|
.camera-remote .camera-power-control .button {
|
|
margin: 0;
|
|
}
|
|
|
|
.camera-remote .mainpage_notice {
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.camera-sections {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.camera-remote-panel {
|
|
min-height: 0;
|
|
padding: var(--space-lg);
|
|
}
|
|
|
|
.camera-remote-panel h2 {
|
|
margin-bottom: var(--space-md);
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
.camera-presets {
|
|
display: grid;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.camera-remote .camera-presets .button_fullwidth {
|
|
margin: 0;
|
|
}
|
|
|
|
.camera-remote .camera-presets .camera-preset-active {
|
|
background: var(--theme-hover);
|
|
box-shadow: inset 5px 0 var(--nak-blue), var(--shadow-md);
|
|
}
|
|
|
|
.camera-remote .button_fullwidth:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#base.camera-remote {
|
|
padding: 0;
|
|
}
|
|
|
|
.camera-remote-heading {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.camera-sections {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.camera-remote-layout {
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.camera-remote-heading {
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.camera-power-control {
|
|
width: 100%;
|
|
}
|
|
|
|
.camera-remote-panel {
|
|
padding: var(--space-md);
|
|
}
|
|
}
|