web2app-spa/basic/basic.css

This template is primarily designed to easily convert HTML pages and URLs into a Capacitor/Cordova based iOS/Android app that can be used as Single-page application (SPA).

/* Bismillah */

/*

basic.js (v24.04) Create interactive user interfaces with basic programming skills.
- Project Site: https://bug7a.github.io/basic.js/

Copyright 2020-2024 Bugra Ozden <bugra.ozden@gmail.com>
- https://github.com/bug7a

Licensed under the Apache License, Version 2.0

*/

@font-face {
    
    font-family: opensans;
    src: url(font/open-sans/OpenSans-Regular.ttf);
    font-display: block;
    
}

@font-face {
    
    font-family: opensans-bold;
    src: url(font/open-sans/OpenSans-Bold.ttf);
    font-display: block;
    
}

.basic_box, .basic_label, .basic_button, .basic_textbox-main, .basic_image  {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 

    -webkit-touch-callout: none;
    -webkit-text-size-adjust: auto;
    user-select: none;
    -webkit-user-select: none;

}

/* UI COMPONENTS */
.basic_box {
    
    position: absolute;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: whitesmoke;
    border-radius: 0px;
    border: 0px solid rgba(0, 0, 0, 0.6);
    font-family: opensans;
    font-size: 16px;
    text-align: left;
    color: rgba(0, 0, 0, 0.8);
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    pointer-events: none;
    
}

.basic_label {
    
    position:absolute;
    display: block;
    overflow: hidden;
    font-family: opensans;
    font-size: 20px;
    text-align: left;
    color:rgba(0, 0, 0, 0.8);
    background-color: transparent;
    border: 0px solid rgba(0, 0, 0, 0.6);  
    padding: 0px;
    /* istenen genişlikten paddingi çıkartarak işlem yapıyor */
    box-sizing: border-box; 
    pointer-events:none;
    
}

.basic_button {
    
    position:absolute;
    display: block;
    overflow: hidden;
    font-family: opensans;
    font-size: 20px;
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.40);
    box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.40);
    margin: 0px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #689BD2;
    background-image: url("img/button-background.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:100% 100%;
    pointer-events:auto;
    cursor: pointer;
    
}

.basic_button.minimal {
    
    border: 0px solid rgba(0, 0, 0, 0.40);
    box-shadow: none;
    background-image:none;
    
}

.basic_button:focus {
    
    outline: none;
    
}

.basic_button:disabled {
    
    opacity: 0.6 !important;
    cursor: default;
    
}

.basic_textbox-main {
    
    position:absolute;
    display: block;
    
}

.basic_textbox {
    
    position:absolute;
    font-family: opensans;
    font-size: 20px;
    text-align: left;
    color:#4A4A4A;
    background-color: #FFFFFF;
    left:0px;
    right:0px;
    border: 1px solid #4A4A4A;
    width: 270px;
    height: 50px;    
    padding: 12px 15px;
    margin: 0px;
    box-sizing: border-box;
    border-radius: 4px;
    background-image: url("img/textbox-background.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:100% 100%;
    pointer-events:auto;
    
}

.basic_textbox.minimal {
    
    border: 0px solid #4A4A4A;
    background-image:none;
    
}

.basic_textbox:focus {
    
    outline: none;
    padding: 12px 14px;
    background-color: #FFFFFF;
    border: 2px solid #689BD2;
    
}

.basic_textbox.minimal:focus {
    
    outline: none;
    padding: 12px 15px;
    border: 0px solid steelblue;
    
}

.basic_textbox:disabled {
    
    opacity: 0.6 !important;
    
}

.basic_textbox-title {
    
    position: absolute;
    background-color: transparent;
    font-family: opensans;
    font-size: 16px;
    text-align: left;
    color: #4A4A4A;
    height: 28px;
    top: -28px;
    left: 0px;
    padding: 2px;
    padding-left: 0px;
    border:0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background-image:none;
    
}

.basic_image {
    
    position:absolute;
    display: block;
    overflow: hidden;
    background-color: transparent;
    border: 0px solid rgba(0, 0, 0, 0.6);
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    border-radius: 0px;
    pointer-events:none;
    
}

/* Custom scroll bar */
.basic_box::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.basic_box::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}

.basic_box::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}

.basic_box::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}

.basic_box::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0px;
    /* border-left: 1px solid rgba(0, 0, 0, 0.2); */
    /* border-top: 1px solid rgba(0, 0, 0, 0.2); */
    background-clip: padding-box;
}

.basic_box::-webkit-scrollbar-corner {
    background-color: transparent;
}