kdj_singlish/css/style.css

KDJ Singlish is an app which created to help people to type in sinhala without making any mistakes. This will save your time and fix all the issues you are getting when you type. Just use it and let me know the issues.

/*--------------------------------------------------------------
# Scroll Bar Design
--------------------------------------------------------------*/
/* width */
::-webkit-scrollbar {
    width: 50px!important;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #24292f;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: red;
}

* {
    margin: 0;
    padding: 0;
}

CSS specificity. */ body {
    --ck-z-default: 100;
    --ck-z-modal: calc(var(--ck-z-default) + 999);
}

.btn-dark{
    background:transparent!important;
    border:2px solid black!important;
    color:black!important;
    cursor: pointer;
    z-index:100;
    top:-5px!important;
}

/*
    Override Bootstrap's CSS.
    Note: This will not be necessary once the following issue is fixed and released:
    https://github.com/ckeditor/ckeditor5-theme-lark/issues/189
*/
.ck.ck-button {
    -webkit-appearance: none;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.app {
    /* Disable text selection, or your app will feel like a web page */
    -webkit-user-select: none;

    /* Cover the whole window */
    height: 100%;

    /* Make sure this matches the native window background color that you pass to
   * electron.BrowserWindow({...}), otherwise your app startup will look janky. */
    background: white;

    /* Smoother startup */
    animation: fadein 0.8s;
}

/* Sinhala Typing Tool */
@font-face {
    font-family: FMAbhaya;
    src: url('./../fonts/FM-Abhaya.TTF');
}

header .title{
    padding-top:10px;
    margin-bottom: -14px;
    font-size:15px;
}

@media only screen and (max-width: 450px) {
.sidebar{
    display:none!important;
}

textarea{
    height:20vh!important;
}

#typeArea{
    margin-top:-40px;
    padding-bottom: 30px;
}

.toolbar-actions h1{
   text-align:left;
   margin-left: 20px;
   margin-top:5px!important;
}

.toolbar-actions h1 span{
    display:none!important;
}

.toolbar-actions .btn-group {
    display: none!important;
}

.credit{
    font-size:10px;
}

.credit span{
    display:none!important;
}

#fontArea{
    margin-bottom:20px;
}

}

@media only screen and (max-width: 411px){
form{
    margin-top:2em!important;
    margin-bottom:3em!important;
}
.marginTop {
    margin-top: 30px;
}
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 760px) {
    .form {
        margin-bottom:30px;
    }
    
    #input_textarea {
        height: 140px !important;
    }

    #unicode_textarea {
        height: 140px !important;
    }

    #fmabaya_textarea {
        height: 140px !important;
    }

    .keymap {
        padding: 10% 4% 2% 4% !important;
    }
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #e9ecef;
    outline: 0;
    box-shadow: 1px 3px 10px 0rem rgb(155, 155, 155);
}

.keymap {
    padding: 2% 4% 4% 4%;
}

#input_textarea {
    height: 70vh;
}

#unicode_textarea {
    height: 70vh;
    overflow-y: scroll;
}

#fmabaya_textarea {
    height: 70vh;
    overflow-y: scroll;
}

/* SUGGEST */

#suggest {
    margin:0 10%;
    background-color: rgb(240, 240, 240);
    color:black;
    font-weight:700;
    font-size: 100%;
    width: 80%;
    box-shadow: 2px 2px 2px rgb(192, 192, 192);
    height: 250px;
    overflow: auto;
}

#suggest div {
    display: block;
    width:100%;
    overflow: hidden;
    white-space: nowrap;
    padding:10px 15px;
}

#suggest div.select {
    /* keydown, keyup */
    color: red;
    background-color: white;
      padding:5px 15px;
}

#suggest div.over {
    /* mouse over */
    background-color: white;
    padding:5px 15px;
    color:red;
}

.nav-group-item{
    padding-top:8px!important;
    margin-bottom:0!important;
    width: 100%;
}

/**
 * Textarea
 */

textarea {
    min-height: 120px;
    color: var(--text-color);
    font-size: 16px;
    border: 1px solid #c1c1c1;
    outline: none;
    --selection-color: white;
    --selection-background: var(--primary-color);
    --inner-padding: 3px 6px;
}

/* Focus indicator line */
textarea::after {
    content: "";
    display: block;
    width: 0%;
    height: 3px;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    position: absolute;
    transition: width 0.2s var(--transition-fn1);
}

textarea:focus::after {
    width: 100%;
}

textarea[error]::after {
    width: 100%;
    background: #d50000;
}

/* Placeholder */
textarea>x-label {
    display: none;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: var(--inner-padding);
    color: rgba(0, 0, 0, 0.4);
    font-family: inherit;
    line-height: inherit;
    pointer-events: none;
}

textarea[empty]>x-label {
    display: block;
    cursor: text;
}

textarea[required]>x-label::after {
    content: "*";
}

/* @skin "flat" */

textarea[skin="flat"] {
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    min-height: 0;
    max-height: none;
    padding: 0;
    --inner-padding: 9px 0px 5px;
}

textarea[skin="flat"]>x-label {
    display: block;
    top: 6px;
    padding: 0;
    transform: none;
    transition-property: top, color, font-size;
    transition-duration: 0.2s;
    transition-timing-function: var(--transition-fn1);
}

textarea[skin="flat"]:not([empty])>x-label,
textarea[skin="flat"]:focus>x-label {
    top: -12px;
    font-size: 16px;
    color: var(--primary-color);
    pointer-events: all;
}

textarea[skin="flat"][error]:not([empty])>x-label,
textarea[skin="flat"][error]>x-label {
    color: #d50000;
}

textarea[skin="flat"]:focus>x-label::after {
    color: #d50000;
}

.hideArea{
    display:none!important;
}
            /*
            * .electron-in-page-search-window is a class specified to default
            * <webview> element for search window.
            */
            .electron-in-page-search-window {
                position: fixed;
                top: 100PX;
                right: 0;
                z-index: 2100;
                border: solid grey 1px;
                background-color: white;
                width: 300px;
                height: 36px;
            }

            /*
            * .search-inactive is added to search window <webview> when the window
            * is inactive.
            */
            .search-inactive {
                visibility: hidden;
            }

            /*
            * .search-inactive is added to search window <webview> when the window
            * is active.
            */
            .search-active {
                visibility: visible;
            }

            .modal-content{
                z-index:100!important;
            }

            .modal-header {
                z-index: 10000 !important;
            }

            .modal_head{
                background:red;
                color:white;
                padding:10px 20px;
            }