egroupware/pixelegg/less/layout_table.less
2022-08-29 15:45:46 +02:00

392 lines
8.3 KiB
Plaintext
Executable File

/**
* EGroupware: Stylite Pixelegg template
*
* et2 table
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
* @package pixelegg
* @version $Id$
*/
@import (reference) "definitions.less";
/** #####################################################################################
* et2
* Tabellen
* ######################################################################################
*/
/* TABLE STYLE */
// Header der APP Tabellen
table.et2_grid {
}
// Tabellen
.th {
border-bottom: 1px solid @gray_10;
}
.th.thb {
border-color:darkgray;
td {padding-top:10px;}
}
.innerContainer{
overflow: hidden;
/*padding: 0;*/
}
// Table Head in Listen
.egwGridView_grid > tbody > tr.th > td /*legacy*/
{
font-weight: normal;
padding: 0 2px 2px 0;
background-image: none;
background-position: center;
background-repeat: repeat-x;
vertical-align: top;
}
.egwResizeOverlay{}
// Tabellenkopf
// Spalten mit Border
table.egwGridView_outer{
background-color:transparent;
// max-width: 100%;
border-spacing: 0px;
font-size: 0.9em;
thead {
max-height: 118px;
overflow-y: auto;
background: white;
tr {
th {
background-position: -200px;
font-weight: normal;
padding: 3px 1px 3px 4px;
border: 1px solid @gray_30;
border-top: transparent;
vertical-align: middle;
overflow: auto;
background-color: #f8f8f8;
&:hover {
.background_color_10_gray;
.color_0_gray;
/*border-right: 5px solid white;*/
background-image: url(../../api/templates/default/images/hint-arrow-right.png);
background-position: right bottom;
background-repeat: no-repeat;
background-size: 15px 15px;
.transition (0.0s, ease-out);
/*transition-delay: 1s;*/
}
&:active {
.background_color_15_gray;
.box_shadow_standard_light_inset;
border-bottom: 1px solid silver;
}
div.innerContainer {
max-height: 10em;
overflow-y: auto;
}
}
th.optcol {
padding: 0;
text-align: center;
background-image: none;
border-right: none;
/*width: 32px !important;*/
vertical-align: bottom;
.background_color_10_gray;
&:hover{
cursor: pointer;
}
span.selectcols {
height: 9px;
padding: 4px 14px 0px 2px;
margin-top: 4px;
background-image: url(../../api/templates/default/images/selectcols.svg);
background-repeat: no-repeat;
background-size: 10px 10px;
display: inline-block;
background-position: top;
}
}
}
}
> tbody > tr {
td.frame {
/*border: 1px solid @gray_10; can't have - breaks grid scroll calculations'
/*padding: 0px 5px; no need*/
}
/*Elements inside td*/
> td{
.et2_link {margin-left: 0px; color: @link_color;}
img {border: 1px solid transparent; box-shadow: none;}
time {display: block;}
/* disabled as it skrews display of svg in filemanager
img[src$="svg"] {
.gradient_vertical (fade(@gray_100,50%), fade(@gray_100,50%));
}*/
}
}
}
/*########################################################*/
// Tabelle der APP Ausgabe
table.egwGridView_grid{
// border-collapse:collapse;
font-size: 12px;
.background_color_0_gray;
border-spacing: 0px 1px;
width: 100%;
img{ .dimension_height_s;}
tbody {
border-bottom: 1px solid @lightgray;
/*padding: 2px 3px 2px 4px;*/
margin: 0;
vertical-align: top;
// Listendarstellung
// Reihen ohne Border left und right
/* tr:nth-child(even) {background: @color_even;}
tr:nth-child(odd) {background: @color_odd;}*/
/*multiple choise*/
// Hover State
tr:hover {background: @color_hover_row;}
tr.th:hover {background: transparent;}
tr.selected{
background-image: none;
background-color: @color_selected_row !important;
}
// is active
tr.focused{
}
td {
border-bottom: 1px solid @gray_10;
color: @gray_100;
.innerContainer {
// Needs to be innerContainer to avoid problem width width + height calc
padding: 3px 0 3px 3px;
}
// Custom fields
table.customfields{
tbody{
border-bottom: 0px;
tr{
border-bottom: 0px;
/*background-size: 12px 12px;*/
td{
border-bottom: 0px;
border: 0px;
padding: 0;
/*height: 12px;*/
span{}
// html field
.et2_textbox_ro{
/*white-space: inherit;*/
}
}
}
}
}
}
// right aligned columns need to be padded right, not left
td[align="right"] {
padding: 3px 5px 3px 0;
}
}
> tr {
border-bottom: 1px solid;
border-color: @gray_50;
> td {
border-left: 1px;
border-right: 1px;
padding: 0.3em 0 0.3em 0.3em;
border-bottom: 1px solid;
color: @gray_10;
/*&:hover {background-color: @egw_color_2_e;} legacy*/
&:active {
/*background-color: @egw_color_2_a;*/
.box_shadow_standard_light_inset;
.color_0_gray;
}
span{
color: @gray_70;
}
span[id*="[info_subject]"]{
margin-right: 30px;
}
span.high {color: red;}
span.urgent {color: red; background-color: @color_hover_row;}
span.low {color: @gray_80;}
}
}
/*subentry*/
tr.subentry {
background: fade(@color_selected_row, 20%);
&:hover {background: @color_selected_row !important;}
}
tr.drop-hover {
background: @color_selected_row !important;
}
span.arrow {
-moz-user-select: none;
background-repeat: no-repeat;
background-size: 12px;
background-position: center;
display: inline-block;
height: 8px;
margin-right: 2px;
vertical-align: middle;
width: 8px;
}
span.arrow.opened {
background-image: url("../../api/templates/default/images/arrow_down.svg");
cursor: pointer;
background-position: bottom;
}
span.arrow.closed {
background-image: url("../../api/templates/default/images/arrow_right.svg");
cursor: pointer;
background-position: right;
}
span.arrow.loading {
background-image: url("../egw_action/ajax-loader.gif");
background-position: 0 0;
cursor: pointer;
}
} // table
.nextmatch_header .selectcols {
background: none;
// height: auto;
}
//Reihen
.nextmatch_header tr {
background: none;
}
/*Custom Fields*/
table.customfields{
tbody tr:nth-child(2n) {background: inherit;}
tr {background-color: inherit !important;}
td {
span > div {display: inherit; margin: 0px;}
}
}
/*########################################################*/
// Tabelle der APP Ausgabe
table.nextmatch_header{
img{ .dimension_width_height_s;}
}
.egwGridView_empty {
text-align: center;
border-bottom: 1px solid silver;
font-size: 1.5em;
td{ color: @gray_90 !important;}
}
//
//