File: resources/assets/css/en/main.css

/* Developed by Hero Expert
- Telegram channel: @HeroExpert_ir
- Author: Amirreza Ebrahimi
- Telegram Author: @a_m_b_r
*/
*{ font-family:'Going to School',sans-serif;}body{ overflow:hidden; margin:0; padding:0;}main{ background:url("../../img/backGround.webp"); background-size:cover; height:100vh; font-family:"Avenir",sans-serif; overflow:hidden; position:relative;}input:focus{ outline:none !important;}.tooltip-inner{ font-size:13.5px; max-width:400px;}.user-panel{ position:absolute; z-index:1000; top:2rem; left:2rem;}.user-panel-btn{ padding:1rem 2rem; background-color:#4e0de5; border:#2f0889; border-radius:.5rem; text-decoration:none; color:#fff; font-size:1.2vw; transition:all 200ms ease-in-out;}.user-panel-btn:hover{ background-color:#460cce;}.bg-opacity{ position:absolute; content:''; top:0; left:0; width:100vw; height:100vh; background-color:rgba(0,0,0,.5);}#header-div{ width:60%; margin:auto; padding-top:100px; text-align:center; font-family:"Josefin Sans",sans-serif; color:#e9c46a; font-size:3vw; position:relative; z-index:2;}#content-div{ display:flex; flex-direction:column; justify-content:center; align-items:center; width:80%; margin:0 auto; position:relative; z-index:2;}#input-div{ width:80%; margin-bottom:25px; display:flex; flex-direction:row; justify-content:space-between;}.buttons{ display:flex; justify-content:space-between; align-items:center;}#output-div{ display:flex; flex-direction:row; width:80%; justify-content:space-between; background-color:#e9c46a; margin:auto; border:3px solid #e9c46a; border-radius:10px; align-items:center; margin-bottom:100px;}#error-div{ width:80%; margin:auto; color:#e76f51; font-style:italic; font-size:1.2vw; text-align:center;}.content-row{ display:flex;}input[type=url]{ width:70%; font-size:1.2vw; padding:15px; border:1px solid white; border-radius:10px; text-align:center !important;}.shortenURL{ font-size:1vw;}.button{ background-color:#4e0de5; color:white; align-items:center; justify-content:center; font-size:1.2vw; border:1px solid #2f0889; border-radius:10px; padding:15px; margin-left:15px; display:flex; transition-duration:0.2s; cursor:pointer;}.button:hover{ background-color:#460cce;}#new-url{ display:flex; color:black; font-size:1.5vw;}#new-url>a{ color:#3b3b3b; text-decoration:none;}#new-url-label{ font-size:1.2vw; display:flex; padding-left:15px;}.copy-icon{ display:none;} /* --- finished style first ---|--- start login and verify and edit URL page styles --- */ .bg-blur{ position:absolute; content:''; top:0; left:0; width:100vw; height:100vh; background-color:rgba(0,0,0,.5); backdrop-filter:blur(10px);}.email-div,.verify-div,.editDest-div{ display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; z-index:2; height:100vh; width:100vw; overflow:hidden;}.disabled{ pointer-events:none; color:#706984 !important;}.cursorDefult{ cursor:default;}.email-val-div,.verify-val-div,.edit-val-div{ position:relative;}.email-valid-icon,.verify-valid-icon,.edit-valid-icon{ color:red; position:absolute; right:.6rem; top:calc(50% - 1.7rem); font-size:1.3rem;}.email-validation-text,.verify-validation-text,.edit-validation-text{ position:absolute; background-color:red; color:#FFF; padding:.5rem; margin:.4rem 0 0 0; font-size:.8vw; border-radius:.5rem; top:60%; left:1rem; z-index:10;}.email-validation-span,.verify-validation-span,.edit-validation-span{ position:absolute; background-color:red; transform:rotate(45deg); top:65%; left:10%; height:10px; width:10px; border-radius:.2rem; z-index:4;}.verify-validation-span-Url{ position:absolute; background-color:red; transform:rotate(45deg); top:23.75%; left:11.75%; height:10px; width:10px; border-radius:.2rem; z-index:4;}.verify-validation-text-Url{ position:absolute; background-color:red; color:#FFF; padding:.5rem; margin:.4rem 0 0 0; font-size:.8vw; border-radius:.5rem; top:23%; z-index:10;}.verify-valid-icon-Url{ color:red; position:absolute; right:33%; top:0.75rem; font-size:1.7rem;}.email-red-validation,.verify-red-validation{ border-color:red !important; outline:red !important;}.email-header,.verify-header,.editDest-header{ color:#e9c46a; margin:0 0 3rem 0; font-size:3vw;}.email-form,.verify-form,.editDest-form{ width:30vw;}.email-input,.verify-input,.editDest-input{ text-align:center !important; padding:0.85rem 1rem; margin-bottom:2rem; border-radius:.5rem; font-size:1.2vw; width:calc(100% - 2rem);}.email-submit-btn,.verify-submit-btn,.editDest-submit-btn{ width:100%; padding:0.85rem 3rem; font-size:1.2vw; background-color:#4e0de5; border:1px solid #2f0889; color:#fff; border-radius:.5rem; cursor:pointer; transition:all 200ms ease-in-out;}.email-submit-btn:hover,.verify-submit-btn:hover,.editDest-submit-btn:hover{ background-color:#460cce;} /* --- finish login and verify page styles ---|--- start panel styles --- */ .panel-container{  background-size:cover; height:100vh; font-family:"Avenir",sans-serif; overflow:hidden; position:relative;}.header{ position:relative; z-index:10; width:100%; padding:0 0 0; display:flex; border-bottom:1px solid #fff; background-color:#170445;}.right-header{ width:85%; display:flex; align-items:center; border-left:1px solid #fff;}.left-header{ width:15%;}.right-header__list{ display:flex;}.right-header__list-item{ margin:0; padding:1rem 1.5rem; border-left:1px solid #fff; color:#fff; text-decoration:none;}.right-header__brand{ width:100%;}.right-header__brand-title{ margin:0; text-align:center; color:#fff; font-size:2.2vw;}.left-header__profile-div{ display:flex; align-items:center; padding:.5rem 1rem;}.left-header__user-email{ color:#fff; margin-left:.5rem; text-decoration:none; font-size:1vw; cursor:default !important;}.left-header__icons{ margin:0; padding:.5rem .75rem; color:#fff; border-radius:100%; background-color:#ccc;}.burger-menu{ display:none;}.burger-menu__btn{ border:none; outline:none; background-color:inherit; color:#fff;}.burger-menu__div{ display:flex; align-items:center; justify-content:center;}.close-menu__btn{ position:absolute; right:1.2rem; top:1rem; font-size:1.2rem; color:#fff; border:none; outline:none; background-color:inherit; z-index:20;}.main{ display:flex;}.right-main{ margin-top:8vh; position:relative; z-index:10; width:85%; display:flex; flex-direction:column; align-items:center;}.left-main,.left-main-dropdown{ position:relative; z-index:10; width:15%; background-color:#170445; border-right:1px solid #fff; padding:1rem 0;}.left-main__list-title{ display:flex; justify-content:space-between; align-items:center; margin-right:1rem;}.left-main__list-item,.left-main-dropdown__list-item{ text-decoration:none; color:#ccc; display:flex; align-items:center; margin:1rem; font-size:1vw; text-wrap:nowrap;}.left-main__list-text,.left-main-dropdown__list-text{ margin:0 .5rem; font-size:1vw;}.left-main__list-dropdown-icon{ font-size:1vw; color:#fff;}.left-main__list-title .left-main__list-item{ margin-bottom:0 !important;}.left-main__list-item-dropdown{ padding:0 .75rem;}.stats-table{ width:80%; overflow:hidden; border-collapse:collapse; margin-bottom:2rem; border-radius:1rem;}.stats-table__head-row{ background-color:#3709a0; border-radius:1rem; overflow:hidden;}.stats-table__head{ border-radius:1rem;}.stats-table__head-col{ padding:.75rem .5rem; color:#ccc; font-size:1vw; text-align:center !important; overflow:hidden;}.stats-table__head-col:first-child{ border-radius:1rem 0 0 0;}.stats-table__head-col:last-child{ border-radius:0 1rem 0 0;}.stats-table__body{ overflow:hidden;}.stats-table__body-row{ border-radius:0 0 1rem 1rem; overflow:hidden; transition:all 300ms ease-in-out;}.stats-table__body-col{ padding:.75rem .5rem; color:#fff;  border-bottom:1px solid #ccc; overflow:hidden; text-align:center; font-size:1vw;}.stats-table__body-row:nth-child(2n){ background-color:#717171;}.stats-table__body-row:hover{ background-color:#555555;}.stats-table__body-row:last-child .stats-table__body-col:first-child{ border-radius:0 0 0 1rem !important;}.stats-table__body-row:last-child .stats-table__body-col:last-child{ border-radius:0 0 1rem !important;}.stats-table__body-row:last-child .stats-table__body-col{ border-bottom:none !important;}.stats-table__body-icons{ text-decoration:none; color:#fff; border:none; background-color:inherit; outline:none; font-size:1vw;}.QR-code-span{ text-decoration:none; font-size:1vw;}.QR-code-icon{ color:#000; padding:.5rem 1rem; background-color:#ccc; border-radius:.5rem; cursor:pointer; transition:all 300ms ease-in;}.QR-code-icon:hover{ background-color:#a5a5a5;}.stats-table-edit-icon{ padding:.5rem 1rem; background-color:#e3e336; border-radius:.5rem; cursor:pointer; transition:all 300ms ease-in;}.stats-table-edit-icon:hover{ background-color:#fefe16;}.stats-table-copy-icon{ padding:.5rem 1rem; background-color:#8356ed; border-radius:.5rem; cursor:pointer; transition:all 300ms ease-in;}.stats-table-copy-icon:hover{ background-color:#4e0de5;}.stats-table-delete-icon{ padding:.5rem 1rem; background-color:red; border-radius:.5rem; cursor:pointer; transition:all 300ms ease-in;}.stats-table-delete-icon:hover{ background-color:#c10000;}.user-panel__pagination-link{ border:5px solid #6025ed; border-radius:100%; text-decoration:none; color:#fff; padding:.5rem 1rem; margin:0 .2rem; text-align:center;}.user-panel__pagination-link-active{ background-color:#6025ed;}.popover{ background-color:rgba(0,0,0,.8); border:1px solid rgba(0,0,0,.8);}.popover .popover-arrow{ display:none;}.popover-body{ color:#ccc; font-size:.8vw; padding:.75rem;} /* --- finish panel styles ---|--- start QR code styles --- */ .qr-container { display: flex;align-items: center;justify-content: center;height: 100vh;width: 100vw;position: relative;z-index: 100;} /* ------------------------ finished QR code styles ----------------------------- */ .ml-1{ margin-left:.5rem;}.mr-1{ margin-right:.5rem;}.d-none{ display:none !important;}.d-block{ display:block !important;}.z-index-19{ z-index:19 !important;}.position-absolute{ position:absolute !important;}.position-relative{ position:relative !important;}.position-sticky{ position:sticky !important;}.pointer{ cursor:pointer;}