External CSS stylesheet

Making a global CSS stylesheet for the entire application 
      
      .c {
      	text-align:center;
        margin:0 auto;
      }
              .button { 
	position: relative;
	border-radius: 2px;
	color: gray;
	font-weight: 600;
	letter-spacing: 1px;
	font-size: 14px;
	background-image: -webkit-radial-gradient(circle,orange,yellow);
	padding-bottom: 3px;
	padding-top: 3px;
	padding-left: 6px;
	padding-right: 6px;
	border:none;
	width: 120px;
	height: 40px;
	max-width: 120px;
	max-height: 40px;
	margin: 5px;
	display: inline-block;
}

.button-lg {
	font-size: 18px;
    width: 140px;
	height: 50px;
	max-width: 140px;
	max-height: 50px;
}

.button-md {
	font-size: 15px;
	width: 120px;
	height: 40px;
	max-width: 120px;
	max-height: 40px;
}

.button-sm {
	font-size: 12px;
	width: 80px;
	height: 30px;
	max-width: 80px;
	max-height: 30px;
}

.button:hover {
	background-image: -webkit-radial-gradient(circle,yellow,red);
	width: 120px;
	height: 40px;
	max-width: 120px;
	max-height: 40px;
	cursor: pointer;

}

.button:active {
	background-image: -webkit-radial-gradient(circle,darkgreen,lightgreen);
	color: orange;
	width: 120px;
	height: 40px;
	max-width: 120px;
	max-height: 40px
	font-size: 13px;
	cursor: pointer;
}

.text {
	font-family: Verdana;
}

.text-selected {
	background-color: green;
	color: orange;
}

.img1:hover {
	transform: scale(2);
	cursor: pointer;
}


textarea {
	resize: none
}

input[type=text], input[type=email], input[type=password], input[type=number] {
	border-radius: 2px;
	border-width: 2px;
	border-color: blue;
	color:gray;
	padding-left:3px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left:4px;
	margin-right: 4px;
	width: 190px;
	height: 30px;
    max-width: 190px;
    max-height: 30px;
    outline:none;
}

.invalid-input {
	border-radius:0 !important;
	border-width:4px !important;
	border-color:red !important;
	box-shadow: 2px 3px 2px 3px orange;
}

fieldset input {
	border:none;
}

legend {
    
}
fieldset {
border-radius : 4px;
border-color: blue;
border-width: 2px;
}

body {
margin: 0;
padding: 0;
border: none;
}

.bg-o {
	background-color: orange;
}

.bg-y {
	background-color: yellow;
}

.bg-r {
	background-color: red;
}

input[type=checkbox] {
	box-shadow: 2px 4px 4px 2px rgba(0,0,255,0.9);
	color: gray;
	background-color: orange ;
}

input[type=radio] {
    border-radius: 50%;
    border-width:4px;
    border-color:orange;
	color: gray;
}

input[type=checkbox]:checked, input[type=radio]:checked {
	background-color:red;
	transition: background-color  2s;
}

.box-shadow-sm {
	box-shadow: 1px 3px 3px 1px rgba(0,0,255,0.9);
}

.box-shadow-md {
	box-shadow: 1px 4px 6px 4px rgba(0,0,255,0.9);
}

.box-shadow-lg {
	box-shadow: 1px 5px 10px 10px rgba(0,0,255,0.9);
}

.text-shadow-sm {
	text-shadow: 1px 2px rgba(255,0,0,0.9);
}

.text-shadow-md {
	text-shadow: 1px 4px rgba(255,0,0,0.9);
}

.text-shadow-lg {
	text-shadow: 1px 5px rgba(255,0,0,0.9);
}

.b-sm {
	font-weight: 600;
}

.b-md {
	font-weight: 700;
}

.b-lg {
	font-weight: 900;
}

.u-sm {
    
	text-decoration: underline;
}

.u-md {
	border-bottom: 3px solid black;
}

.u-lg {
	border-bottom: 5px solid black;
}

code {
	background-color: lightgray;
	color: red;
	font-size:large;
}

.m-sm {
	margin: 4px;
}

.m-md {
	margin: 6px;
}

.m-lg {
	margin: 8px;
}

.p-sm {
	padding: 4px;
}

.p-md {
	padding: 8px;
}

.p-lg {
	padding: 10px;
}

.brdr-sm {
	border: 2px solid black;
}

.brdr-md {
	border: 3px solid black;
}

.brdr-lg {
	border: 4px solid black;
}

.thumbnail-img {
	border: 5px solid yellow;
	width: 50px;
	height: 50px;
	max-width: 50px;
	max-height: 50px;
	opacity: 0.9;
	display:inline-block;
	float: left;
}

.thumbnail-img:hover, .thumbnail-img:active {
	width: 60px;
	height: 60px;
	transition: width 2s height 2s;
}

.container {
	display: block;
	position: relative;
	border: 1px solid gray;
	border-radius: 2px;
	margin: 2px;
	padding: 2px;
}

.menu-bar {
	color: black
	font-weight: 400;
	background-image: -webkit-linear-gradient(red,yellow);
	margin: 0 auto;
	text-align: center;
	padding-top:10px;
	padding-bottom: 10px;
}

.menu-bar .menu-item {
	list-style-type: none;
display:inline;
margin-right:10px;
  color:blue
}
      
.menu-bar .menu-item a {
	color:blue
}

.menu-bar > .menu-item > a {
text-decoration:none ;
}

.menu-bar > .menu-item > a:hover {
    text-decoration: underline;
  	cursor:pointer;
}

.menu-bar > .menu-item > a.active_menu {
 font-weight: 600;
 color:white;
}

@keyframes slideshow {
0% { opacity : 0 }
10% { opacity : 0.1 }
20% { opacity : 0.2 }
30% { opacity : 0.3 }
40% { opacity : 0.4 }
50% { opacity : 0.5 }
60% { opacity : 0.6 }
70% { opacity : 0.7 }
80% { opacity : 0.8 }
90% { opacity : 0.9 }
100% { opacity : 1 }
}


.carousel  #slideshow img.active_slide {
	animation-name:slideshow;
	animation-duration: 4s;	
	animation-iteration-count:infinite;
	width:100px;
	height:100px;
	position:absolute;
	left:0;
	display: block;
}

.carousel  #slideshow img.inactive_slide {
	display: none;
}

.menu-item.active a {
color: red;

}

.hide {
 	display: none;
}

.show {
	display: block;
}

option.dropdown-list-item {
    width:120px;
  min-width:120px;
    height:40px;
  min-height:40px;
    color:orange;
  	display:block;
    background-color:green;
  margin-right:5px;
    
}

.dropdown-list-item.active {
	display: block;
}

.dropdown {
    text-decoration:none;
	background-image: -webkit-linear-gradient(lightblue,darkblue);
	color: white;
	font-weight: 500;
	display:block;
	left:200px;
	width:140px;
	height:40px;
	position:relative;
    cursor: pointer;
}

.modal-close:visited .modal-container{
	display:none
}

.site-map {
padding: 5px;
background-color: black;
color:white;
}

.table {
	display: table;
	border: 1px solid black;
}

.table-custom tbody tr:nth-child(odd) {
	background-image:-webkit-linear-gradient(orange,green);
}
      
      
.table-custom  tbody tr:nth-child(even) {
	background-image:-webkit-linear-gradient(green,blue);
}

.table-custom  thead tr:first-child {
 	background-image: -webkit-linear-gradient(lightgray,darkgray);
}
      
.table-bordered {
	border-collapse: collapse;
}

.site-map .table:nth-child(1) {
display: table;
background-color: red;
}

.site-map .table:nth-child(2) {
display: table;
background-color: green;
}

.site-map .table:nth-child(3) {
display: table;
background-color: blue;
}

.site-map .table tr {
	border: 0;
}

.site-map .table tr td {
 	border: 0;
}

.site-map .table tr th {
	border: 0;
}

.site-map .table tr a {
	color: white;
}

.search-bar {
	color: white;
	width: 120px;
	height: 50px;
	border: 0;
	font-size: 14px;
	border-bottom : 1px solid white;
}

.search-bar.active_search {
	width:70%;
  min-width:70%;
  transition:width 2s;
	border-bottom : 1px solid green;
  outline:none;
}

.search-bar.active_search + .icon, .search-bar + .icon {
  right:0+
  float:right;
  position:relative;
  width:20px;
  height:20px;
  max-width:20px;
  max-height:20px;
}
      
.side-bar {
  display:none;
  background-color: yellow;
  width: 100px;
  height:100%;
  position:fixed;
}

.side-bar.active {
   display:block;
	transition: display fade 2s;
}
      


.modal {
	display: none;
  opacity:1;
  z-index:10;
}

.modal-footer {
  background-color:red;
  color:white;
  height:60px;
  text-align:center;
}

.modal-close {
	float: right;
	top: 0;
}


.modal-header {
	background-color: yellow;
	color: white;
  height:60px;
  text-align:center;
}
 

.modal-body {
	font-size: large;
    width:auto;
    height:200px;
    min-width:auto;
    min-height:200px;
  	text-align:justify;
  padding:5px;
}

@keyframes toast1 {  
  from { display : none; }
  to { display : inline; }	
}
      
.toast {
   display:none 
}
      
.toast.active_toast {
	position: fixed; 
	bottom: 10px;
	background-color: black;
  display:block;
	color: white;
  	border-radius: 2px;
  	padding: 3px;
  	z-index: 2;
    animation-name: toast1;
  animation-duration:1s;
  animation-timing-function: ease-in;
  animation-iteration-count:1;
}

.breadcrumb {
	display: inline;
	margin-right: 20px;
}

.breadcrumb li {
	list-style-type: none;
	float: left;
  	margin-right:4px;
}

.breadcrumb li::after {
	content:  " \\ ";
}

.breadcrumb li a {
	text-decoration:none;
}

.breadcrumb li a:hover {
	text-decoration: underline;
  cursor:pointer;
}

.test-div {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
}

#modal {
  	border:2px solid yellow;
	border-radius:2px;  
}

.close-icon {
  display:none;
}
    
.table-custom tr td, .table-custom tr th {
	padding:10px;   
  color:white;
}
      
.footer1 {
	background-image: -webkit-linear-gradient(lightblue, darkblue);
	position: relative;
	bottom: 0;
	width: 100%;
  	text-align:center;
  	color:white;
}
      
ul.sidebar {
	display: none
}
      
ul.open-sidebar {
 display:block;
  transition: display 3s;
}
      
.sidebar-ul li:nth-child(even) {
	background-image:-webkit-linear-gradient(orange,yellow);
}
      
.sidebar-ul li:nth-child(odd) {
      background-image:-webkit-linear-gradient(green,blue);
}


            
.sidebar-ul li, ul.open-sidebar li, ul.sidebar li {
  list-style-type: none;
  color:white;
  margin-right: -10px;
  padding-top:10px;
  padding-left:10px;
  padding-bottom:10px;
  max-width:150px;
  width:150px;
  background:white;
  z-index:99
}

Comments

Post a Comment

Popular posts from this blog

XPath for HTML markup

XPath Web Scraping Web Scraping is a technique to traverse the DOM (Document Object Model) of an HTML or an HTTP web page Web Scraping is achieved due to XPath XPath nodes: There are seven kinds of nodes Element - It represents any HTML 5 element. For example, <strong></strong> Attribute - It represents any one attribute of any HTML 5 element in the document object model Text - It represents the text between the opening HTML 5 tag and a closing HTML 5 tag Namespace - It represents the pseudo selector of an HTML 5 element Processing-Instructions Comment - It represents any HTML 5 comment It represents the topmost element of the tree is called the root element. For example, the root element for any HTNL 5 document is HTML The first XPath node is \ which Suppose, I have an HTML5 code snippet as follows: Gaurav Shirodkar Then to ...
Read more

Apache Hadoop | Running MapReduce Jobs

Image
Apache Hadoop | Running MapReduce Jobs After setting up your environment and running the HDFS and YARN daemons, we can start working on running MapReduce jobs on our local machine. We need to compile our code, produce a JAR file, move our inputs, and run a MapReduce job on Hadoop. Step 1 - Configure extra environment variables As a preface, it is best to setup some extra environment variables to make running jobs from the CLI quicker and easier. You can name these environment variables anything you want, but we will name them HADOOP_CP and HDFS_LOC to not potentially conlict with other environment variables. Open the Start Menu and type in 'environment' and press enter. A new window with System Properties should open up. Click the Environment Variables button near the bottom right. HADOOP_CP environment variable This is used to compile your Java files. The backticks (eg. `some command here`) do not work on Win...
Read more

Laravel | PHP | Basics | Part 2

Image
Learning Laravel through Screenshots Caching Laravel by default supports multiple cache stores like memcached , redis ,etc. To install redis as a cache store, you should use composer install predis/predis predis stands for PHP redis The default port number is 6379 Every Cache store requires a prefix which is stored in the ENV file or in the config/cache.php Following are the cache stores supported by laravel Blade Templates Blade is a templating engine for views in laravel. All the files which are of type blade.php are having the extension .blade.php They are stored in the resources/views directory YOu can create suub-folders in the reosurces/views directory like layouts for all the common UI components lke header , footer, sidebar , navbar, menubar, serach bar, etc. To include the parenet ...
Read more