<commit_before>@import "/customize/src/less/variables.less";
@import "/customize/src/less/mixins.less";

// used for slides
.viewportRatio (@x, @y, @p: 100) {
    width: @p * 100vw;
    height: @y * (@p * 100vw) / @x;
    max-width: @x / @y * (@p * 100vh);
    max-height: (@p * 100vh);
}

html, body{
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
body {
    font-size: unset;
    display: flex;
    flex-flow: column;
}

//.cp {
h1 { font-size: 40px; }
h2 { font-size: 37px; }
h3 { font-size: 34px; }
h4 { font-size: 31px; }
h5 { font-size: 27px; }
h6 { font-size: 24px; }

body {
    .CodeMirror {
        height: 100%;
    }
    .CodeMirror-focused .cm-matchhighlight {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
        background-position: bottom;
        background-repeat: repeat-x;
    }
}
#colorPicker_check {
    display: block;
}

@media print {
    @page {
        margin: 0;
        size: landscape;
    }
    body {
        .CodeMirror, #cme_toolbox {
            display: none;
        }
        * {
            visibility: hidden;
            height: auto;
            max-height: none;
        }
        display:block;
    }
    html, body {
        max-height: none;
        overflow: visible;
    }
    html {
        .cp #print {
            display: block;
            visibility: visible;
            * {
                visibility: visible;
            }
        }
    }
}


#cme_toolbox {
    z-index: 10000;
}
#editorContainer {
    flex: 1;
    display: flex;
    flex-flow: row;
    height: 100%;
    overflow: hidden;
    .CodeMirror {
        resize: none;
        width: 100vw;
    }
    &.preview {
        .CodeMirror {
            //resize: horizontal;
            width: 50vw;
        }
    }
}
.preview .cp {
    flex: 1;
    overflow: hidden;
    div#modal:not(.shown) {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        display: block;
        height: 100%;
        #content {
            .slide-container {
                width: 100%;
            }
            .slide-frame {
                width: 50vw;
                height: 28.125vw; // height:width ratio = 9/16 = .5625
                max-height: 100vh;
                max-width: 177.78vh; // 16/9 = 1.778
            }
        }
        #button_exit {
            visibility: hidden;
        }
    }
}
.cp {

/* Slide position (print mode) */
@ratio:0.9;
#print {
    position: relative;
    display: none;
    font-size: @ratio*11.25vw;
    .slide-frame {
        display: block !important;
        padding: 0.5em;
        margin: auto;
        border: 1px solid black;
        height: @ratio*56.25vw;
        width: @ratio*100vw;
        page-break-after: always;
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        li {
            min-width: @ratio*50vw;
        }
        h1 {
            padding-top: 0;
        }
        align-items: center;<commit_msg>Fix slide ratio in preview mode<commit_after>@import "/customize/src/less/variables.less";
@import "/customize/src/less/mixins.less";

// used for slides
.viewportRatio (@x, @y, @p: 100) {
    width: @p * 100vw;
    height: @y * (@p * 100vw) / @x;
    max-width: @x / @y * (@p * 100vh);
    max-height: (@p * 100vh);
}

html, body{
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
body {
    font-size: unset;
    display: flex;
    flex-flow: column;
}

//.cp {
h1 { font-size: 40px; }
h2 { font-size: 37px; }
h3 { font-size: 34px; }
h4 { font-size: 31px; }
h5 { font-size: 27px; }
h6 { font-size: 24px; }

body {
    .CodeMirror {
        height: 100%;
    }
    .CodeMirror-focused .cm-matchhighlight {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
        background-position: bottom;
        background-repeat: repeat-x;
    }
}
#colorPicker_check {
    display: block;
}

@media print {
    @page {
        margin: 0;
        size: landscape;
    }
    body {
        .CodeMirror, #cme_toolbox {
            display: none;
        }
        * {
            visibility: hidden;
            height: auto;
            max-height: none;
        }
        display:block;
    }
    html, body {
        max-height: none;
        overflow: visible;
    }
    html {
        .cp #print {
            display: block;
            visibility: visible;
            * {
                visibility: visible;
            }
        }
    }
}


#cme_toolbox {
    z-index: 10000;
}
#editorContainer {
    flex: 1;
    display: flex;
    flex-flow: row;
    height: 100%;
    overflow: hidden;
    .CodeMirror {
        resize: none;
        width: 100vw;
    }
    &.preview {
        .CodeMirror {
            //resize: horizontal;
            width: 50vw;
        }
    }
}
.preview {
    .cp {
        width: 50vw;
        overflow: hidden;
        div#modal:not(.shown) {
            position: relative;
            top: auto;
            left: auto;
            width: auto;
            display: block;
            height: 100%;
            #content {
                .slide-container {
                    width: 100%;
                }
                .slide-frame {
                    width: 50vw;
                    height: 28.125vw; // height:width ratio = 9/16 = .5625
                    max-height: ~"calc(100vh - 96px)";
                    max-width: ~"calc(16 / 9 * (100vh - 96px))";
                    //max-height: 100vh;
                    //max-width: 177.78vh; // 16/9 = 1.778
                }
            }
            #button_exit {
                visibility: hidden;
            }
        }
    }
    .CodeMirror {
        flex: 1;
    }
}
.cp {

/* Slide position (print mode) */
@ratio:0.9;
#print {
    position: relative;
    display: none;
    font-size: @ratio*11.25vw;
    .slide-frame {
        display: block !important;
        padding: 0.5em;
        margin: auto;
        border: 1px solid black;
        height: @ratio*56.25vw;
        width: @ratio*100vw;
        page-break-after: always;
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        li {
            min-width: @ratio*50vw;
        }
        h1 {
            padding-top: 0;
        }
        align-items: center;
{'fraction_non_alphanumeric': 0.12781047231024598, 'fraction_numerical': 0.039686132488305416, 'mean_word_length': 1.4648568240981779, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7446974', 'n_tokens_mistral': 2494, 'n_tokens_neox': 2228, 'n_words': 475}