@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,400italic|Roboto+Condensed:200,300,400); /** * Dialog Style Sheet * * Copyright (c) 2014. by Way2CU * Author: Mladen Mijatov */ div.dialog-background { display: block; width: 0px; height: 0px; position: fixed; top: 0px; left: 0px; background-color: #303030; z-index: 100000; opacity: 0; transition: opacity 0.3s; } div.dialog-background.visible { width: 100%; height: 100%; opacity: 0.5; } div.dialog { display: block; position: fixed; top: -100%; left: 50%; background-color: white; z-index: 100001; color: #333333; transition: top 0.6s; } div.dialog.visible { top: 0px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); } div.dialog div.title { display: block; padding: 0.5em; padding-left: 0.6em; padding-right: 0.6em; background-color: #3e8df3; color: white; font-size: 1.5em; overflow: hidden; } div.dialog.error div.title { background-color: #df3434; } div.dialog div.command_bar { display: block; padding: 1em; text-align: center; } div.dialog div.command_bar a { display: inline-block; margin-left: 3px; margin-right: 3px; padding: 0.4em; padding-left: 0.6em; padding-right: 0.6em; background-color: #a0a0a0; color: white; font-size: 1.1em; text-decoration: none; transition: all 0.3s; } div.dialog div.command_bar a:hover { background-color: #d0d0d0; } div.dialog div.content { display: block; overflow: hidden; } div.dialog div.content div.scrollbar_thumb { display: none; } div.dialog div.content.scroll div.scrollbar_thumb { display: block; } /** * Contact Form Style Sheet * Caracal Development Framework * * Copyright (c) 2014. by Way2CU, http://way2cu.com * Authors: Mladen Mijatov */ form[data-dynamic='1'] { position: relative; } form[data-dynamic='1'] div.overlay { display: block; width: 100%; height: 100%; visibility: hidden; opacity: 0; position: absolute; left: 0px; top: 0px; background-color: white; background-color: rgba(255, 255, 255, 0.8); background-image: url(../images/loading.gif); background-position: center center; background-repeat: no-repeat; transition: all 0.5s; } form[data-dynamic='1'] div.overlay.visible { visibility: visible; opacity: 1; } /** * LightBox Style Sheet * Gallery Module * * Copyright (c) 2013. by Way2CU * Author: Mladen Mijatov */ div#lightbox-background { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: black; z-index: 100000; } div#lightbox { display: none; position: fixed; z-index: 100001; } div#lightbox div.title_bar { display: block; min-height: 20px; margin-bottom: 5px; text-align: left; } body.rtl div#lightbox div.title_bar { text-align: right; } div#lightbox a.close_button { display: inline-block; width: 20px; height: 20px; float: right; border-radius: 2px; background-color: white; background-image: url(../../collection/images/close_button.svg); background-repeat: no-repeat; background-position: center center; background-size: 60% 60%; color: #333333; text-decoration: none; cursor: pointer; transition: all 0.3s; } body.rtl div#lightbox a.close_button { float: left; } div#lightbox a.close_button:hover { background-color: #999999; } div#lightbox div.title { display: inline-block; width: 0px; padding: 3px; padding-left: 5px; padding-right: 5px; border-radius: 2px; background-color: white; color: #333333; font-weight: bold; } div#lightbox div.content { display: block; position: relative; padding: 5px; margin-bottom: 5px; border-radius: 2px; background-color: white; overflow: hidden; } div#lightbox div.content img { border-radius: 3px; } div#lightbox div.content.loading { background-image: url(../../backend/images/loading.gif); background-repeat: no-repeat; background-position: center center; } div#lightbox div.description { display: block; padding: 5px; border-radius: 2px; background-color: white; color: #555555; font-weight: normal; overflow-y: auto; } div#lightbox a.button { display: block; width: 35px; height: 80px; position: absolute; top: 50%; margin-top: -40px; background-color: white; background-position: center center; background-repeat: no-repeat; cursor: pointer; } div#lightbox a.button.next { right: -35px; border-radius: 0px 5px 5px 0px; background-image: url(../images/next.png); } div#lightbox a.button.previous { left: -35px; border-radius: 5px 0px 0px 5px; background-image: url(../images/previous.png); } /** * Common Style Sheet * * Copyright (c) 2014. by Way2CU * Author: Mladen Mijatov */ body { margin: 0px; padding: 0px; font-size: 100%; font-family: Arial, Helvetica, sans-serif; direction: ltr; /* fix for mobile use of z-index */ z-index: 0; } input, select, textarea, button { margin: 0px; font-size: 1em; font-family: Arial, Helvetica, sans-serif; } a:focus, input:focus, select:focus, textarea:focus, button:focus { outline: none; } body.rtl { direction: rtl; } /** * Page switcher */ div.page_switch { display: block; clear: both; } div.page_switch a { display: inline-block; padding: 3px; padding-left: 7px; padding-right: 7px; margin-left: 2px; margin-right: 2px; color: #606060; text-decoration: none; transition-property: all; transition-duration: 0.3s; } div.page_switch a:hover { color: #000000; } div.page_switch a.active { background-color: white; } div.page_switch span { display: inline-block; padding-left: 7px; padding-right: 7px; margin-left: 5px; margin-right: 5px; border: 1px solid #a0a0a0; border-radius: 5px; background-color: #d0d0d0; } div.page_switch span a:hover { background-color: #f0f0f0; } /** * Scrollbar */ div.scrollbar_thumb { display: block; width: 20px; height: 70px; position: absolute; right: 0px; border-radius: 5px 0px 0px 5px; background-color: #303030; opacity: 0.2; transition-property: opacity; transition-duration: 0.3s; } div.scrollbar_thumb.rtl { right: auto; left: 0px; border-radius: 0px 5px 5px 0px; } div.scrollbar_thumb.active, div.scrollbar_thumb:hover { opacity: 1; } div.scrollbar_thumb.active { transition-property: none; } /** * Tooltips */ [data-tooltip] { position: relative; } [data-tooltip]:after { display: block; width: 70%; opacity: 0; visibility: hidden; position: absolute; left: 15px; top: 100%; margin-top: 42px; padding: 4px; padding-left: 5px; padding-right: 5px; content: attr(data-tooltip); z-index: 10000; border-radius: 3px; background-color: rgba(50, 50, 50, 0.9); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); color: white; transition-delay: 0s; transition-duration: 0.3s; transition-property: all; } body.rtl [data-tooltip]:after { left: auto; right: 15px; } [data-tooltip]:before { display: block; width: 0px; height: 0px; opacity: 0; visibility: hidden; position: absolute; left: 30px; top: 100%; margin-top: 30px; border: 6px solid transparent; border-bottom-color: rgba(50, 50, 50, 0.9); content: ''; font-size: 0px; z-index: 10000; transition-delay: 0s; transition-duration: 0.3s; transition-property: all; } body.rtl [data-tooltip]:before { left: auto; right: 30px; } [data-tooltip]:hover:after { visibility: visible; opacity: 1; margin-top: 12px; transition-delay: 0.5s; } [data-tooltip]:hover:before { visibility: visible; opacity: 1; margin-top: 0px; transition-delay: 0.5s; } /** * Standard elements */ h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1rem; } p { font-size: 1rem; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /** * Video IFrame */ iframe.video { border: 0px; } /** * Main Style Sheet * Sunflower File Manager * * Copyright (c) 2014. by Mladen Mijatov * Authors: Mladen Mijatov */ body { background-color: #f8f8f8; color: #333333; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 14px; } h1, h2, h3, h4, h5 { margin: 0px; padding: 0px; color: #004088; font-weight: 200; font-family: 'Roboto Condensed'; line-height: 100%; } code { display: inline-block; padding-left: 2px; padding-right: 2px; border: 1px solid #CBCBCB; border-radius: 3px; background-color: #FDFDFD; font-size: 0.9em; } pre code { display: block; padding: 5px; font-size: 1em; } /** * Header Style Sheet * Sunflower File Manager * * Copyright (c) 2014. by Mladen Mijatov * Authors: Mladen Mijatov */ header { display: block; position: relative; padding: 10px calc((100vw - 1180px) / 2); border-bottom: 1px solid rgba(255, 255, 255, 0.5); background-color: #17458a; } header a.logo { display: inline-block; padding-left: 85px; font-family: 'Roboto Condensed'; font-size: 1rem; background-image: url(../images/logo.svg); background-repeat: no-repeat; background-position: left center; background-size: 80px 80px; color: white; font-weight: 200; text-decoration: none; } header a.logo span { display: block; font-size: 3.5em; line-height: 100%; } /** * Main menu */ nav#main { display: block; position: absolute; right: calc((100vw - 1180px) / 2); bottom: 5px; } nav#main a { display: inline-block; margin-left: 2px; padding: 7px 12px; border-radius: 3px; color: white; font-size: 1.1em; text-decoration: none; transition: all 0.2s; } nav#main a.active { background-color: #2265ca; } nav#main a:focus, nav#main a:hover { background-color: #2265ca; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4); transform: translateY(-5px); } /** * Language menu */ nav#language { display: block; position: absolute; right: calc((100vw - 1180px) / 2); top: 5px; border: 1px solid transparent; background-image: url(../../modules/backend/images/language_menu.svg); background-position: left 10px; background-repeat: no-repeat; background-size: 16px 16px; z-index: 100; opacity: 0.5; transition: all 0.3s; } body.rtl nav#language { right: auto; left: calc((100vw - 1180px) / 2); } nav#language:hover { border: 1px solid #595959; background-color: #b4b4b4; background-image: none; opacity: 1; } nav#language a { display: block; max-height: 0px; padding: 0px 17px; color: rgba(255, 255, 255, 0); text-decoration: none; transition: 0.3s all; overflow: hidden; text-align: center; } nav#language a:hover { background-color: white; } nav#language:hover a { max-height: 50px; padding: 10px; padding-left: 17px; padding-right: 17px; color: #333333; } nav#language a.active { max-height: 50px; padding: 10px; padding-left: 17px; padding-right: 17px; color: white; } nav#language:hover a.active { color: black; } /** * Content Style Sheet * Sunflower File Manager * * Copyright (c) 2014. by Mladen Mijatov * Authors: Mladen Mijatov */ main { display: block; width: 1200px; margin-left: auto; margin-right: auto; padding-top: 20px; } main section#main { display: inline-block; vertical-align: top; width: 800px; min-height: 600px; } main aside { display: inline-block; vertical-align: top; width: 380px; height: 600px; margin-left: 20px; } /** * Sections */ main section { margin-bottom: 20px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 3px; background-color: white; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); } section#headline { display: inline-block; vertical-align: top; width: 558px; min-height: 300px; margin-right: 20px; } section#video { display: inline-block; vertical-align: top; width: 568px; min-height: 310px; padding: 10px; font-size: 0px; } section#contact_information { display: inline-block; vertical-align: top; width: 558px; min-height: 300px; margin-right: 20px; } section#contact_form { display: inline-block; vertical-align: top; width: 558px; min-height: 300px; } section#platforms { display: inline-block; vertical-align: top; width: 558px; min-height: 600px; margin-right: 20px; } section#platforms small { display: block; margin-top: 10px; opacity: 0.5; } section#news_item { display: inline-block; vertical-align: top; width: 558px; min-height: 300px; margin-right: 20px; position: relative; } section#news_list { display: inline-block; vertical-align: top; width: 558px; min-height: 300px; } /** * Contact form */ form label { display: block; margin-bottom: 10px; } form label input, form label textarea { width: 300px; padding: 7px; padding-left: 10px; padding-right: 10px; border: 1px solid #d0d0d0; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1); color: #606060; font-family: Roboto; transition: 0.3s all; } form label input:focus, form label textarea:focus { outline: none; border-color: #ee8e00; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(238, 142, 0, 1); } form label textarea { resize: none; width: 500px; height: 150px; } form div.controls button { margin-right: 10px; padding: 7px; padding-left: 20px; padding-right: 20px; border: 0px; border-radius: 3px; background-color: #17458a; color: white; font-family: Roboto; transition: 0.2s all; } form div.controls button:hover { background-color: #2265ca; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4); transform: translateY(-5px); } form div.controls button:focus { outline: none; } form div.controls button:active { top: 0px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); transition: 0.0s all; } /** * Call to action */ a.call_to_action, a.call_to_action:visited { display: inline-block; margin-top: 10px; padding: 10px; padding-left: 20px; padding-right: 20px; border-radius: 3px; background-color: green; color: rgba(255, 255, 255, 0.7); text-align: center; text-decoration: none; transition: all 0.3s; } a.call_to_action:focus, a.call_to_action:hover { background-color: #2265ca; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4); transform: translateY(-5px); } a.call_to_action span { display: block; color: white; font-size: 2.5em; line-height: 100%; } a.call_to_action small { display: inline-block; margin-left: 5px; } a.call_to_action small:before { content: '('; } a.call_to_action small:after { content: ')'; } /** * Video container */ div#video_container { display: block; width: 568px; height: 310px; font-size: 0px; } /** * News */ section.news { display: inline-block; vertical-align: top; width: calc((100% - 90px - 6px - 40px) / 3);  /* padding: 90px, border: 6px, margin: 40px */ height: 200px; position: relative; overflow: hidden; } section.news:nth-of-type(2) { margin-left: 20px; margin-right: 20px; } section.news:after { position: absolute; width: 100%; height: 50px; left: 0px; bottom: 0px; content: ''; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 1) 100% ); } section.news h4, section#news_item h1 { position: relative; margin: 0px; margin-bottom: 10px; } section.news h4:after, section#news_item h1:after { content: attr(data-time) '\a' attr(data-date) ; position: absolute; right: 0px; bottom: 0px; color: #333333; opacity: 0.5; font-size: 0.7rem; font-family: 'Roboto'; line-height: 100%; white-space: pre; text-align: right; } section.news p { margin: 0px; padding-top: 10px; font-size: 0.9rem; } section.news > a { position: absolute; right: 15px; bottom: 15px; padding: 5px 0px 0px 5px; background-color: white; box-shadow: 0px 0px 10px 5px white; z-index: 1; } section#news_list table { width: 100%; margin: 0px; margin-top: 1em; padding: 0px; padding-bottom: 3px; border-spacing: 0px; border-bottom: 1px solid #2265ca; border-bottom: 1px solid rgba(34, 101, 202, 0.3); } section#news_list table th { padding: 3px 5px; text-align: left; border-bottom: 1px solid #2265ca; border-bottom: 1px solid rgba(34, 101, 202, 0.3); } section#news_list table tr.active { background-color: #f0f0f0; } section#news_list table tr.active td:first-of-type:before { display: inline-block; width: 0px; height: 0px; content: ''; border: 5px solid transparent; border-left-color: #2265ca; } section#news_list table td { padding: 3px 5px; } section#news_list table a { text-decoration: none; } /** * Gallery */ div.gallery a.screenshot { display: inline-block; vertical-align: top; width: 100px; margin-right: 10px; margin-top: 10px; padding: 10px; padding-top: 90px; border: 1px solid #e0e0e0; border-radius: 2px; background-position: center 10px; background-repeat: no-repeat; color: #909090; font-size: 0.8em; font-family: Roboto Condensed; text-align: center; text-decoration: none; transition: 0.3s all; } div.gallery a.screenshot:hover { border-color: #ee8e00; box-shadow: 0px 0px 3px rgba(238, 142, 0, 1); } /** * Light box */ div#lightbox div.title_bar div.title { padding: 0px; color: white; background-color: transparent; font-weight: normal; font-family: Roboto Condensed; } div#lightbox div.content { border-radius: 5px; background-color: #2265ca; } div#lightbox div.content.loading { background-image: url(../images/loading.gif); } div#lightbox a.button.previous { background-image: url(../../modules/gallery/images/previous.png), linear-gradient(90deg, white 0%, white 70%, #2265ca 100%); } div#lightbox a.button.next { background-image: url(../../modules/gallery/images/next.png), linear-gradient(270deg, white 0%, white 70%, #2265ca 100%); } /** * General elements. */ a { color: #2265ca; } a:visited { color: #17458a; } a:hover { text-decoration: none; } /** * Platforms */ a.platform { display: inline-block; width: calc((558px - 10px) / 6); vertical-align: top; padding: 10px; padding-top: 110px; border-radius: 3px; background-position: center 20px; background-repeat: no-repeat; background-size: auto 80px; text-align: center; text-decoration: none; transition: all 0.3s; } a.platform:hover { background-color: #2265ca; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4); color: white; transform: translateY(-5px); } a.platform.debian { background-image: url(../images/platform/debian.svg); } a.platform.ubuntu { background-image: url(../images/platform/ubuntu.svg); } a.platform.mint { background-image: url(../images/platform/mint.svg); } a.platform.elementary { background-image: url(../images/platform/elementary.svg); } a.platform.redhat { background-image: url(../images/platform/redhat.svg); } a.platform.centos { background-image: url(../images/platform/centos.svg); } a.platform.fedora { background-image: url(../images/platform/fedora.svg); } a.platform.mageia { background-image: url(../images/platform/mageia.svg); } a.platform.mandriva { background-image: url(../images/platform/mandriva.svg); } a.platform.opensuse { background-image: url(../images/platform/opensuse.svg); } a.platform.pclinuxos { background-image: url(../images/platform/pclinuxos.svg); } a.platform.gentoo { background-image: url(../images/platform/gentoo.svg); } a.platform.arch { background-image: url(../images/platform/arch.svg); } a.platform.tar { background-image: url(../images/platform/archive.png); } /** * Features */ section#features ul { display: block; margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; } section#features ul li { display: inline-block; width: calc(25% - 10px); vertical-align: top; margin-right: 10px; margin-top: 20px; margin-bottom: 20px; text-align: center; } section#features ul li h3 { margin-bottom: 5px; padding-top: 120px; position: relative; } section#features ul li h3:before { width: 100px; height: 100px; content: ''; position: absolute; left: 50%; top: 10px; margin-left: -50px; background-position: left top; background-size: 100px auto; background-repeat: no-repeat; } section#features ul li:nth-child(1) h3:before { background-image: url(../images/features/customizable.svg); } section#features ul li:nth-child(2) h3:before { background-image: url(../images/features/tabbed-interface.svg); } section#features ul li:nth-child(3) h3:before { background-image: url(../images/features/sessions.svg); } section#features ul li:nth-child(4) h3:before { background-image: url(../images/features/emblems.svg); } section#features ul li:nth-child(5) h3:before { background-image: url(../images/features/built-in-terminal.svg); } section#features ul li:nth-child(6) h3:before { background-image: url(../images/features/multithreading.svg); } section#features ul li:nth-child(7) h3:before { background-image: url(../images/features/python-and-gtk.svg); } section#features ul li:nth-child(8) h3:before { background-image: url(../images/features/keyboard-oriented.svg); } /** * List of all versions. */ section#versions { display: inline-block; vertical-align: top; width: 558px; min-height: 600px; } section#versions table { width: 100%; margin: 0px; margin-top: 1em; padding: 0px; padding-bottom: 3px; border-spacing: 0px; border-bottom: 1px solid #2265ca; border-bottom: 1px solid rgba(34, 101, 202, 0.3); } section#versions table th { padding: 3px 5px; text-align: left; border-bottom: 1px solid #2265ca; border-bottom: 1px solid rgba(34, 101, 202, 0.3); } section#versions table tr.active { background-color: #f0f0f0; } section#versions table tr.active td:first-of-type:before { display: inline-block; width: 0px; height: 0px; content: ''; border: 5px solid transparent; border-left-color: #2265ca; } section#versions table td { padding: 3px 5px; } section#versions table a { text-decoration: none; } /** * Footer Style Sheet * Sunflower File Manager * * Copyright (c) 2014. by Way2CU, http://way2cu.com * Authors: Mladen Mijatov */ footer { display: block; width: 1200px; position: relative; margin-left: auto; margin-right: auto; padding-bottom: 50px; text-align: right; } footer div.social { display: inline-block; vertical-align: top; margin-right: 10px; } footer div.social a { display: inline-block; width: 30px; height: 30px; margin-right: 5px; opacity: 0.7; transition: 0.3s all; } footer div.social a:hover { opacity: 1; } footer div.social a.liberapay { width: 83px; } footer div.social a.google_plus svg { fill: #dd4b39; } footer div.social a.twitter svg { fill: #55acee; } footer div.copyright { display: inline-block; vertical-align: top; color: #b0b0b0; font-size: 0.8em; font-family: Roboto Condensed; } footer pre { position: absolute; left: 0px; top: 0px; margin: 0px; padding: 0px; color: #b0b0b0; font-size: 0.8em; text-align: left; }