/* ============================================================ styles.css — CloudoneDr1ve demo template ------------------------------------------------------------ These rules reproduce the ORIGINAL template's exact look: • A full-page background IMAGE (a blurred document) over a white background colour. • A BLACK card (.holder) with a large black SHADOW and 30px rounded corners, holding white text. • bootstrap-social coloured buttons. Written MOBILE-FIRST: base rules target small screens, the media query enhances larger screens. Bootstrap 4 (CDN, see index.html) supplies the grid, buttons and modal. ============================================================ */ /* ---- 1. Page background ----------------------------------- The original body had background-color:#fff (white) PLUS a full-page background image scaled to cover. The class "bg-gradient-primary" on has no rule of its own, so the white + image is what actually shows. */ body { margin: 0; /* remove the browser's default margin */ min-height: 100vh; /* fill the whole screen height */ width: 100%; /* full width */ background-color: #fff; /* white base colour (shows white "first layer") */ background-image: url("../images/bg.png"); /* blurred document image */ background-size: cover; /* scale the image to cover the page */ background-position: center; /* keep it centred */ background-repeat: no-repeat; /* do not tile the image */ /* Same system font stack the original/Bootstrap used. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* The grid row just centres the card. We DON'T rely on Bootstrap's column widths for sizing — instead .holder controls its own width below, which behaves smoothly on every screen size. */ .row { margin: 0; /* cancel Bootstrap's negative row margins */ padding: 1rem 0.75rem; /* small gap around the card */ width: 100%; /* span the full viewport width */ display: flex; /* use flexbox to centre the card */ justify-content: center; /* horizontal centring on all screens */ } /* ---- 2. The card (.holder) -------------------------------- A BLACK rounded card with a heavy black shadow, floating over the light background image. The black fill (from the original's bg-primary override) keeps the white text readable. MOBILE-FIRST sizing: by default the card fills the available width (good for phones). Each breakpoint below caps its width so it looks right on tablet, laptop and desktop too. */ .holder { background-color: #000; /* black card (original look) */ width: 100%; /* full width on phones */ max-width: 100%; /* phone default; capped per breakpoint below */ padding: 20px 18px; /* comfortable padding on small phones */ margin-top: 20px; /* space above the card */ margin-bottom: 20px; /* space below the card */ border-radius: 24px; /* rounded corners (a touch smaller on phones) */ box-shadow: 1px 10px 50px #000000; /* large soft black shadow */ text-align: center; /* centre logo, text and buttons */ box-sizing: border-box; /* include padding in the width calc */ } /* Paragraph text inside the card is white (readable on the black card). */ .holder p { color: #fff; } /* ---- 3. Logos --------------------------------------------- */ /* Main logo at the top of the card. MOBILE-FIRST: small by default, it grows at larger breakpoints (see section 7). Using a % width keeps it proportional to the card on every device. */ .mainlogo { width: 70%; /* scales with the card width */ max-width: 200px; /* phone cap; raised at larger breakpoints */ height: auto; /* keep aspect ratio */ display: block; /* lets the auto margins centre it */ margin: 0 auto 40px auto; /* centre horizontally, space below */ } /* Smaller logo shown inside the modal. */ .exampleModalLogo { max-height: 100px; /* original modal-logo size cap */ max-width: 300px; margin-bottom: 0.5rem; /* space below it */ } /* ============================================================ 4. bootstrap-social button colours ------------------------------------------------------------ Only the colour classes the template actually uses, copied so the buttons keep their EXACT original colours. (MIT licensed — Panayiotis Lipiridis.) ============================================================ */ /* Shared layout: full-width button with an icon column on the left. NOTE: the original bootstrap-social used white-space:nowrap + overflow:hidden + text-overflow:ellipsis, which on a narrow phone card clipped the label to "L...". We keep the icon column but let the label show in full (and wrap if truly needed) so it stays readable on every screen size. */ .btn-social { position: relative; /* lets us absolutely place the icon */ padding-left: 50px; /* leave room for the icon on the left */ text-align: left; /* label reads from the left */ white-space: normal; /* allow the label to use full width / wrap */ overflow: visible; /* never clip the label */ } /* The icon box pinned to the left edge of each social button. */ .btn-social > :first-child { position: absolute; /* pin to the button's left side */ left: 0; top: 0; bottom: 0; width: 32px; /* fixed icon column */ line-height: 34px; /* vertically centre the glyph */ font-size: 1.6em; /* icon size */ text-align: center; /* centre the glyph */ border-right: 1px solid rgba(0, 0, 0, 0.2); /* subtle divider */ } /* Office365 — Odnoklassniki orange. */ .btn-odnoklassniki { color: #fff; background-color: #ed812b; border-color: rgba(0,0,0,0.2); } .btn-odnoklassniki:hover { color: #fff; background-color: #d76b15; } /* Outlook — Microsoft blue. */ .btn-microsoft { color: #fff; background-color: #2672ec; border-color: rgba(0,0,0,0.2); } .btn-microsoft:hover { color: #fff; background-color: #125acd; } /* Aol — GitHub black. */ .btn-github { color: #fff; background-color: #444444; border-color: rgba(0,0,0,0.2); } .btn-github:hover { color: #fff; background-color: #2b2b2b; } /* Yahoo — Yahoo purple. */ .btn-yahoo { color: #fff; background-color: #720e9e; border-color: rgba(0,0,0,0.2); } .btn-yahoo:hover { color: #fff; background-color: #500a6f; } /* Other — OpenID orange. */ .btn-openid { color: #fff; background-color: #f7931e; border-color: rgba(0,0,0,0.2); } .btn-openid:hover { color: #fff; background-color: #da7d06; } /* ---- 5. Modal details (from the original) ----------------- */ /* MOBILE-FIRST: narrow padding on phones so the form fits; the original's wide 30px/80px padding is restored on larger screens in the breakpoints section below. */ .modal-body { padding: 24px 20px; } /* Form inputs were centred; their help text was black. */ .form-group input { text-align: center !important; } .form-group p { color: #000; } /* Loader box inside the modal (hidden until "submit"; see js/app.js). */ #loader_box { text-align: center; /* centre the spinner and message */ margin: 20px 40px; /* original spacing */ } /* ============================================================ 7. RESPONSIVE BREAKPOINTS (mobile-first) ------------------------------------------------------------ The base rules above target the smallest phones. Each media query below is a "min-width" step, so styles ADD UP as the screen gets bigger. This covers every device class: • ~576px : large phones (landscape) / small tablets • ~768px : tablets (portrait) • ~992px : laptops / tablets (landscape) • ~1200px: desktops / large screens ============================================================ */ /* ---- Large phones & small tablets (≥ 576px) --------------- */ @media (min-width: 576px) { .holder { max-width: 480px; /* stop the card stretching too wide */ padding: 24px 36px; /* a bit more inner spacing */ border-radius: 28px;/* slightly rounder corners */ } .mainlogo { max-width: 240px; /* a little larger logo */ } } /* ---- Tablets, portrait (≥ 768px) -------------------------- */ @media (min-width: 768px) { .holder { max-width: 520px; /* comfortable tablet width */ padding: 28px 48px; /* roomier padding */ border-radius: 30px;/* full original corner rounding */ } .mainlogo { max-width: 280px; /* near full-size logo */ } .modal-body { padding: 30px 80px; /* original wide modal padding restored */ } } /* ---- Laptops & landscape tablets (≥ 992px) ---------------- */ @media (min-width: 992px) { .holder { max-width: 460px; /* a focused card centred on a wide screen */ padding: 30px 60px; /* generous padding (close to the original) */ } .mainlogo { max-width: 300px; /* original full size */ } } /* ---- Desktops & large screens (≥ 1200px) ------------------ */ @media (min-width: 1200px) { .holder { max-width: 480px; /* keep the card a sensible size on big monitors */ padding: 30px 70px; /* widest padding, matching the original feel */ } }