modals.less 2.67 KB
Newer Older
1 2 3
/* Rund ums Fokus Modal */

#show-create-focus:checked {
4 5 6 7
    &+#create-focus-modal {
        position: fixed;
        display: flex;
    }
8 9
}

10 11 12 13
#plugin-modal ol>li {
    margin-bottom: 5px;
}

14
#plugin-modal-checkbox:checked {
15 16 17 18 19 20 21 22 23 24
    &+#plugin-modal {
        display: block;
    }
}

.settings-modal-buttons {
    padding: 5px;
    button {
        margin: 5px
    }
25 26 27
}

.metager-modal {
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100%;
    width: 100%;
    background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    z-index: 150;
    .metager-modal-dialog {
        background-color: white;
        max-width: 700px;
        margin: 30px auto;
        height: 90vh;
        overflow-y: auto;
        .metager-modal-content {
            .metager-modal-header {
                padding: 15px;
                position: relative;
                border-bottom: 1px solid #e5e5e5;
                .close-metager-modal {
                    position: absolute;
                    right: 15px;
                    &::after {
                        font-size: 24px;
                        content: "×";
                    }
                }
            }
            #toggle-dropdowns-label {
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .focus-dropdown-toggle {
                display: none;
                &:not(:checked) {
                    &~.focus-dropdown-label~.row {
                        max-height: 0px;
                        overflow: hidden;
                    }
                }
                &:checked {
                    &~.focus-dropdown-label::after {
                        content: " ➖ ";
                    }
                }
            }
            .focus-dropdown-label {
                cursor: pointer;
                &::after {
                    font-size: 16px;
                    content: " ➕ ";
                    margin-left: 3px;
                    vertical-align: middle;
                }
                &~.row {
                    -webkit-transition: max-height 0.4s ease;
                    /* Chrome 1-25, Safari 3.2+ */
                    /* Firefox 4-15 */
                    /* Opera 10.50–12.00 */
                    transition: max-height 0.4s ease;
                    max-height: 400px;
                }
            }
98 99
        }
    }
100
}