* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family:
Arial,
Helvetica,
sans-serif;
background: #15171a;
color: #eeeeee;
}
/* =====================================================
TOPBAR
===================================================== */
.topbar {
position: fixed;
left: 0;
right: 0;
top: 0;
height: 90px;
z-index: 3000;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: #24272d;
border-bottom:
1px solid #3b3f46;
}
.title {
min-width: 185px;
margin-right: 13px;
}
.title h1 {
margin: 0;
font-size: 20px;
}
.title span {
color: #92969e;
font-size: 12px;
}
.topbar-logo-frame {
width: 58px;
height: 58px;
flex: 0 0 58px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.topbar-logo {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.toolbar {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
padding-top: 10px;
}
button {
padding:
8px 11px;
border:
1px solid #4b5059;
border-radius: 5px;
background: #30343b;
color: #eeeeee;
cursor: pointer;
font-size: 13px;
}
button:hover {
background: #3b4048;
}
button:active {
transform:
translateY(1px);
}
button.danger {
background: #522e2e;
border-color:
#754040;
}
button.danger:hover {
background: #673838;
}
/* =====================================================
I/O SNABBINMATNING
===================================================== */
.io-quick-add {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 18px;
}
.io-quick-add input {
width: 100%;
height: 30px;
padding:
5px 7px;
border:
1px solid #4b5059;
border-radius: 4px;
outline: none;
background:
#17191d;
color:
#eeeeee;
font-size: 11px;
}
.io-quick-add input:focus {
border-color:
#6588ad;
background:
#1c2025;
}
#ioAddressInput {
text-transform:
uppercase;
}
#btnOpenIOList {
width: 100%;
margin-top: 2px;
font-size: 11px;
}
/* =====================================================
SIDEBAR
===================================================== */
.sidebar {
position: fixed;
left: 0;
top: 74px;
bottom: 0;
width: 240px;
z-index: 500;
padding: 15px;
overflow-y: auto;
background: #22252a;
border-right:
1px solid #3a3e45;
}
.sidebar h2 {
margin:
0 0 8px;
font-size: 14px;
color: #d0d3d8;
}
.info-box {
min-height: 42px;
margin-bottom: 18px;
padding: 10px;
background: #17191d;
border:
1px solid #383c43;
border-radius: 5px;
color: #b8bcc3;
font-size: 13px;
line-height: 1.5;
}
.instructions {
margin-top: 25px;
}
.instructions p {
margin:
0 0 14px;
color: #a8acb4;
font-size: 12px;
line-height: 1.45;
}
/* =====================================================
WORKSPACE
===================================================== */
.workspace {
position: fixed;
left: 240px;
right: 0;
top: 74px;
bottom: 0;
overflow: hidden;
cursor: grab;
background-color: #15171a;
background-image:
linear-gradient(
rgba(255,255,255,0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,0.035) 1px,
transparent 1px
);
background-size:
25px 25px;
}
.workspace.panning {
cursor: grabbing;
}
/* =====================================================
CANVAS
===================================================== */
.canvas {
position: absolute;
left: 0;
top: 0;
width: 6000px;
height: 6000px;
transform-origin:
0 0;
}
/* =====================================================
SVG
===================================================== */
.connections {
position: absolute;
left: 0;
top: 0;
width: 6000px;
height: 6000px;
overflow: visible;
pointer-events: none;
z-index: 1;
}
.connection {
stroke: #eeeeee;
stroke-width: 2;
fill: none;
}
.branch-line {
stroke: #eeeeee;
stroke-width: 2;
fill: none;
}
.parallel-line {
stroke: #eeeeee;
stroke-width: 2;
fill: none;
}
.reconnect-line {
stroke: #eeeeee;
stroke-width: 2;
fill: none;
}
/* =====================================================
OBJEKT
===================================================== */
.sequence-object {
position: absolute;
z-index: 10;
user-select: none;
cursor: grab;
}
.sequence-object.dragging {
cursor: grabbing;
opacity: 0.85;
}
.sequence-object.selected {
filter:
drop-shadow(
0 0 5px rgba(80,160,255,0.9)
);
}
.sequence-object.build-point {
filter:
drop-shadow(
0 0 9px rgba(80,200,120,1)
);
}
.sequence-object.reconnect-target {
animation:
reconnectPulse
1s
infinite;
}
@keyframes reconnectPulse {
0% {
filter:
drop-shadow(
0 0 3px rgba(80,170,255,0.5)
);
}
50% {
filter:
drop-shadow(
0 0 12px rgba(80,170,255,1)
);
}
100% {
filter:
drop-shadow(
0 0 3px rgba(80,170,255,0.5)
);
}
}
.sequence-object.warning-flash,
.io-list-row.warning-flash {
animation:
warningFlash
0.65s
ease-in-out
4;
}
@keyframes warningFlash {
0% {
filter:
drop-shadow(
0 0 3px rgba(255,70,70,0.45)
);
}
50% {
filter:
drop-shadow(
0 0 15px rgba(255,70,70,1)
);
}
100% {
filter:
drop-shadow(
0 0 3px rgba(255,70,70,0.45)
);
}
}
/* =====================================================
UTGÅNGSVISNING PÅ STÄNGD HÄNDELSE
===================================================== */
.step-output-preview {
display:
flex;
align-items:
center;
justify-content:
space-evenly;
gap:
14px;
min-height: 18px;
padding:
2px 10px
5px 10px;
color:
#aeb4bd;
font-size:
10px;
line-height:
1.2;
text-align:
center;
white-space:
pre-wrap;
}
.step-output-preview:empty {
display: none;
}
/*
När Händelsen redigeras syns det riktiga
utgångsfältet i stället.
*/
.step.editing
.step-output-preview {
display:
none;
}
/* =====================================================
HÄNDELSE
===================================================== */
.step {
width: 240px;
min-height: 66px;
height: auto;
display: flex;
align-items: stretch;
background: #292d33;
border:
2px solid #eeeeee;
border-radius: 2px;
overflow: hidden;
}
.step.start {
border-color: #78c878;
}
.step-memory {
width: 65px;
min-width: 65px;
flex-shrink: 0;
border: none;
border-right:
2px solid #eeeeee;
outline: none;
background: #1f2227;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
}
.step-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/*
Händelsetexten växer bara
när texten faktiskt behöver
mer utrymme.
*/
.step-event {
flex:
0 0 auto;
min-height: 36px;
height: auto;
padding: 10px;
outline: none;
color: #eeeeee;
font-size: 14px;
line-height: 1.3;
overflow-wrap: break-word;
word-break: normal;
white-space: pre-wrap;
cursor: text;
}
.step-event:focus {
background: #30353d;
}
/* =====================================================
HÄNDELSEINSTÄLLNINGAR
Dolda tills vanlig händelse redigeras.
===================================================== */
.step-settings {
display: none;
flex-direction: column;
gap: 4px;
padding:
4px 6px;
border-top:
1px solid #4a4f57;
background:
#202329;
}
/*
Vanlig händelse:
visa menyn när JS sätter .editing
*/
.step.editing .step-settings {
display: flex;
}
/*
START / M0:
Startsteget ska ALDRIG visa
utgång, timer eller räknare.
*/
.step.start .step-settings,
.step.start.editing .step-settings {
display: none !important;
}
.step-setting-row {
display: flex;
align-items: center;
gap: 5px;
}
.step-setting-label {
width: 50px;
flex-shrink: 0;
color: #9298a1;
font-size: 9px;
}
.step-setting-input {
flex: 1;
min-width: 0;
height: 24px;
padding:
3px 5px;
border:
1px solid #4c5159;
border-radius: 3px;
outline: none;
background:
#17191d;
color:
#eeeeee;
font-size: 10px;
}
.step-setting-input:focus {
border-color:
#6588ad;
background:
#1c2025;
}
.step-small-input {
width: 55px;
flex: none;
}
.step-setting-hint {
color: #707680;
font-size: 9px;
white-space: nowrap;
}
/* =====================================================
TIMER / RÄKNARE - RADERINGSKNAPP
===================================================== */
.step-timer-item,
.step-counter-item {
position: relative;
}
/*
Gör första raden lite kompaktare
så T/C + värde + X faktiskt får plats.
*/
.step-timer-item > .step-setting-row:first-child,
.step-counter-item > .step-setting-row:first-child {
gap: 3px;
}
/*
Etiketten behöver vara smalare
just på T/C-raderna.
*/
.step-timer-item .step-setting-label,
.step-counter-item .step-setting-label {
width: 38px;
}
/*
T/C-adress och preset.
*/
.step-timer-item .step-small-input,
.step-counter-item .step-small-input {
width: 38px;
}
/*
Lilla timertexten, t.ex. 5 s.
*/
.step-timer-item .step-setting-hint {
flex: 1;
min-width: 0;
text-align: center;
font-size: 8px;
}
/*
Litet rött X längst till höger.
*/
.step-remove-function {
width: 20px;
min-width: 20px;
height: 22px;
flex:
0 0 20px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid #6a4141;
border-radius: 3px;
background:
#472b2b;
color:
#ffb1b1;
font-size: 13px;
line-height: 1;
cursor: pointer;
}
.step-remove-function:hover {
background:
#603535;
}
/* =====================================================
ÖVERGÅNG
===================================================== */
.transition {
width: 220px;
min-height: 46px;
height: auto;
display: flex;
align-items: stretch;
justify-content: center;
background: #292d33;
border:
2px solid #eeeeee;
border-radius: 2px;
overflow: visible;
}
.transition-editor {
width: 100%;
display: flex;
flex-direction: column;
gap: 5px;
padding: 6px;
background:
#292d33;
border-radius: 2px;
}
.transition-description {
width: 100%;
height: 26px;
padding:
4px 7px;
border:
1px solid #4b5059;
border-radius: 3px;
outline: none;
background:
#202329;
color:
#d8dbe0;
text-align:
center;
font-size:
11px;
}
.transition-description::placeholder {
color:
#696f78;
}
.transition-description:focus {
background:
#272b31;
}
.transition-condition-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.transition-condition-row {
display: flex;
align-items: center;
gap: 4px;
}
.transition-sensor {
width: 68px;
height: 27px;
padding:
4px 6px;
border:
1px solid #4b5059;
border-radius: 3px;
outline: none;
background:
#1d2025;
color:
#ffffff;
text-align:
center;
font-size:
11px;
font-weight:
bold;
text-transform:
uppercase;
}
.transition-state {
flex: 1;
min-width: 105px;
height: 27px;
padding:
3px 5px;
border:
1px solid #4b5059;
border-radius: 3px;
outline: none;
background:
#1d2025;
color:
#eeeeee;
font-size: 11px;
}
.transition-remove {
width: 25px;
height: 27px;
padding: 0;
border:
1px solid #6a4141;
background:
#472b2b;
color:
#ffb1b1;
font-size: 14px;
}
.transition-remove:hover {
background:
#603535;
}
.transition-logic-row {
display: flex;
justify-content: center;
}
.transition-logic {
width: 78px;
height: 24px;
padding:
2px 4px;
border:
1px solid #4b5059;
border-radius: 3px;
outline: none;
background:
#202329;
color:
#f0c27b;
text-align:
center;
font-size: 10px;
font-weight: bold;
}
.transition-add {
width: 100%;
padding: 5px;
border-style: dashed;
font-size: 10px;
}
/* =====================================================
TOM ARBETSYTA
===================================================== */
.empty-message {
position: absolute;
left: 650px;
top: 70px;
color: #686d75;
font-size: 14px;
pointer-events: none;
}
/* =====================================================
ZOOM
===================================================== */
.zoom-display {
position: fixed;
right: 15px;
bottom: 15px;
z-index: 1000;
padding:
7px 11px;
background: #24272d;
border:
1px solid #3a3e46;
border-radius: 5px;
color: #aeb2b9;
font-size: 12px;
}
/* =====================================================
LADDER PANEL
===================================================== */
#ladderPanel {
position: fixed;
left: 240px;
right: 0;
top: 74px;
bottom: 0;
z-index: 2000;
display: none;
flex-direction: column;
background:
#f3f3f3;
color:
#111111;
}
#ladderPanel.open {
display: flex;
}
.ladder-header {
height: 66px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding:
10px 18px;
background:
#24272d;
color:
#eeeeee;
border-bottom:
1px solid #444950;
}
.ladder-header h2 {
margin: 0;
font-size: 18px;
}
.ladder-header span {
display: block;
margin-top: 3px;
color:
#969ba4;
font-size: 11px;
}
.ladder-content {
flex: 1;
overflow: auto;
padding:
26px 35px 80px;
background:
#f7f7f7;
color:
#111111;
}
/* =====================================================
SPRÅKVÄXLARE
===================================================== */
.language-toggle {
position: fixed;
top: 12px;
right: 12px;
z-index: 100000;
padding: 6px 9px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 4px;
background: rgba(17, 17, 17, 0.88);
color: #eeeeee;
font: 700 11px Arial, Helvetica, sans-serif;
letter-spacing: 0.04em;
cursor: pointer;
backdrop-filter: blur(4px);
}
.language-toggle:hover,
.language-toggle:focus-visible {
border-color: #d9822b;
outline: none;
}
.language-toggle .language-option,
.language-toggle .language-separator {
color: #d9dde3;
}
.language-toggle[data-language="sv"] .language-option-sv,
.language-toggle[data-language="en"] .language-option-en {
color: #f0a340;
}
.toolbar .language-toggle {
position: static;
z-index: auto;
flex: 0 0 auto;
margin-left: 2px;
background: #30343b;
backdrop-filter: none;
}
/* =====================================================
LADDER LADDAR
===================================================== */
.ladder-loading {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: #777777;
font-size: 13px;
}
.ladder-loading-spinner {
width: 28px;
height: 28px;
box-sizing: border-box;
border: 3px solid rgba(17, 17, 17, 0.18);
border-top-color: #111111;
border-radius: 50%;
animation: ladder-loading-spin 0.8s linear infinite;
}
@keyframes ladder-loading-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.ladder-loading-spinner {
animation-duration: 1.6s;
}
}
/* =====================================================
LADDER NETWORK
===================================================== */
.ladder-network {
position: relative;
min-width: 900px;
margin-bottom: 26px;
padding:
8px 10px 16px;
background:
#ffffff;
border-bottom:
1px solid #cccccc;
}
.ladder-network-title {
margin-bottom: 12px;
color:
#222222;
font-size: 12px;
font-weight: bold;
}
.ladder-network-description {
margin-left: 8px;
color:
#777777;
font-weight: normal;
}
/* =====================================================
LADDER RUNG
===================================================== */
.ladder-rung {
position: relative;
min-height: 62px;
display: flex;
align-items: center;
}
.ladder-rung + .ladder-rung {
margin-top: 6px;
}
.ladder-left-rail {
width: 3px;
align-self: stretch;
min-height: 62px;
flex-shrink: 0;
background:
#111111;
}
.ladder-wire {
height: 2px;
flex: 1;
min-width: 25px;
background:
#111111;
}
.ladder-wire-short {
width: 25px;
height: 2px;
flex-shrink: 0;
background:
#111111;
}
/* =====================================================
LADDER KONTAKT
===================================================== */
.ladder-contact {
position: relative;
width: 72px;
height: 42px;
flex-shrink: 0;
}
.ladder-contact::before,
.ladder-contact::after {
content: "";
position: absolute;
top: 20px;
width: 20px;
height: 2px;
background:
#111111;
}
.ladder-contact::before {
left: 0;
}
.ladder-contact::after {
right: 0;
}
.ladder-contact-bars {
position: absolute;
left: 22px;
top: 6px;
width: 28px;
height: 29px;
border-left:
2px solid #111111;
border-right:
2px solid #111111;
}
.ladder-contact.nc
.ladder-contact-bars::after {
content: "";
position: absolute;
left: 12px;
top: -4px;
width: 2px;
height: 37px;
background:
#111111;
transform:
rotate(35deg);
}
.ladder-contact-label {
position: absolute;
left: 0;
right: 0;
top: -13px;
text-align:
center;
font-family:
Consolas,
monospace;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
color:
#111111;
}
/* =====================================================
LADDER COIL
===================================================== */
.ladder-coil {
position: relative;
width: 92px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-family:
Consolas,
monospace;
font-size: 12px;
font-weight: bold;
color:
#111111;
}
.instruction-ladder-coil::before {
content: "(";
position: absolute;
left: 8px;
top: -7px;
font-size: 42px;
font-weight: normal;
}
.instruction-ladder-coil::after {
content: ")";
position: absolute;
right: 8px;
top: -7px;
font-size: 42px;
font-weight: normal;
}
.ladder-coil-mode {
margin-left: 4px;
font-size: 10px;
}
/* =====================================================
LADDER PARALLELLA VÄGAR
===================================================== */
.ladder-parallel {
position: relative;
flex: 1;
min-width: 230px;
border-left:
2px solid #111111;
border-right:
2px solid #111111;
}
.ladder-parallel-path {
min-height: 48px;
display: flex;
align-items: center;
padding:
2px 10px;
}
.ladder-parallel-path::before {
content: "";
width: 15px;
height: 2px;
flex-shrink: 0;
background:
#111111;
}
.ladder-parallel-path::after {
content: "";
height: 2px;
flex: 1;
min-width: 15px;
background:
#111111;
}
/* =====================================================
LADDER TIMER / RÄKNARE
===================================================== */
.ladder-function-block {
position: relative;
width: 150px;
min-height: 105px;
flex-shrink: 0;
border:
2px solid #111111;
background:
#ffffff;
color:
#111111;
font-family:
Consolas,
monospace;
font-size: 11px;
}
.ladder-function-title {
padding:
5px 6px;
border-bottom:
1px solid #111111;
text-align: center;
font-weight: bold;
}
.ladder-function-body {
padding:
7px 8px;
display: grid;
grid-template-columns:
36px 1fr;
gap:
5px 8px;
}
.ladder-function-pin {
font-weight: bold;
}
.ladder-function-value {
text-align: right;
}
.ladder-function-hint {
margin-top: 4px;
color:
#777777;
font-family:
Arial,
sans-serif;
font-size: 9px;
text-align: center;
}
/* =====================================================
LADDER TOM
===================================================== */
.ladder-empty {
padding: 35px;
color:
#777777;
text-align: center;
font-size: 13px;
}
/* =====================================================
PARALLELLA SET-SPOLAR I LADDER
===================================================== */
.ladder-parallel-coils {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: auto;
min-width: 150px;
padding-left: 18px;
}
/*
Lodrätt grenlinje
*/
.ladder-parallel-coils::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 2px;
background:
currentColor;
}
/*
Varje SET-rad
*/
.ladder-parallel-coil-row {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
min-height: 30px;
}
/*
Kort vågrätt streck
från den lodräta grenen
till respektive SET.
*/
.ladder-parallel-coil-row::before {
content: "";
position: absolute;
left: -18px;
top: 50%;
width: 18px;
height: 2px;
background:
currentColor;
transform:
translateY(-50%);
}
.ladder-parallel-coil-row .ladder-coil {
margin-left: auto;
}
/* =====================================================
VARNINGAR
===================================================== */
.warning-button {
min-width: 58px;
background:
#4a4025;
border-color:
#796936;
color:
#ffd86b;
font-weight:
bold;
}
.warning-button:hover {
background:
#5b4e2b;
}
/* =====================================================
VARNINGSPANEL
===================================================== */
.warning-panel {
position: fixed;
right: 15px;
top: 84px;
width: 420px;
max-height:
calc(100vh - 100px);
z-index: 3000;
display: none;
flex-direction: column;
background:
#22252a;
border:
1px solid #454a52;
border-radius:
7px;
box-shadow:
0 8px 30px
rgba(0, 0, 0, 0.45);
overflow: hidden;
}
.warning-panel.open {
display: flex;
}
.warning-panel-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content:
space-between;
gap: 15px;
padding:
12px 14px;
background:
#292d33;
border-bottom:
1px solid #41464e;
}
.warning-panel-header h2 {
margin: 0;
color:
#eeeeee;
font-size: 16px;
}
.warning-panel-header span {
display: block;
margin-top: 3px;
color:
#9da2aa;
font-size: 11px;
}
.warning-list {
overflow-y: auto;
padding: 12px;
min-height: 100px;
}
.warning-empty {
padding:
22px 10px;
color:
#8f959d;
text-align: center;
font-size: 13px;
}
/* =====================================================
VARNING I LISTAN
===================================================== */
.warning-item {
padding: 11px;
margin-bottom: 8px;
background:
#292d33;
border:
1px solid #41464e;
border-radius: 5px;
}
.warning-item-text {
color:
#e7e7e7;
font-size: 13px;
line-height: 1.4;
}
.warning-item-actions {
display: flex;
gap: 6px;
margin-top: 9px;
}
.warning-item-actions button {
padding:
5px 8px;
font-size: 11px;
}
.warning-item-actions button:last-child {
margin-left: auto;
color:
#b9bdc4;
}
/* =====================================================
I/O-LISTA
===================================================== */
.io-list-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 30px;
background:
rgba(0, 0, 0, 0.58);
}
.io-list-overlay.open {
display: flex;
}
.io-list-window {
width: min(
620px,
90vw
);
max-height: 80vh;
display: flex;
flex-direction: column;
padding: 14px;
border:
1px solid #555b65;
border-radius: 7px;
background:
#202328;
box-shadow:
0 12px 35px
rgba(0, 0, 0, 0.45);
}
.io-list-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.io-list-header h2 {
margin: 0;
font-size: 16px;
color:
#eeeeee;
}
.io-list-close {
width: 28px;
height: 28px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid #6a4141;
border-radius: 4px;
background:
#472b2b;
color:
#ffb1b1;
cursor: pointer;
}
.io-list-close:hover {
background:
#603535;
}
.io-list-table-header,
.io-list-row {
display: grid;
grid-template-columns:
110px
minmax(0, 1fr)
28px;
gap: 7px;
align-items: center;
}
.io-list-table-header {
padding:
0 3px
5px 3px;
color:
#aeb4bd;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
.io-list-rows {
display: flex;
flex-direction: column;
gap: 5px;
overflow-y: auto;
min-height: 40px;
padding-right: 3px;
}
.io-list-row input {
width: 100%;
height: 29px;
padding:
4px 7px;
border:
1px solid #4b5059;
border-radius: 4px;
outline: none;
background:
#17191d;
color:
#eeeeee;
font-size: 11px;
}
.io-list-row input:focus {
border-color:
#6588ad;
background:
#1c2025;
}
.io-list-address {
text-transform:
uppercase;
}
.io-list-remove {
width: 26px;
height: 26px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid #6a4141;
border-radius: 3px;
background:
#472b2b;
color:
#ffb1b1;
cursor: pointer;
}
.io-list-remove:hover {
background:
#603535;
}
.io-list-add {
margin-top: 10px;
align-self: flex-start;
font-size: 11px;
}
/* =====================================================
I/O-BESKRIVNING I LADDER
===================================================== */
.ladder-io-description {
position: absolute;
left: 50%;
bottom: 100%;
transform:
translateX(-50%);
margin-bottom: 12px;
max-width: 150px;
color:
#555555;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 1.15;
text-align: center;
white-space: nowrap;
pointer-events: none;
}
/* =====================================================
I/O-BESKRIVNING - TON / CNT
===================================================== */
.ladder-function-description {
margin-top: 3px;
color:
#666666;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 9px;
font-weight: normal;
line-height: 1.15;
text-align: center;
white-space: normal;
}
/* =====================================================
RESPONSIV LAYOUT
===================================================== */
/* =====================================================
KOMPAKT MENY
===================================================== */
.compact-menu {
display: none;
position: relative;
}
.compact-menu-button {
min-width: 42px;
font-size: 18px;
line-height: 1;
}
.compact-menu-dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 180px;
padding: 8px;
z-index: 3000;
background: #24272d;
border:
1px solid #3b3f46;
border-radius: 6px;
box-shadow:
0 6px 18px
rgba(0, 0, 0, 0.35);
}
.compact-menu-dropdown.open {
display: flex;
flex-direction: column;
gap: 6px;
}
.compact-menu-dropdown button {
width: 100%;
text-align: left;
}
/* =====================================================
NORMALT LÄGE
===================================================== */
/*
Topbaren är 90 px i normalläge.
Sidebar, arbetsyta och Ladder börjar
direkt under den.
*/
.sidebar,
.workspace {
top: 90px;
}
#ladderPanel {
top: var(--topbar-height, 90px);
}
/*
Ladder behåller sidebar i normalläge.
*/
#ladderPanel {
left: 240px;
}
/* =====================================================
SMALT LÄGE
===================================================== */
@media (max-width: 1200px) {
/* =============================================
TOPBAR
============================================= */
/*
Topbaren får växa om knapparna
behöver flera rader.
*/
.topbar {
height: auto;
min-height: 110px;
align-items: flex-start;
padding:
10px 12px;
}
.title {
flex-shrink: 0;
}
.topbar-logo-frame {
width: 48px;
height: 48px;
flex-basis: 48px;
padding: 4px;
}
.toolbar {
padding-top: 5px;
}
/*
Funktioner som flyttas till ☰.
*/
#btnStep,
#btnTransition,
#btnLadder,
#btnClear,
#btnSave,
#btnLoad,
#btnImage {
display: none;
}
/*
Viktigaste funktionerna ligger kvar.
*/
#btnAddSequence,
#btnAlternative,
#btnParallel,
#btnReconnect,
#btnLoop,
#btnCenterView,
#btnWarnings {
display: inline-block;
}
.compact-menu {
display: block;
}
/* =============================================
SIDEBAR / ARBETSYTA
============================================= */
.sidebar {
top: var(--topbar-height, 110px);
width: 190px;
}
.workspace {
top: var(--topbar-height, 110px);
left: 190px;
}
/*
När Ladder öppnas:
dölj sidebaren helt.
*/
body.ladder-open .sidebar {
display: none;
}
/* =============================================
LADDER - HELA BREDDEN
============================================= */
#ladderPanel {
top: var(--topbar-height, 110px);
}
/*
När Ladder är öppen i smalt läge
ska panelen täcka hela webbläsarfönstret.
*/
body.ladder-open #ladderPanel {
left: 0;
right: auto;
width: 100vw;
max-width: 100vw;
box-sizing: border-box;
}
/*
Även själva innehållsytan ska använda
hela Ladder-panelens bredd.
*/
body.ladder-open .ladder-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/*
Varje nätverk använder hela
den tillgängliga bredden.
*/
body.ladder-open .ladder-network {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* =============================================
LADDER PANEL
============================================= */
#ladderPanel {
top:
var(
--topbar-height,
110px
);
left: 0;
}
/* =============================================
LADDER HEADER
============================================= */
.ladder-header {
height: 48px;
padding:
5px 8px;
}
.ladder-header h2 {
font-size: 14px;
}
.ladder-header span {
font-size: 9px;
}
/* =============================================
LADDER INNEHÅLL
============================================= */
.ladder-content {
padding:
8px 8px 40px;
}
/*
Nätverket använder tillgänglig bredd
men får aldrig skapa onödig
horisontell scroll.
*/
.ladder-network {
width: 100%;
min-width: 0;
margin-bottom: 12px;
padding:
5px 6px 8px;
}
.ladder-network-title {
margin-bottom: 6px;
font-size: 10px;
}
/* =============================================
LADDER RADER
============================================= */
.ladder-rung {
width: 100%;
min-width: 0;
min-height: 42px;
}
.ladder-rung + .ladder-rung {
margin-top: 3px;
}
.ladder-left-rail {
min-height: 42px;
}
/*
Ledningar får dela på kvarvarande
utrymme och får krympa ordentligt.
*/
.ladder-wire {
flex:
1 1 0;
min-width: 4px;
}
.ladder-wire-short {
width: 8px;
}
/* =============================================
KONTAKTER
============================================= */
.ladder-contact {
width: 52px;
height: 38px;
}
.ladder-contact::before,
.ladder-contact::after {
width: 15px;
}
.ladder-contact-bars {
left: 17px;
width: 18px;
}
.ladder-contact-label {
font-size: 10px;
}
.ladder-io-description {
max-width: 105px;
margin-bottom: 8px;
font-size: 8px;
}
/* =============================================
SPOLAR
============================================= */
.ladder-coil {
width: 68px;
font-size: 10px;
}
.ladder-coil::before {
left: 5px;
}
.ladder-coil::after {
right: 5px;
}
.ladder-coil-mode {
margin-left: 3px;
font-size: 8px;
}
/* =============================================
PARALLELLA VÄGAR
============================================= */
.ladder-parallel {
flex:
1 1 0;
min-width: 0;
}
.ladder-parallel-path {
min-width: 0;
min-height: 40px;
padding:
2px 4px;
}
.ladder-parallel-path::before {
width: 7px;
}
.ladder-parallel-path::after {
min-width: 4px;
}
/* =============================================
FLERA SPOLAR
============================================= */
.ladder-parallel-coils {
min-width: 90px;
padding-left: 10px;
}
.ladder-parallel-coil-row {
min-height: 27px;
}
.ladder-parallel-coil-row::before {
left: -10px;
width: 10px;
}
/* =============================================
TIMER / RÄKNARE
============================================= */
.ladder-function-block {
width: 115px;
min-height: 88px;
font-size: 9px;
}
.ladder-function-title {
padding:
4px 5px;
}
.ladder-function-body {
padding:
5px 6px;
grid-template-columns:
28px 1fr;
gap:
4px 5px;
}
.ladder-function-hint,
.ladder-function-description {
font-size: 8px;
}
}
/* =====================================================
LADDER - ALLTID UNDER HELA TOPBAREN
===================================================== */
/*
Ladder ska alltid börja efter topbarens
VERKLIGA nederkant.
Detta gäller både normalt och smalt läge.
*/
#ladderPanel {
top: var(--topbar-height, 90px);
}
/* Smalt läge */
@media (max-width: 1200px) {
#ladderPanel,
body.ladder-open #ladderPanel {
top: var(--topbar-height, 110px);
}
}
/* =====================================================
INSTRUKTIONER
===================================================== */
.instructions-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
background: #17191d;
color: #f2f2f2;
}
.instructions-overlay.open {
display: block;
}
.instructions-window {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #1d2025;
}
/* =====================================================
HEADER
===================================================== */
.instructions-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 24px;
background: #24272d;
border-bottom:
1px solid #3b3f46;
}
.instructions-brand {
display: flex;
align-items: baseline;
gap: 12px;
}
.instructions-brand h1 {
margin: 0;
font-size: 22px;
line-height: 1;
}
.instructions-brand span {
color: #aeb4bd;
font-size: 13px;
}
.instructions-close {
flex-shrink: 0;
}
/* =====================================================
NAVIGATION
===================================================== */
.instructions-nav {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 7px;
padding: 9px 24px;
overflow-x: auto;
background: #202329;
border-bottom:
1px solid #353940;
}
.instructions-nav button {
flex-shrink: 0;
padding: 7px 12px;
font-size: 12px;
}
/* =====================================================
INNEHÅLL
===================================================== */
.instructions-content {
flex: 1;
overflow-y: auto;
scroll-behavior: smooth;
padding:
30px
max(
30px,
calc((100vw - 1050px) / 2)
)
80px;
}
.instruction-section {
min-height: 300px;
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 24px;
padding: 24px;
scroll-margin-top: 20px;
background: #24272d;
border:
1px solid #3b3f46;
border-radius: 8px;
}
.instruction-section h2 {
margin:
1px
0
7px;
font-size: 20px;
}
.instruction-section p {
margin: 0;
color: #b8bdc5;
font-size: 13px;
}
.instruction-number {
width: 34px;
height: 34px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #343941;
font-size: 15px;
font-weight: bold;
}
/* =====================================================
FOOTER
===================================================== */
.instructions-footer {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: baseline;
gap: 8px;
padding: 8px 16px;
color: #8e949d;
background: #1a1c20;
border-top:
1px solid #30343a;
font-size: 10px;
}
.instructions-footer strong {
color: #c6cad0;
letter-spacing: 0.5px;
}
/* =====================================================
INSTRUKTIONER - SMALT LÄGE
===================================================== */
@media (max-width: 700px) {
.instructions-header {
padding:
12px
14px;
}
.instructions-brand {
display: block;
}
.instructions-brand h1 {
font-size: 18px;
}
.instructions-brand span {
display: block;
margin-top: 4px;
font-size: 10px;
}
.instructions-close {
padding:
7px
9px;
font-size: 11px;
}
.instructions-nav {
padding:
7px
10px;
}
.instructions-content {
padding:
14px
10px
60px;
}
.instruction-section {
min-height: 240px;
gap: 12px;
padding: 16px;
}
.instruction-number {
width: 28px;
height: 28px;
font-size: 12px;
}
.instruction-section h2 {
font-size: 17px;
}
.instructions-footer span {
display: none;
}
}
/* =====================================================
INSTRUKTIONER - KOM IGÅNG
===================================================== */
.instruction-main {
width: 100%;
min-width: 0;
}
.instruction-section-heading {
margin-bottom: 24px;
}
/* =====================================================
VISUELL SEKVENS
===================================================== */
.instruction-sequence-example {
width: 100%;
max-width: 620px;
margin:
10px
auto
30px;
}
.instruction-flow-row {
display: grid;
grid-template-columns:
270px
1fr;
align-items: center;
gap: 32px;
}
.instruction-flow-object {
display: flex;
justify-content: center;
}
/* START */
.guide-start {
width: 210px;
min-height: 54px;
display: grid;
grid-template-columns:
48px
1fr;
align-items: center;
overflow: hidden;
background: #343941;
border:
2px solid #8c939d;
border-radius: 5px;
box-sizing: border-box;
}
/* HÄNDELSE */
.guide-step {
width: 230px;
min-height: 62px;
display: grid;
grid-template-columns:
48px
1fr;
align-items: center;
overflow: hidden;
background: #30343a;
border:
2px solid #a7adb5;
border-radius: 4px;
box-sizing: border-box;
}
/* ÖVERGÅNG */
.guide-transition {
width: 210px;
min-height: 44px;
display: grid;
grid-template-columns:
48px
1fr;
align-items: center;
overflow: hidden;
background: #292d32;
border:
1px solid #858b93;
border-radius: 3px;
box-sizing: border-box;
}
.guide-address {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-right:
1px solid #555b64;
color: #dfe2e6;
font-size: 12px;
font-weight: bold;
box-sizing: border-box;
}
.guide-text {
padding:
8px
12px;
color: #f2f2f2;
font-size: 13px;
}
/* LINJE MELLAN OBJEKT */
.guide-flow-line {
width: 270px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #9da3ac;
font-size: 18px;
}
.guide-flow-line::before {
content: "";
position: absolute;
}
.instruction-explanation {
display: flex;
flex-direction: column;
gap: 3px;
}
.instruction-explanation strong {
color: #f0f1f3;
font-size: 11px;
letter-spacing: 0.8px;
}
.instruction-explanation span {
color: #aeb4bd;
font-size: 12px;
}
/* =====================================================
LÄGG TILL SEKVENS
===================================================== */
.instruction-add-sequence {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin:
10px
0
30px;
padding: 18px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.instruction-add-sequence button {
pointer-events: none;
}
.instruction-add-arrow {
color: #8f969f;
font-size: 18px;
}
.instruction-created-pair {
display: flex;
align-items: center;
gap: 8px;
color: #aeb4bd;
font-size: 11px;
}
.instruction-created-step,
.instruction-created-transition {
padding:
5px
9px;
color: #e3e5e8;
border:
1px solid #555b64;
border-radius: 3px;
}
/* =====================================================
3 SNABBA STEG
===================================================== */
.instruction-quick-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding-top: 4px;
}
.instruction-quick-step {
min-width: 130px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
text-align: center;
color: #aeb4bd;
font-size: 11px;
}
.instruction-quick-step strong {
color: #f0f1f3;
}
.quick-step-number {
width: 23px;
height: 23px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #363b43;
border-radius: 50%;
color: #ffffff;
font-size: 11px;
font-weight: bold;
}
.quick-step-arrow {
color: #707780;
font-size: 17px;
}
/* =====================================================
KOM IGÅNG - SMALT LÄGE
===================================================== */
@media (max-width: 700px) {
.instruction-flow-row {
grid-template-columns:
1fr;
gap: 8px;
}
.instruction-flow-object {
justify-content: flex-start;
}
.instruction-explanation {
margin-left: 4px;
}
.guide-flow-line {
width: 230px;
height: 30px;
}
.instruction-add-sequence {
justify-content: flex-start;
padding: 12px;
}
.instruction-quick-steps {
align-items: stretch;
flex-direction: column;
gap: 8px;
}
.instruction-quick-step {
min-width: 0;
justify-content: flex-start;
text-align: left;
}
.quick-step-arrow {
margin-left: 7px;
transform:
rotate(90deg);
}
}
/* =====================================================
INSTRUKTIONER - BYGGA
===================================================== */
.build-guide-card {
display: grid;
grid-template-columns:
minmax(250px, 0.8fr)
1.2fr;
align-items: center;
gap: 28px;
margin-bottom: 12px;
padding: 18px 20px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.build-guide-visual {
display: flex;
justify-content: center;
}
.guide-step-large {
width: 230px;
}
.guide-transition-large {
width: 210px;
}
.build-guide-info {
display: flex;
flex-direction: column;
gap: 10px;
}
.build-guide-title {
display: flex;
align-items: center;
gap: 10px;
}
.build-guide-title > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.build-guide-title strong {
font-size: 13px;
}
.build-guide-title div span {
color: #aeb4bd;
font-size: 11px;
}
.build-guide-letter {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #383d45;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
}
.build-guide-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.build-guide-tags span {
padding:
4px
7px;
color: #b9bec6;
background: #2d3137;
border:
1px solid #42474f;
border-radius: 3px;
font-size: 9px;
}
/* =====================================================
H → X → H
===================================================== */
.build-rule {
margin:
22px
0;
padding: 16px;
text-align: center;
background: #1f2227;
border:
1px solid #343940;
border-radius: 6px;
}
.build-rule-label {
display: block;
margin-bottom: 12px;
color: #8f969f;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1px;
}
.build-rule-flow {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.build-rule-h,
.build-rule-x {
padding:
7px
11px;
border-radius: 3px;
font-size: 10px;
font-weight: bold;
}
.build-rule-h {
background: #343941;
border:
1px solid #777e87;
}
.build-rule-x {
background: #292d32;
border:
1px solid #555b63;
}
.build-rule-arrow {
color: #747b84;
}
/* =====================================================
BYGGKNAPPAR
===================================================== */
.build-buttons-guide {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 9px;
margin-bottom: 22px;
}
.build-button-example {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 13px 8px;
text-align: center;
background: #202329;
border:
1px solid #353a42;
border-radius: 5px;
}
.build-button-example button {
pointer-events: none;
}
.build-button-example span {
color: #9fa5ae;
font-size: 9px;
}
.build-button-primary {
border-color: #4c525b;
}
/* =====================================================
BYGGPUNKT
===================================================== */
.build-point-guide {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
padding: 18px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.build-point-example {
position: relative;
flex-shrink: 0;
}
.build-point-object {
width: 210px;
min-height: 52px;
display: grid;
grid-template-columns:
46px
1fr;
align-items: center;
background: #30343a;
border:
2px solid #d3d6da;
border-radius: 4px;
}
.build-point-object > span {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-right:
1px solid #555b64;
font-size: 11px;
}
.build-point-object strong {
padding: 8px 11px;
font-size: 11px;
}
.build-point-marker {
position: absolute;
right: -9px;
top: -9px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: #e3e5e8;
color: #202329;
border-radius: 50%;
font-size: 11px;
font-weight: bold;
}
.build-point-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.build-point-info strong {
font-size: 12px;
}
.build-point-info span {
color: #aeb4bd;
font-size: 11px;
}
/* =====================================================
BYGGA - SNABBREGEL
===================================================== */
.build-bottom-rule {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
color: #aeb4bd;
font-size: 10px;
}
.build-bottom-rule > span {
width: 21px;
height: 21px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #363b43;
border-radius: 50%;
color: #fff;
font-weight: bold;
}
.build-bottom-rule strong {
color: #747b84;
}
/* =====================================================
BYGGA - SMALT LÄGE
===================================================== */
@media (max-width: 700px) {
.build-guide-card {
grid-template-columns:
1fr;
gap: 12px;
padding: 14px;
}
.build-guide-visual {
justify-content: flex-start;
}
.build-buttons-guide {
grid-template-columns:
1fr;
}
.build-button-example {
align-items: flex-start;
text-align: left;
}
.build-point-guide {
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.build-point-object {
width: 200px;
}
.build-bottom-rule {
justify-content: flex-start;
}
}
/* =====================================================
INSTRUKTIONER - GRENAR
===================================================== */
.branch-type-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.branch-guide-card {
padding: 18px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.branch-guide-heading {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 18px;
}
.branch-guide-heading strong {
font-size: 13px;
}
.branch-guide-heading span {
color: #aeb4bd;
font-size: 10px;
}
/* =====================================================
GREN-DIAGRAM
===================================================== */
.branch-diagram {
display: flex;
flex-direction: column;
align-items: center;
min-height: 300px;
}
.branch-box {
min-width: 76px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
box-sizing: border-box;
color: #eef0f2;
background: #30343a;
border-radius: 3px;
font-size: 10px;
font-weight: bold;
}
.branch-h {
border:
2px solid #9ba1aa;
}
.branch-x {
height: 28px;
background: #292d32;
border:
1px solid #707780;
}
.branch-line-down {
width: 2px;
height: 30px;
flex-shrink: 0;
background: #858b93;
}
.branch-line-down.short {
height: 25px;
}
/* =====================================================
SJÄLVA DELNINGEN
===================================================== */
.branch-split {
position: relative;
width: 230px;
display: grid;
grid-template-columns:
1fr
1fr;
gap: 55px;
padding-top: 24px;
}
.branch-split::before {
content: "";
position: absolute;
top: 0;
left: 25%;
right: 25%;
height: 2px;
background: #858b93;
}
.branch-split::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 24px;
background: #858b93;
transform:
translateX(-50%);
}
.branch-path {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.branch-path::before {
content: "";
position: absolute;
top: -24px;
width: 2px;
height: 24px;
background: #858b93;
}
/* Dubbelstreck */
.branch-split-double::before {
height: 5px;
border-top:
2px solid #858b93;
border-bottom:
2px solid #858b93;
background: transparent;
}
/* =====================================================
ÅTERKOPPLING I EXEMPELDIAGRAM
===================================================== */
.branch-rejoin {
position: relative;
width: 115px;
height: 28px;
border-bottom:
2px solid #858b93;
}
.branch-rejoin::before,
.branch-rejoin::after {
content: "";
position: absolute;
bottom: -2px;
width: 2px;
height: 28px;
background: #858b93;
}
.branch-rejoin::before {
left: 0;
}
.branch-rejoin::after {
right: 0;
}
.branch-rejoin-double {
border-bottom:
5px double #858b93;
}
.branch-mini-rule {
margin-top: 8px;
text-align: center;
color: #9299a2;
font-size: 9px;
}
/* =====================================================
ALTERNATIV VS PARALLELL
===================================================== */
.branch-difference {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin-bottom: 16px;
padding: 12px;
background: #1f2227;
border:
1px solid #343940;
border-radius: 6px;
}
.branch-difference > div:not(
.branch-difference-arrow
) {
display: flex;
align-items: center;
gap: 7px;
}
.branch-difference strong {
font-size: 10px;
}
.branch-difference span:not(
.branch-symbol-single
):not(
.branch-symbol-double
) {
color: #9fa5ae;
font-size: 9px;
}
.branch-symbol-single,
.branch-symbol-double {
min-width: 30px;
color: #d8dbe0;
font-size: 20px;
text-align: center;
}
.branch-difference-arrow {
color: #676e77;
font-size: 16px;
}
/* =====================================================
KOPPLA GREN
===================================================== */
.branch-reconnect-guide {
display: grid;
grid-template-columns:
minmax(270px, 1fr)
1fr;
align-items: center;
gap: 28px;
margin-bottom: 14px;
padding: 18px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.branch-reconnect-visual {
display: flex;
justify-content: center;
gap: 48px;
}
.branch-reconnect-main,
.branch-reconnect-side {
display: flex;
flex-direction: column;
align-items: center;
}
.branch-reconnect-main-line {
width: 2px;
height: 45px;
background: #858b93;
}
.branch-reconnect-side {
padding-top: 30px;
}
.branch-reconnect-route {
margin-top: 10px;
color: #aeb4bd;
font-size: 28px;
}
.branch-reconnect-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.branch-reconnect-info button {
margin-bottom: 4px;
pointer-events: none;
}
.branch-reconnect-info strong {
font-size: 11px;
}
.branch-reconnect-info span {
color: #aeb4bd;
font-size: 10px;
}
/* =====================================================
BYGG I GREN
===================================================== */
.branch-build-rule {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
color: #aeb4bd;
font-size: 10px;
}
.branch-build-number {
width: 21px;
height: 21px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: #363b43;
border-radius: 50%;
font-weight: bold;
}
.branch-build-rule > strong {
color: #747b84;
}
/* =====================================================
BORTKOPPLAD GRENSTART / VARNING
===================================================== */
.branch-warning-guide {
display: grid;
grid-template-columns:
minmax(250px, 0.8fr)
1.2fr;
align-items: center;
gap: 26px;
padding: 18px;
background: #252329;
border:
1px solid #514750;
border-radius: 6px;
}
.branch-warning-visual {
display: flex;
justify-content: center;
}
.branch-warning-diagram {
position: relative;
display: flex;
align-items: center;
gap: 24px;
}
.branch-warning-main-line {
width: 48px;
height: 2px;
background: #858b93;
}
.branch-warning-broken {
position: relative;
display: flex;
align-items: center;
}
.branch-broken-mark {
position: absolute;
left: -20px;
color: #d6b8b8;
font-size: 18px;
font-weight: bold;
}
.branch-warning-info {
display: flex;
flex-direction: column;
gap: 9px;
}
.branch-warning-title {
display: flex;
align-items: center;
gap: 7px;
}
.branch-warning-title strong {
font-size: 12px;
}
.branch-warning-steps {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
color: #aeb4bd;
font-size: 9px;
}
.branch-warning-steps > span {
padding:
5px
8px;
background: #30343a;
border:
1px solid #464b53;
border-radius: 3px;
}
.branch-warning-show {
color: #f0f1f3 !important;
font-weight: bold;
}
.branch-warning-steps strong {
color: #747b84;
}
.branch-warning-info small {
color: #8f969f;
font-size: 9px;
}
/* =====================================================
TIPS
===================================================== */
.branch-bottom-tip {
margin-top: 12px;
text-align: center;
color: #9fa5ae;
font-size: 9px;
}
.branch-bottom-tip strong {
color: #d5d8dc;
}
/* =====================================================
GRENAR - SMALT LÄGE
===================================================== */
@media (max-width: 700px) {
.branch-type-grid {
grid-template-columns:
1fr;
}
.branch-difference {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.branch-difference-arrow {
display: none;
}
.branch-reconnect-guide {
grid-template-columns:
1fr;
gap: 16px;
}
.branch-reconnect-visual {
justify-content: flex-start;
}
.branch-warning-guide {
grid-template-columns:
1fr;
gap: 16px;
}
.branch-warning-visual {
justify-content: flex-start;
}
.branch-build-rule {
justify-content: flex-start;
}
}
/* =====================================================
INSTRUKTIONER - I/O
===================================================== */
/* =====================================================
ADRESSER
===================================================== */
.io-guide-addresses {
display: grid;
grid-template-columns:
repeat(5, minmax(90px, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.io-address-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 14px 8px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.io-address-letter {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #363b43;
border:
1px solid #555b64;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
}
.io-address-card strong {
font-size: 10px;
}
.io-address-card small {
color: #8f969f;
font-size: 9px;
}
.io-custom-address-tip {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 18px;
color: #9299a2;
font-size: 9px;
}
.io-custom-address-tip strong {
color: #c7cbd0;
}
/* =====================================================
I/O-LISTA
===================================================== */
.io-list-guide {
display: grid;
grid-template-columns:
minmax(280px, 0.9fr)
1.1fr;
align-items: center;
gap: 28px;
margin-bottom: 12px;
padding: 18px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.io-list-visual {
overflow: hidden;
border:
1px solid #4a5058;
border-radius: 5px;
background: #292d32;
}
.io-list-fake-header {
padding: 8px 10px;
background: #343941;
border-bottom:
1px solid #4a5058;
font-size: 10px;
}
.io-list-fake-row {
display: grid;
grid-template-columns:
70px
1fr;
border-bottom:
1px solid #3d4249;
font-size: 9px;
}
.io-list-fake-row span {
padding: 7px 9px;
}
.io-list-address {
border-right:
1px solid #3d4249;
font-weight: bold;
}
.io-list-description {
color: #b8bdc5;
}
.io-list-fake-add {
padding: 7px 9px;
color: #9299a2;
font-size: 9px;
}
.io-list-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.io-list-info > strong {
font-size: 12px;
}
.io-list-info > span {
color: #aeb4bd;
font-size: 10px;
}
.io-list-info small {
color: #8f969f;
font-size: 9px;
}
.io-list-example {
display: flex;
align-items: center;
gap: 8px;
margin:
5px
0;
font-size: 10px;
}
.io-list-example span {
padding:
5px
8px;
background: #30343a;
border:
1px solid #454b53;
border-radius: 3px;
}
/* =====================================================
SNABB-I/O
===================================================== */
.io-quick-guide {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 12px;
padding: 14px 18px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.io-quick-guide > div:first-child {
display: flex;
flex-direction: column;
gap: 3px;
}
.io-quick-guide strong {
font-size: 11px;
}
.io-quick-guide span {
color: #aeb4bd;
font-size: 9px;
}
.io-quick-example {
display: flex;
align-items: center;
gap: 5px;
}
.io-quick-example > span {
min-width: 60px;
padding:
6px
8px;
color: #d8dbe0;
background: #292d32;
border:
1px solid #454b53;
border-radius: 3px;
}
.io-quick-example button {
pointer-events: none;
}
/* =====================================================
UTGÅNG / TIMER / RÄKNARE
===================================================== */
.io-feature-card {
display: grid;
grid-template-columns:
minmax(250px, 0.8fr)
1.2fr;
align-items: center;
gap: 28px;
margin-bottom: 12px;
padding: 18px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.io-feature-visual {
display: flex;
justify-content: center;
}
.io-feature-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.io-feature-info > strong {
font-size: 12px;
}
.io-feature-info > span {
color: #aeb4bd;
font-size: 10px;
}
.io-inline-example {
margin-top: 3px;
padding:
5px
8px;
color: #d8dbe0;
background: #2d3137;
border:
1px solid #454b53;
border-radius: 3px;
font-size: 9px;
}
.io-step-example {
min-height: 68px;
}
.io-step-content {
display: flex;
flex-direction: column;
gap: 4px;
padding:
8px
12px;
}
.io-step-content strong {
font-size: 11px;
}
.io-step-content span {
color: #aeb4bd;
font-size: 9px;
}
/* TIMER / RÄKNARE */
.io-timer-box,
.io-counter-box {
width: 145px;
overflow: hidden;
background: #292d32;
border:
1px solid #777e87;
border-radius: 4px;
}
.io-function-title {
padding: 6px;
text-align: center;
background: #363b43;
border-bottom:
1px solid #555b64;
font-size: 9px;
font-weight: bold;
}
.io-function-row {
display: flex;
justify-content: space-between;
padding:
9px
12px;
font-size: 11px;
}
.io-function-result {
padding:
5px
8px;
text-align: center;
color: #9fa5ae;
border-top:
1px solid #41464d;
font-size: 9px;
}
.io-timer-scale {
display: flex;
align-items: center;
gap: 7px;
margin-top: 3px;
color: #aeb4bd;
font-size: 9px;
}
.io-timer-scale > span {
padding:
4px
7px;
background: #2d3137;
border:
1px solid #454b53;
border-radius: 3px;
}
/* =====================================================
I/O-VARNINGAR
===================================================== */
.io-warning-guide {
display: flex;
flex-direction: column;
gap: 9px;
padding: 15px 18px;
background: #252329;
border:
1px solid #514750;
border-radius: 6px;
}
.io-warning-heading {
display: flex;
align-items: center;
gap: 7px;
}
.io-warning-heading strong {
font-size: 11px;
}
.io-warning-items {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.io-warning-items span {
padding:
5px
8px;
color: #b8bdc5;
background: #30343a;
border:
1px solid #464b53;
border-radius: 3px;
font-size: 9px;
}
.io-warning-guide small {
color: #8f969f;
font-size: 9px;
}
/* =====================================================
I/O - SMALT LÄGE
===================================================== */
@media (max-width: 700px) {
.io-guide-addresses {
grid-template-columns:
repeat(2, 1fr);
}
.io-list-guide {
grid-template-columns:
1fr;
gap: 16px;
}
.io-quick-guide {
align-items: flex-start;
flex-direction: column;
}
.io-feature-card {
grid-template-columns:
1fr;
gap: 16px;
}
.io-feature-visual {
justify-content: flex-start;
}
}
/* =====================================================
INSTRUKTIONER - LADDER
===================================================== */
/* =====================================================
LADDER SYMBOLER
===================================================== */
.ladder-read-guide {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.ladder-read-symbol {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 14px 8px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.ladder-read-symbol strong {
font-size: 10px;
}
.ladder-read-symbol small {
color: #8f969f;
font-size: 9px;
}
.ladder-symbol-contact {
position: relative;
width: 52px;
height: 28px;
}
.ladder-symbol-contact::before,
.ladder-symbol-contact::after {
content: "";
position: absolute;
top: 5px;
width: 2px;
height: 18px;
background: #d8dbe0;
}
.ladder-symbol-contact::before {
left: 19px;
}
.ladder-symbol-contact::after {
right: 19px;
}
.ladder-symbol-contact span::before,
.ladder-symbol-contact span::after {
content: "";
position: absolute;
top: 13px;
width: 18px;
height: 2px;
background: #858b93;
}
.ladder-symbol-contact span::before {
left: 0;
}
.ladder-symbol-contact span::after {
right: 0;
}
.ladder-symbol-nc::after {
transform: none;
}
.ladder-symbol-nc span {
position: static;
width: auto;
height: auto;
background: none;
transform: none;
}
.ladder-symbol-nc span::before,
.ladder-symbol-nc span::after {
content: "";
position: absolute;
top: 13px;
width: 18px;
height: 2px;
background: #858b93;
}
.ladder-symbol-nc span::before {
left: 0;
}
.ladder-symbol-nc span::after {
right: 0;
}
.ladder-symbol-nc {
background:
linear-gradient(
125deg,
transparent 47%,
#d8dbe0 48%,
#d8dbe0 52%,
transparent 53%
);
}
/* =====================================================
HUVUDMALL
===================================================== */
.ladder-template-card {
margin-bottom: 16px;
padding: 20px;
background: #202329;
border:
1px solid #454b53;
border-radius: 6px;
}
.ladder-template-heading {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 20px;
}
.ladder-template-heading strong {
font-size: 13px;
}
.ladder-template-heading span {
color: #aeb4bd;
font-size: 10px;
}
.ladder-template {
overflow-x: auto;
padding:
10px
0
18px;
}
.instruction-template-rung {
min-width: 540px;
min-height: 75px;
display: flex;
align-items: center;
}
.ladder-rail {
width: 3px;
height: 75px;
flex-shrink: 0;
background: #d4d7db;
}
.ladder-contact-block,
.ladder-coil-block {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 120px;
padding-top: 18px;
}
.ladder-code-label {
position: absolute;
top: 0;
color: #b9bec6;
font-size: 9px;
white-space: nowrap;
}
.instruction-template-contact {
position: relative;
width: 70px;
height: 30px;
flex-shrink: 0;
}
.instruction-template-contact::before,
.instruction-template-contact::after {
content: "";
position: absolute;
top: 5px;
width: 2px;
height: 20px;
background: #d4d7db;
}
.instruction-template-contact::before {
left: 25px;
}
.instruction-template-contact::after {
right: 25px;
}
.instruction-template-contact span::before,
.instruction-template-contact span::after {
content: "";
position: absolute;
top: 14px;
width: 25px;
height: 2px;
background: #d4d7db;
}
.instruction-template-contact span::before {
left: 0;
}
.instruction-template-contact span::after {
right: 0;
}
.ladder-contact::before {
left: 25px;
}
.ladder-contact::after {
right: 25px;
}
.ladder-contact span::before,
.ladder-contact span::after {
content: "";
position: absolute;
top: 14px;
width: 25px;
height: 2px;
background: #858b93;
}
.ladder-contact span::before {
left: 0;
}
.ladder-contact span::after {
right: 0;
}
.instruction-template-wire {
height: 2px;
flex: 1;
min-width: 60px;
background: #d4d7db;
}
.instruction-template-wire-small {
min-width: 30px;
}
.instruction-ladder-coil {
position: relative;
width: 92px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-family:
Consolas,
monospace;
font-size: 12px;
font-weight: bold;
color: #f1f3f5;
background: transparent;
border: none;
border-radius: 0;
}
.ladder-template-rules {
display: grid;
grid-template-columns:
1fr
1fr;
gap: 8px;
margin-top: 8px;
}
.ladder-template-rules > div {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
padding: 10px;
background: #292d32;
border-radius: 4px;
color: #aeb4bd;
font-size: 9px;
}
.ladder-rule-number {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
background: #3a3f47;
border-radius: 50%;
font-weight: bold;
}
/* =====================================================
KONKRET EXEMPEL
===================================================== */
.ladder-example-card {
display: grid;
grid-template-columns:
minmax(210px, 0.65fr)
1.35fr;
gap: 28px;
margin-bottom: 16px;
padding: 20px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.ladder-example-sequence {
display: flex;
flex-direction: column;
align-items: center;
}
.ladder-example-step {
width: 185px;
}
.ladder-example-transition {
width: 170px;
}
.ladder-example-line {
width: 2px;
height: 22px;
background: #858b93;
}
.ladder-example-code {
display: flex;
flex-direction: column;
gap: 8px;
}
/* =====================================================
MINI-LADDER
===================================================== */
.ladder-mini-rung,
.ladder-start-visual,
.ladder-timer-rung,
.ladder-operation-visual {
display: flex;
align-items: center;
}
.ladder-mini-contact {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.ladder-mini-contact > span {
color: #b9bec6;
font-size: 9px;
}
.ladder-mini-contact-symbol {
position: relative;
width: 42px;
height: 24px;
}
.ladder-mini-contact-symbol::before,
.ladder-mini-contact-symbol::after {
content: "";
position: absolute;
top: 3px;
width: 2px;
height: 18px;
background: #d8dbe0;
}
.ladder-mini-contact-symbol::before {
left: 16px;
}
.ladder-mini-contact-symbol::after {
right: 16px;
}
.ladder-mini-contact-symbol {
border-left:
16px solid transparent;
border-right:
16px solid transparent;
}
.ladder-mini-wire {
height: 2px;
flex: 1;
min-width: 50px;
background: #858b93;
}
.ladder-mini-wire-short {
min-width: 25px;
}
/* =====================================================
START / LOOP
===================================================== */
.ladder-special-card {
display: grid;
grid-template-columns:
0.8fr
1fr
1fr;
align-items: center;
gap: 20px;
margin-bottom: 12px;
padding: 16px 18px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.ladder-special-heading {
display: flex;
flex-direction: column;
gap: 3px;
}
.ladder-special-heading strong {
font-size: 11px;
}
.ladder-special-heading span {
color: #aeb4bd;
font-size: 9px;
}
.ladder-special-rule {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
color: #aeb4bd;
font-size: 9px;
}
.ladder-loop-example {
grid-column:
2 / 4;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.ladder-loop-example span {
padding:
5px
8px;
background: #2d3137;
border:
1px solid #454b53;
border-radius: 3px;
font-size: 9px;
}
.ladder-loop-result {
font-weight: bold;
}
/* =====================================================
UTGÅNG / TIMER / RÄKNARE
===================================================== */
.ladder-operation-card {
display: grid;
grid-template-columns:
minmax(260px, 0.8fr)
1.2fr;
align-items: center;
gap: 28px;
margin-bottom: 12px;
padding: 18px;
background: #202329;
border:
1px solid #353a42;
border-radius: 6px;
}
.ladder-operation-visual {
justify-content: center;
}
.ladder-operation-column {
flex-direction: column;
gap: 8px;
}
.ladder-operation-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.ladder-operation-info > strong {
font-size: 12px;
}
.ladder-operation-info > span {
color: #aeb4bd;
font-size: 10px;
}
.ladder-operation-rule {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 3px;
padding:
6px
8px;
color: #aeb4bd;
background: #2b2f35;
border-radius: 3px;
font-size: 9px;
}
.ladder-timer-arrow {
color: #777e87;
font-size: 15px;
}
.ladder-small-result {
padding:
6px
9px;
background: #30343a;
border:
1px solid #4a5058;
border-radius: 3px;
color: #bfc4ca;
font-size: 9px;
}
.ladder-timer-read {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ladder-timer-read > div {
display: flex;
align-items: center;
gap: 6px;
padding:
5px
7px;
background: #2d3137;
border:
1px solid #454b53;
border-radius: 3px;
}
.ladder-timer-read span {
font-size: 9px;
font-weight: bold;
}
.ladder-timer-read strong {
color: #aeb4bd;
font-size: 9px;
font-weight: normal;
}
/* =====================================================
ADRESSFUSKLAPP
===================================================== */
.ladder-address-guide {
display: grid;
grid-template-columns:
repeat(5, 1fr);
gap: 7px;
margin-top: 16px;
}
.ladder-address-guide > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 9px;
background: #202329;
border:
1px solid #353a42;
border-radius: 4px;
}
.ladder-address-guide strong {
font-size: 13px;
}
.ladder-address-guide span {
color: #9299a2;
font-size: 8px;
}
/* =====================================================
LADDER - SMALT LÄGE
===================================================== */
@media (max-width: 700px) {
.ladder-read-guide {
grid-template-columns:
repeat(2, 1fr);
}
.ladder-template-rules {
grid-template-columns:
1fr;
}
.ladder-example-card {
grid-template-columns:
1fr;
}
.ladder-example-sequence {
align-items: flex-start;
}
.ladder-special-card {
grid-template-columns:
1fr;
gap: 12px;
}
.ladder-loop-example {
grid-column:
auto;
}
.ladder-operation-card {
grid-template-columns:
1fr;
gap: 16px;
}
.ladder-operation-visual {
justify-content: flex-start;
}
.ladder-address-guide {
grid-template-columns:
repeat(2, 1fr);
}
}
.instruction-mini-coil {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.instruction-mini-coil > span {
color: #d7dbe0;
font-size: 9px;
}
.instruction-coil {
position: relative;
min-width: 92px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding:
0
18px;
box-sizing: border-box;
color: #f3f5f7;
font-family:
Consolas,
monospace;
font-size: 11px;
font-weight: bold;
background: transparent;
border: none;
border-radius: 0;
}
.instruction-coil::before,
.instruction-coil::after {
position: absolute;
top: 50%;
color: #d9dde2;
font-size: 38px;
font-family:
Arial,
sans-serif;
font-weight: normal;
line-height: 1;
transform:
translateY(-54%);
}
.instruction-coil::before {
content: "(";
left: 2px;
}
.instruction-coil::after {
content: ")";
right: 2px;
}
.ladder-mini-contact small {
display: block;
margin-top: 2px;
color: #aeb4bd;
font-size: 9px;
font-weight: normal;
white-space: nowrap;
}
.ladder-example-step-title {
margin:
18px
0
8px;
color: #eef0f2;
font-family:
Consolas,
monospace;
font-size: 11px;
font-weight: bold;
}
.ladder-example-loop {
margin-top: 10px;
display: flex;
align-items: center;
gap: 6px;
color: #aeb4bd;
font-size: 10px;
}
.ladder-example-loop strong {
color: #eef0f2;
font-size: 16px;
}
.ladder-example-loop-note {
margin:
3px
0
8px;
color: #aeb4bd;
font-size: 9px;
}
.instruction-real-function-block {
width: 150px;
min-height: 105px;
flex-shrink: 0;
border: 2px solid #d8dbe0;
background: transparent;
color: #eef0f2;
font-family:
Consolas,
monospace;
font-size: 11px;
}
.instruction-function-title {
padding:
5px
6px;
border-bottom:
1px solid #d8dbe0;
text-align: center;
font-weight: bold;
}
.instruction-function-body {
padding:
7px
8px;
display: grid;
grid-template-columns:
36px
1fr;
gap:
5px
8px;
}
.instruction-function-pin {
font-weight: bold;
}
.instruction-function-value {
text-align: right;
}
.instruction-function-hint {
padding:
0
8px
7px;
text-align: right;
color: #aeb4bd;
font-size: 10px;
}
/* =====================================================
KONKRET LADDER-EXEMPEL - SLUTLIG LAYOUT
===================================================== */
.ladder-example-card {
display: block;
width: 100%;
min-width: 0;
margin-bottom: 16px;
padding: 18px;
box-sizing: border-box;
background: #202329;
border: 1px solid #353a42;
border-radius: 6px;
overflow: hidden;
}
/* =====================================================
DIAGRAM + LADDER BREDVID VARANDRA
===================================================== */
.ladder-example-top {
display: grid;
grid-template-columns:
minmax(170px, 0.75fr)
minmax(0, 1.65fr);
gap: 20px;
width: 100%;
min-width: 0;
align-items: start;
}
/* =====================================================
SEKVENS
===================================================== */
.ladder-example-sequence {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-width: 0;
}
.ladder-example-subtitle {
align-self: stretch;
margin-bottom: 10px;
color: #eef0f2;
font-size: 10px;
font-weight: bold;
}
.ladder-example-sequence .guide-step {
width: 165px;
min-height: 46px;
}
.ladder-example-sequence .guide-transition {
width: 150px;
min-height: 34px;
}
.ladder-example-sequence .guide-step,
.ladder-example-sequence .guide-transition {
grid-template-columns:
38px
minmax(0, 1fr);
max-width: 100%;
box-sizing: border-box;
}
.ladder-example-sequence .guide-address {
font-size: 9px;
}
.ladder-example-sequence .guide-text {
min-width: 0;
font-size: 9px;
overflow-wrap: anywhere;
}
.ladder-example-line {
width: 2px;
height: 16px;
flex-shrink: 0;
background: #858b93;
}
.ladder-example-start {
outline: 2px solid #d4d7db;
outline-offset: 2px;
}
.ladder-example-start-note {
margin-top: 6px;
color: #aeb4bd;
font-size: 7px;
text-align: center;
}
.ladder-example-empty-transition {
opacity: 0.72;
}
.ladder-example-loop {
margin-top: 8px;
display: flex;
align-items: center;
gap: 5px;
color: #c7cbd1;
font-size: 8px;
}
.ladder-example-loop strong {
font-size: 14px;
}
.ladder-example-start-rule {
width: 165px;
max-width: 100%;
margin-top: 12px;
padding: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 3px;
background: #282c32;
border: 1px solid #3b4048;
border-radius: 4px;
color: #b8bdc5;
font-size: 7px;
line-height: 1.35;
}
.ladder-example-start-rule strong {
color: #eef0f2;
}
/* =====================================================
LADDER
===================================================== */
.ladder-example-code {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
gap: 3px;
overflow: hidden;
}
.ladder-example-step-title {
margin:
10px
0
4px;
padding-bottom: 3px;
border-bottom: 1px solid #3c4149;
color: #eef0f2;
font-family:
Consolas,
monospace;
font-size: 8px;
font-weight: bold;
}
.ladder-example-code
.ladder-example-step-title:first-of-type {
margin-top: 0;
}
/* =====================================================
VANLIG LADDER-RAD
===================================================== */
.ladder-example-code .ladder-mini-rung {
display: flex;
align-items: center;
width: 100%;
min-width: 0;
min-height: 38px;
}
.ladder-example-code .ladder-mini-contact {
position: relative;
width: 54px;
min-width: 54px;
flex-shrink: 0;
text-align: center;
}
.ladder-example-code .ladder-mini-description {
display: block;
min-height: 9px;
color: #b9bec6;
font-size: 6px;
line-height: 1;
text-align: center;
white-space: nowrap;
}
.ladder-example-code .ladder-mini-address {
display: block;
color: #eef0f2;
font-family:
Consolas,
monospace;
font-size: 7px;
line-height: 1;
}
.ladder-example-code .ladder-mini-contact-symbol {
transform: scale(0.82);
transform-origin: center;
}
.ladder-example-code .ladder-mini-wire {
flex: 1 1 10px;
min-width: 8px;
}
.ladder-example-code .ladder-mini-wire-short {
flex:
0 0 10px;
min-width: 10px;
}
.ladder-example-code .instruction-mini-coil {
display: flex;
flex-direction: column;
align-items: center;
width: 72px;
min-width: 72px;
flex-shrink: 0;
gap: 2px;
}
.ladder-example-code .instruction-coil {
font-size: 8px;
}
/* =====================================================
GEMENSAM SET M0
===================================================== */
.ladder-branch-rung {
display: grid;
grid-template-columns:
minmax(0, 1fr)
10px
72px;
align-items: center;
width: 100%;
min-width: 0;
min-height: 78px;
}
.ladder-set-branches {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
gap: 10px;
}
.ladder-set-branch {
display: flex;
align-items: center;
width: 100%;
min-width: 0;
height: 32px;
}
.ladder-set-branch .ladder-mini-contact {
width: 48px;
min-width: 48px;
}
.ladder-set-branch .ladder-mini-wire {
flex: 1 1 8px;
min-width: 6px;
}
.ladder-set-branch .ladder-mini-wire-short {
flex:
0 0 8px;
min-width: 8px;
}
.ladder-branch-join {
position: relative;
width: 10px;
height: 43px;
border-right: 1px solid #d4d7db;
}
.ladder-branch-join::before,
.ladder-branch-join::after {
content: "";
position: absolute;
right: 0;
width: 10px;
height: 1px;
background: #d4d7db;
}
.ladder-branch-join::before {
top: 0;
}
.ladder-branch-join::after {
bottom: 0;
}
.ladder-example-loop-note,
.ladder-example-empty-note {
margin:
1px
0
3px;
color: #9298a1;
font-size: 6px;
}
/* =====================================================
I/O-LISTA UNDER BÅDA
===================================================== */
.ladder-example-io {
width: 100%;
min-width: 0;
margin-top: 18px;
padding-top: 12px;
box-sizing: border-box;
border-top: 1px solid #3a3f47;
}
.ladder-example-io-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 5px;
}
.ladder-example-io-row {
display: grid;
grid-template-columns:
32px
minmax(0, 1fr);
gap: 5px;
align-items: center;
min-width: 0;
min-height: 25px;
padding:
3px
6px;
box-sizing: border-box;
border: 1px solid #353a42;
border-radius: 3px;
font-size: 7px;
}
.ladder-example-io-row strong {
color: #eef0f2;
font-family:
Consolas,
monospace;
}
.ladder-example-io-row span {
min-width: 0;
color: #c5c9cf;
overflow-wrap: anywhere;
}
.ladder-example-io-note {
margin-top: 7px;
padding: 0;
background: none;
color: #969ca5;
font-size: 7px;
}
/* =====================================================
INSTRUKTIONER - KONTROLLER
===================================================== */
.controls-guide {
width: 100%;
max-width: none;
grid-column: 1 / -1;
box-sizing: border-box;
}
.controls-guide-intro {
margin-bottom: 14px;
color: #aeb4bd;
font-size: 10px;
}
.controls-guide-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 10px;
width: 100%;
}
/* =====================================================
KONTROLLKORT
===================================================== */
.control-guide-card {
display: grid;
grid-template-columns:
minmax(135px, 0.8fr)
minmax(0, 1.2fr);
align-items: center;
gap: 12px;
min-height: 58px;
padding: 10px;
box-sizing: border-box;
background: #202329;
border: 1px solid #353a42;
border-radius: 5px;
}
.control-guide-visual {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
min-width: 0;
}
/* =====================================================
TEXT
===================================================== */
.control-guide-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.control-guide-info strong {
color: #eef0f2;
font-size: 10px;
}
.control-guide-info span {
color: #aeb4bd;
font-size: 8px;
line-height: 1.35;
}
/* =====================================================
TANGENTER
===================================================== */
.control-guide-visual kbd {
min-width: 27px;
padding:
5px
7px;
box-sizing: border-box;
background: #2b2f36;
border:
1px solid #555b64;
border-bottom:
2px solid #555b64;
border-radius: 4px;
color: #eef0f2;
font-family:
Consolas,
monospace;
font-size: 8px;
text-align: center;
}
/* =====================================================
MUS / MUSPLATTA
===================================================== */
.control-mouse,
.control-drag {
padding:
5px
7px;
background: #282c32;
border:
1px solid #4a5059;
border-radius: 12px;
color: #d6d9dd;
font-size: 8px;
white-space: nowrap;
}
.control-plus,
.control-or {
color: #858b93;
font-size: 8px;
}
.control-or {
margin:
0
2px;
}
/* =====================================================
PROGRAMKNAPPAR
===================================================== */
.control-button {
padding:
5px
9px;
background: #2b2f36;
border:
1px solid #505660;
border-radius: 4px;
color: #eef0f2;
font-size: 8px;
white-space: nowrap;
}
/* =====================================================
TIPS
===================================================== */
.controls-guide-tip {
margin-top: 12px;
padding: 9px 11px;
background: #202329;
border-left:
2px solid #747b85;
color: #aeb4bd;
font-size: 8px;
line-height: 1.4;
}
.controls-guide-tip strong {
color: #eef0f2;
}
/* =====================================================
KONTROLLER - FYLL TILLGÄNGLIG BREDD
===================================================== */
#instructionControls .instruction-section-content {
flex: 1;
min-width: 0;
width: 100%;
}
/* =====================================================
SMALARE INSTRUKTIONSFÖNSTER
===================================================== */
@media (max-width: 900px) {
.controls-guide-grid {
grid-template-columns: 1fr;
}
}
/* =====================================================
INSTRUKTIONER - STÖRRE OCH TYDLIGARE TEXT
===================================================== */
/* Vanlig text */
.instructions-overlay p,
.instructions-overlay span,
.instructions-overlay div,
.instructions-overlay li {
font-size: max(10px, 1em);
}
/* Rubriker för varje del */
.instructions-overlay h2 {
font-size: 18px;
}
/* Mindre underrubriker */
.instructions-overlay h3 {
font-size: 14px;
}
/* Viktig / fet text */
.instructions-overlay strong {
font-size: inherit;
}
/* Kod, adresser och tangenter */
.instructions-overlay code,
.instructions-overlay kbd {
font-size: 10px;
}
/* Kontroller */
.control-guide-info strong {
font-size: 12px;
}
.control-guide-info span {
font-size: 10px;
}
.control-guide-visual kbd,
.control-mouse,
.control-drag,
.control-plus,
.control-or,
.control-button {
font-size: 10px;
}
.controls-guide-intro {
font-size: 11px;
}
.controls-guide-tip {
font-size: 10px;
}
/* =====================================================
INSTRUKTIONER - TYDLIGARE TEXT I LADDER-EXEMPLET
===================================================== */
/* Rubriker M0, M1, M2, M3 */
.ladder-example-step-title {
font-size: 10px;
}
/* Beskrivning ovanför kontakt/spole */
.ladder-example-code .ladder-mini-description {
font-size: 8px;
line-height: 1.15;
}
/* Adress: M0, M1, X1 osv. */
.ladder-example-code .ladder-mini-address {
font-size: 9px;
}
/* SET / RST-spolar */
.ladder-example-code .instruction-coil {
font-size: 10px;
}
/* Sekvensen till vänster */
.ladder-example-sequence .guide-address,
.ladder-example-sequence .guide-text {
font-size: 10px;
}
/* Text under START */
.ladder-example-start-note,
.ladder-example-start-rule {
font-size: 9px;
}
/* Loop till START */
.ladder-example-loop {
font-size: 10px;
}
/* =====================================================
ECAT LOGIN - ECAT’S SEQUENCER
===================================================== */
.login-screen {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background:
radial-gradient(
circle at top,
rgba(255, 255, 255, 0.06),
transparent 45%
),
#111318;
}
.login-card {
width: 100%;
max-width: 390px;
padding: 38px 36px 34px;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
background: #181b21;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.35);
text-align: center;
}
/* =====================================================
BRANDING
===================================================== */
.login-brand {
margin-bottom: 30px;
}
.login-logo-frame {
width: 104px;
height: 104px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
padding: 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 20px;
background: #f4f4f2;
}
.login-logo {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.login-ecat {
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.65;
}
.login-brand h1 {
margin: 0;
font-size: 30px;
font-weight: 700;
letter-spacing: -0.02em;
}
/* =====================================================
FORM
===================================================== */
.login-form {
text-align: left;
}
.login-form label {
display: block;
margin-bottom: 7px;
font-size: 13px;
font-weight: 600;
opacity: 0.8;
}
.login-form input {
box-sizing: border-box;
width: 100%;
height: 46px;
padding: 0 13px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
outline: none;
background: rgba(255, 255, 255, 0.05);
color: inherit;
font: inherit;
transition:
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
.login-form input:focus {
border-color: rgba(255, 255, 255, 0.38);
background: rgba(255, 255, 255, 0.075);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.05);
}
.login-form input::placeholder {
color: inherit;
opacity: 0.35;
}
/* =====================================================
HINT
===================================================== */
.login-description {
margin-top: 7px;
font-size: 11px;
line-height: 1.4;
opacity: 0.45;
}
.session-button {
white-space: nowrap;
}
#btnLogin:disabled,
#btnLogout:disabled {
cursor: wait;
opacity: 0.55;
}
/* =====================================================
LOGIN BUTTON
===================================================== */
#btnLogin {
box-sizing: border-box;
width: 100%;
margin-top: 22px;
padding: 11px 16px;
border: 0;
border-radius: 8px;
cursor: pointer;
font: inherit;
font-weight: 600;
transition:
transform 0.12s ease,
opacity 0.12s ease;
}
#btnLogin:hover {
opacity: 0.9;
}
#btnLogin:active {
transform: translateY(1px);
}
/* =====================================================
ERROR
===================================================== */
.login-error {
min-height: 16px;
margin-top: 10px;
text-align: center;
font-size: 12px;
font-weight: 500;
opacity: 0.8;
}
/* =====================================================
SMALL SCREENS
===================================================== */
@media (max-width: 500px) {
.login-screen {
padding: 16px;
}
.login-card {
padding: 32px 24px 28px;
}
.login-brand h1 {
font-size: 27px;
}
}
.step-output-preview > span {
flex:
1 1 0;
min-width:
0;
}