.modal .modal-bookmarks { padding: 5px; display: flex; flex-direction: column; justify-content: stretch; .bookmark-list { flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; justify-content: stretch; .list { display: flex; flex-direction: column; justify-content: start; overflow-y: auto; .entry { flex-grow: 1; flex-shrink: 1; > .name { cursor: pointer; } &.bookmark { &.selected { background-color: #0000FF77; } } &.directory { &.selected { > .name { background-color: #0000FF77; } } > .name { border: 0 solid gray; border-bottom: 1px solid #ad9d9d33; } .members { margin-left: 15px; } } } } } .buttons { flex-grow: 0; flex-shrink: 0; margin-top: 5px; text-align: right; button { margin-left: 5px; } } .group_box:not(:first-of-type) { flex-grow: 0; flex-shrink: 0; } .bookmark-setting { .group_box { margin-top: 5px; } .property { display: flex; flex-direction: row; justify-content: stretch; &:not(:first-of-type) { margin-top: 5px; } input, select, .default-channel-container { flex-grow: 1; flex-shrink: 1; } .default-channel-container { display: flex; flex-direction: row; justify-content: stretch; button { margin-left: 5px; max-width: 120px; } } .key { width: 160px; flex-grow: 0; flex-shrink: 0; } } .container-default-channel-select { display: flex; flex-direction: row; justify-content: stretch; .container-default-channel { flex-grow: 1; flex-shrink: 1; } } } } .modal .modal-bookmark-create { .property { margin-top: 5px; display: flex; flex-direction: row; justify-content: stretch; .key { flex-grow: 0; flex-shrink: 0; width: 150px; } select, input { flex-grow: 1; flex-shrink: 1; } } .buttons { text-align: right; button { min-width: 200px; } margin-bottom: 5px; } }