.overview { min-height: 1px; min-width: 1px; .workspace { padding: 4px; border: 2px solid transparent; transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; border-radius: 10px; &.active { background-color: rgba(lighten($color: black, $amount: 15), 0.8); transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; border: 2px solid black; } } .workspace .window { background-color: $bgfull; border-radius: 10px; margin: 0 10px; transition: min-width 0.2s ease-in-out, min-height 0.2s ease-in-out, border-color 0.2s ease-in-out, font-size 0.2s ease-in-out; } .normal { margin-bottom: 5px; .workspace { .window { border: 2px solid #411C6C; &.active { border: 2px solid purple; } } } } .special { .workspace { .window { border: 2px solid lighten($color: black, $amount: 20); &.active { border: 2px solid purple; } } } } }