Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

195
LINES

< > BotCompany Repo | #1032530 // husain window design css

Document

/*GLOBAL CSS STARTS*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}
/*GLOBAL CSS ENDS*/

.modal {
    display: none;
    opacity: 0;
}
.windowModal {
    display: block;
    opacity: 1;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.windowModal .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
.modal-frame-ui .windowModal.modal .modal-dialog {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}
@media (min-width: 576px) {
  .modal-frame-ui .modal-dialog {
      min-height: calc(100% - 3.5rem);
      display: flex;
      align-items: center;
      max-width: 500px;
      margin: 1.75rem auto;
  }
}
.modal-frame-ui .modal-content {
    border: none;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
    width: 100%;
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 6px;
    outline: 0;
}
.modal-frame-ui .modal-header {
  padding: 15px 20px;
    display: flex;
    align-items: center;
    text-align: left;
    border: none;
    box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.05);
}
.modal-frame-ui .modal-header .modal-title {
  font-size: 22px;
  color: #222;
  font-weight: 600;
    margin: 0;
    margin-left: 25px;
}
.modal-frame-ui .modal-body {
  min-height: 250px;
  color: #b8b8b8;
    text-align: center;
    position: relative;
    padding: 15px;
}
.modal-frame-ui .modal-body .body-title {
    font-size: 24px;
    color: #6F36FF;
    margin-top: 25px;
    font-weight: bold;
}
.modal-frame-ui .modal-body .body-desc {
    margin: 0 0 10px;
}
.modal-frame-ui .modal-btns-right {
    margin-left: auto;
    color: #ccc;
    font-size: 20px;
}
.btn {
    cursor: pointer;
}
.modal-frame-ui .modal-header-btns .btn {
    width: 12px;
    height: 12px;
    background: #111;
    border-radius: 3px;
    opacity: 1;
    margin-left: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    padding: 0;
    border: 1px solid transparent;
    text-shadow: 0 1px 0 #fff;
}
.modal-frame-ui .modal-header-btns .btn:hover,
.modal-frame-ui .modal-header-btns .btn:focus {
    outline: none;
}
.modal-frame-ui .modal-header-btns .btn i {
  color: #00a682;
  margin: 0;
  font-size: 14px;
}
.modal-frame-ui .modal-header-btns .btn.red {
    background: #fc5753;
}
.modal-frame-ui .modal-header-btns .btn.yellow {
    background: #fdbc40;
}
.modal-frame-ui .modal-header-btns .btn.green {
    background: #33c748;
}
.modal-frame-ui .modal-frame-ui .btn-open {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.modal-frame-ui .btn-primary {
  background: #6F36FF;
    border: none;
}
.modal-frame-ui .modal-header .btnGrp{
    position: absolute;
    top: 8px;
    right: 10px;
} 
.modal-frame-ui .minimize{
    width: auto; 
    height: 35px;
    overflow: hidden !important;
    padding: 0px !important;
    margin: 0px;    
    float: left;  
    bottom: 20px !important;
    left: 20px;
    top: auto;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
}
.modal-frame-ui .minimize .modal-dialog, .modal-frame-ui .minimize .modal-content{
    height: 100%;
    width: 100%;
    margin: 0px !important;
    padding: 0px !important; 
}
.modal-frame-ui .minimize .modal-header{
    height: 100%;
    width: 100%;
    margin: 0px !important;
    padding: 3px 5px !important; 
}
.modal-frame-ui .minmaxCon{
  height: 35px;
  bottom: 1px;
  left: 1px;
  position: fixed;
  right: 1px;
  z-index: 9999;
}
@media screen and (max-width: 767px) {
    .windowModal {
        display: flex;
        align-items: center;
    }
}

download  show line numbers   

Travelled to 3 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx

No comments. add comment

Snippet ID: #1032530
Snippet name: husain window design css
Eternal ID of this version: #1032530/2
Text MD5: c56c89dde04690b179a530e1884f6184
Author: stefan
Category: css
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2021-09-18 16:23:23
Source code size: 4328 bytes / 195 lines
Pitched / IR pitched: No / No
Views / Downloads: 104 / 50
Version history: 1 change(s)
Referenced in: [show references]